fix(plugin): retrieve user for client only page

Co-authored-by: Baptiste Leproux <leproux.baptiste@gmail.com>

playground/nuxt.config.ts

@@ -20,4 +20,9 @@ export default defineNuxtConfig({
       exclude: ['/unprotected', '/public/*']
     },
   },
+  nitro: {
+    routeRules: {
+      '/clientonly': { ssr: false }
+    },
+  },
 })

playground/pages/clientonly.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    This page is rendered without SSR.
+  </div>
+</template>

playground/pages/confirm.vue

@@ -1,16 +1,13 @@
 <script setup lang="ts">
-if (process.server) {
-  console.log(
-    'ERROR: It is very important to make sure that the redirect route right after login works without any server-side rendering. This is because the server-side rendering will not have the user data available. This is why we need to redirect to a client-side route right after login. This is a limitation of Supabase. If you are using Nuxt, you can use the no-ssr component to make sure that the redirect route is not server-side rendered.',
-  )
-}
-const user = useSupabaseUser()
-
-watch(user, () => {
+  if (process.server) {
+    console.log(
+      'ERROR: It is very important to make sure that the redirect route right after login works without any server-side rendering. This is because the server-side rendering will not have the user data available. This is why we need to redirect to a client-side route right after login. This is a limitation of Supabase. If you are using Nuxt, you can use the no-ssr component to make sure that the redirect route is not server-side rendered.',
+    )
+  }
+  const user = useSupabaseUser()
   if (user.value) {
-    return navigateTo('/user')
+    await navigateTo('/user')
   }
-})
 </script>
 <template>
   <div>Waiting for login...</div>

src/runtime/composables/useSupabaseUser.ts

@@ -1,6 +1,4 @@
 import type { User } from '@supabase/supabase-js'
-import type { Ref } from 'vue'
-import { useSupabaseClient } from './useSupabaseClient'
 import { useState } from '#imports'
 
 export const useSupabaseUser = () => {

src/runtime/plugins/auth-redirect.ts

@@ -6,13 +6,13 @@ export default defineNuxtPlugin({
   setup() {
     addRouteMiddleware(
       'global-auth',
-      defineNuxtRouteMiddleware(async to => {
+      defineNuxtRouteMiddleware(to => {
         const config = useRuntimeConfig().public.supabase
         const { login, callback, exclude } = config.redirectOptions
 
         // Do not redirect on login route, callback route and excluded routes
-        const isExcluded = [...exclude, login, callback]?.some((path) => {
-          const regex = new RegExp(`^${path.replace(/\*/g, ".*")}$`)
+        const isExcluded = [...exclude, login, callback]?.some(path => {
+          const regex = new RegExp(`^${path.replace(/\*/g, '.*')}$`)
           return regex.test(to.path)
         })
         if (isExcluded) return

src/runtime/plugins/supabase.client.ts

@@ -14,6 +14,7 @@ export default defineNuxtPlugin({
 
     // Handle auth event client side
     supabaseClient.auth.onAuthStateChange(async (event, session) => {
+      // Update user based on received session
       if (session) {
         if (JSON.stringify(user.value) !== JSON.stringify(session.user)) {
           user.value = session.user;
@@ -22,6 +23,7 @@ export default defineNuxtPlugin({
         user.value = null
       }
 
+      // Use cookies to share session state between server and client
       if (event === 'SIGNED_IN' || event === 'TOKEN_REFRESHED') {
         useCookie(`${cookieName}-access-token`, cookieOptions).value = session?.access_token
         useCookie(`${cookieName}-refresh-token`, cookieOptions).value = session?.refresh_token
@@ -36,10 +38,13 @@ export default defineNuxtPlugin({
       }
     })
 
+    // Attempt to retrieve existing session from local storage
+    await supabaseClient.auth.getSession()
+
     return {
       provide: {
         supabase: {
-          client: supabaseClient
+          client: supabaseClient,
         },
       },
     }