feat: receive a new user state every time an auth event happens

Author: xiaoluoboding

packages/auth/UserContextProvider.ts

@@ -28,7 +28,7 @@ export default defineComponent({
       )
 
       return () => {
-        console.log('authListener')
+        // console.log('authListener')
         authListener?.subscription.unsubscribe()
       }
     })
@@ -45,15 +45,31 @@ export default defineComponent({
 export const useSupabaseUser = (supabaseClient: SupabaseClient) => {
   const supabaseUser = ref<User | null>(null)
 
-  // Asyncronous refresh session and ensure user is still logged in
-  supabaseClient?.auth.getSession().then(({ data: { session } }) => {
+  const setSupbaseUser = (session: Session) => {
     if (session) {
       if (JSON.stringify(supabaseUser.value) !== JSON.stringify(session.user)) {
         supabaseUser.value = session.user
       }
     } else {
       supabaseUser.value = null
     }
+  }
+
+  // Asyncronous refresh session and ensure user is still logged in
+  supabaseClient?.auth.getSession().then(({ data: { session } }) => {
+    session && setSupbaseUser(session)
+  })
+
+  onMounted(async () => {
+    const { data: authListener } = supabaseClient.auth.onAuthStateChange(
+      async (event, newSession) => {
+        newSession && setSupbaseUser(newSession)
+      }
+    )
+
+    return () => {
+      authListener?.subscription.unsubscribe()
+    }
   })
 
   return {