Skip to main content

Magic Link Authentication 🔐

Magic Link authentication provides a passwordless way to authenticate users by sending a one-time login link to their email address. This method eliminates the need for users to remember passwords while maintaining security through email verification.

You can refer to the official Supabase documentation for more detailed information on magic link authentication.

✨ Features​

  • Passwordless Authentication: Users can sign in using only their email address.
  • One-Time Magic Links: Secure, single-use links are sent to users' email addresses.
  • Seamless User Experience: No need to remember or manage passwords.
  • Automatic Email Verification: Email verification is inherent in the magic link process.

⚙️ Configuration​

To enable magic link authentication, configure the environment variables in your .env file:

NEXT_PUBLIC_AUTH_MAGIC_LINK = true

🛠️ Implementation​

Below is the code example for implementing magic link authentication.

The magic link sign-in process involves the user entering their email address and receiving a login link. Example usage can be found in the apps/web/src/app/(front)/auth/magic-link/MagicLinkForm.tsx file:

import { useMagicLinkSignIn } from '@repo/auth/sign-in'

const { handleSignIn, error, isSuccess, ... } = useMagicLinkSignIn('email_redirect_to_url')

await handleSignIn({ email: 'user_email' })

User Flow​

  1. The user enters their email address in the magic link form.
  2. Upon submission:
    • For existing users: A one-time login link is sent to their email.
    • For new users: A sign-up email with a verification link is sent to their email address.
  3. The user clicks the link in their email.
  4. They are automatically signed in and redirected to the specified URL.

✅ Conclusion​

Magic link authentication offers a secure and user-friendly alternative to traditional password-based authentication. It simplifies the login process while maintaining security through email verification, making it an excellent choice for applications where user experience is a priority.