-
Notifications
You must be signed in to change notification settings - Fork 136
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(auth): improve client flexibility & allow overriding cookie opti…
…ons (#463)
- Loading branch information
1 parent
a4b244b
commit 254cbdb
Showing
10 changed files
with
272 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 54 additions & 0 deletions
54
docs/content/4.usage/composables/useSupabaseCookieRedirect.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| --- | ||
| title: useSupabaseCookieRedirect | ||
| description: Handle redirecting users to the page they previously tried to visit after login | ||
| --- | ||
|
|
||
| The `useSupabaseCookieRedirect` composable provides a simple way to handle storing and retrieving a redirect path with a cookie. | ||
|
|
||
| ## Usage | ||
|
|
||
| This composable can be [manually used](#manual-usage) to save and retrieve a redirect path. However, the redirect path can automatically be set via the `saveRedirectToCookie` option in the [redirectOptions](/get-started#redirectoptions). | ||
|
|
||
| The redirect path is not automatically used. Instead you must implement the logic to redirect the user to the saved path, for example on the [`/confirm`](/authentication#confirm-page-confirm) page. | ||
|
|
||
| ```vue | ||
| <script setup> | ||
| const user = useSupabaseUser() | ||
| const redirectInfo = useSupabaseCookieRedirect() | ||
| watch(user, () => { | ||
| if (user.value) { | ||
| // Get the saved path and clear it from the cookie | ||
| const path = redirectInfo.pluck() | ||
| // Redirect to the saved path, or fallback to home | ||
| return navigateTo(path || '/') | ||
| } | ||
| }, { immediate: true }) | ||
| </script> | ||
| ``` | ||
|
|
||
| ## Return Values | ||
|
|
||
| The composable returns an object with the following properties: | ||
|
|
||
| - `path`: A reactive cookie reference containing the redirect path. Can be both read and written to. | ||
| - `pluck()`: A convenience method that returns the current redirect path and clears it from the cookie. | ||
|
|
||
| ## Manual Usage | ||
|
|
||
| You can also manually set and read the redirect path: | ||
|
|
||
| ```ts | ||
| const redirectInfo = useSupabaseCookieRedirect() | ||
|
|
||
| // Save a specific path | ||
| redirectInfo.path.value = '/dashboard' | ||
|
|
||
| // Read the current path without clearing it | ||
| const currentPath = redirectInfo.path.value | ||
|
|
||
| // Get the path and clear it | ||
| const path = redirectInfo.pluck() | ||
| ``` | ||
|
|
||
| The cookie is saved with the name `{cookiePrefix}-redirect-path` where `cookiePrefix` is defined in the [runtime config](/get-started#runtime-config). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import type { CookieRef } from 'nuxt/app' | ||
| import { useRuntimeConfig, useCookie } from '#imports' | ||
|
|
||
| export interface UseSupabaseCookieRedirectReturn { | ||
| /** | ||
| * The reactive value of the redirect path cookie. | ||
| * Can be both read and written to. | ||
| */ | ||
| path: CookieRef<string | null> | ||
| /** | ||
| * Get the current redirect path cookie value, then clear it | ||
| */ | ||
| pluck: () => string | null | ||
| } | ||
|
|
||
| export const useSupabaseCookieRedirect = (): UseSupabaseCookieRedirectReturn => { | ||
| const config = useRuntimeConfig().public.supabase | ||
|
|
||
| // Use cookiePrefix if saveRedirectToCookie is true, otherwise fallback to the deprecated cookieName | ||
| const prefix = config.redirectOptions.saveRedirectToCookie | ||
| ? config.cookiePrefix | ||
| : config.cookieName | ||
|
|
||
| const cookie: CookieRef<string | null> = useCookie( | ||
| `${prefix}-redirect-path`, | ||
| { | ||
| ...config.cookieOptions, | ||
| readonly: false, | ||
| }, | ||
| ) | ||
|
|
||
| return { | ||
| path: cookie, | ||
| pluck: () => { | ||
| const value = cookie.value | ||
| cookie.value = null | ||
| return value | ||
| }, | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.