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