How to refresh tokens in a Next.js client component?
Hi there, I've been trying to work out a solution to an issue with my auth flow for a while and thought I had it but having more issues.
I'm using tRPC in a Next.js full stack app and have updated my user's permissions via the Kinde API. Now I'm trying to get those updated permissions to take effect in my app, without logging out and logging in again. They're definitely working in the Kinde UI.
The component I want to see them updated in is a client component.
I've tried making calls to my tRPC API methods, which then contain a call to refreshTokens() from getKindeServerSession(). NB - all other methods from getKindeServerSession() work fine in my tRPC files. However, no matter what, the permissions aren't returning correctly.
Here's a snippet from my auth-callback function where I initially update the org & permissions:
await fetch("https://kettleon.kinde.com/api/v1/organizations/${newOrgCode}/users",
{
method: 'POST',
body: JSON.stringify(userInputBody),
headers: headers
})
.then(function (res) {
return res.json();
});
organisation = newOrgCode
}
const { refreshTokens } = getKindeServerSession();
await refreshTokens();
And here's a specific refresh function I tried as well:
refreshUser: privateProcedure.query(async ({ ctx, input }) => {
const { refreshTokens } = getKindeServerSession()
const tokens = (await refreshTokens()) as { accessToken: string, refreshToken: string };
console.log(tokens)
const{ getPermissions } = getKindeServerSession()
const permissions = (await getPermissions()) as KindePermissions | null;
console.log(permissions) // returns {permissions: [], orgCode: null}
return { data: permissions?.permissions, status: 200, success: true };
}),
Neither seems to work 😦 any help very much appreciated13 Replies
I've tried asking KindeAI here: https://discord.com/channels/1070212618549219328/1242517735389532331
it looks like everything is set up correctly? And to clarify I am receiving a success response from my tRPC call, the only problem is the response from getPermissions which is still null for both permissions and orgCode. I tried splitting it into two different tRPC calls and still got nothing so I think the problem lies with refreshTokens().
(I'm not sure if I'm breaking some rules by asking too many questions on here? I'm really sorry if so)
Hi @Sophia,
Thanks for reaching out.
Have you had a read of our Kinde x tRPC blog post?: https://kinde.com/blog/engineering/kinde-trpc-nextjs/
Kinde Blog
Kinde x tRPC x Next.js
Integrating Kinde auth with tRPC combines Kinde's streamlined authentication with tRPC's type-safe APIs, enhancing security and developer efficiency. This synergy simplifies secure user management and boosts productivity by reducing errors in web application development, making it an ideal solution for creating scalable and maintainable applicat...
(I'm not sure if I'm breaking some rules by asking too many questions on here? I'm really sorry if so)Definitely arent breaking any rules... the more questions the merrier!
Ooh no I hadn't seen that, thank you @Oli - Kinde ! Having read it now, I think my tRPC setup is a little different to the structure of the example here, but so far I haven't had any issues with Kinde auth functioning in my app, this seems to be the first instance where any SDK methods aren't working as they should. For example, where I call getUser() from getKindeServerSession() in one of my tRPC API methods, the user data returns correctly. And the interactions I've set up with the Kinde API also work fine. refreshTokens() seems to be the only thing not working, as getPermissions() is returning the right sort of object but with the values as null, so it seems like there's just something I've misunderstood about the token management system maybe?
Hey @Sophia,
Sorry for the delayed response.
So it sounds like only refreshTokens() isnt working as expected.
What SDK are you using? NextJS SDK?
Sorry @Oli - Kinde I completely missed this response! Yep I'm using the NextJS SDK. If it helps, the repository link is here: https://github.com/phianova/KettleOn/tree/81-kinde-bug-and-responsiveness and the relevant branch is 81-kinde-bug-and-responsiveness
GitHub
GitHub - phianova/KettleOn at 81-kinde-bug-and-responsiveness
Next.js full-stack & TypeScript team-building platform for remote or hybrid workers - GitHub - phianova/KettleOn at 81-kinde-bug-and-responsiveness
Hey @Sophia,
I will get a member of my team to help you out.
CC: @Peteswah
One way to double check if refreshTokens is work would be to inspect the cookies after refreshTokens is called. Then if you have a look at the id_token or access_token and decode it here https://kinde.com/tools/online-jwt-decoder/ you should be able to see if your tokens now contain the up-to-date Kinde data.
If it does have the data, then I think it could be trpc caching that may need to get invalidated (not 100% sure since I haven't used it before, but that would be my guess).
If the data is not being updated in cookies I will have a deeper look into this! @Sophia
Kinde
Online JWT decoder
Leverage this tool to ensure that your JWT has the specific metadata and claims you anticipate or to analyze JWTs generated by a 3rd party.
Thank you @peteswah @Peter (Kinde) I've just tried this and the access_token and id_token don't seem to contain the updated data after refreshTokens() has been called, sorry!
Happy to provide as much information as might be needed or even jump on a call if it's helpful, I'm not the most experienced with any of the technologies I'm using so it's very possible I've done something stupid, I'm just struggling to work out what it could be at this point as it does seem to just be this one function that's not behaving as expected
Hey @Sophia,
Sorry for the delayed response. I will reach out to @Peter (Kinde) to get an update for you.
Hey @Oli - Kinde @Peter (Kinde) just checking in to see if you had any further thoughts?
Hey @Sophia,
I'll reach out to Peter tomorrow to get an update on this issue.
Hey Sophia, there was a bug with refreshTokens that we've fixed up now.
So if you call refreshTokens from a route handler or server action you should be good. If its from a page then it wont work!