Autenticación en Supabase: Cómo Funciona

// Estructura simplificada de un JWT de Supabase
// (decodificado, NO lo decodifiques manualmente en produccion)
{
  "sub": "uuid-del-usuario",           // ID unico del usuario
  "email": "usuario@ejemplo.com",
  "role": "authenticated",              // Rol asignado
  "exp": 1700000000,                    // Expiracion (Unix timestamp)
  "iat": 1699996400,                    // Fecha de emision
  "aud": "authenticated"                // Audiencia
}

import { createClient } from '@supabase/supabase-js'
 
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
 
// Después de un login exitoso, la sesión tiene esta estructura:
const { data } = await supabase.auth.getSession()
 
if (data.session) {
  console.log(data.session.access_token)   // JWT de corta duracion
  console.log(data.session.refresh_token)  // Token para renovar el JWT
  console.log(data.session.expires_at)     // Timestamp de expiracion
  console.log(data.session.user)           // Datos del usuario
}

1. Usuario envia credenciales (email + password, OAuth, magic link, etc.)
       |
       v
2. Supabase (GoTrue) valida las credenciales
       |
       v
3. GoTrue genera access_token (JWT) + refresh_token
       |
       v
4. El SDK almacena la sesión en el cliente (localStorage por defecto)
       |
       v
5. Cada peticion al API incluye el access_token en el header Authorization
       |
       v
6. Supabase valida el JWT y aplica RLS (Row Level Security) segun el usuario
       |
       v
7. Cuando el access_token expira, el SDK usa el refresh_token para renovarlo

// Registro con email y contraseña
const { data, error } = await supabase.auth.signUp({
  email: 'usuario@ejemplo.com',
  password: 'contrasena-segura'
})
 
// Login con email y contraseña
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'usuario@ejemplo.com',
  password: 'contrasena-segura'
})
 
// Login con OAuth (Google, GitHub, etc.)
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google'
})
 
// Login con magic link (enlace enviado al email)
const { data, error } = await supabase.auth.signInWithOtp({
  email: 'usuario@ejemplo.com'
})
 
// Cerrar sesión
const { error } = await supabase.auth.signOut()

// Obtener la sesión actual (desde cache local)
const { data: { session } } = await supabase.auth.getSession()
 
// Obtener el usuario actual (validando contra el servidor)
const { data: { user } } = await supabase.auth.getUser()

// Actualizar email o contraseña
const { data, error } = await supabase.auth.updateUser({
  email: 'nuevo@ejemplo.com',
  password: 'nueva-contrasena'
})
 
// Actualizar metadata del usuario
const { data, error } = await supabase.auth.updateUser({
  data: {
    nombre: 'Juan',
    avatar_url: 'https://ejemplo.com/avatar.jpg'
  }
})

const { data: { subscription } } = supabase.auth.onAuthStateChange(
  (event, session) => {
    console.log('Evento:', event)
    console.log('Sesión:', session)
 
    switch (event) {
      case 'SIGNED_IN':
        // El usuario acaba de iniciar sesión
        break
      case 'SIGNED_OUT':
        // El usuario cerró sesión
        break
      case 'TOKEN_REFRESHED':
        // El access_token se renovo automaticamente
        break
      case 'USER_UPDATED':
        // Los datos del usuario cambiaron
        break
      case 'INITIAL_SESSION':
        // Se cargo la sesión inicial al montar el componente
        break
    }
  }
)
 
// Para dejar de escuchar (por ejemplo, al desmontar un componente):
subscription.unsubscribe()

'use client'
 
import { useEffect, useState } from 'react'
import { createClient } from '@/lib/supabase/client'
import type { User } from '@supabase/supabase-js'
 
export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)
  const supabase = createClient()
 
  useEffect(() => {
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setUser(session?.user ?? null)
        setLoading(false)
      }
    )
 
    return () => {
      subscription.unsubscribe()
    }
  }, [])
 
  if (loading) return <div>Cargando...</div>
 
  return <>{children}</>
}