feat!: Migrate to @supabase/ssr

demo/components/AppHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const client = useSupabaseClient()
-const user = useSupabaseUser()
+const user = await useSupabaseUser()
 const colorMode = useColorMode()
 
 const toggleDark = () => {

demo/pages/confirm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const user = useSupabaseUser()
+const user = await useSupabaseUser()
 
 watch(user, () => {
   if (user.value) {

demo/pages/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const user = useSupabaseUser()
+const user = await useSupabaseUser()
 const { auth } = useSupabaseClient()
 
 const redirectTo = `${useRuntimeConfig().public.baseUrl}/confirm`

demo/pages/tasks.vue

@@ -2,7 +2,7 @@
 import type { Database } from '~~/types/database.types'
 
 const client = useSupabaseClient<Database>()
-const user = useSupabaseUser()
+const user = await useSupabaseUser()
 
 const tasksFromServer = ref()
 const isModalOpen = ref(false)

docs/content/2.get-started.md

@@ -99,7 +99,7 @@ Default:
 
 Default: `sb`
 
-Cookie name used for storing access and refresh tokens, added in front of `-access-token` and `-refresh-token` to form the full cookie name e.g. `sb-access-token`
+Cookie name used for storing the redirect path when using the `redirect` option, added in front of `-redirect-path` to form the full cookie name e.g. `sb-redirect-path`
 
 ### cookieOptions
 
@@ -115,20 +115,25 @@ Options for cookies used to share tokens between server and client, refer to [co
 
 ### `clientOptions`
 
-Default:
+Default: 
+
+```ts
+  clientOptions: { }
+```
+
+Supabase client options [available here](https://supabase.com/docs/reference/javascript/initializing#parameters) merged with default values from `@supabase/ssr`:
 
 ```ts
   clientOptions: {
     auth: {
       flowType: 'pkce',
-      detectSessionInUrl: true,
-      persistSession: true,
-      autoRefreshToken: true
+      autoRefreshToken: isBrowser(),
+			detectSessionInUrl: isBrowser(),
+			persistSession: true,
     },
   }
 ```
 
-Supabase client options [available here](https://supabase.com/docs/reference/javascript/initializing#parameters).
 
 ## Versions
 

docs/content/3.authentication.md

@@ -62,7 +62,7 @@ The redirect URL must be configured in your Supabase dashboard under `Authentica
 
 ```vue [pages/confirm.vue]
 <script setup lang="ts">
-const user = useSupabaseUser()
+const user = await useSupabaseUser()
 
 watch(user, () => {
   if (user.value) {
@@ -87,7 +87,7 @@ You must enable the `cookieRedirect` option of the [redirectOptions](/get-starte
 
 ```vue [pages/confirm.vue]
 <script setup lang="ts">
-const user = useSupabaseUser()
+const user = await useSupabaseUser()
 
 // Get redirect path from cookies
 const cookieName = useRuntimeConfig().public.supabase.cookieName

docs/content/4.usage/composables/useSupabaseUser.md

@@ -7,7 +7,7 @@ Once logged in, you can [auto-import](https://nuxt.com/docs/guide/directory-stru
 
 ```vue
 <script setup>
-const user = useSupabaseUser()
+const user = await useSupabaseUser()
 </script>
 ```
 
@@ -21,7 +21,7 @@ If the [redirect](/get-started#redirect) option is disabled, you can protect you
 
 ```ts [middleware/auth.ts]
 export default defineNuxtRouteMiddleware((to, _from) => {
-  const user = useSupabaseUser()
+  const user = await useSupabaseUser()
 
   if (!user.value) {
     return navigateTo('/login')

package.json

@@ -27,17 +27,18 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.11.2",
-    "@supabase/supabase-js": "2.43.0",
+    "@supabase/ssr": "^0.3.0",
+    "@supabase/supabase-js": "2.43.2",
     "defu": "^6.1.4",
     "pathe": "^1.1.2"
   },
   "devDependencies": {
-    "@nuxt/eslint": "^0.3.10",
+    "@nuxt/eslint": "^0.3.12",
     "@nuxt/module-builder": "^0.6.0",
     "@nuxt/schema": "^3.11.2",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@types/node": "^20.12.8",
-    "eslint": "^9.1.1",
+    "@types/node": "^20.12.12",
+    "eslint": "^9.2.0",
     "nuxt": "^3.11.2",
     "prettier": "^3.2.5",
     "release-it": "^17.2.1",

playground/pages/confirm.vue

@@ -5,7 +5,7 @@ if (import.meta.server) {
   )
 }
 
-const user = useSupabaseUser()
+const user = await useSupabaseUser()
 watch(user, () => {
   if (user.value) {
     return navigateTo('/user')

playground/pages/index.vue

@@ -2,7 +2,7 @@
 import type { Database } from '~~/types/database.types'
 
 const supabase = useSupabaseClient<Database>()
-const user = useSupabaseUser()
+const user = await useSupabaseUser()
 
 const { data } = useAsyncData(async () => {
   // const { data } = await supabase.from('test').select('*')

playground/pages/login.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable no-console -->
 <script setup lang="ts">
 const supabase = useSupabaseClient()
-const user = useSupabaseUser()
+const user = await useSupabaseUser()
 
 watchEffect(() => {
   // Can be uncommented in next nuxt version when https://github.com/nuxt/nuxt/issues/21841 is fixed

playground/pages/protected.vue

@@ -8,5 +8,5 @@
 </template>
 
 <script setup lang="ts">
-const session = useSupabaseSession()
+const session = await useSupabaseSession()
 </script>

playground/pages/user.vue

@@ -1,9 +1,9 @@
 <!-- eslint-disable no-console -->
 <script setup lang="ts">
 const supabase = useSupabaseClient()
-const user = useSupabaseUser()
+const user = await useSupabaseUser()
 const router = useRouter()
-const session = useSupabaseSession()
+const session = await useSupabaseSession()
 
 if (import.meta.server) {
   console.log('User on server side: ', user.value?.email)