Magic Link Authentication

What is Magic Link?

Magic Link is a secure and user-friendly authentication method that simplifies the login process by sending users a unique link via email. Instead of relying on traditional passwords, Magic Link allows users to access their accounts by clicking on the provided link, eliminating the need to remember and manage passwords.

Benefits of Magic Link Authentication

• Simplicity: Users can log in with a single click, reducing friction and enhancing the user experience.

• Security: Magic Links are time-sensitive and unique to each login attempt, adding an extra layer of security to the authentication process.

• No Password Hassles: Eliminates the need for users to remember and manage passwords, reducing the likelihood of forgotten passwords and password-related issues.

Enabling Magic Link Authentication in Full-Stack-Kit

To allow users to authenticate to your app using Magic Link, follow these steps in Full-Stack-Kit:

1. Open the /app/app.config.ts file.

2. Enable the auth.providers.email provider by setting enabled to true:

   /app/app.config.ts

   auth: {
     providers: {
       email: {
         enabled: true,
       },
     },
     // ... other configuration options
   },

3. Save the file.

Setting up Email Server for Magic Link Authentication

To set up Resend.com, follow these steps:

1. Create a free account at Resend.com (opens in a new tab).

2. Once you've created your account, login to your Resend.com dashboard

3. Click on the API Keys tab.

4. Create and Copy your API Key.

5. Open the .env.local file.

6. Find the # Resend section and paste your API Key as the value of the RESEND_API_KEY variable:

# Resend
RESEND_API_KEY=your_api_key

7. Save the file.

Testing Magic Link Authentication

To test Magic Link authentication, follow these steps:

1. Go to the login page of your app.
2. Enter your email address and click on the Sign In With Email button.
3. Check your email inbox for the Magic Link email.
4. Click on the Magic Link in the email.
5. You should be logged in to your app.

Now your app is ready to authenticate user using Magic Link. If you have any questions or run into issues, refer to the documentation or reach out to our community for assistance.