Phone Number Logins

​

Overview

Capsule SDK provides support for phone number-based authentication, leveraging the Twilio API to enable a seamless login experience for your users. This feature allows you to implement a robust authentication system that links user wallets with unique phone number identifiers, preventing duplicate wallet creation across different login sessions.

​

Integration Methods

Capsule SDK offers two primary methods for integrating phone number logins:

1. Using the pre-built Capsule Modal
2. Implementing a custom UI with manual control

​

Method 1: Capsule Modal

For a quick and easy integration, you can use the CapsuleModal component. This pre-built solution handles the entire login flow, including phone number input and verification.

​

Method 2: Custom UI Implementation

For developers who prefer more control over the authentication process or need to implement a custom UI, you can use the following guide to create your own phone number login and setup flows.

// Function to handle phone number submission
const handleSubmitPhone = async (phone, countryCode) => {
  await capsule.logout();

  let userExists = false;

  userExists = await capsule.checkIfUserExistsByPhone(phone, countryCode);

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

  await capsule.createUserByPhone(phone, countryCode);
};

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

This implementation provides granular control over the login process:

1. The handleSubmitPhone function manages phone number submission, checking if the user exists, and initiating the appropriate login or user creation flow.
2. The handleVerifyPhone function handles the verification of the phone number using the received code.