Supabase Authentication

Supabase Auth provides a complete authentication system with support for email/password, magic links, OAuth providers, and phone authentication. It's built on GoTrue and integrates seamlessly with Row Level Security.

🔐 Authentication Methods

Email/Password: Traditional sign up and sign in
Magic Links: Passwordless email authentication
OAuth: Google, GitHub, Discord, and 20+ providers
Phone: SMS-based authentication

Email/Password Authentication

Sign Up

const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'secure-password',
  options: {
    data: {
      first_name: 'John',
      last_name: 'Doe'
    }
  }
})

if (error) {
  console.error('Sign up error:', error.message)
} else {
  console.log('User created:', data.user)
}

Sign In

const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'secure-password'
})

if (data.session) {
  console.log('Logged in:', data.user)
}

Sign Out

const { error } = await supabase.auth.signOut()
if (!error) {
  console.log('Signed out successfully')
}

Magic Link Authentication

Send a login link to the user's email - no password needed:

const { error } = await supabase.auth.signInWithOtp({
  email: 'user@example.com',
  options: {
    emailRedirectTo: 'https://yourapp.com/welcome'
  }
})

if (!error) {
  alert('Check your email for the login link!')
}

OAuth Authentication

// Google Sign In
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: 'https://yourapp.com/auth/callback'
  }
})

// GitHub Sign In
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'github'
})

⚙️ Configure OAuth Providers

Enable OAuth providers in your Supabase Dashboard under Authentication → Providers. You'll need to add your OAuth app credentials from each provider.

Session Management

Get Current User

// Get current session
const { data: { session } } = await supabase.auth.getSession()

// Get current user
const { data: { user } } = await supabase.auth.getUser()

if (user) {
  console.log('Current user:', user.email)
}

Listen to Auth Changes

supabase.auth.onAuthStateChange((event, session) => {
  console.log('Auth event:', event)

  if (event === 'SIGNED_IN') {
    console.log('User signed in:', session?.user)
  } else if (event === 'SIGNED_OUT') {
    console.log('User signed out')
  } else if (event === 'TOKEN_REFRESHED') {
    console.log('Token refreshed')
  }
})

Password Reset

// Send password reset email
const { error } = await supabase.auth.resetPasswordForEmail(
  'user@example.com',
  { redirectTo: 'https://yourapp.com/reset-password' }
)

// Update password (after clicking reset link)
const { error } = await supabase.auth.updateUser({
  password: 'new-secure-password'
})

React Authentication Hook

import { useEffect, useState } from 'react'
import { supabase } from './supabase'

export function useAuth() {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user ?? null)
      setLoading(false)
    })

    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setUser(session?.user ?? null)
      }
    )

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

  return { user, loading }
}

💡 Key Takeaways

• Supabase supports email, magic links, OAuth, and phone authentication
• Use onAuthStateChange to react to login/logout events
• Sessions are automatically managed and refreshed
• Configure OAuth providers in the Supabase Dashboard

📚 Learn More

Supabase Auth Documentation →
Complete guide to Supabase authentication.
Social Login Guide →
Set up OAuth providers like Google and GitHub.