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.
Magic Link Sign-Inโ
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โ
- The user enters their email address in the magic link form.
- 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.
- The user clicks the link in their email.
- 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.