Implementing Phone Number Logins

Overview

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.

React Web

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

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

<CapsuleModal
  capsule={capsule}
  appName="YourAppName"
  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.

Web Javascript

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

  await capsule.logout();

  let userExists = false;

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

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

  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
};

React Native

// Code Snippet Coming Soon!

Flutter

// Code Snippet Coming Soon!

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