Supabase Auth para Next.js App Router

Módulo completo de autenticación para Next.js App Router usando Supabase Auth: email/contraseña, verificación de email, recuperación/restablecimiento de contraseña y OAuth (Google, GitHub, Apple, Facebook).

Dependencias

@supabase/ssr
@supabase/supabase-js

Dónde vive cada cosa

Archivo	Propósito
`types.ts`	Tipos compartidos (`AuthResult<T>`, `AuthUser`, `AuthSession`, `AuthError`, etc.)
`service.ts`	Lógica interna: cliente de Supabase para el servidor + todas las operaciones de auth. No se importa fuera de este módulo.
`actions.ts`	`"use server"` — la API pública del lado del servidor. Importá desde acá en Server Components / formularios.
`client.ts`	Cliente de Supabase para el navegador + funciones listas para usar en Client Components.
`proxy.ts`	Protección de rutas + refresco de sesión en cada request. Copialo a la raíz del proyecto como `proxy.ts`.
`routes/route.ts`	Handler de callback para OAuth/verificación de email/recuperación. Copialo a `app/auth/callback/route.ts`.
`reset-password.tsx`	Página de referencia para definir una nueva contraseña. Copiala a `app/reset-password/page.tsx`.
`env.example.md`	Variables de entorno necesarias.

Uso

Registro (formulario en Client Component)

'use client';
import { signUpClient } from '@/lib/auth/supabase/client';

async function handleSignUp(email: string, password: string) {
  const { data, error } = await signUpClient({ email, password });
  if (error) {
    // handle error.code / error.message
  }
}

Proteger un Server Component

import { requireAuth } from '@/lib/auth/supabase/actions';

export default async function DashboardPage() {
  const user = await requireAuth(); // redirects to /login if there's no session
  return <p>Welcome, {user.email}</p>;
}

Botón de inicio de sesión con OAuth

'use client';
import { signInWithOAuthClient } from '@/lib/auth/supabase/client';

<button onClick={() => signInWithOAuthClient('google')}>
  Continue with Google
</button>

Olvidé mi contraseña / restablecer contraseña

import { forgotPasswordAction, resetPasswordAction } from '@/lib/auth/supabase/actions';

await forgotPasswordAction({ email }); // sends the recovery email
// user clicks the email link → routes/route.ts exchanges the code → lands on /reset-password
await resetPasswordAction({ newPassword }); // called from reset-password.tsx

Configuración

Pasos que el CLI no puede automatizar: hacelos manualmente en el dashboard de Supabase:

Creá un proyecto de Supabase y copiá la URL + la anon key en tu .env.local (mirá env.example.md).
Email Auth: en Authentication → Providers → Email, asegurate de que "Confirm email" esté habilitado. Personalizá las plantillas de email (Authentication → Email Templates) si querés emails de verificación/restablecimiento con tu marca.
Proveedores OAuth: para cada uno de Google, GitHub, Apple y Facebook, habilitá el proveedor en Authentication → Providers y registrá una app OAuth en la consola de desarrolladores del propio proveedor usando esta URL de redirección:
```
<SUPABASE_URL>/auth/v1/callback
```
Después pegá el client ID/secret resultante en la configuración del proveedor en Supabase.
Redirect URLs: en Authentication → URL Configuration, agregá tu site URL y <SITE_URL>/auth/callback a la lista de permitidos (hace falta tanto en dev como en prod).
Copiá proxy.ts a la raíz del proyecto.
Copiá routes/route.ts a app/auth/callback/route.ts.
Copiá reset-password.tsx a app/reset-password/page.tsx.

Alcance

Sin roles/permisos ni organizaciones: un único tipo de usuario, a propósito.