Skip to main content

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

​
2. Handle Existing User Login

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:
Custom Phone Authentication Example

Custom Phone Authentication Example

Explore a full implementation of custom email authentication using React and Next.js.

​
Next Steps

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

EVM Integration

Learn how to use Para with EVM-compatible libraries like ethers.js, viem, and wagmi.
Solana Integration

Solana Integration

Discover how to integrate Para with solana-web3.js.
Cosmos Integration

Cosmos Integration

Explore Para integration with Cosmos ecosystem using CosmJS, Cosmos Kit, and Graz.