Error when Verifying OTP for Email Change - User not found (Supabase) #1713
Description
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!