Search code examples
reactjsnext.jstwiliosupabase

Supabase Update Mobile Phone of User Account


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 :/


Solution

  • 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.