feat(app): added redirect path cookie for use after signin (#327)

Author: Matthewenderle

docs/content/2.get-started.md

@@ -98,11 +98,13 @@ Default:
     login: '/login',
     callback: '/confirm',
     exclude: [],
+    cookieRedirect: false,
   }
 ```
 - `login`: User will be redirected to this path if not authenticated or after logout. 
 - `callback`: This is the path the user will be redirect to after supabase login redirection. Should match configured `redirectTo` option of your [signIn method](https://supabase.com/docs/reference/javascript/auth-signinwithoauth). Should also be configured in your Supabase dashboard under `Authentication -> URL Configuration -> Redirect URLs`.
 - `exclude`: Routes to exclude from the redirect. `['/foo', '/bar/*']` will exclude the `foo` page and all pages in your `bar` folder.
+- `cookieRedirect`: Sets a cookie containing the path an unauthenticated user tried to access. The cookie can then be used on the [`/confirm`](https://supabase.nuxtjs.org/authentication#confirm-page-confirm) page to redirect the user to the page they previously tried to visit. 
 
 ### `cookieName`
 

docs/content/3.authentication.md

@@ -65,9 +65,17 @@ The redirect URL must be configured in your Supabase dashboard under `Authentica
 ```vue [pages/confirm.vue]
 <script setup lang="ts">
 const user = useSupabaseUser()
+
+// Pull in the config to get cookie details
+const config = useRuntimeConfig().public.supabase;
+const { cookieName } = config;
+const redirectPath = useCookie(`${cookieName}-redirect-path`).value;
+
+
 watch(user, () => {
   if (user.value) {
-    return navigateTo('/')
+      useCookie(`${cookieName}-redirect-path`).value = null // Clear the cookie
+      return navigateTo(redirectPath || '/'); // Redirect or go to protected page
   }
 }, { immediate: true })
 

src/module.ts

@@ -102,7 +102,8 @@ export default defineNuxtModule<ModuleOptions>({
     redirectOptions: {
       login: '/login',
       callback: '/confirm',
-      exclude: []
+      exclude: [],
+      cookieRedirect: false
     },
     cookieName: 'sb',
     cookieOptions: {
@@ -151,8 +152,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     // ensure callback URL is not using SSR
     const mergedOptions = nuxt.options.runtimeConfig.public.supabase
-    if (mergedOptions.redirect &&
-      mergedOptions.redirectOptions.callback) {
+    if (mergedOptions.redirect && mergedOptions.redirectOptions.callback) {
       const routeRules: { [key: string]: any } = {}
       routeRules[mergedOptions.redirectOptions.callback] = { ssr: false }
       nuxt.options.nitro = defu(nuxt.options.nitro, {

src/runtime/plugins/auth-redirect.ts

@@ -1,5 +1,5 @@
 import { useSupabaseUser } from '../composables/useSupabaseUser'
-import { defineNuxtPlugin, addRouteMiddleware, defineNuxtRouteMiddleware, useRuntimeConfig, navigateTo } from '#imports'
+import { defineNuxtPlugin, addRouteMiddleware, defineNuxtRouteMiddleware, useCookie, useRuntimeConfig, navigateTo } from '#imports'
 
 export default defineNuxtPlugin({
   name: 'auth-redirect',
@@ -8,7 +8,8 @@ export default defineNuxtPlugin({
       'global-auth',
       defineNuxtRouteMiddleware((to) => {
         const config = useRuntimeConfig().public.supabase
-        const { login, callback, exclude } = config.redirectOptions
+        const { login, callback, exclude, cookieRedirect } = config.redirectOptions
+        const { cookieName, cookieOptions } = config
 
         // Do not redirect on login route, callback route and excluded routes
         const isExcluded = [...exclude, login, callback]?.some((path) => {
@@ -19,6 +20,7 @@ export default defineNuxtPlugin({
 
         const user = useSupabaseUser()
         if (!user.value) {
+          if (cookieRedirect) { useCookie(`${cookieName}-redirect-path`, cookieOptions).value = to.fullPath }
           return navigateTo(login)
         }
       }),

src/runtime/types/index.d.ts

@@ -18,4 +18,5 @@ export interface RedirectOptions {
   login: string
   callback: string
   exclude?: string[]
+  cookieRedirect?: boolean
 }