Kinde•2mo ago

getIdToken error

Hi! I'm liking Kinde so far but I'm facing an issue implementing it in our NextJS application. Calling getIdToken on the user session always returns null. If I enable debug then I get the following error trace logged:

TypeError: fe(...).getSessionItem is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]_react-do_ypeastlutiedb47skrcpxtnhoq/node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/index.js:910:128)
    ...

TypeError: fe(...).getSessionItem is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]_react-do_ypeastlutiedb47skrcpxtnhoq/node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/index.js:910:128)
    ...

Is this a bug? Am I doing something wrong? Thanks in advance!

15 Replies

IkiTg07•2mo ago

Hey, which version of the sdk are you using ? Could you please share a snippet of the code you're using ?

agrOP•2mo ago

Sure - I had the same problem with the latest version 2.4.3 and the version in the NextJS starter kit which is 2.3.10 I am simply doing

const session = await getKindeServerSession();
const rawIdToken = await session.getRawIdToken();
const idToken = await session.getIdToken();

const session = await getKindeServerSession();
const rawIdToken = await session.getRawIdToken();
const idToken = await session.getIdToken();

In this example, rawIdToken has a value but idToken is null

IkiTg07•2mo ago

This is odd. Maybe something going off with cache. Have you tried login out and back in ? In my end getIdtoken works

agrOP•2mo ago

Yep - also tried on private browser I get this using the nextjs app router starter kit out of the box and just adding the getIdToken call into the dashboard page as follows:

import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";

export default async function Dashboard() {
  const session = getKindeServerSession();
  const accessToken = await session.getAccessToken();
  const rawIdToken = await session.getIdTokenRaw();
  const idToken = await session.getIdToken();
  return (
    <div className="container">
      <div className="card start-hero">
        <p className="text-body-2 start-hero-intro">Woohoo!</p>
        <p className="text-display-2">
          Your authentication is all sorted.
          <br />
          Build the important stuff.
        </p>
        <p>Access Token</p>
        <pre>
          {JSON.stringify(accessToken, null, 2)}
        </pre>
        <p>Raw ID Token</p>
        <pre>
          {rawIdToken}
        </pre>
        <p>ID Token</p>
        <pre>
          {JSON.stringify(idToken, null, 2)}
        </pre>
      </div>
      <section className="next-steps-section">
        <h2 className="text-heading-1">Next steps for you</h2>
      </section>
    </div>
  );
}

import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";

export default async function Dashboard() {
  const session = getKindeServerSession();
  const accessToken = await session.getAccessToken();
  const rawIdToken = await session.getIdTokenRaw();
  const idToken = await session.getIdToken();
  return (
    <div className="container">
      <div className="card start-hero">
        <p className="text-body-2 start-hero-intro">Woohoo!</p>
        <p className="text-display-2">
          Your authentication is all sorted.
          <br />
          Build the important stuff.
        </p>
        <p>Access Token</p>
        <pre>
          {JSON.stringify(accessToken, null, 2)}
        </pre>
        <p>Raw ID Token</p>
        <pre>
          {rawIdToken}
        </pre>
        <p>ID Token</p>
        <pre>
          {JSON.stringify(idToken, null, 2)}
        </pre>
      </div>
      <section className="next-steps-section">
        <h2 className="text-heading-1">Next steps for you</h2>
      </section>
    </div>
  );
}

agrOP•2mo ago

Output is the following:

IkiTg07•2mo ago

When you open the application tab of the dev console does the token exists in there ?

agrOP•2mo ago

Yes there is an encoded id_token cookie Which is the same as what is returned by getRawIdToken But decoding the token does not seem to work

Daniel_Kinde•2mo ago

Hi @agr , Could you please try @kinde-oss/[email protected], This is a pre-release of the next version which may resolve your problem. Let me know how you get on

agrOP•2mo ago

@Daniel_Kinde still no luck I'm afraid Tried upgrading to 2.4.5-0 and also adding wrapping the app in the KindeProvider which I realised was missing before (though shouldn't make any difference as this is a server-rendered page) but getIdToken is still returning null 😦

Daniel_Kinde•2mo ago

Could you please navigate to /api/auth/health and let me know the output?

agrOP•2mo ago

Sure

{
  "apiPath": "/api/auth",
  "redirectURL": "http://localhost:3000/api/auth/kinde_callback",
  "postLoginRedirectURL": "http://localhost:3000",
  "issuerURL": "https://frontline100.kinde.com",
  "clientID": "20e0842cffa94b87aa74c98f88ad312f",
  "clientSecret": "Set correctly",
  "postLogoutRedirectURL": "http://localhost:3000",
  "audience": "",
  "logoutRedirectURL": "http://localhost:3000"
}

{
  "apiPath": "/api/auth",
  "redirectURL": "http://localhost:3000/api/auth/kinde_callback",
  "postLoginRedirectURL": "http://localhost:3000",
  "issuerURL": "https://frontline100.kinde.com",
  "clientID": "20e0842cffa94b87aa74c98f88ad312f",
  "clientSecret": "Set correctly",
  "postLogoutRedirectURL": "http://localhost:3000",
  "audience": "",
  "logoutRedirectURL": "http://localhost:3000"
}

@Daniel_Kinde any thoughts on this?

Peteswah•2mo ago

Thanks for raising this, I'll see if I can recreate it - this seems like a bug

Daniel_Kinde•2mo ago

@agr A fix has been released, please update to 2.4.5

agrOP•2mo ago

Thanks, that works now!

Daniel_Kinde•2mo ago

Great thanks for letting me know

Gaming

Programming

getIdToken error