> ## Documentation Index > Fetch the complete documentation index at: https://docs.getpara.com/llms.txt > Use this file to discover all available pages before exploring further. # Phone Login > Implementing custom phone number authentication with Para export const Card = ({imgUrl, iconUrl, fontAwesomeIcon, title, description, href, horizontal = false}) => { return
{ e.currentTarget.style.background = "linear-gradient(45deg, #FF4E00, #874AE3)"; }} onMouseOut={e => { e.currentTarget.style.background = "#e5e7eb"; }}> {(imgUrl || iconUrl) &&
{imgUrl && {title}} {(iconUrl || fontAwesomeIcon) &&
{title}
}
}
{title &&

{title}

} {description &&

{description}

}
; }; export const Link = ({href, label}) => { e.currentTarget.querySelector("#underline").style.height = "2px"; }} onMouseLeave={e => { e.currentTarget.querySelector("#underline").style.height = "1px"; }}> {label} ; ## 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: ```typescript theme={null} 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: ```typescript theme={null} 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: ```typescript theme={null} 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: ```typescript theme={null} 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.