Nuxt Supabase

The useSupabaseCookieRedirect composable manages a redirect path stored in a cookie. This allows you to capture the URL a user was trying to visit before being prompted to log in, and then redirect them back to that specific path after successful authentication.

Note: The redirect path is not automatically applied. You must implement the redirection logic yourself, typically on a confirmation page (like /confirm) by watching the user state.

To automate the saving of the path, you can enable the saveRedirectToCookie option in your module configuration under redirectOptions.

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

A password reset flow involves two main steps:

1. Request a password reset

Use supabase.auth.resetPasswordForEmail to send a reset link to the user. You must specify a redirectTo URL where the user will be sent after clicking the link.

2. Update the password

Once the user is redirected back to your application via the reset link, prompt them for a new password and call supabase.auth.updateUser({ password: 'new-password' }).

You can also listen for the PASSWORD_RECOVERY event using onAuthStateChange() to trigger the password update logic automatically when the recovery link is processed.

// Step 1: Request reset
const { data, error } = await supabase.auth.resetPasswordForEmail(email.value, {
  redirectTo: 'https://example.com/password/update',
})

// Step 2: Update password (can be triggered via event listener)
watch(newPassword, () => {
  supabase.auth.onAuthStateChange(async (event, session) => {
    if (event == "PASSWORD_RECOVERY") {
      const { data, error } = await supabase.auth.updateUser({ password: newPassword.value })
    }
  })
})

This guide outlines the migration process from version 1.x to 2.x. The primary change is the introduction of support for Supabase's asymmetric JWT signing keys, which allows for local session verification without network calls to the Supabase Auth server.

Key Changes Overview

• Authentication: Moves from symmetric keys (shared secret) to asymmetric keys (private/public pair).
• useSupabaseUser: Now returns JWT claims instead of the full User object.
• Environment Variables: Renamed and repurposed to support the new key structure.

Migration Summary

1. Update Types: Adjust code that relies on the full User object returned by useSupabaseUser.
2. Update Environment Variables: Transition from using the anon key to the publishable key and add the secret key.

If you only need basic user information (like email or role), your code may not require any changes, but you must update your TypeScript definitions.

To automatically redirect a user back to the page they were originally trying to access before being prompted to log in, follow these steps:

1. Enable the saveRedirectToCookie option in your module configuration.
2. On your /confirm page, use the useSupabaseCookieRedirect composable to retrieve and clear the saved path once the user is authenticated.

If you prefer to manage the redirect path manually, you can disable saveRedirectToCookie and use useSupabaseCookieRedirect to set the value yourself.

<script setup lang="ts">
const user = useSupabaseUser()
const redirectInfo = useSupabaseCookieRedirect()

watch(user, () => {
  if (user.value) {
    // Get redirect 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>

<template>
  <div>Waiting for login...</div>
</template>"}