supabase
supabase copied to clipboard
nuxt-modules
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.
Any workaround or fix yet?
no none yet. Do you have a solution?
No and mine just got worse. Just noticed session doesn't refresh. Once it dies user is sent back to login page. Even while using the app.
Any workaround or fix yet?
no none yet. Do you have a solution?
No and mine just got worse. Just noticed session doesn't refresh. Once it dies user is sent back to login page. Even while using the app.
Ok now I switched to the new flow. I mean the login / confirm flow. And it's a bit better. Auth only dies some times. But reset still doesn't work.
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?
@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.
isn't it because In order to use the updateUser() method, the user needs to be signed in first?
https://supabase.com/docs/reference/javascript/auth-updateuser
@chz8494 When going through the password reset flow, the user is not logged in, but will temporarily be identified by a code that's in the URL as a parameter when they click through from the 'password forgotten' email. This allows the use of updateUser() as well.
Is there anyone here who has been able to successfully implement forgot password flow with this package?
Please share how you were able to achieve it?
Thanks
@chz8494 When going through the password reset flow, the user is not logged in, but will temporarily be identified by a code that's in the URL as a parameter when they click through from the 'password forgotten' email. This allows the use of
updateUser()as well.
I know the temp token supposed to give user who clicked reset link a temp access so that updateUser() can be called. But I don't think this is working, and that's why we are seeing Auth session missing!
Mine actually just started working now, user can get tokens and session after clicking reset link
@chz8494 please share a repo.
I got it to work today, but just once for one user. after that it doesn't work for any user including the one that worked before.
I can confirm, password reset works only in the same browser-device for me. Password link get sent, as long as I open for example Gmail, then click on the link in the same browser window it works. When I change device to click on the link in my email or on another browser on same device, I get the same Auth Session Error... Very bad indeed. Maybe I will open PR to fix this soon. This is definitely a bug in the package.
Using newest package versions: "@nuxtjs/supabase": "1.1.6", "nuxt": "^3.9.3",
I'm getting the same error about the auth session missing. This is unacceptable. The documentation for this nuxt module is awful.
Edit: Nevermind. My issue was that I was using the password reset email even for logged in users. It would send the email, then log the user out, then redirect them to the home page. Logging the user out was deleting all the cookies, including the one set by the resetPasswordForEmail one.
