Email OTP Authentication
Email OTP (One-Time Password) authentication is a two-step process:
- The user enters their email address and requests a verification code
- The user enters the 6-digit code they receive in their inbox to complete authentication
You can implement Email OTP authentication in two ways:
- Pre-built UI Components - Quick implementation with minimal code
- Custom UI - Complete control over the user experience
Pre-built UI Components
Account Kit provides pre-built UI components that handle the entire Email OTP authentication flow with minimal code.
Step 1: Add Authentication Components to Your Page
Before configuring your authentication, first add one of the pre-built components to your application:
Using Modal Authentication
To add authentication in a modal popup:
For more details on modal configuration, see the Modal Authentication documentation.
Or:
Using Embedded Authentication
To embed authentication directly in your page:
For more details on embedded authentication, see the Embedded Authentication documentation.
Step 2: Configure Email OTP in UI Components
After adding the components, configure the Email OTP authentication in your application config:
To customize the Email OTP authentication experience in your pre-built components, configure the UI as follows:
Email OTP configuration accepts the following options:
You can find the full type definition in the Account Kit source code.
For more details on UI component customization, see the UI Components documentation.
Custom UI
If you need complete control over the user experience, you can implement your own custom UI for Email OTP authentication using Account Kit hooks.
Step 1: Send the OTP
First, prompt your user for their email address and send an OTP:
Step 2: Show OTP Input on Status Change
Use the useSignerStatus
hook and AlchemySignerStatus
enum to react to status changes:
Step 3: Verify the OTP
Once the user receives the code, they’ll enter it in your application:
Step 4: Check authentication status
Use the useSignerStatus
hook to determine if the user is authenticated:
Next Steps
Add Authenticator App (TOTP) Verification (Optional)
If you’d like to add a second security step to Email OTP, you can enable Multi-Factor Authentication. This prompts users for a 6-digit TOTP code from their authenticator app (e.g. Google Authenticator, Authy) after they verify their email.