Implementing Phone Number Logins


Capsule supports the use case of Phone Number login for end-users using the Twilio API. Capsule automatically links wallets with a unique phone number identifier to avoid creating duplicate wallets if users choose different methods in different sessions.

NOTE: You'll need to be on @usecapsule-web-sdk@1.13.0+ and @usecapsule/react-sdk@3.7.0+ to use phone number logins.

Integrating Phone Number Logins

Capsule Modal

Phone Number Logins can be easily integrated directly via the CapsuleModal Component.

import { CapsuleModal, Environment } from "@usecapsule/web-sdk";

const capsule = new Capsule(Environment.BETA, YOUR_API_KEY);

  disablePhoneLogin={false} // This is by default false, but you have the option to not include phone auth in the modal if you wish

Custom UI Entrypoint For developers preferring manual control over launching an authentication process or leveraging a custom implementation, the following can be used as a guide to initiate Phone Number login and setup flows.

// Function to handle phone number submission and verification
const handleSubmitPhone = async (phone, countryCode) => {
  if (!phone) {
    console.error('Phone is required!');

  await capsule.logout();

  let userExists = false;

  try {
    userExists = await capsule.checkIfUserExistsByPhone(phone, countryCode);
  } catch (error) {
    console.error('Phone number is not valid!');

  if (userExists) {
    const webAuthUrlForLogin = await capsule.initiateUserLoginForPhone(phone, countryCode);

  await capsule.createUserByPhone(phone, countryCode);

// Function to verify phone number with the code
const handleVerifyPhone = async (code) => {
  const url = await capsule.verifyPhone(code);
  // Proceed with biometric creation/login as usual

As always, if you need further help please feel free to reach out to us directly or get in touch at We're always excited to hear feedback!

Last updated