How to best handle JWT expired without a page refresh?

[calebsmithdev]

trafficstars

I've ran into several situations now where a JWT will expire and will only refresh when I reload the page. I am using useSupabaseAuthClient for signing in, then using useSupabaseClient for making additional calls. The useSupabaseUser is still able to use the user object, but the useSupabaseClient is where the JWT expired issue is occurring.

Should I be using useSupabaseAuthClient instead for making database calls that have a user policy in place?

[KeoneSomers]

I have also been experiancing this issue and am stuggling to find a solution. I have auto refresh tokens enabled and when the initial token expires my requests to superbase just stop working with the error JWT Expired. I've also been console logging inside the onAuthStateChanged function and i can see the it's saying its refreshing the token.

[ahku]

Is this a Nuxt Supabase module issue or an issue with Supabase auth client itself?

[cpauwels]

I'm also facing the same issue. I've temporarily solved it as follows, but it's far from ideal:

const supabase = useSupabaseClient()
supabase.auth.onAuthStateChange(async (event, session) => {
  if (event === 'TOKEN_REFRESHED') {
    location.reload()
  }
})

[phillipmohr]

Has anyone found a solution for this?

[AlbertBrand]

I've also seen this issue. It seems the following flow happens:

Serverside

• The plugin registers an supabaseClient.auth.onAuthStateChange callback and calls await supabaseClient.auth.getSession
• Session contains an expired refresh token, auto refresh triggers and fetches a new token. However, await getSession does not block until the token is fetched, need to wait for the onAuthStateChange for that.
• useSupabaseClient is then called to get data, but only fetches public data
• Page is rendered, sent to the client. An onAuthStateChange fires on the server with a TOKEN_REFRESHED event but is too late.

Clientside

• Same steps as serverside, again rendering does not block and public data is fetched.
• You can see an XHR on the client with a refreshed token.
• If you use useSupabaseUser then the user data is refreshed correctly after the token refresh.

A solution would be to really await the session to be in a valid state (it's possible to listen to an INITIAL_SESSION). But this needs some investigation.

I haven't tried out disabling auto refresh. That might 'solve' it but requires more user interaction.

A more Nuxt-ish workaround for now is this:

const supabase = useSupabaseClient()
supabase.auth.onAuthStateChange((event) => {
  if (event === "TOKEN_REFRESHED") {
    reloadNuxtApp();
  }
});