How to handle redirect from supabase password recovery?

Question

I can't figure out how I can create a custom supabase url to recover the password:

current url in the mail:

https://url.supabase.co/auth/v1/verify?token=XYZ&type=recovery&redirect_to=https://example.vercel.app/

expected url:

https://url.supabase.co/auth/v1/verify?token=XYZ&type=recovery&redirect_to=https://example.vercel.app/recover

---

approaches:

1. Use supabase config

• I just tried out to add the https:example.../recover url inside the Additional redirect URLs-Settings.

• Seems that redirectTo works only for auth.signIn()

• Got an error if I pass it to the auth.api.resetPasswordForEmail(), like: `await supabase.auth.api.resetPasswordForEmail({ email }, { redirectTo: 'http://localhost:3000/recover' })

• error:

Could not read verification params: json: cannot unmarshal object into Go struct field RecoverParams.email of type string

2. use onAuthStateChange

• I can see the current user state after clicking the reset password link in the email

• But I can't redirect the user. The event logs a SIGNED_IN and then a PASSWORD_RECOVERY event, like discussed in this thread

3. use a middleware

• I am trying to use a middleware to redirect the user based on the full path of the url, but my url ends with https://example.vercel.app/ and so I got no indication of the recovery type

---

What would you suggest?

I am using Nuxt 3, Vercel and Supabase

Answer 1

Thanks for the question. Based on the documentation you should be able to use the redirectTo flag withresetPasswordForEmail as well.

Based on the docs you might want to try doing

supabase.auth.api.resetPasswordForEmail('myspecialemail@supabase.com', { redirectTo: 'https://myspecialwebsite/redirect' })

rather than

supabase.auth.api.resetPasswordForEmail({ email }, { redirectTo: 'http://localhost:3000/recover' })

The key difference here is that email is passed in as a string param rather than an object -- it might be clearer if you refer directly to the source

I'm not sure of the exact use case but you can also take a look at generating a custom link via the admin endpoint

Hope this helps in some way