mobile favicon
Composables

useSupabaseCookieRedirect

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 to save and retrieve a redirect path. However, the redirect path can automatically be set via the saveRedirectToCookie option in the 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 page.

<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:

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.


Made with Nuxt Studio