Skip to main content
Explore authentication examples covering email/password, OAuth, magic links, multi-factor authentication, and more.

​
Email/Password Authentication

​
Basic Sign Up and Sign In

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

// Sign up with email and password
async function signUp(email: string, password: string) {
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
  })
  
  if (error) throw error
  return data
}

// Sign in with email and password
async function signIn(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  })
  
  if (error) throw error
  return data
}

// Sign out
async function signOut() {
  const { error } = await supabase.auth.signOut()
  if (error) throw error
}

// Get current user
function getCurrentUser() {
  return supabase.auth.getUser()
}

// Listen for auth state changes
supabase.auth.onAuthStateChange((event, session) => {
  console.log(event, session)
})

​
Password Reset

// Request password reset
async function resetPassword(email: string) {
  const { error } = await supabase.auth.resetPasswordForEmail(email, {
    redirectTo: 'https://example.com/update-password',
  })
  
  if (error) throw error
}

// Update password (after clicking reset link)
async function updatePassword(newPassword: string) {
  const { error } = await supabase.auth.updateUser({
    password: newPassword,
  })
  
  if (error) throw error
}

​
OAuth Authentication

​
Sign in with OAuth Providers

// Sign in with Google
async function signInWithGoogle() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: `${window.location.origin}/auth/callback`,
    },
  })
  
  if (error) throw error
}

// Sign in with GitHub
async function signInWithGitHub() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'github',
    options: {
      redirectTo: `${window.location.origin}/auth/callback`,
      scopes: 'repo gist',
    },
  })
  
  if (error) throw error
}

// Other providers
const providers = [
  'apple',
  'azure',
  'bitbucket',
  'discord',
  'facebook',
  'gitlab',
  'linkedin',
  'notion',
  'slack',
  'spotify',
  'twitter',
  'workos',
]

​
OAuth Callback Handler (Next.js)

// app/auth/callback/route.ts
import { createClient } from '@/lib/supabase/server'
import { NextResponse } from 'next/server'

export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get('code')
  const next = searchParams.get('next') ?? '/'

  if (code) {
    const supabase = await createClient()
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    
    if (!error) {
      return NextResponse.redirect(`${origin}${next}`)
    }
  }

  return NextResponse.redirect(`${origin}/auth/auth-code-error`)
}

​
Passwordless Sign In

// Send magic link
async function sendMagicLink(email: string) {
  const { error } = await supabase.auth.signInWithOtp({
    email,
    options: {
      emailRedirectTo: 'https://example.com/auth/callback',
    },
  })
  
  if (error) throw error
}

// Send magic link to phone
async function sendSMSMagicLink(phone: string) {
  const { error } = await supabase.auth.signInWithOtp({
    phone,
  })
  
  if (error) throw error
}

​
Multi-Factor Authentication (MFA)

​
TOTP (Time-based One-Time Password)

// Enroll in MFA
async function enrollMFA() {
  const { data, error } = await supabase.auth.mfa.enroll({
    factorType: 'totp',
  })
  
  if (error) throw error
  
  // Show QR code to user
  const { id, qr_code, secret } = data
  return { id, qr_code, secret }
}

// Verify enrollment
async function verifyMFAEnrollment(factorId: string, code: string) {
  const { data, error } = await supabase.auth.mfa.challengeAndVerify({
    factorId,
    code,
  })
  
  if (error) throw error
  return data
}

// Sign in with MFA
async function signInWithMFA(email: string, password: string) {
  // First, sign in normally
  const { data: signInData, error: signInError } = await supabase.auth.signInWithPassword({
    email,
    password,
  })
  
  if (signInError) throw signInError
  
  // Then verify MFA
  const factors = await supabase.auth.mfa.listFactors()
  if (factors.data?.totp.length) {
    const factorId = factors.data.totp[0].id
    
    // Create challenge
    const { data: challenge } = await supabase.auth.mfa.challenge({ factorId })
    
    // User enters code, then verify
    const code = prompt('Enter your 6-digit code:')
    const { data, error } = await supabase.auth.mfa.verify({
      factorId,
      challengeId: challenge!.id,
      code: code!,
    })
    
    if (error) throw error
    return data
  }
}

// Unenroll from MFA
async function unenrollMFA(factorId: string) {
  const { error } = await supabase.auth.mfa.unenroll({ factorId })
  if (error) throw error
}

​
Phone Authentication

// Sign up with phone
async function signUpWithPhone(phone: string, password: string) {
  const { data, error } = await supabase.auth.signUp({
    phone,
    password,
  })
  
  if (error) throw error
  return data
}

// Verify phone with OTP
async function verifyPhone(phone: string, token: string) {
  const { data, error } = await supabase.auth.verifyOtp({
    phone,
    token,
    type: 'sms',
  })
  
  if (error) throw error
  return data
}

​
Session Management

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

// Refresh session
async function refreshSession() {
  const { data, error } = await supabase.auth.refreshSession()
  if (error) throw error
  return data.session
}

// Set session (for SSR)
async function setSession(accessToken: string, refreshToken: string) {
  const { data, error } = await supabase.auth.setSession({
    access_token: accessToken,
    refresh_token: refreshToken,
  })
  
  if (error) throw error
  return data
}

​
User Metadata

// Update user metadata
async function updateUserMetadata(metadata: any) {
  const { data, error } = await supabase.auth.updateUser({
    data: metadata,
  })
  
  if (error) throw error
  return data
}

// Example: Update user profile
async function updateProfile(profile: { name: string; avatar_url: string }) {
  const { data, error } = await supabase.auth.updateUser({
    data: {
      name: profile.name,
      avatar_url: profile.avatar_url,
    },
  })
  
  if (error) throw error
  return data
}

​
Server-Side Authentication (Next.js)

​
Server Component

import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'

export default async function ProtectedPage() {
  const supabase = await createClient()
  
  const { data: { user } } = await supabase.auth.getUser()
  
  if (!user) {
    redirect('/login')
  }
  
  return <div>Hello {user.email}</div>
}

​
Server Action

'use server'

import { createClient } from '@/lib/supabase/server'
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'

export async function signIn(formData: FormData) {
  const supabase = await createClient()
  
  const credentials = {
    email: formData.get('email') as string,
    password: formData.get('password') as string,
  }
  
  const { error } = await supabase.auth.signInWithPassword(credentials)
  
  if (error) {
    redirect('/error')
  }
  
  revalidatePath('/', 'layout')
  redirect('/dashboard')
}

​
React Hook Examples

import { useEffect, useState } from 'react'
import { createClient } from '@supabase/supabase-js'
import type { User } from '@supabase/supabase-js'

const supabase = createClient(url, key)

function useAuth() {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)
  
  useEffect(() => {
    // Get initial session
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user ?? null)
      setLoading(false)
    })
    
    // Listen for changes
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setUser(session?.user ?? null)
      }
    )
    
    return () => subscription.unsubscribe()
  }, [])
  
  return { user, loading }
}

// Usage
function MyComponent() {
  const { user, loading } = useAuth()
  
  if (loading) return <div>Loading...</div>
  if (!user) return <div>Please sign in</div>
  
  return <div>Welcome {user.email}</div>
}

​
Full Example Apps

Next.js Auth Example

Complete Next.js authentication example

Flutter MFA Example

Flutter app with multi-factor authentication

React Auth Example

React authentication patterns

Expo Social Auth

React Native with social providers

​
Next Steps

Auth Documentation

Learn more about authentication

User Management Tutorial

Build user profiles

Row Level Security

Secure your data

Database Examples

Explore database patterns

Build docs developers (and LLMs) love

Get started for freeTalk to us