Email Verification using Magic Link

BuilderKit provides a secure and user-friendly way to implement email verification using magic links. This method eliminates the need for passwords and enhances the user experience by simplifying the verification process.

Key features:

• Displays a form for users to enter their email address
• Handles form submission and triggers the magic link sending process
• Shows error messages or success messages based on the operation result

Prerequisites

Before you start, ensure you have the following:

• A BuilderKit project set up
• A Resend account for sending emails
• Environment variables properly configured

Configuration

1. Generate a secure JWT_SECRET_KEY (this is required to create a secure hash that is used to verify the magic link url):

   To create a strong JWT_SECRET_KEY, you can use a cryptographically secure random string generator. Here are two methods:

   a. Using OpenSSL (recommended for production):

   openssl rand -base64 32

   b. Using Node.js (good for development):

   node -e "console.log(require('crypto').randomBytes(32).toString('base64'));"

   The output will be a random string. Use this as your JWT_SECRET_KEY.

2. Set up the necessary environment variables in your .env file:

   JWT_SECRET_KEY=your_generated_jwt_secret_key
   RESEND_API_KEY=your_resend_api_key

   Make sure to replace the placeholder values with your actual secret key, app URL, and Resend API key.

3. Setup email integration with resend. Follow the documentation (opens in a new tab) for step by step process.

Implementation

• The email verification page is implemented and live in /email-verification page. This page allows users to enter their email address and request a magic link.
• The codebase uses Resend (opens in a new tab) to send emails to the entered email id.
• Once the user clicks on the magic link in the email it redirects the user to /email-verification/verify page. This page verifies the magic link and create a session for the user.

You can update any section or feature if required visiting the same file.

Security Considerations

1. JWT Secret Key: Ensure that your JWT secret key is kept secure and not exposed in your codebase or client-side scripts. Regularly rotate this key in production environments.

2. Token Expiration: The JWT tokens are set to expire after 1 hour. Adjust this duration based on your security requirements.

3. HTTPS: Always use HTTPS in production to encrypt the magic links in transit.

4. Rate Limiting: Consider implementing rate limiting on the magic link generation to prevent abuse.

Customization

You can customize various aspects of the email verification process:

1. Email Template: Modify the email content in the sendMagicLink function to match your branding and messaging.

2. Token Expiration: Adjust the expiresIn option in the generateJWT function to change the token expiration time.

3. Error Messages: Customize error messages in the EmailVerification and Verify components to provide more specific feedback to users.

Troubleshooting

1. If emails are not being sent, check your Resend API key and sender email configuration.

2. Ensure that your app's URL is correctly set in the APP_URL environment variable for proper magic link generation.

3. If verification fails, check that the JWT_SECRET_KEY is consistent across your development and production environments.