Supabase Magic Link: Passwordless Authentication Guide

// MagicLinkLogin.jsx
import { useState } from 'react'
import { supabase } from './supabaseClient'

function MagicLinkLogin() {
  const [email, setEmail] = useState('')
  const [loading, setLoading] = useState(false)
  const [sent, setSent] = useState(false)
  const [error, setError] = useState(null)

  async function handleMagicLink(e) {
    e.preventDefault()
    setLoading(true)
    setError(null)

    const { data, error } = await supabase.auth.signInWithOtp({
      email: email,
      options: {
        // URL to redirect after clicking magic link
        emailRedirectTo: `${window.location.origin}/dashboard`
      }
    })

    setLoading(false)

    if (error) {
      setError(error.message)
      return
    }

    setSent(true)
  }

  if (sent) {
    return (
      <div className="magic-link-sent">
        <h2>Check Your Email</h2>
        <p>We sent a magic link to <strong>{email}</strong></p>
        <p>Click the link in the email to log in.</p>
        <button onClick={() => setSent(false)}>Send Another Link</button>
      </div>
    )
  }

  return (
    <div className="magic-link-form">
      <h2>Log In with Magic Link</h2>
      <p>Enter your email to receive a login link</p>
      <form onSubmit={handleMagicLink}>
        <input
          type="email"
          placeholder="[email protected]"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        {error && <p className="error">{error}</p>}
        <button type="submit" disabled={loading}>
          {loading ? 'Sending...' : 'Send Magic Link'}
        </button>
      </form>
    </div>
  )
}

export default MagicLinkLogin

// App.jsx - Handle magic link callback
import { useEffect } from 'react'
import { supabase } from './supabaseClient'
import { useNavigate } from 'react-router-dom'

function App() {
  const navigate = useNavigate()

  useEffect(() => {
    // Listen for auth state changes
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      async (event, session) => {
        if (event === 'SIGNED_IN') {
          console.log('User signed in:', session.user.email)
          // Redirect to dashboard after successful login
          navigate('/dashboard')
        }
        
        if (event === 'TOKEN_REFRESHED') {
          console.log('Token refreshed')
        }
      }
    )

    return () => subscription.unsubscribe()
  }, [])

  return (
    // Your app routes
  )
}

// Alternative: Check for existing session on mount
function Dashboard() {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    checkUser()
  }, [])

  async function checkUser() {
    const { data: { user } } = await supabase.auth.getUser()
    setUser(user)
    setLoading(false)
  }

  if (loading) return <div>Loading...</div>
  if (!user) return <div>Please log in</div>

  return (
    <div>
      <h1>Welcome {user.email}</h1>
      {/* Dashboard content */}
    </div>
  )
}

// LoginPage.jsx - Offer both options
import { useState } from 'react'
import { supabase } from './supabaseClient'

function LoginPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [useMagicLink, setUseMagicLink] = useState(false)
  const [loading, setLoading] = useState(false)
  const [message, setMessage] = useState(null)

  async function handleSubmit(e) {
    e.preventDefault()
    setLoading(true)
    setMessage(null)

    if (useMagicLink) {
      // Magic link login
      const { error } = await supabase.auth.signInWithOtp({ email })
      
      if (error) {
        setMessage({ type: 'error', text: error.message })
      } else {
        setMessage({ 
          type: 'success', 
          text: 'Check your email for the login link!' 
        })
      }
    } else {
      // Password login
      const { error } = await supabase.auth.signInWithPassword({
        email,
        password
      })
      
      if (error) {
        setMessage({ type: 'error', text: error.message })
      }
    }

    setLoading(false)
  }

  return (
    <div>
      <h2>Log In</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        
        {!useMagicLink && (
          <input
            type="password"
            placeholder="Password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
        )}

        {message && <p className={message.type}>{message.text}</p>}

        <button type="submit" disabled={loading}>
          {loading ? 'Please wait...' : 
           useMagicLink ? 'Send Magic Link' : 'Log In'}
        </button>
      </form>

      <button 
        type="button"
        onClick={() => setUseMagicLink(!useMagicLink)}
        className="toggle-method"
      >
        {useMagicLink ? 
          'Use password instead' : 
          'Use magic link instead'
        }
      </button>
    </div>
  )
}

export default LoginPage