I am using Supabase, and want my users to have a phone number tied to there user account.
Using the Supabase API, it seems quite difficult to achieve this outcome.
I'm currently getting an error that is like the below
PUT https://xxx.supabase.co/auth/v1/user 500
Error caught: duplicate key value violates unique constraint "identities_pkey"
Upon using this code, building off of the github example from supabase https://github.com/vercel/nextjs-subscription-payments/tree/main
Essentially this code
try {
//@ts-ignore
let { data, error } = await supabaseClient.auth.updateUser({
phone: phoneNumber.formatInternational(),
});
if (error) {
throw error;
} else {
console.log("Update success, redirecting");
router.push("/account");
setSuccess("Mobile number updated successfully!");
console.log("user new updated:", user, "data:", data);
}
} catch (error: unknown) {
if (error instanceof Error) {
if (
error.message.includes("duplicate key value violates unique constraint")
) {
setError("This phone number is already in use.");
} else {
setError("Error updating user mobile number: " + error.message);
}
setIsModalOpen(true);
console.log("Error caught: ", error.message);
} else {
console.log("Error caught: ", error);
}
} finally {
setLoading(false);
}
Is not working.
this is the form
<div className="rounded-md shadow-sm -space-y-px ">
<div className="grid grid-cols-12 gap-4 mb-4 items-center">
<div className="col-span-4">
<label
htmlFor="country-code"
className="block text-sm font-medium text-gray-700"
>
Country
</label>
<select
id="country-code"
name="country-code"
value={selectedCountryCode.dial_code}
onChange={handleCountryCodeChange}
className="mt-1 block font-medium text-gray-700 w-full pl-3 pr-10 py-2 text-base px-3 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
>
{countryCodes.map((code, index) => (
<option key={index} value={code.dial_code}>
{code.dial_code} {code.code}
</option>
))}
</select>
</div>
<div className="col-span-8">
<label
htmlFor="phone-number"
className="block text-sm font-medium text-gray-700"
>
Phone Number
</label>
<input
id="phone-number"
name="phone-number"
type="tel"
autoComplete="tel"
required
className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="Phone number"
value={mobileNumber}
onChange={handleMobileNumberChange}
/>
</div>
</div>
</div>
Essentially - I am trying to save a mobile phone number and save it in supabase with the user details. This isn't working. Not sure why :/
Unfortunately I can't comment, that's why I have to write my observation here as an answer.
The unique constraint that gets validated is identities_pkey
which is defined on the auth.identities
table as
constraint identities_pkey primary key (provider, id),
with provider being email or phone and the id the user_id.
If you have the phone provider enabled and the option "Enable phone confirmations" enabled in the authentication settings, if you add a new phone number to a user, supabase will create a new entry in the auth.identities table.
I would check the auth.identities
table for entries for your user where you are trying to update the phone number.
I'm running version 15.1.0.37 and was always able to update the phone number freely and could not reproduce the error you are experiencing.
Somebody also posted an issue that seems related last week https://github.com/supabase/supabase/issues/15047, couldn't reproduce that either though with the version mentioned above.