How to verify a password reset request using the otp code

In the docs (https://supabase.com/docs/reference/javascript/auth-resetpasswordforemail) The example states:

const { data, error } = await supabase.auth.updateUser({  password: new_password})

const { data, error } = await supabase.auth.updateUser({  password: new_password})

However how can I make the preliminary check asserting that the code is valid? I know for emails it's like this:

    const { error } = await supabaseSession.auth.verifyOtp({
      email: email,
      token: code,
      type: "email",
    });

    const { error } = await supabaseSession.auth.verifyOtp({
      email: email,
      token: code,
      type: "email",
    });

Is the correct approach something like this:

    const { error } = await supabaseSession.auth.verifyOtp({
      email: email,
      token: code,
      type: "recovery",
    });
    if (!error) {
      const { data, error } = await supabase.auth.updateUser({  password: new_password})
    }

    const { error } = await supabaseSession.auth.verifyOtp({
      email: email,
      token: code,
      type: "recovery",
    });
    if (!error) {
      const { data, error } = await supabase.auth.updateUser({  password: new_password})
    }

JavaScript: Send a password reset request | Supabase Docs

Supabase API reference for JavaScript: Send a password reset request

8 Replies

silentworks•2w ago

So verifyOtp will log you into your account as it works like a magic link and hen you provide the user with a form to enter their new password and call updateUser when that form is submitted. You can't be doing an updateUser based on no errors from verifyOtp as the new_password wouldn't have existed at that point. I have a repo here with examples with this auth flow along with a diagram explaining what I did above https://github.com/silentworks/supabase-by-example/tree/main?tab=readme-ov-file#reset-password-flow-in-server-side-rendering-ssr-environment

DespairOP•2w ago

Reading back my question, I understand that it appears that new_password is pulled out of a magic hat haha, so apologies for that In reality I just put a code snippet, but new_password would be coming from the same form alongside the token (XXX XXX) just like I do for the email verification. So the form itself ingests the code, email & password. Run the code against verify, if it validates then update the password. Is that correct?

silentworks•2w ago

It will likely fail as your sign in session will probably not be active by the time you decide to call updateUser.

DespairOP•2w ago

I see, so that is why you have a dedicated verify-token page on your example? Basically verify-token, then redirect to a password page? Is that it?

silentworks•2w ago

Yes that's correct. You can try the way you are suggesting and see if it works first.

DespairOP•2w ago

Alright give me a few minutes, I'll get back to you with my findings.

silentworks•2w ago

I'll probably be sleeping then, but I'll read all that you post here in the morning. It's 12:51am here.

DespairOP•2w ago

Doing it inline, the way I thought of appears to work, so I guess it's possible to hit both birds with one stone in this case

Gaming

Programming

How to verify a password reset request using the otp code

Did you find this page helpful?