Kinde•14mo ago

getToken from useKindeBrowserClient

Would it be possible for getToken from useKindeBrowserClient to asynchronously respond with token (ideally when isLoading is false)? I need to pass access_token in Authorization header - currently I'm working this around just grabbing access_token from cookies, but this is not ideal. My case is close to:

const useApiInstance = () => {
  const { getToken } = useKindeBrowserClient();

  return async () => {
    const token = await getToken(); // <- I would love to do this
    const response = await axios.get("/something", { headers: { Authorization: "Bearer token" }});
    return response
  }
}

const useApiInstance = () => {
  const { getToken } = useKindeBrowserClient();

  return async () => {
    const token = await getToken(); // <- I would love to do this
    const response = await axios.get("/something", { headers: { Authorization: "Bearer token" }});
    return response
  }
}

Later I use this like:

const fetcher = useApiInstance();

const fetcher = useApiInstance();

In above example code is executed before kinde is loaded (isLoaded: false), and getToken just returns null Would be nice if getToken returned promise that would at least wait for stuff to load. Similarly how it is build with useKindeAuth in @kinde-oss/kinde-auth-react (I haven't tried it myself, but getToken returns a promise.)

14 Replies

Oli - Kinde•14mo ago

Hey @kbk, Let me ask my team on the best way to solve your use-case. Before I ask my team, are you able to let me know what Kinde SDK you are using? And what version of the Kinde SDK you are using?

kbkOP•14mo ago

latest version of kinde-auth-nextjs

Oli - Kinde•14mo ago

Hey @kbk, Yesterday we updated the nextJS SDK to v2.0.9: https://www.npmjs.com/package/@kinde-oss/kinde-auth-nextjs This version fixed a lot of issues. Can you please confirm you are using this version of the nextJS SDK?

npm

@kinde-oss/kinde-auth-nextjs

Kinde Auth SDK for NextJS. Latest version: 2.0.9, last published: a day ago. Start using @kinde-oss/kinde-auth-nextjs in your project by running npm i @kinde-oss/kinde-auth-nextjs. There are no other projects in the npm registry using @kinde-oss/kinde-auth-nextjs.

kbkOP•14mo ago

yes, I use this now, but it doesn't seem like there were changes towards KindeState

kbkOP•14mo ago

where we can find those code changes tho? I don't see latest 2.0.9 in here https://github.com/kinde-oss/kinde-auth-nextjs

GitHub

GitHub - kinde-oss/kinde-auth-nextjs: Kinde NextJS SDK - authentica...

Kinde NextJS SDK - authentication for server rendered apps - GitHub - kinde-oss/kinde-auth-nextjs: Kinde NextJS SDK - authentication for server rendered apps

Oli - Kinde•14mo ago

Let me pass this issue onto my nextJS expert teammate and get back to you.

Peteswah•14mo ago

Hey @kbk there isn't a way to do that with useKindeBrowserClient unfortunately, but it can be achieved using getKindeSeverSession getKindeServerSession has to be used in a server component or route handler. One solution could be to grab the token in a server component and pass it through to the child client component where you are defining useApiInstance

kbkOP•14mo ago

Yeah, I think I played with that solution, altho just grabbing access_token from cookies is easier. but, isn't keeping tokens (id, access and refresh) in JS accessible cookies a XSS vulnerability?

Oli - Kinde•14mo ago

Hey @kbk , Yes there will more or less be XSS concerns with frontend sessions. CSP (Content Security Policy) can help a lot though.

kbkOP•14mo ago

should I take any preventive measures myself of is it something kinde handles?

Oli - Kinde•14mo ago

Hi @kbk , My team mate who is an expert on this area is off today but they should be back tomorrow, so I can get back to you tomorrow on this.

Oli - Kinde•14mo ago

Hey @kbk, So we have CSP set on pages we host to prevent CSP, so like login and register pages. We recommend you set CSP for your app, but what exactly you set will depend on your app, so it is hard to give specific advice. But generally with CSP you would disable inline scripts and whitelist external scripts. I couldn’t find a nice walkthrough article about it, but these are good references; https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP https://web.dev/articles/csp

MDN Web Docs

Content Security Policy (CSP) - HTTP | MDN

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft, to site defacement, to malware distribution.

web.dev

Content security policy | Articles | web.dev

Content Security Policy can significantly reduce the risk and impact of cross-site scripting attacks in modern browsers.

Tigerr•6mo ago

Hi @Oli - Kinde what do you mean there will "more or less" be a security vuln? I think I may have misunderstood but are you saying getToken from useKindeBrowserClient is susceptible to XSS attacks?

Oli - Kinde•6mo ago

Hi @Tigerr, Apologies if the messages above confused you. Basically we have a CSP (Content Security Policy) that mitigates attacks. You can read more about it here: https://docs.kinde.com/get-started/learn-about-kinde/kinde-product-security/#preventing-third-party-script-injections-with-xss-and-csp

Kinde docs

Kinde product security information

Our developer tools provide everything you need to get started with Kinde.

Gaming

Programming

getToken from useKindeBrowserClient