Email Magic Link Authentication
Email magic link authentication is a two-step process:
- The user enters their email address and requests a magic link
- The user clicks the link in their email, which redirects them back to your application to complete authentication
Email OTP has been shown to have up to a 3x higher conversion rate and a 10-second faster flow compared to magic links. Consider using Email OTP for better user experience.
You can implement Email Magic Link 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 Magic Link 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 Magic Link in UI Components
After adding the components, configure the Email Magic Link authentication in your application config:
Email Magic Link 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 Magic Link authentication using Account Kit hooks.
Step 1: Send the Magic Link
First, prompt your user for their email address and send a magic link:
Step 2: Handle the Redirect
When the user clicks the magic link in their email, they’ll be redirected back to your application. You need to extract the authentication bundle from the URL and complete the authentication:
Step 3: Track Authentication Status
Use the useSignerStatus
hook to determine if the user is authenticated:
Next Steps
Add Authenticator App (TOTP) Verification (Optional)
Consider enabling Multi-Factor Authentication to require users to enter a 6-digit TOTP code from their authenticator app after clicking the magic link. This extra layer of security protects user accounts if their email is compromised.