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:
Next Steps
After integrating Para, you can explore other features and integrations to enhance your Para experience.
