createClient() doesn't remember previous login?

[kopi-cloud]

Got a very simple email based signup / login flow working, but refreshing the page loses the login.

I can see that SB is caching details in local storage under key supabase.auth.token but createClient() doesn’t seem to read those details back in to the client object.

Example app is here: https://rabbit-cabbage.netlify.app

If you signup (don't need a real email address), you'll be logged in and the /user/ page is just dumping out the result of calling auth.user(). When you refresh the page, it's just null. But you can see that the login details are saved in the local storage.

How do I tell the SB client to use the credentials from local storage so that the user doesn’t have to re-enter login details after hitting refresh?

[kiwicopple]

Hey @kopi-cloud, did you see we have a react example here: https://github.com/supabase/supabase/blob/master/examples/react-todo-list/README.md

This one persists over page refreshes (or at least it did last time I built it). Does your app use a similar setup?

[kopi-cloud]

Ok,

My problem seemed to be something to do with trying to encapsulate the SupabaseClient in a React Context, as in: https://github.com/kopi-cloud/cabbage/blob/b3e30618a90df07f91dc2433a49e4bc34673acf6/app/src/Api/SupabaseProvider.tsx

I hadn't discovered the nextjs-with-supabase-auth example code yet - I was just following along with the online project tutorial and sticking the SubabaseClient inside a context seemed like the (to me) obvious thing to do.

It seems to be working for me if I follow the pattern from nextjs-with-supabase-auth example. That is, just make the SupabaseClient a global variable and manage the user/session objects from a simple use hook updating from the `onAuthStateChange() event.

It's weird that it doesn't work as a context though - but maybe I'm doing something wrong on the React side of things.

[kiwicopple]

Here is an example where it is handled in Context too: https://github.com/thorwebdev/nextjs-subscription-payments/blob/main/components/UserContext.js

[kopi-cloud]

It looks like supabase returns the SupabaseClient object from createClient(), then after the object has been returned, restores the session from localstorage asynchronously. But it appears there's no onAuthStateChange() event fired when the session is restored from localstorage - which means that the app has no way of knowing that happened.

I've published a simple project that I think demonstrates the issue I'm having: https://rabbit-sb-auth-restore.netlify.app/

Reproduction:

1. click the login button
   • login will succeed and you will see the "current session email" will be shown
2. hit the browser refresh button
   • expected behaviour: "current session email" should show email of the currently logged in user
   • actual behaviour: "current session email" is empty
   • in the console logs you can see the object returned from createClient() doesn't yet have an auth.session value during the initial react render
   • but also in the logs, you can see that the auth.session value was populated be the time the timeout() handler fires
   • you can also click the "force render" button to force a react render that will now show the expected value

Would it be possible to have SB deliver a "session restored" event to the onAuthStateChange() handler?
Or better yet, have createClient() set the token from localstorage synchronously? (i.e. before it returns the SupabaseClient.auth value)

[kopi-cloud]

It's GoTrue that's doing the session restoration: https://github.com/supabase/gotrue-js/blob/f21a620dc3719b7d34aa1bb3ccb5cdb0b1e8c1d9/src/GoTrueClient.ts#L57

_recoverSession() is declared async, but constructors can't return promises, so any change would be a bit more work than just banging in await.

My workaround for the simple example is to just schedule a timeout() and force a re-render if the session got restored.
For my original context-based code, I don't let the children render until the session is restored (if it's going to be).

[kiwicopple]

FYI @kopi-cloud - I think we will update the client to make this a bit simpler: supabase/auth-js#36