Kinde•3mo ago

Issue with getKindeServerSession().refreshTokens(); in Next.js App Router

I am currently integrating Kinde with a Next.js application using the App Router. In my application, when a user logs in and successfully completes a payment transaction, I would like to set new properties for the user as paid user. However, I am encountering an issue when attempting to refresh the ID token using the method getKindeServerSession().refreshTokens();. It seems I am unable to fetch a new ID token after updating the user's properties. Could you please provide guidance on how to resolve this issue or recommend an alternative approach for refreshing the ID token in this context? Thank you!

22 Replies

onderay•3mo ago

@Abel Trần sorry that you are seeing this issue. What version of the Next.js SDK are you using? When you say you are unable to fetch a new ID token, are you getting an error or is the token coming back un updated?

Abel TrầnOP•3mo ago

@Andre @ Kinde FYI, I am using:

"next": "14.2.4",  
"@kinde-oss/kinde-auth-nextjs": "^2.3.8"

I don't see any error when I use await getKindeServerSession().refreshTokens();, but the token does not change.

onderay•3mo ago

Thanks for the details. Able to update to v2.3.10?

Abel TrầnOP•3mo ago

When I update to v2.3.10, await getKindeServerSession().refreshTokens(); takes a long time to refresh, but the ID Token does not update.

onderay•3mo ago

Ok, thanks, I have passed this along to the team

Abel TrầnOP•3mo ago

Thank you! Please let me know if there's any further information or assistance I can provide to help with the investigation.

leo_kinde•3mo ago

Hi @Abel Trần , just to confirm, these are user properties added to the id token through token customization, then updated via API? Let me look into whether we should automatically invalid the cache in this case, in the mean time you can try making a call via the Management API to refresh the claims first using this API method: https://kinde.com/api/docs/#refresh-user-claims-and-invalidate-cache

Abel TrầnOP•3mo ago

I updated the user properties via API. After that, I tried calling the refresh token and even refreshing the user claims, but the token hasn't changed.

Abel TrầnOP•3mo ago

Here is the my sample code

leo_kinde•3mo ago

Hi @Abel Trần , It looks like the cache should be updated automatically, so you shouldn't need to call the refresh_claims endpoint. After updating the properties via API, you can then call refreshTokens() to get the updated tokens. Here is the code I used:

    const { getUser, refreshTokens } = getKindeServerSession();

    const userBefore = await getUser();
    console.log("user properties before", userBefore.properties);

    init();
    const res = await Users.updateUserProperty({
      propertyKey: "userprop",
      userId: userBefore.id,
      value: "new value",
    });
    console.log("update response", res);

    const newTokens = await refreshTokens();
    console.log("updated tokens", newTokens);

    const userAfter = await getUser();
    console.log("user properties after", userAfter.properties);

    const { getUser, refreshTokens } = getKindeServerSession();

    const userBefore = await getUser();
    console.log("user properties before", userBefore.properties);

    init();
    const res = await Users.updateUserProperty({
      propertyKey: "userprop",
      userId: userBefore.id,
      value: "new value",
    });
    console.log("update response", res);

    const newTokens = await refreshTokens();
    console.log("updated tokens", newTokens);

    const userAfter = await getUser();
    console.log("user properties after", userAfter.properties);

Abel TrầnOP•3mo ago

@leo_kinde I tried refreshTokens() but my token does not change. What can I do next?

Abel TrầnOP•3mo ago

@Andre @ Kinde @leo_kinde Can you help me check this again? I successfully updated the value, but I cannot refresh to get the new values or token. If I log out and log in again, I will receive the new value / token.

leo_kinde•3mo ago

@Abel Trần , the null response from refreshTokens() looks like there might be some error happening as it should return the new tokens. Can you set the environment variable KINDE_DEBUG_MODE to true and run it again and have a look to see if there are any errors logged?

Abel TrầnOP•3mo ago

The refresh token is null when I use it in the middleware. However, when I use the server action, I can see the token, but it’s still the old one. I manually try to update test_kinde_prop in Kinde, but it seems undefined.

Oli - Kinde•3mo ago

Hey @Abel Trần, Apologies for not getting back to you sooner. We are still looking into this issue. I update you, more regularly, as we progress in fixing this issue.

Abel TrầnOP•3mo ago

I updated to v2.3.11. It works well when I update properties via the API, but if I update them directly on the Kinde Dashboard, the data does not refresh.

Oli - Kinde•3mo ago

Hey @Abel Trần, This does not sound like the expected behaviour. I have let my team know this too. Please continue to let us know of any other issues/findings you come across.

Abel TrầnOP•3mo ago

Yes, I will

Peteswah•3mo ago

Hey Abel what is the behaviour you're expecting on your app when data is updated on the Kinde dashboard? I will try and recreate the server action experience you are having today

'use client';

import {useKindeBrowserClient} from '@kinde-oss/kinde-auth-nextjs';
import {updateUserName} from '../../actions/kinde';

export const PersonData = () => {
  const {user} = useKindeBrowserClient();
  const handleSubmit = async (formData: FormData) => {
    const givenName = formData.get('givenName') as string;
    await updateUserName({userId: user.id, userName: givenName});
    // window.location.reload(); (if using browser client)
  };
  return (
    <div>
      <form action={handleSubmit}>
        <label htmlFor="orgName">Organization Name:</label>
        <input
          type="text"
          id="givenName"
          name="givenName"
          defaultValue={user?.given_name}
        />
        <button type="submit">Update user first name</button>
      </form>
      <pre>{JSON.stringify(user, null, 2)}</pre>;
    </div>
  );
};

'use client';

import {useKindeBrowserClient} from '@kinde-oss/kinde-auth-nextjs';
import {updateUserName} from '../../actions/kinde';

export const PersonData = () => {
  const {user} = useKindeBrowserClient();
  const handleSubmit = async (formData: FormData) => {
    const givenName = formData.get('givenName') as string;
    await updateUserName({userId: user.id, userName: givenName});
    // window.location.reload(); (if using browser client)
  };
  return (
    <div>
      <form action={handleSubmit}>
        <label htmlFor="orgName">Organization Name:</label>
        <input
          type="text"
          id="givenName"
          name="givenName"
          defaultValue={user?.given_name}
        />
        <button type="submit">Update user first name</button>
      </form>
      <pre>{JSON.stringify(user, null, 2)}</pre>;
    </div>
  );
};

export const updateUserName = async (props: {
  userId: string;
  userName: string;
}) => {
  init();
  await Users.updateUser({
    id: props.userId,
    requestBody: {
      given_name: props.userName
    }
  });

  await getKindeServerSession().refreshTokens();
  revalidatePath('/dashboard', 'page');
};

export const updateUserName = async (props: {
  userId: string;
  userName: string;
}) => {
  init();
  await Users.updateUser({
    id: props.userId,
    requestBody: {
      given_name: props.userName
    }
  });

  await getKindeServerSession().refreshTokens();
  revalidatePath('/dashboard', 'page');
};

^ this is how to use refreshtoken in the server action to get the user to update with the API To see the updated user data, it will work automatically if you grab them from getKindeServerSession, but will need to force a reload (window.location.reload) for browserclient

Animine•3w ago

I have the exact same issuse. I update the user with the kinde API, and refresh the token right after with nextjs SDK. But still seeing old values. It both for when adding / removeing roles / permission.

Oli - Kinde•3w ago

Hey @Animine, Do you still get the same issue after reviewing Peter's comments above ^

Animine•3w ago

I havent tried the exact same thing. I will do that now, and let you know here.

Gaming

Programming

Issue with getKindeServerSession().refreshTokens(); in Next.js App Router