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();

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();

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();

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 };
    }),

    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 };
    }),

    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 };
    }),

    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 appreciated

How to refresh tokens in a Next.js client component?

Similar Threads

Similar Threads

Similar Threads