Detecting session in URL is not working when sending "Password recovery" email manually from Supabase dashboard

[andrei-nikic-co]

We just found this issue.

If I click "Send password recovery", I'm getting a link, it has all query params, but it just opens a home page without signing me in.

The URL looks like this:

https://DOMAIN/#access_token=TOKEN&expires_at=1722510619&expires_in=3600&refresh_token=TOKEN&token_type=bearer&type=recovery

We haven't changed any default settings, except the redirect:

supabase: {
  url: process.env.VITE_SUPABASE_URL,
  key: process.env.VITE_SUPABASE_ANON_KEY,
  redirect: false
}

Everything else works perfectly.

Any thoughts of what can it be?

Version

"@nuxtjs/supabase": "^1.3.5",
"@supabase/supabase-js": "^2.44.2",
"nuxt": "3.12.2"

[odynn-episki]

We are seeing the same issue when calling supabase.auth.resend({ type: 'signup });

The url looks just like your example too.

[andrei-nikic-co]

We still experiencing this issue, any updates on it?

[ryan-voitiskis]

Also experiencing this issue. Looks related to #216

[jaketig]

Also having this issue...

Turning on Debug mode reveals the following:

nuxt.config.js:

supabase: {
 clientOptions: {
      auth: {
        debug: true,
      },
    }
}

GoTrueClient@0 (2.64.4) 2024-08-22T01:51:47.779Z #_initialize() error detecting session from URL AuthPKCEGrantCodeExchangeError: Not a valid PKCE flow url.

Thrown from getSessionFromURL

[ryan-voitiskis]

Following a magic link {{ .ConfirmationURL }} sent from the supabase dashboard results in the /#access_token=TOKEN... redirect. This looks like the implicit flow.

_isPKCEFlow() returns false because params.code is undefined.

Using the 'Sign In with E-Mail' (supabase.auth.signInWithOtp()) on the playground sends a magic link with a 'pkce_' prefix on the token_hash, resulting in a successful sign in through the pkce flow.

I modified my supabase magic link email template to include this: <a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=magiclink">Log In</a> as described here: Signing in with Magic Link

I added this page to verify in my nuxt app: pages/auth/confirm.vue

<script setup lang="ts">
import type { EmailOtpType } from '@supabase/supabase-js'

const supabase = useSupabaseClient()
const route = useRoute()
const router = useRouter()

const verifyingOtp = ref(false)
const error = ref<string | null>(null)

onMounted(async () => {
    const token_hash = route.query.token_hash as string
    const type = route.query.type as EmailOtpType

    verifyingOtp.value = true
    try {
        const { error } = await supabase.auth.verifyOtp({ token_hash, type })
        if (error) throw error
        router.push('/')
    } catch (e) {
        console.error(isError(e) ? e.message : 'Error resetting password.')
    }
    verifyingOtp.value = false
})
</script>

<template>
    <div v-if="verifyingOtp">Verifying...</div>
    <div v-else-if="error">{{ error }}</div>
</template>

following a magic link sent from the supabase dashboard works using pkce flow now.

I was also able to authenticate when following a {{ .ConfirmationURL }} email link if it was triggered from the nuxt app with supabase.auth.resetPasswordForEmail()

[lukaszflorczak]

I have the same problem with email verification. I downgraded @nuxtjs/supabase to v1.2.x temporarily.

[lukaszflorczak]

@ryan-voitiskis Today, I tried your solution https://github.com/nuxt-modules/supabase/issues/397#issuecomment-2306476428, and it works with my sign-up flow! Thank you! ❤️