refreshSession doesn't update access token and claims

[cbix]

Describe the bug
According to the README, await refreshSession() should result in the session information getting updated if user information like permissions or role changes.

This doesn't seem to work within a single request. My use case is allowing the user to select their preferred language (among other info) and storing this in their metadata object. The nextjs route is invalidated and gets the user info using withAuth and getTokenClaims, however these seem to not use a fresh access token with the updated metadata.

To Reproduce
Make sure the JWT template maps the metadata accordingly, e.g.

{
  "user-key": {
    "locale": {{user.metadata.locale}},
  }
}

Execute the following server action:

export const updateUserProfile = async () => {
  const { user } = await withAuth({ ensureSignedIn: true });
  let claims = await getTokenClaims();
  console.log('token clamis before update', claims);
  await getWorkOS().userManagement.updateUser({
    userId: user.id,
    metadata: { locale: 'de' },
  });
  const refreshResult = await refreshSession();
  console.log('refresh result', refreshResult);
  claims = await getTokenClaims();
  console.log('token claims after update', claims);
};

The tokens before and after the update + refreshSession are identical. Only decoding the access token from refreshResult actually yields the updated information, however I can't access this in a server component as I would do withAuth.

Expected behavior
The logs should print

token claims after update
{
  "user-key": { "locale": "de" }
}

Actual output

token claims before update
{
  "user-key": { "locale": null }
}

token claims after update
{
  "user-key": { "locale": null }
}

[nicknisi]

@cbix Hey! The issue here is that refreshSession() updates the cookie, but withAuth() and getTokenClaims() read from a header that was set by middleware at the start of the request. They won't see the update until the next request.

The quick workaround is to use the data that refreshSession() already returns:

export const updateUserProfile = async () => {
  const { user } = await withAuth({ ensureSignedIn: true });
  let claims = await getTokenClaims();
  console.log('token clamis before update', claims);
  await getWorkOS().userManagement.updateUser({
    userId: user.id,
    metadata: { locale: 'de' },
  });
  const refreshResult = await refreshSession();
  console.log('refresh result', refreshResult);
- claims = await getTokenClaims();
+ claims = await getTokenClaims(refreshResult.accessToken);
  console.log('token claims after update', claims);
};

This should unblock you. We're going to look into whether we can improve the API here to make this more intuitive, but the underlying limitation is tricky due to how Next.js handles cookies/headers within a single request.

[cbix]

Thanks @nicknisi, for my minimal example it would indeed work to use the refresh result, however for my actual use case I'm rendering a server component in the same request and refreshSession throws an error when called from a server component, so it needs to use withAuth.

I'll later try to move the whole refreshing to a client component and make getting updated data more explicit.

The NextJS limitations are something I ran into as well several times, there's really no way to maintain a proper request context...