How to Enable Magic Link Login in Supabase

1import { createClient } from '@supabase/supabase-js'
2
3const supabase = createClient(
4  process.env.NEXT_PUBLIC_SUPABASE_URL!,
5  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
6)
7
8async function sendMagicLink(email: string) {
9  const { data, error } = await supabase.auth.signInWithOtp({
10    email,
11    options: {
12      emailRedirectTo: 'https://your-app.com/auth/callback',
13      // Set to false to prevent creating new accounts
14      // shouldCreateUser: false,
15    },
16  })
17
18  if (error) {
19    console.error('Error sending magic link:', error.message)
20    return { success: false, error: error.message }
21  }
22
23  return { success: true, message: 'Check your email for the magic link!' }
24}

1// For Next.js App Router: src/app/auth/callback/route.ts
2import { createServerClient } from '@supabase/ssr'
3import { cookies } from 'next/headers'
4import { NextResponse } from 'next/server'
5
6export async function GET(request: Request) {
7  const { searchParams, origin } = new URL(request.url)
8  const code = searchParams.get('code')
9  const next = searchParams.get('next') ?? '/dashboard'
10
11  if (code) {
12    const cookieStore = await cookies()
13    const supabase = createServerClient(
14      process.env.NEXT_PUBLIC_SUPABASE_URL!,
15      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
16      {
17        cookies: {
18          getAll() { return cookieStore.getAll() },
19          setAll(cookiesToSet) {
20            cookiesToSet.forEach(({ name, value, options }) =>
21              cookieStore.set(name, value, options)
22            )
23          },
24        },
25      }
26    )
27
28    const { error } = await supabase.auth.exchangeCodeForSession(code)
29    if (!error) {
30      return NextResponse.redirect(`${origin}${next}`)
31    }
32  }
33
34  return NextResponse.redirect(`${origin}/login?error=auth_failed`)
35}

1// React component: MagicLinkLogin.tsx
2import { useState } from 'react'
3import { createClient } from '@supabase/supabase-js'
4
5const supabase = createClient(
6  process.env.NEXT_PUBLIC_SUPABASE_URL!,
7  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
8)
9
10export function MagicLinkLogin() {
11  const [email, setEmail] = useState('')
12  const [status, setStatus] = useState<'idle' | 'loading' | 'sent' | 'error'>('idle')
13  const [message, setMessage] = useState('')
14
15  async function handleSubmit(e: React.FormEvent) {
16    e.preventDefault()
17    setStatus('loading')
18
19    const { error } = await supabase.auth.signInWithOtp({
20      email,
21      options: {
22        emailRedirectTo: `${window.location.origin}/auth/callback`,
23      },
24    })
25
26    if (error) {
27      setStatus('error')
28      setMessage(error.message)
29    } else {
30      setStatus('sent')
31      setMessage('Check your email for a login link!')
32    }
33  }
34
35  if (status === 'sent') {
36    return <p>{message}</p>
37  }
38
39  return (
40    <form onSubmit={handleSubmit}>
41      <input
42        type="email"
43        value={email}
44        onChange={(e) => setEmail(e.target.value)}
45        placeholder="Enter your email"
46        required
47      />
48      <button type="submit" disabled={status === 'loading'}>
49        {status === 'loading' ? 'Sending...' : 'Send magic link'}
50      </button>
51      {status === 'error' && <p style={{ color: 'red' }}>{message}</p>}
52    </form>
53  )
54}

1# SMTP Settings in Dashboard > Authentication > SMTP Settings:
2#
3# Sender email: noreply@your-domain.com
4# Sender name: Your App Name
5# Host: smtp.resend.com (example for Resend)
6# Port: 465
7# Username: resend
8# Password: re_your_api_key
9#
10# Other popular SMTP providers:
11# SendGrid: smtp.sendgrid.net, port 587
12# Mailgun: smtp.mailgun.org, port 587
13# Amazon SES: email-smtp.us-east-1.amazonaws.com, port 587