How to properly verify OTP for reauthentication to update password in Supabase?

[nicokempe]

Hi! I'm trying to update the user's password using supabase.auth.updateUser({ password }), but I correctly get the reauthentication_needed error. I'm triggering supabase.auth.reauthenticate() which sends the 6-digit OTP via email as expected.

However, I'm unsure how to verify the OTP correctly afterward. I've tried this:

await supabase.auth.verifyOtp({
  email,
  token, // the 6-digit code
  type: 'email' // also tried 'recovery' and 'magiclink'
});

But it always returns otp_expired or invalid, even immediately after receiving the code.

❗ My questions:

1. What is the correct type for verifying the OTP after reauthenticate()?
2. Is there a special flow or method required to complete the reauth and resume the updateUser() request?
3. Should I use verifyOtp, refreshSession, or something else to confirm the reauthentication?

Any working example or documentation link would be super helpful. Thank you! 🙏

[nicokempe]

More information about my environment:

Tech-Stack of my Nuxt (Type Script) project:

- Operating System: Windows_NT
- Node Version:     v22.14.0
- Nuxt Version:     3.16.2
- CLI Version:      3.24.1
- Nitro Version:    2.11.8
- Package Manager:  pnpm@10.7.0
- User Config:      compatibilityDate, future, preset, experimental, devtools, modules, serverMiddleware, tailwindcss, eslint, supabase, apollo, i18n, cloudflareAnalytics, turnstile, css, postcss, app, runtimeConfig, nitro, routeRules, security, typescript, build
- Runtime Modules:  @nuxt/devtools@2.3.2, @nuxt/scripts@0.11.5, @nuxt/eslint@1.3.0, @nuxt/test-utils/module@3.17.2, @nuxtjs/i18n@9.5.3, @nuxtjs/turnstile@0.9.16, @nuxtjs/tailwindcss@6.13.2, @nuxtjs/supabase@1.5.0, @nuxtjs/apollo@5.0.0-alpha.14, nuxt-security@2.2.0, nuxt-headlessui@1.2.0, nuxt-cloudflare-analytics@1.0.8, motion-v/nuxt@0.10.

Minimal reproduction:

<script setup lang="ts">
const supabase = useSupabaseClient();
const user = useSupabaseUser();
const form = ref({ newPassword: '', confirmPassword: '', otp: '' });
const showOtp = ref(false);

const submit = async (isReauthDone = false) => {
  const { newPassword, confirmPassword } = form.value;

  if (newPassword !== confirmPassword) {
    alert('Passwords do not match');
    return;
  }

  const { error } = await supabase.auth.updateUser({ password: newPassword });

  if (error?.code === 'reauthentication_needed' && !isReauthDone) {
    await supabase.auth.reauthenticate();
    showOtp.value = true;
    return;
  }

  if (error) {
    console.error(error);
    alert('Update failed');
    return;
  }

  alert('Password updated!');
};

const verifyOtp = async () => {
  const { error } = await supabase.auth.verifyOtp({
    email: user.value?.email,
    token: form.value.otp,
    type: 'email', // tried "recovery" and others too
  });

  if (error) {
    console.error('OTP Error:', error);
    alert('OTP invalid or expired');
    return;
  }

  // Optional: try refreshing session?
  await supabase.auth.refreshSession();
  await submit(true);
};
</script>

<template>
  <div class="p-8 text-white">
    <h1 class="text-xl font-bold">Update Password</h1>
    <input v-model="form.newPassword" placeholder="New password" type="password" class="block mt-4 p-2 bg-neutral-800 w-full rounded" />
    <input v-model="form.confirmPassword" placeholder="Confirm password" type="password" class="block mt-2 p-2 bg-neutral-800 w-full rounded" />

    <button @click="submit()" class="mt-4 bg-primary-500 text-sm px-4 py-2 rounded">Update</button>

    <div v-if="showOtp" class="mt-6 bg-white/5 p-4 rounded">
      <p class="text-sm mb-2">Enter OTP sent to your email:</p>
      <input v-model="form.otp" maxlength="6" class="block w-full p-2 bg-neutral-800 rounded" />
      <button @click="verifyOtp" class="mt-2 bg-primary-500 text-sm px-4 py-2 rounded">Verify & Continue</button>
    </div>
  </div>
</template>

[ssunil3232]

I am facing the same issue

[chrhi]

mw too i am facing the same issue

[vinumzz]

@nicokempe @ssunil3232 @chrhi

After sending the OTP with supabase.auth.reauthenticate you need to update the password like this:

const { data: result, error } = await supabase.auth.updateUser({
  password: theNewPassword,
  nonce: theOtpFromTheEmail,
});

Hope this helps :)

[Bryson14]

i still don't think this helps. This makes it seem like re authentication is just for setting a new password, but in reality i want to use re authentication to send a OTP before the user makes permanent changes to their account and data.

[nicokempe]

Now also updated for the documentation, thanks @vinumzz! ➜ #35206