Para’s SDK enables you to implement custom email-based authentication flows in your application. This guide demonstrates how to create a complete email verification and wallet creation flow with your own UI components.
It’s not recommended to create a custom UI but instead use Para’s ParaModal component for a fully managed authentication experience. However, if you need to implement a custom flow, this guide will help you set it up.

​
Implementation Process

​
1. Check User Status

First, determine if the user already exists in your system: 
const checkUserExists = async (email: string) => {
  const isExistingUser = await para.checkIfUserExists({ email });
  
  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 (email: string) => {
  // Generate authentication URL for login
  const webAuthUrlForLogin = await para.initiateUserLogin({ 
    email, 
    useShortUrl: false 
  });
  
  // Open authentication popup
  const popupWindow = window.open(webAuthUrlForLogin, "loginPopup", "popup=true");
  
  // Wait for login completion and wallet setup
  const { needsWallet } = await para.waitForLoginAndSetup({ popupWindow });
  
  // Create wallet if needed
  if (needsWallet) {
    await para.createWallet({ type: WalletType.EVM, skipDistribute: false });
  }
  
  // Get user wallet information
  const wallets = Object.values(await para.getWallets());
};

​
3. Handle New User Registration

For new users, start the registration process: 
const registerNewUser = async (email: string) => {
  // Create new user with provided email
  await para.createUser({ email });
  
  // User will receive verification email
  // Proceed to verification step
};

​
4. Verify Email and Complete Setup

After the user receives the verification code, complete the setup: 
const verifyAndCreateWallet = async (verificationCode: string) => {
  // Verify email with code from user's inbox
  const setupUrl = await para.verifyEmail({ 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();
    
    // Get user wallet information
    const wallets = Object.values(await para.getWallets());
  }
};

​
Example

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

Custom Email 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.