Módulo de Autenticación con Auth0

Autenticación lista para integrar en un proyecto de Next.js App Router, construida sobre @auth0/nextjs-auth0 v4 y el Universal Login de Auth0. Cubre registro, inicio de sesión, cierre de sesión, acceso a la sesión, Server Components protegidos, login social (Google, GitHub, Apple, Facebook), verificación de email y recuperación/restablecimiento de contraseña.

Dependencias

• @auth0/nextjs-auth0 (^4.26.1 o más reciente)

Mapa de archivos

Uso

Proteger un Server Component

import { requireAuth } from "@/lib/auth0/actions";

export default async function DashboardPage() {
  const session = await requireAuth("/dashboard");
  return <p>Welcome, {session.user.name}</p>;
}

Leer la sesión sin redirigir

import { getUser } from "@/lib/auth0/actions";

export default async function Header() {
  const user = await getUser();
  return user ? <p>{user.email}</p> : <a href="/auth/login">Sign in</a>;
}

Botones de inicio de sesión / registro / cierre de sesión (Client Component)

"use client";
import { signIn, signUp, signOut, signInWithOAuth } from "@/lib/auth0/client";

export function AuthButtons() {
  return (
    <>
      <button onClick={() => signIn()}>Sign in</button>
      <button onClick={() => signUp()}>Sign up</button>
      <button onClick={() => signInWithOAuth("google-oauth2")}>Continue with Google</button>
      <button onClick={() => signOut()}>Sign out</button>
    </>
  );
}

Olvidé mi contraseña (Server Action desde un formulario)

import { forgotPassword } from "@/lib/auth0/actions";

async function handleForgotPassword(formData: FormData) {
  "use server";
  const email = formData.get("email") as string;
  const result = await forgotPassword(email);
  if (!result.success) {
    // handle result.error
  }
}

Auth0 aloja la pantalla donde se define la nueva contraseña: el email que envía forgotPassword() lleva directamente a ella. Este módulo no implementa su propia página de restablecimiento de contraseña.

Refrescar la sesión

import { refreshSession } from "@/lib/auth0/actions";

const result = await refreshSession();
if (result.success) {
  // result.data is the refreshed AuthSession
}

Configuración

El código solo no alcanza: estos pasos se hacen en el Auth0 Dashboard.

1. Creá una Regular Web Application en tu tenant de Auth0.
2. En Application URIs, definí:
   • Allowed Callback URLs: http://localhost:3000/auth/callback (+ tu URL de producción)
   • Allowed Logout URLs: http://localhost:3000 (+ tu URL de producción)
3. Conexión de base de datos (email + contraseña): habilitá la conexión Username-Password-Authentication en esta aplicación. En la configuración de la conexión, activá "Requires Email Verification" si querés que los usuarios nuevos verifiquen su email antes del primer login.
4. Conexiones sociales: habilitá y configurá Google, GitHub, Apple y Facebook en Authentication → Social. Cada una requiere sus propias credenciales OAuth (Client ID/Secret) de la consola de desarrolladores del respectivo proveedor. Los nombres de conexión usados en client.ts (google-oauth2, github, apple, facebook) tienen que coincidir con los que asigna Auth0; verificalo en la página de configuración de cada conexión.
5. Universal Login: no hace falta una UI personalizada. El New Universal Login de Auth0 ya incluye las pantallas de registro, inicio de sesión, olvidé mi contraseña y restablecimiento de contraseña. Personalizá la marca en Branding → Universal Login si lo necesitás.
6. (Opcional) Aplicación Machine-to-Machine para resendVerificationEmail(): creá una aplicación M2M autorizada para la Auth0 Management API con el scope create:user_tickets. Usá sus credenciales para AUTH0_M2M_CLIENT_ID / AUTH0_M2M_CLIENT_SECRET. Salteá este paso (y quitá resendVerificationEmail de actions.ts) si te alcanza con el email de verificación automático que Auth0 envía al registrarse.
7. Copiá proxy.ts a la raíz de tu proyecto (junto a package.json), y ajustá la ruta del import si tu módulo no está en lib/auth0.