Autenticación de Supabase

Supabase Auth ofrece un sistema completo de autenticación con soporte para email/contraseña, magic links, proveedores OAuth y autenticación por teléfono. Está basado en GoTrue e integra de forma nativa con Row Level Security.

🔐 Métodos de autenticación

Email/Contraseña: Registro e inicio de sesión tradicional
Magic Links: Autenticación sin contraseña por email
OAuth: Google, GitHub, Discord y 20+ proveedores
Teléfono: Autenticación basada en SMS

Autenticación con email/contraseña

Registro

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)
}

Inicio de sesión

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

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

Cerrar sesión

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

Autenticación con Magic Link

Envía un enlace de inicio de sesión al email del usuario, sin contraseña:

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!')
}

Autenticación OAuth

Inicia sesión con proveedores como Google o GitHub:

// 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'
})

⚙️ Configura proveedores OAuth

Habilita proveedores OAuth en tu Dashboard de Supabase en Authentication → Providers. Necesitarás agregar las credenciales de cada proveedor.

Gestión de sesiones

Obtener usuario actual

// 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)
}

Escuchar cambios de autenticación

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')
  }
})

Restablecer contraseña

// 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'
})

Hook de autenticación en React

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 }
}

💡 Puntos clave

• Supabase soporta email, magic links, OAuth y teléfono
• Usa onAuthStateChange para reaccionar a eventos de login/logout
• Las sesiones se gestionan y refrescan automáticamente
• Configura OAuth en el Dashboard de Supabase

📚 Más recursos

Documentación de Supabase Auth →
Guía completa de autenticación en Supabase.
Guía de Social Login →
Configura proveedores OAuth como Google y GitHub.