Phone Login

Introduction

Para supports phone number authentication, allowing users to verify their identity using SMS verification codes. This guide demonstrates how to implement a custom phone authentication flow with your own UI components.

Implementation Process

Follow these steps to implement custom phone authentication:

1. Check User Status

First, determine if the user already exists in your system:

const checkUserExists = async (phoneNumber: string) => {
  const isExistingUser = await para.checkIfUserExists({ phoneNumber });
  
  if (isExistingUser) {
    // Proceed with login flow for existing user
  } else {
    // Proceed with signup flow for new user
  }
};

For existing users, initiate the login process:

const loginExistingUser = async (phoneNumber: string) => {
  // Request SMS verification code to be sent
  await para.initiateUserLogin({ phoneNumber });
  
  // Proceed to verification step
};

3. Handle New User Registration

For new users, start the registration process:

const registerNewUser = async (phoneNumber: string) => {
  // Create new user with provided phone number
  await para.createUser({ phoneNumber });
  
  // SMS verification code will be sent
  // Proceed to verification step
};

4. Verify Phone Number and Complete Setup

After the user receives the SMS verification code:

const verifyAndCreateWallet = async (phoneNumber: string, verificationCode: string) => {
  try {
    // For new users:
    const setupUrl = await para.verifyPhoneNumber({ 
      phoneNumber, 
      verificationCode 
    });
    
    if (setupUrl) {
      // Open popup for passkey creation
      const popupWindow = window.open(setupUrl, "signUpPopup", "popup=true");
      
      // Wait for passkey setup and wallet creation
      await para.waitForPasskeyAndCreateWallet();
    }
    
    // For existing users:
    // const { needsWallet } = await para.verifyPhoneAndLogin({
    //   phoneNumber,
    //   verificationCode
    // });
    //
    // if (needsWallet) {
    //   await para.createWallet({ type: WalletType.EVM, skipDistribute: false });
    // }
    
    // Get user wallet information
    const wallets = Object.values(await para.getWallets());
  } catch (error) {
    // Handle verification errors
  }
};

Example

For a complete working example of custom email authentication with Para, check out our sample project:

Next Steps

After integrating Para, you can explore other features and integrations to enhance your Para experience.

Getting Started

Choose a Path

Project Setup

Go Live

How Para Works

Shared Guides

Migrations

Introduction

Implementation Process

1. Check User Status

3. Handle New User Registration

4. Verify Phone Number and Complete Setup

Example

Next Steps

​Introduction

​Implementation Process

​1. Check User Status

​2. Handle Existing User Login

​3. Handle New User Registration

​4. Verify Phone Number and Complete Setup

​Example

​Next Steps

Introduction

Implementation Process

1. Check User Status

2. Handle Existing User Login

3. Handle New User Registration

4. Verify Phone Number and Complete Setup

Example

Next Steps