supabase: Auth session missing on password reset flow

Version

@nuxtjs/supabase: “^1.0.2” nuxt: “^3.7.0”

After one successful password reset, I am unable to reset password of either the same user or other users. I get a failed to fetch error on the client and Auth session missing error on the console.

forgot p[password code

const client = useSupabaseClient()
const { error }  = await client.auth.resetPasswordForEmail(email.value, {
    redirectTo: `${useRuntimeConfig().public.baseUrl}/auth/new-password`    
  })

new password code

const client = useSupabaseClient()
 const { error }  = await client.auth.updateUser({
    password: password.value
  })
  await client.auth.signOut()

Anyone able to complete this flow successfully?

Steps to reproduce

On redirect from supabase to the new-password page, this is the error on the console. When user enters the new password and submits, user receives a failed to fetch error and below is error shows on the console.

What is Expected?

User will be able to go through entire flow and reset their password

What is actually happening?

User unable to complete flow. Flow worked once and after that has been failing with the errors as shown above.

About this issue

Original URL
State: open
Created 10 months ago
Reactions: 1
Comments: 15

Most upvoted comments

I’m having the same problem. It’s not a very good sign that this breaks while trying Supabase for the first time 😓

Versions:

"nuxt": "^3.7.3"
"@nuxtjs/supabase": "^1.1.0"

I’ve tried both the SPA and the SSR route. Both give the same error. https://supabase.com/docs/guides/auth/auth-password-reset

SPA

reset.vue

const supabase = useSupabaseClient()
const email = ref('')
const redirectTo = `${useRuntimeConfig().public.absoluteBaseUrl}/account/manage`

const resetPassword = async () => {
  const { error, data } = await supabase.auth.resetPasswordForEmail(email.value, { redirectTo })
  if (data) {
    console.log(data)
  }
  if (error) {
    console.log(error)
  }
}

manage.vue:

const supabase = useSupabaseClient()
await supabase.auth.updateUser({ password: 'something' }).then((result) => {
  console.log(result)
})

Interestingly I get this console error:

Failed to load resource: the server responded with a status of 403 ()
https://<id>.supabase.co/auth/v1/token?grant_type=pkce"

{
  code: 403
  msg: "code challenge does not match previously saved code verifier"
}

And this error log indicating a missing ‘auth’:

AuthSessionMissingError: Auth session missing!
    at http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-KGNBDVEI.js?v=59e0fd59:1547:17
    at SupabaseAuthClient._useSession (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-KGNBDVEI.js?v=59e0fd59:1440:20)
    at async SupabaseAuthClient._updateUser (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-KGNBDVEI.js?v=59e0fd59:1541:14)
    at async http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-KGNBDVEI.js?v=59e0fd59:1536:14
    at async http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-KGNBDVEI.js?v=59e0fd59:1393:18

SSR

reset.vue

const supabase = useSupabaseClient()
const email = ref('')
const redirectTo = `${useRuntimeConfig().public.absoluteBaseUrl}/api/auth/callback?to=/account/manage`

const resetPassword = async () => {
  loading.value = true

  const { error, data } = await supabase.auth.resetPasswordForEmail(email.value, { redirectTo })
  if (data) {
    console.log(data)
  }
  if (error) {
    console.log(error)
  }
}

callback.js in /server/api/auth

import { serverSupabaseClient } from '#supabase/server'
export default eventHandler(async (event) => {
  console.log('api callback..')
  const code = event.context.params.code
  const to = event.context.params.to
  const supabase = await serverSupabaseClient(event)
  
  // call the Supabase API to exchange the code for a session
  await supabase.auth.exchangeCodeForSession(code)

  console.log('redirecting you now to ' + to)
  return sendRedirect(event, to, 301)
})

Error on server-side:

  {
  "url": "[/api/auth/callback?code=c90c5bfd-423b-47af-af47-3571c0f87995&to=%2Faccount%2Fmanage](http://localhost:3000/api/auth/callback?code=c90c5bfd-423b-47af-af47-3571c0f87995&to=%2Faccount%2Fmanage)",
  "statusCode": 400,
  "statusMessage": "",
  "message": "invalid request: both auth code and code verifier should be non-empty",
  "stack": "<pre><span class=\"stack internal\">at handleError (C:\\Users\\me\\projects\\x\\node_modules\\@supabase\\gotrue-js\\src\\lib\\fetch.ts:49:9)</span>\n<span class=\"stack internal\">at process.processTicksAndRejections (node:internal/process/task_queues:95:5)</span>\n<span class=\"stack internal\">at _handleRequest (C:\\Users\\me\\projects\\x\\node_modules\\@supabase\\gotrue-js\\src\\lib\\fetch.ts:128:5)</span>\n<span class=\"stack internal\">at _request (C:\\Users\\me\\projects\\x\\node_modules\\@supabase\\gotrue-js\\src\\lib\\fetch.ts:95:16)</span>\n<span class=\"stack internal\">at SupabaseAuthClient._exchangeCodeForSession (C:\\Users\\me\\projects\\x\\node_modules\\@supabase\\gotrue-js\\src\\GoTrueClient.ts:502:29)</span></pre>"
  }

What is this auth session? And how can I make this work?

ErwinAI on Sep 17, 2023

@silentworks had a good comment in another repo: this auth flow (PKCE) only works if you open the link on the same browser/device because it uses cookies.

Unfortunately, that issue is now closed. And I have tried to make this work with the same browser+device. This leaves me to think that this issue is with this module and the way it handles that cookie.

ErwinAI on Sep 17, 2023