feat(app): migrate to @supabase/ssr (#357)

Co-authored-by: Baptiste Leproux <[email protected]>
nuxt-modules · Jul 5, 2024 · 56dc39e · 56dc39e
1 parent 70563f9
commit 56dc39e
Show file tree

Hide file tree

Showing 14 changed files with 3,186 additions and 3,549 deletions.
diff --git a/docs/content/2.get-started.md b/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
 

diff --git a/package.json b/package.json
@@ -27,17 +27,18 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.11.2",
-    "@supabase/supabase-js": "2.43.0",
+    "@supabase/ssr": "^0.4.0",
+    "@supabase/supabase-js": "^2.43.5",
     "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.4.0",
     "nuxt": "^3.11.2",
     "prettier": "^3.2.5",
     "release-it": "^17.2.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/module.ts b/src/module.ts
@@ -54,7 +54,7 @@ export interface ModuleOptions {
   redirectOptions?: RedirectOptions
 
   /**
-   * 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`
    * @default 'sb'
    * @type string
    */
@@ -73,14 +73,8 @@ export interface ModuleOptions {
   cookieOptions?: CookieOptions
 
   /**
-   * Supabase Client options
-   * @default {
-      auth: {
-        flowType: 'pkce',
-        detectSessionInUrl: true,
-        persistSession: true,
-      },
-    }
+   * Supabase client options (overrides default options from `@supabase/ssr`)
+   * @default { }
    * @type object
    * @docs https://supabase.com/docs/reference/javascript/initializing#parameters
    */
@@ -112,14 +106,7 @@ export default defineNuxtModule<ModuleOptions>({
       sameSite: 'lax',
       secure: true,
     } as CookieOptions,
-    clientOptions: {
-      auth: {
-        flowType: 'pkce',
-        detectSessionInUrl: true,
-        persistSession: true,
-        autoRefreshToken: true,
-      },
-    } as SupabaseClientOptions<string>,
+    clientOptions: {} as SupabaseClientOptions<string>,
   },
   setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
@@ -211,21 +198,11 @@ export default defineNuxtModule<ModuleOptions>({
       nuxt.options.build.transpile.push('websocket')
     }
 
-    // Optimize @supabase/ packages for dev
-    // TODO: Remove when packages fixed with valid ESM exports
-    // https://github.com/supabase/gotrue/issues/1013
+    // Needed to fix https://github.com/supabase/auth-helpers/issues/725
     extendViteConfig((config) => {
       config.optimizeDeps = config.optimizeDeps || {}
       config.optimizeDeps.include = config.optimizeDeps.include || []
-      config.optimizeDeps.exclude = config.optimizeDeps.exclude || []
-      config.optimizeDeps.include.push(
-        '@supabase/functions-js',
-        '@supabase/gotrue-js',
-        '@supabase/postgrest-js',
-        '@supabase/realtime-js',
-        '@supabase/storage-js',
-        '@supabase/supabase-js',
-      )
+      config.optimizeDeps.include.push('cookie')
     })
   },
 })
diff --git a/src/runtime/composables/useSupabaseSession.ts b/src/runtime/composables/useSupabaseSession.ts
@@ -1,24 +1,8 @@
 import type { Session } from '@supabase/supabase-js'
-import type { Ref } from 'vue'
-import { useSupabaseClient } from './useSupabaseClient'
 import { useState } from '#imports'
 
-export const useSupabaseSession: () => Ref<Session | null> = () => {
-  const supabase = useSupabaseClient()
-
-  const sessionState = useState<Session | null>('supabase_session', () => null)
-
-  // Asyncronous refresh session and ensure user is still logged in
-  supabase?.auth.getSession().then(({ data: { session } }) => {
-    if (session) {
-      if (JSON.stringify(sessionState.value) !== JSON.stringify(session)) {
-        sessionState.value = session
-      }
-    }
-    else {
-      sessionState.value = null
-    }
-  })
-
-  return sessionState
-}
+/**
+ * Reactive `Session` state from Supabase. This is initialized in both client and server plugin
+ * and, on the client, also updated through `onAuthStateChange` events.
+ */
+export const useSupabaseSession = () => useState<Session | null>('supabase_session', () => null)
diff --git a/src/runtime/composables/useSupabaseUser.ts b/src/runtime/composables/useSupabaseUser.ts
@@ -1,9 +1,8 @@
 import type { User } from '@supabase/supabase-js'
-import { useSupabaseSession } from './useSupabaseSession'
-import { computed, type ComputedRef } from '#imports'
+import { useState } from '#imports'
 
-export const useSupabaseUser: () => ComputedRef<User | null> = () => {
-  const session = useSupabaseSession()
-  const userState = computed(() => session.value?.user)
-  return userState
-}
+/**
+ * Reactive `User` state from Supabase. This is initialized in both client and server plugin
+ * and, on the client, also updated through `onAuthStateChange` events.
+ */
+export const useSupabaseUser = () => useState<User | null>('supabase_user', () => null)
diff --git a/src/runtime/plugins/auth-redirect.ts b/src/runtime/plugins/auth-redirect.ts
@@ -1,4 +1,5 @@
-import { useSupabaseUser } from '../composables/useSupabaseUser'
+import { useSupabaseSession } from '../composables/useSupabaseSession'
+import type { Ref } from '#imports'
 import { defineNuxtPlugin, addRouteMiddleware, defineNuxtRouteMiddleware, useCookie, useRuntimeConfig, navigateTo } from '#imports'
 import type { RouteLocationNormalized } from '#vue-router'
 
@@ -30,10 +31,10 @@ export default defineNuxtPlugin({
         })
         if (isExcluded) return
 
-        const user = useSupabaseUser()
-        if (!user.value) {
+        const session = useSupabaseSession()
+        if (!session.value) {
           if (cookieRedirect) {
-            useCookie(`${cookieName}-redirect-path`, cookieOptions).value = to.fullPath
+            (useCookie(`${cookieName}-redirect-path`, { ...cookieOptions, readonly: false }) as Ref).value = to.fullPath
           }
 
           return navigateTo(login)

diff --git a/src/runtime/plugins/supabase.client.ts b/src/runtime/plugins/supabase.client.ts
@@ -1,61 +1,42 @@
-import { createClient } from '@supabase/supabase-js'
+import { createBrowserClient } from '@supabase/ssr'
+import type { Session } from '@supabase/supabase-js'
 import { useSupabaseSession } from '../composables/useSupabaseSession'
-import { defineNuxtPlugin, useRuntimeConfig, useCookie } from '#imports'
+import { useSupabaseUser } from '../composables/useSupabaseUser'
+import { defineNuxtPlugin, useRuntimeConfig } from '#imports'
 
 export default defineNuxtPlugin({
   name: 'supabase',
   enforce: 'pre',
   async setup() {
-    const currentSession = useSupabaseSession()
-    const config = useRuntimeConfig().public.supabase
-    const { url, key, cookieName, cookieOptions, clientOptions } = config
+    const { url, key, cookieOptions, clientOptions } = useRuntimeConfig().public.supabase
 
-    const supabaseClient = createClient(url, key, clientOptions)
+    const client = createBrowserClient(url, key, {
+      ...clientOptions,
+      cookieOptions,
+      isSingleton: true,
+    })
 
-    const accessToken = useCookie(`${cookieName}-access-token`, cookieOptions)
-    const refreshToken = useCookie(`${cookieName}-refresh-token`, cookieOptions)
-    const providerToken = useCookie(`${cookieName}-provider-token`, cookieOptions)
-    const providerRefreshToken = useCookie(`${cookieName}-provider-refresh-token`, cookieOptions)
+    const currentSession = useSupabaseSession()
+    const currentUser = useSupabaseUser()
 
-    // Handle auth event client side
-    supabaseClient.auth.onAuthStateChange((event, session) => {
-      // Update states based on received session
-      if (session) {
-        if (JSON.stringify(currentSession) !== JSON.stringify(session)) {
-          currentSession.value = session
-        }
-      }
-      else {
-        currentSession.value = null
-      }
+    // Initialize user and session states
+    const {
+      data: { session },
+    } = await client.auth.getSession()
+    currentSession.value = session
+    currentUser.value = session?.user ?? null
 
-      // Use cookies to share session state between server and client
-      if (event === 'SIGNED_IN' || event === 'TOKEN_REFRESHED') {
-        accessToken.value = session?.access_token
-        refreshToken.value = session?.refresh_token
-        if (session.provider_token) {
-          providerToken.value = session.provider_token
-        }
-        if (session.provider_refresh_token) {
-          providerRefreshToken.value = session.provider_refresh_token
-        }
-      }
-      if (event === 'SIGNED_OUT') {
-        accessToken.value = null
-        refreshToken.value = null
-        providerToken.value = null
-        providerRefreshToken.value = null
+    // Updates the session and user states through auth events
+    client.auth.onAuthStateChange((_, session: Session | null) => {
+      if (JSON.stringify(currentSession.value) !== JSON.stringify(session)) {
+        currentSession.value = session
+        currentUser.value = session?.user ?? null
       }
     })
 
-    // Attempt to retrieve existing session from local storage
-    await supabaseClient.auth.getSession()
-
     return {
       provide: {
-        supabase: {
-          client: supabaseClient,
-        },
+        supabase: { client },
       },
     }
   },

diff --git a/src/runtime/plugins/supabase.server.ts b/src/runtime/plugins/supabase.server.ts
@@ -1,43 +1,46 @@
-import { defu } from 'defu'
-import { createClient } from '@supabase/supabase-js'
-import { useSupabaseSession } from '../composables/useSupabaseSession'
-import { defineNuxtPlugin, useRuntimeConfig, useCookie } from '#imports'
+import { createServerClient, parseCookieHeader } from '@supabase/ssr'
+import { getHeader, setCookie } from 'h3'
+import { defineNuxtPlugin, useRequestEvent, useRuntimeConfig, useSupabaseSession, useSupabaseUser } from '#imports'
+import type { CookieOptions } from '#app'
 
 export default defineNuxtPlugin({
   name: 'supabase',
   enforce: 'pre',
   async setup() {
-    const { url, key, cookieName, clientOptions } = useRuntimeConfig().public.supabase
-    const accessToken = useCookie(`${cookieName}-access-token`).value
-    const refreshToken = useCookie(`${cookieName}-refresh-token`).value
+    const { url, key, cookieOptions, clientOptions } = useRuntimeConfig().public.supabase
 
-    const options = defu({
-      auth: {
-        flowType: clientOptions.auth.flowType,
-        detectSessionInUrl: false,
-        persistSession: false,
-        autoRefreshToken: false,
-      },
-    }, clientOptions)
+    const event = useRequestEvent()!
 
-    const supabaseClient = createClient(url, key, options)
+    const client = createServerClient(url, key, {
+      ...clientOptions,
+      cookies: {
+        getAll: () => parseCookieHeader(getHeader(event, 'Cookie') ?? ''),
+        setAll: (
+          cookies: {
+            name: string
+            value: string
+            options: CookieOptions
+          }[],
+        ) => cookies.forEach(({ name, value, options }) => setCookie(event, name, value, options)),
+      },
+      cookieOptions,
+    })
 
-    // Set user & session server side
-    if (accessToken && refreshToken) {
-      const { data } = await supabaseClient.auth.setSession({
-        refresh_token: refreshToken,
-        access_token: accessToken,
-      })
-      if (data) {
-        useSupabaseSession().value = data.session
-      }
-    }
+    // Initialize user and session states
+    const [
+      {
+        data: { session },
+      },
+      {
+        data: { user },
+      },
+    ] = await Promise.all([client.auth.getSession(), client.auth.getUser()])
+    useSupabaseSession().value = session
+    useSupabaseUser().value = user
 
     return {
       provide: {
-        supabase: {
-          client: supabaseClient,
-        },
+        supabase: { client },
       },
     }
   },