Error when Verifying OTP for Email Change - User not found (Supabase)

[abiddraws]

Discussed in https://github.com/orgs/supabase/discussions/18072

^{Originally posted by abiddraws October 10, 2023}
Description:
I am encountering an issue while trying to verify an OTP for an email change operation using Supabase. Here is the code snippet that I am using:

"use client";
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
import { useState } from "react";

export default function EmailChange() {
  const supabase = createClientComponentClient();

  const [email, setEmail] = useState("");
  const [otp, setOtp] = useState("");
  const [otpSent, setOtpSent] = useState(false);

  const handleSendOTP = async (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    e.stopPropagation();
    const { data, error } = await supabase.auth.updateUser({ email });

    if (error) {
      console.log("Error from updateEmail ", JSON.stringify(error));
    } else {
      console.log("Email updation success ", JSON.stringify(data));
      setOtpSent(true);
    }
  };

  const handleVerifyOTP = async (e: React.MouseEvent<HTMLButtonElement>) => {
    console.log("Call receives...");
    e.preventDefault();
    e.stopPropagation();

    const { data, error } = await supabase.auth.verifyOtp({
      token: otp,
      type: "email_change",
      email,
    });

    if (error) {
      console.log(JSON.stringify(error));
    }
    if (data?.user) {
      alert(`OTP ${otp} verified successfully!`);
    }
  };

  return (
    <div className="max-w-md mx-auto p-6 border rounded-lg shadow-lg mt-10 bg-gray-50">
      <h2 className="text-2xl font-bold mb-4">OTP Verification</h2>

      <div className="mb-4">
        <label className="block text-gray-600">Email Address:</label>
        <input
          type="email"
          placeholder="Enter your email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="w-full p-2 border rounded-md focus:outline-none focus:ring focus:border-blue-300"
        />
      </div>

      {!otpSent ? (
        <button
          onClick={handleSendOTP}
          className="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-300"
        >
          Send OTP
        </button>
      ) : (
        <div>
          <div className="mb-4">
            <label className="block text-gray-600">Enter OTP:</label>
            <input
              type="text"
              placeholder="Enter OTP"
              value={otp}
              onChange={(e) => setOtp(e.target.value)}
              className="w-full p-2 border rounded-md focus:outline-none focus:ring focus:border-blue-300"
            />
          </div>
          <button
            onClick={handleVerifyOTP}
            className="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-300"
          >
            Verify OTP
          </button>
        </div>
      )}
    </div>
  );
}

Issue:
I have successfully sent an OTP to the provided email, but when I attempt to verify the token, I receive the following error:
{"name":"AuthApiError","message":"User not found","status":404}

I am confident that the OTP I entered is correct. When I check the Supabase logs, I see the following entry:
{"component":"api","error":"redirect user","level":"info","method":"POST","msg":"404: User not found","path":"/verify","referer":"localhost:3000","remote_addr":"86.98.6.1","time":"2023-10-10T10:25:46Z","timestamp":"2023-10-10T10:25:46Z"}

Steps Taken:
I have verified that the OTP I entered is correct.
I have ensured that the email address I provided matches the one to which the OTP was sent.
I have checked my Supabase configuration and API settings, but I am still encountering this issue.

Request for Assistance:
I am seeking help to understand and resolve this "User not found" error when verifying the OTP for email change in my Supabase application. Any guidance or suggestions would be greatly appreciated. Thank you!

[abiddraws]

This is a bug specific to the scenario when a signed user attempts to change their email address. The issue occurs during the email change process and does not affect the signup procedure. During the signup process, users receive an OTP and can verify it successfully. However, when changing their email with the type: "email_change" parameter, this problem arises. It's important to note that email changes work as expected when verified using a link, but the issue occurs when using OTP for verification

Reproducing the issue is possible by using the code I provided above