supabase nuxt confirm page on email confirmation

Hi i have supabase setup using the module however when the user clicks their confirm email link they get sent to my /auth/confirm page where i put this code

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

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

which i saw in the official docs however it doesn't seem to grab the required data to sign them in? the link generated is in this format

http://localhost:3000/auth/confirm#access_token=eyJhbGciOiJ&expires_at=1746025613&expires_in=3600&refresh_token=n7aokx&token_type=bearer&type=magiclink

http://localhost:3000/auth/confirm#access_token=eyJhbGciOiJ&expires_at=1746025613&expires_in=3600&refresh_token=n7aokx&token_type=bearer&type=magiclink

the only work around i've found is changing the confirm page code to something where i grab the hash from the url and then use verifyotp and changing the email templates manually to send the hash etc which works but seems overly complicated so i would prefer to use the default method with access tokens and refresh tokens in the url that i'm sent

Nuxt•10mo ago•

14 replies

WiFi Plug

supabase nuxt confirm page on email confirmation

Hi i have supabase setup using the module however when the user clicks their confirm email link they get sent to my /auth/confirm page where i put this code

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

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

which i saw in the official docs however it doesn't seem to grab the required data to sign them in? the link generated is in this format

http://localhost:3000/auth/confirm#access_token=eyJhbGciOiJ&expires_at=1746025613&expires_in=3600&refresh_token=n7aokx&token_type=bearer&type=magiclink

http://localhost:3000/auth/confirm#access_token=eyJhbGciOiJ&expires_at=1746025613&expires_in=3600&refresh_token=n7aokx&token_type=bearer&type=magiclink

supabase nuxt confirm page on email confirmation

Similar Threads

supabase nuxt confirm page on email confirmation

Similar Threads

Similar Threads

Similar Threads