superbase auth email+phone and password

Developer Support
1

Based on my setup of plasmic headerless, I am looking for a flow where a user first logs in with their email and password, then enters their phone number, and finally verifies it via OTP.

Since I had already using Supabase to handle user authentication and updating the phone number in the Supabase users table through Plasmic, but I am not able manage the phone number verification

form research online i get some step to run but not able to run on interaction that show error of async and await can not be run and if i remove that await then show superbase not define
How i can define the superbase

these are the steps the i need to run
Send OTP for Phone Number Verification: After the user enters their phone number, you can use Supabase to send an OTP to verify it.

const { data, error } = await supabase.auth.verifyMobileNumber({
  phone: '+1234567890',  // The user's phone number with country code
  token_type: 'sms'      // Indicates that you're sending an OTP via SMS
});

if (error) {
  console.error("Error sending OTP:", error);
} else {
  console.log("OTP sent successfully");
}

Verify OTP: After the user receives the OTP, they input it into a verification field. Verify the OTP using:

const { data, error } = await supabase.auth.verifyOtp({
  phone: '+1234567890',  // User's phone number
  token: '123456'        // OTP entered by the user
});

if (error) {
  console.error("Error verifying OTP:", error);
} else {
  console.log("Phone number verified successfully");
}

Update User’s Phone Number in the Supabase Database: After verifying the phone number, update the user’s table to mark the phone number as verified.

const { data, error } = await supabase
  .from('users')
  .update({ phone_verified: true }) // Assuming there's a `phone_verified` field
  .eq('id', userId);  // Use user's unique ID

if (error) {
  console.error("Error updating user phone verification status:", error);
} else {
  console.log("User phone verification status updated successfully");
}

I’m able to update the user’s phone number in the Supabase user table by running data queries, but I’m unable to verify it. Is there another way to do this? I need both the email and phone number, and both must be verified.

2

Hello @paritosh_chhibber!

How i can define the superbase

There are a few ways you can achieve this:

  1. Create a global context that initializes Supabase client and provides it via context. You can read more about it here: Global Contexts | Learn Plasmic. You can then use it in your interactions. You could also register functions for OTP verification in your global context and utilize those in your interactions.
  2. Create a code component that handles OTP verification. Read more about code components here: Code components API reference | Learn Plasmic

not able to run on interaction that show error of async and await

The action should always be awaited if it returns a promise.