fix(session): server sync

playground/pages/protected.vue

@@ -1,3 +1,12 @@
 <template>
-  <div>This page is protected. You should only be able to access it, if you are logged in.</div>
+  <div>
+    <span>This page is protected. You should only be able to access it, if you are logged in:</span>
+    <pre>
+      {{ session.access_token }}
+    </pre>
+  </div>
 </template>
+
+<script setup lang="ts">
+const session = useSupabaseSession()
+</script>

src/runtime/plugins/supabase.client.ts

@@ -1,12 +1,14 @@
 import { createClient } from '@supabase/supabase-js'
 import { useSupabaseUser } from '../composables/useSupabaseUser'
+import { useSupabaseSession } from '../composables/useSupabaseSession'
 import { defineNuxtPlugin, useRuntimeConfig, useCookie } from '#imports'
 
 export default defineNuxtPlugin({
   name: 'supabase',
   enforce: 'pre',
   async setup () {
     const user = useSupabaseUser()
+    const currentSession = useSupabaseSession()
     const config = useRuntimeConfig().public.supabase
     const { url, key, cookieName, cookieOptions, clientOptions } = config
 
@@ -19,10 +21,13 @@ export default defineNuxtPlugin({
 
     // Handle auth event client side
     supabaseClient.auth.onAuthStateChange((event, session) => {
-      // Update user based on received session
+      // Update states based on received session
       if (session) {
-        if (JSON.stringify(user.value) !== JSON.stringify(session.user)) {
-          user.value = session.user
+        if (JSON.stringify(currentSession) !== JSON.stringify(session)) {
+          currentSession.value = session
+          if (JSON.stringify(user.value) !== JSON.stringify(session.user)) {
+            user.value = session.user
+          }
         }
       } else {
         user.value = null

src/runtime/plugins/supabase.server.ts

@@ -1,6 +1,7 @@
 import { defu } from 'defu'
 import { createClient } from '@supabase/supabase-js'
 import { useSupabaseUser } from '../composables/useSupabaseUser'
+import { useSupabaseSession } from '../composables/useSupabaseSession'
 import { defineNuxtPlugin, useRuntimeConfig, useCookie } from '#imports'
 
 export default defineNuxtPlugin({
@@ -28,8 +29,11 @@ export default defineNuxtPlugin({
         refresh_token: refreshToken,
         access_token: accessToken
       })
-      if (data?.user) {
-        useSupabaseUser().value = data.user
+      if (data) {
+        useSupabaseSession().value = data.session
+        if (data?.user) {
+          useSupabaseUser().value = data.user
+        }
       }
     }