Auth Refresh tokens not propagating throughout app.

[KeoneSomers]

Version

@nuxtjs/supabase: v0.3.0
nuxt: v3.0.0

Steps to reproduce

1. Create a new Nuxt 3 project
2. Install the Supabase module
3. Change the auth session expiry limit on Supabase GUI to be 60 seconds (so you don't have to wait an hour each time)
4. Disable automatic reuse detection too in order to simplify the demo
5. Implement a basic login
6. Add a page for authenticated users that contains a button to call to Supabase db
7. Display the json response in the Dom
8. Add a onAuthStateChanged function to a top level component or page and console log the event and session
9. Run the app.

What is Expected?

The json response of the Supabase request should be displayed on the webpage each time you press the button.
After 60 seconds the onAuthStateChanged function will trigger and show us our new request token.

What is actually happening?

The json reponse is being displayed, then after pressing the button and waiting 60 seconds the request to supabase returns {"code":"PGRST301","details":null,"hint":null,"message":"JWT expired"}.
After some debugging I can see that the request is still using the original auth header and not the one generated using the refresh token. I believe this could be an issue with the Supabase client not being recreated correctly with the newly generated token.
I have also notice that the newly created token is being stored in a cookie each time as expected but the client does not seem to notice the change.
Refreshing the webpage fixes the issue and the requests to Supabase work again for another 60 seconds.

[KeoneSomers]

Related: #127

[Wafje]

I am able to replicate, I see the same behavior in my project.

Using useSupabaseClient or useSupabaseAuthClient to make the requests does not seem to make a difference.

[optinforce]

I came here to open an issue for this exact same problem.

When the token gets refreshed, all requests to the supabase client still use the old token.

It can be fixed by removing the authorization header in useSupabaseClient.ts:

supabase/src/runtime/composables/useSupabaseAuthClient.ts

Line 14 in 034d7df

const options = Authorization ? defu(clientOptions, { global: { headers: { Authorization } } }) : clientOptions

The underlying supabase-js client maintains this header on its own and uses the one from refreshed sessions correctly.

[JavascriptMick]

supabase/src/runtime/composables/useSupabaseAuthClient.ts

@optinforce I don't follow your solution. I have tried catching this error and refreshing the session....

    ({data: { user }, error} = await supabase.auth.getUser());
    if(error){
      if(error.name === 'AuthApiError' && error.message.includes('expired')){
        error = null;
        supabase.auth.refreshSession();
        ({data: { user }, error} = await supabase.auth.getUser());
        .... etc

....but this does not work. Can I go into this options object and remove the Authorization header somehow?

[JavascriptMick]

FWIW, I have resolved this in my setup by:-

1. upgrading plugin.... "@nuxtjs/supabase": "^0.3.1"
2. Changing from this...

supabase = serverSupabaseClient(event)
({data: { user }} = await supabase.auth.getUser());

to this...

(user = await serverSupabaseUser(event));