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 #397 (comment), and it works with my sign-up flow! Thank you! ❤️

[vejja]

Implicit flow is broken with @supabase/ssr, which hard-codes 'pkce' as the only method.
Using

clientOptions: {
  auth: {
    flowType: 'implicit'
  }
}

will be ignored by Nuxt Supabase.

Because all actions initiated from the Supabase dashboard (e.g. send password recovery, send magic link, etc.) use the implicit flow, this module is currently not usable.