Uso de la autenticación de Firebase con las últimas funciones de Next.js

Introducción a next-firebase-auth-edge Probablemente encontró este artículo mientras buscaba formas de agregar Firebase Authentication a su aplicación Next.js nueva o existente. Su objetivo es tomar una decisión inteligente, imparcial y orientada al futuro que maximice las posibilidades de que su aplicación tenga éxito. Como creador de next-firebase-auth-edge, debo admitir que brindar una opinión completamente imparcial no es mi fuerte, pero al menos intentaré justificar el enfoque que adopté al diseñar la biblioteca. Con suerte, al final de esta guía, el enfoque le resultará sencillo y viable a largo plazo. Cómo empezó Te ahorraré largas presentaciones. Permítanme decirles que la idea de la biblioteca se inspiró en una situación posiblemente similar a la suya. Fue el momento en que Next.js lanzó una versión canaria de . Estaba trabajando en una aplicación que dependía en gran medida de reescrituras y redirecciones internas. Para eso, utilizamos la aplicación Next.js de renderizado del servidor Node.js personalizado. App Router express Estábamos muy entusiasmados con y , pero sabíamos que no sería compatible con nuestro servidor personalizado. parecía una característica poderosa que podíamos aprovechar para eliminar la necesidad de un servidor Express personalizado, optando en su lugar por confiar únicamente en las características integradas de Next.js para redirigir y reescribir a los usuarios a diferentes páginas de forma dinámica. App Router Server Components El middleware Esa vez estábamos usando . Nos gustó mucho la biblioteca, pero extendió nuestra lógica de autenticación a través de archivos , , , , que iban a considerarse heredados. pronto. Además, la biblioteca no era compatible con el middleware, lo que nos impedía reescribir las URL o redirigir a los usuarios según su contexto. next-firebase-auth next.config.js pages/_app.tsx pages/api/login.ts pages/api/logout.ts Entonces, comencé mi búsqueda, pero para mi sorpresa, no encontré ninguna biblioteca que admitiera la autenticación Firebase dentro del middleware. – Como ingeniero de software con más de 11 años de experiencia comercial en Node.js y React, me estaba preparando para abordar este enigma. ¿Por qué podría ser eso? ¡Es imposible! Entonces comencé. Y la respuesta se hizo obvia. El middleware se ejecuta dentro . No hay ninguna biblioteca de base de fuego compatible con disponibles dentro de . . Me sentí impotente. ¿Es esta la primera vez que tendré que para poder jugar con las nuevas y sofisticadas API? - Rápidamente dejé de sollozar y comencé a realizar ingeniería inversa , y varias otras bibliotecas de autenticación JWT, adaptándolas a Edge Runtime. Aproveché la oportunidad para abordar todos los problemas que había encontrado con las bibliotecas de autenticación anteriores, con el objetivo de crear la biblioteca de autenticación más ligera, más fácil de configurar y orientada al futuro. de Edge Runtime las API de Web Crypto Edge Runtime Estaba condenado esperar No. Una olla vigilada nunca hierve. en next-firebase-auth firebase-admin Aproximadamente dos semanas después, nació la versión de . Fue una prueba de concepto sólida, pero no querrás usar la versión . Confía en mí. 0.0.1 next-firebase-auth-edge 0.0.1 Cómo va Casi , estoy encantado de anunciar que después de , y una de increíbles desarrolladores de todo el mundo, la biblioteca ha llegado a una etapa en la que mi otro yo me muestra su aprobación. dos años después 372 confirmaciones 110 problemas resueltos gran cantidad de comentarios invaluables En esta guía, usaré la versión para crear una aplicación Next.js autenticada desde cero. Revisaremos cada paso en detalle, comenzando con la creación de un nuevo proyecto Firebase y la aplicación Next.js, seguido de la integración con las bibliotecas y . Al final de este tutorial, implementaremos la aplicación en Vercel para confirmar que todo funciona tanto localmente como en un entorno listo para producción. 1.4.1 de next-firebase-auth-edge next-firebase-auth-edge firebase/auth Configurando Firebase Esta parte supone que aún no has configurado la autenticación de Firebase. Si no, no dudes en pasar a la siguiente parte. Vayamos a y Firebase Console creemos un proyecto. Una vez creado el proyecto, habilitemos la autenticación de Firebase. Abra la consola y vaya a y habilite el método . Ese es el método que vamos a admitir en nuestra aplicación. Compilación > Autenticación > Método de inicio de sesión de correo electrónico y contraseña Después de habilitar su primer método de inicio de sesión, la autenticación de Firebase debería estar habilitada para su proyecto y podrá recuperar su en clave API web la configuración del proyecto. Copie la clave API y manténgala segura. Ahora, abramos la siguiente pestaña: y anotemos . Lo necesitaremos más tarde. Mensajería en la nube el ID del remitente Por último, pero no menos importante, debemos generar las credenciales de la cuenta de servicio. Esto permitirá que su aplicación obtenga acceso completo a sus servicios de Firebase. Vaya a y haga clic en . Esto descargará un archivo con las credenciales de la cuenta de servicio. Guarde este archivo en una ubicación conocida. Configuración del proyecto > Cuentas de servicio Generar nueva clave privada .json Estamos listos para integrar la aplicación Next.js con Firebase Authentication ¡Eso es todo! Creando la aplicación Next.js desde cero Esta guía asume que tiene y instalados. Los comandos utilizados en este tutorial se verificaron con la última versión de LTS . Puede verificar la versión del nodo ejecutando en la terminal. También puedes utilizar herramientas como para cambiar rápidamente entre versiones de Node.js. Node.js npm Node.js v20 node -v NVM Configurar la aplicación Next.js con CLI Abra su terminal favorita, navegue hasta su carpeta de proyectos y ejecute npx create-next-app@latest Para hacerlo simple, usemos la configuración predeterminada. Esto significa que usaremos y TypeScript tailwind ✔ What is your project named? … my-app ✔ Would you like to use TypeScript? … Yes ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use `src/` directory? … No ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias (@/*)? … No Naveguemos hasta el directorio raíz del proyecto y asegurémonos de que todas las dependencias estén instaladas. cd my-app npm install Para confirmar que todo funciona como se esperaba, iniciemos el servidor de desarrollo Next.js con el comando . Cuando abres , deberías ver la página de bienvenida de Next.js, similar a esta: npm run dev http://localhost:3000 Preparando variables de entorno Antes de comenzar a integrarnos con Firebase, necesitamos una forma segura de almacenar y leer nuestra configuración de Firebase. Afortunadamente, Next.js viene con soporte incorporado. dotenv Abra su editor de código favorito y navegue hasta la carpeta del proyecto. Creemos el archivo en el directorio raíz del proyecto y llenémoslo con las siguientes variables de entorno: .env.local FIREBASE_ADMIN_CLIENT_EMAIL=... FIREBASE_ADMIN_PRIVATE_KEY=... AUTH_COOKIE_NAME=AuthToken AUTH_COOKIE_SIGNATURE_KEY_CURRENT=secret1 AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS=secret2 USE_SECURE_COOKIES=false NEXT_PUBLIC_FIREBASE_PROJECT_ID=... NEXT_PUBLIC_FIREBASE_API_KEY=AIza... NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=....firebaseapp.com NEXT_PUBLIC_FIREBASE_DATABASE_URL=....firebaseio.com NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=... Tenga en cuenta que las variables con el prefijo estarán disponibles en el paquete del lado del cliente. Los necesitaremos para configurar NEXT_PUBLIC_ el SDK del cliente de autenticación de Firebase , y se pueden recuperar desde el archivo descargado después de generar las credenciales de la cuenta de servicio NEXT_PUBLIC_FIREBASE_PROJECT_ID FIREBASE_ADMIN_CLIENT_EMAIL FIREBASE_ADMIN_PRIVATE_KEY .json será el nombre de la cookie utilizada para almacenar las credenciales del usuario. AUTH_COOKIE_NAME y son secretos con los que firmaremos las credenciales. AUTH_COOKIE_SIGNATURE_KEY_CURRENT AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS es recuperada de la página general NEXT_PUBLIC_FIREBASE_API_KEY la clave API web de Configuración del proyecto es .firebaseapp.com NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN su ID de proyecto es .firebaseio.com NEXT_PUBLIC_FIREBASE_DATABASE_URL el ID de su proyecto se puede obtener en la página > NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID Configuración del proyecto Mensajería en la nube no se usará para el desarrollo local, pero será útil cuando implementemos nuestra aplicación en Vercel. USE_SECURE_COOKIES Integración con la autenticación de Firebase Instalación de y configuración inicial next-firebase-auth-edge Agregue la biblioteca a las dependencias del proyecto ejecutando npm install next-firebase-auth-edge@^1.4.1 Creemos el archivo para encapsular la configuración de nuestro proyecto. No es obligatorio, pero hará que los ejemplos de código sean más legibles. config.ts No pierda demasiado tiempo reflexionando sobre esos valores. Los explicaremos con más detalle a medida que avancemos. export const serverConfig = { cookieName: process.env.AUTH_COOKIE_NAME!, cookieSignatureKeys: [process.env.AUTH_COOKIE_SIGNATURE_KEY_CURRENT!, process.env.AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS!], cookieSerializeOptions: { path: "/", httpOnly: true, secure: process.env.USE_SECURE_COOKIES === "true", sameSite: "lax" as const, maxAge: 12 * 60 * 60 * 24, }, serviceAccount: { projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID!, clientEmail: process.env.FIREBASE_ADMIN_CLIENT_EMAIL!, privateKey: process.env.FIREBASE_ADMIN_PRIVATE_KEY?.replace(/\\n/g, "\n")!, } }; export const clientConfig = { projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }; Agregar software intermedio Cree el archivo en la raíz del proyecto y pegue lo siguiente middleware.ts import { NextRequest } from "next/server"; import { authMiddleware } from "next-firebase-auth-edge"; import { clientConfig, serverConfig } from "./config"; export async function middleware(request: NextRequest) { return authMiddleware(request, { loginPath: "/api/login", logoutPath: "/api/logout", apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, cookieSerializeOptions: serverConfig.cookieSerializeOptions, serviceAccount: serverConfig.serviceAccount, }); } export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; Lo creas o no, acabamos de integrar el servidor de nuestra aplicación con Firebase Authentication. Antes de usarlo, expliquemos un poco la configuración: le indicará a authMiddleware que exponga el punto final . Cuando se llama a este punto final con el encabezado *, responde con el encabezado solo HTTP(S) que contiene firmados. loginPath GET /api/login Authorization: Bearer ${idToken} Set-Cookie tokens personalizados y de actualización * se recupera con la función disponible en . Más sobre esto más adelante. idToken getIdToken Firebase Client SDK De manera similar, indica al middleware que exponga , pero no requiere ningún encabezado adicional. Cuando se llama, elimina las cookies de autenticación del navegador. logoutPath GET /api/logout es la clave API web. El middleware lo utiliza para actualizar el token personalizado y restablecer las cookies de autenticación una vez que caducan las credenciales. apiKey es el nombre de la cookie establecida y eliminada por los puntos finales y cookieName /api/login /api/logout es una lista de claves secretas con las que se firman las credenciales del usuario. Las credenciales siempre se firmarán con la primera clave de la lista, por lo que deberá proporcionar al menos un valor. Puede proporcionar varias claves para realizar una cookieSignatureKeys rotación de claves son opciones que se pasan a al generar el encabezado . Ver README para más información cookieSerializeOptions la cookie Set-Cookie cookie autoriza a la biblioteca a utilizar sus servicios de Firebase. serviceAccount El comparador indica al servidor Next.js que ejecute Middleware contra , cualquier otra ruta que no sea un archivo o una llamada a la API. /api/login /api/logout / export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; las llamadas Quizás se pregunte por qué no habilitamos el middleware para todas /api/* . Podríamos, pero es una buena práctica manejar llamadas no autenticadas dentro del propio controlador de ruta API. Esto está un poco fuera del alcance de este tutorial, pero si estás interesado, ¡házmelo saber y prepararé algunos ejemplos! Como puedes ver, la configuración es y con un propósito claramente definido. Ahora, comencemos a llamar a nuestros puntos finales y . mínima /api/login /api/logout Crear una página de inicio segura Para simplificar al máximo las cosas, eliminemos la página de inicio predeterminada de Next.js y reemplácela con contenido personalizado. Abra y pegue esto: ./app/page.tsx import { getTokens } from "next-firebase-auth-edge"; import { cookies } from "next/headers"; import { notFound } from "next/navigation"; import { clientConfig, serverConfig } from "../config"; export default async function Home() { const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); if (!tokens) { notFound(); } return ( Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!

); } Analicemos esto poco a poco. La función está diseñada para validar y extraer las credenciales de usuario de getTokens las cookies. const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); Se resuelve con , si el usuario no está autenticado o con un objeto que contiene dos propiedades: null , que es idToken que puede utilizar para autorizar solicitudes de API a servicios backend externos. Esto está un poco fuera de alcance, pero vale la pena mencionar que la biblioteca permite la arquitectura de servicios distribuidos. El es compatible y está listo para usar con todas las bibliotecas oficiales de Firebase en todas las plataformas. token string token como sugiere el nombre, es una versión decodificada del , que contiene toda la información necesaria para identificar al usuario, incluida la dirección de correo electrónico, la imagen de perfil y , lo que nos permite además restringir el acceso según roles y permisos. decodedToken token los reclamos personalizados Después de obtener , utilizamos la función de para asegurarnos de que solo los usuarios autenticados puedan acceder a la página. tokens notFound next/navigation if (!tokens) { notFound(); } Finalmente, presentamos contenido de usuario básico y personalizado. Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!"

Ejecutémoslo. En caso de que haya cerrado su servidor de desarrollo, simplemente ejecute . npm run dev Cuando intenta acceder a , debería ver http://localhost:3000/ 404: No se pudo encontrar esta página. ¡Éxito! ¡Hemos mantenido nuestros secretos a salvo de miradas indiscretas! Instalación e inicialización del SDK del cliente de Firebase firebase Ejecute en el directorio raíz del proyecto npm install firebase Después de instalar el SDK del cliente, cree el archivo en el directorio raíz del proyecto y pegue lo siguiente firebase.ts import { initializeApp } from 'firebase/app'; import { clientConfig } from './config'; export const app = initializeApp(clientConfig); Esto inicializará el SDK de Firebase Client y expondrá el objeto de la aplicación para los componentes del cliente. Creando una página de registro ¿Cuál es el punto de tener una página de inicio súper segura si nadie puede verla? Creemos una página de registro simple para permitir que las personas accedan a nuestra aplicación. Creemos una página nueva y elegante en ./app/register/page.tsx "use client"; import { FormEvent, useState } from "react"; import Link from "next/link"; import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; import { app } from "../../firebase"; import { useRouter } from "next/navigation"; export default function Register() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmation, setConfirmation] = useState(""); const [error, setError] = useState(""); const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); if (password !== confirmation) { setError("Passwords don't match"); return; } try { await createUserWithEmailAndPassword(getAuth(app), email, password); router.push("/login"); } catch (e) { setError((e as Error).message); } } return ( Pray tell, who be this gallant soul seeking entry to mine humble abode? Your email setEmail(e.target.value)} id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required /> Password setPassword(e.target.value)} id="password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> Confirm password setConfirmation(e.target.value)} id="confirm-password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> {error && ( {error} )} Create an account Already have an account?{" "} Login here

); } Lo sé. Es mucho texto, pero tengan paciencia. Empezamos con para indicar que la página de registro utilizará API del lado del cliente "use client"; const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmation, setConfirmation] = useState(""); const [error, setError] = useState(""); Luego, definimos algunas variables y configuradores para mantener nuestro estado de formulario. const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); if (password !== confirmation) { setError("Passwords don't match"); return; } try { await createUserWithEmailAndPassword(getAuth(app), email, password); router.push("/login"); } catch (e) { setError((e as Error).message); } } Aquí, definimos nuestra lógica de envío de formularios. Primero, validamos si y son iguales, de lo contrario actualizamos el estado de error. Si los valores son válidos, creamos una cuenta de usuario con desde . Si este paso falla (por ejemplo, se toma el correo electrónico), informamos al usuario actualizando el error. password confirmation createUserWithEmailAndPassword firebase/auth Si todo va bien, redirigimos al usuario a la página . Probablemente estés confundido en este momento y tienes razón en estarlo. aún no existe. Sólo nos estamos preparando para lo que será el próximo. /login /login Cuando visita , la página debería verse más o menos así: http://localhost:3000/register Creando una página de inicio de sesión Ahora que los usuarios pueden registrarse, que acrediten su identidad. Cree una página de inicio de sesión en ./app/login/page.tsx "use client"; import { FormEvent, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; import { app } from "../../firebase"; export default function Login() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); try { const credential = await signInWithEmailAndPassword( getAuth(app), email, password ); const idToken = await credential.user.getIdToken(); await fetch("/api/login", { headers: { Authorization: `Bearer ${idToken}`, }, }); router.push("/"); } catch (e) { setError((e as Error).message); } } return ( Speak thy secret word! Your email setEmail(e.target.value)} id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required /> Password setPassword(e.target.value)} id="password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> {error && ( {error} )} Enter Don&apos;t have an account?{" "} Register here

); } Como puede ver, es bastante similar a la página de registro. Centrémonos en la parte crucial: async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); try { const credential = await signInWithEmailAndPassword( getAuth(app), email, password ); const idToken = await credential.user.getIdToken(); await fetch("/api/login", { headers: { Authorization: `Bearer ${idToken}`, }, }); router.push("/"); } catch (e) { setError((e as Error).message); } } Es donde ocurre . Usamos de para recuperar del usuario. toda la magia signInEmailAndPassword firebase/auth idToken Luego, llamamos al punto final expuesto por el middleware. Este punto final actualiza las cookies de nuestro navegador con las credenciales del usuario. /api/login Finalmente, redirigimos al usuario a la página de inicio llamando router.push("/"); La página de inicio de sesión debería verse aproximadamente como esta ¡Vamos a probarlo! Vaya a , ingrese una dirección de correo electrónico y una contraseña aleatorias para crear una cuenta. Utilice esas credenciales en la página . Después de hacer clic , debería ser redirigido a http://localhost:3000/register http://localhost:3000/login en Entrar una página de inicio súper segura. ¡Finalmente podemos ver nuestra página de inicio y ! ¡Pero espera! ¿Cómo salimos? propia personal ultra segura Necesitamos agregar un botón de cierre de sesión para no excluirnos del mundo para siempre (o 12 días). Antes de comenzar, necesitamos crear un que pueda cerrar sesión utilizando Firebase Client SDK. componente de cliente Creemos un nuevo archivo en ./app/HomePage.tsx "use client"; import { useRouter } from "next/navigation"; import { getAuth, signOut } from "firebase/auth"; import { app } from "../firebase"; interface HomePageProps { email?: string; } export default function HomePage({ email }: HomePageProps) { const router = useRouter(); async function handleLogout() { await signOut(getAuth(app)); await fetch("/api/logout"); router.push("/login"); } return ( Super secure home page Only {email} holds the magic key to this kingdom!

Logout ); } Como habrás notado, esta es una versión ligeramente modificada de nuestro . Tuvimos que crear un componente de cliente separado, porque solo funciona dentro de y , mientras que y deben ejecutarse en el contexto del cliente. Un poco complicado, lo sé, pero en realidad es bastante poderoso. Te lo explicaré más tarde. ./app/page.tsx getTokens los componentes del servidor los controladores de ruta API signOut useRouter Centrémonos en el proceso de cierre de sesión. const router = useRouter(); async function handleLogout() { await signOut(getAuth(app)); await fetch("/api/logout"); router.push("/login"); } Primero, cerramos sesión en Firebase Client SDK. Luego, llamamos al punto final expuesto por el middleware. Terminamos redirigiendo al usuario a la página . /api/logout /login Actualicemos la página de inicio de nuestro servidor. Vaya a y pegue lo siguiente ./app/page.tsx import { getTokens } from "next-firebase-auth-edge"; import { cookies } from "next/headers"; import { notFound } from "next/navigation"; import { clientConfig, serverConfig } from "../config"; import HomePage from "./HomePage"; export default async function Home() { const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); if (!tokens) { notFound(); } return ; } Ahora, nuestro componente del servidor es responsable únicamente de obtener tokens de usuario y pasarlos al componente del cliente . En realidad, este es un patrón bastante común y útil. Home HomePage Probemos esto: ¡Voilá! Ahora podemos iniciar sesión y cerrar sesión en la aplicación a nuestra voluntad. ¡Eso es perfecto! ¿O es eso? Cuando un usuario no autenticado intenta ingresar a la página de inicio abriendo mostramos http://localhost:3000/, 404: No se pudo encontrar esta página. Además, los usuarios autenticados aún pueden acceder a las páginas y sin tener que cerrar sesión. http://localhost:3000/register http://localhost:3000/login Podemos hacerlo mejor. Parece que necesitamos agregar alguna lógica de redireccionamiento. Definamos algunas reglas: Cuando un usuario autenticado intenta acceder a las páginas y , debemos redirigirlo a /register /login / Cuando un usuario no autenticado intenta acceder a la página , debemos redirigirlo a / /login El middleware es una de las mejores formas de manejar redirecciones en aplicaciones Next.js. Afortunadamente, admite varias opciones y funciones auxiliares para manejar una amplia gama de escenarios de redireccionamiento. authMiddleware Abramos el archivo y peguemos esta versión actualizada. middleware.ts import { NextRequest, NextResponse } from "next/server"; import { authMiddleware, redirectToHome, redirectToLogin } from "next-firebase-auth-edge"; import { clientConfig, serverConfig } from "./config"; const PUBLIC_PATHS = ['/register', '/login']; export async function middleware(request: NextRequest) { return authMiddleware(request, { loginPath: "/api/login", logoutPath: "/api/logout", apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, cookieSerializeOptions: serverConfig.cookieSerializeOptions, serviceAccount: serverConfig.serviceAccount, handleValidToken: async ({token, decodedToken}, headers) => { if (PUBLIC_PATHS.includes(request.nextUrl.pathname)) { return redirectToHome(request); } return NextResponse.next({ request: { headers } }); }, handleInvalidToken: async (reason) => { console.info('Missing or malformed credentials', {reason}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); }, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } }); } export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; Eso debería ser todo. Hemos implementado todas las reglas de redireccionamiento. Analicemos esto. const PUBLIC_PATHS = ['/register', '/login']; handleValidToken: async ({token, decodedToken}, headers) => { if (PUBLIC_PATHS.includes(request.nextUrl.pathname)) { return redirectToHome(request); } return NextResponse.next({ request: { headers } }); }, Se llama a cuando se adjuntan credenciales de usuario válidas a la solicitud, es decir. El usuario está autenticado. Se llama con el objeto como primer argumento y como segundo argumento. Debería resolverse con . handleValidToken tokens los encabezados de solicitud modificados NextResponse de es una función auxiliar que devuelve un objeto que se puede simplificar a redirectToHome next-firebase-auth-edge NextResponse.redirect(new URL(“/“)) Al marcar , validamos si el usuario autenticado intenta acceder a la página o , y redirigimos a inicio si ese es el caso. PUBLIC_PATHS.includes(request.nextUrl.pathname) /login /register handleInvalidToken: async (reason) => { console.info('Missing or malformed credentials', {reason}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); }, Se llama cuando sucede algo . Uno de estos eventos esperados es que el usuario vea su aplicación por primera vez, desde otro dispositivo o después de que las credenciales hayan caducado. handleInvalidToken esperado Habiendo sabido que se llama a para usuarios no autenticados, podemos proceder con la segunda regla: handleInvalidToken cuando un usuario no autenticado intenta acceder a / página, debemos redirigirlo a /login Como no hay ninguna otra condición que cumplir, simplemente devolvemos el resultado de que se puede simplificar a . También garantiza que el usuario no caiga en un bucle de redireccionamiento. redirectToLogin NextResponse.redirect(new URL(“/login”)) Por último, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } A diferencia de , se llama cuando sucede algo y posiblemente deba investigarse. Puedes encontrar una lista de posibles errores con su descripción en handleInvalidToken handleError inesperado* la documentación. En caso de error, registramos este hecho y redirigimos al usuario de forma segura a la página de inicio de sesión. * Se puede llamar con el error después de actualizar las claves públicas de Google. handleError INVALID_ARGUMENT Esta es una forma de rotación de claves y se . espera Consulte este problema de Github para obtener más información. Eso es todo. Finalmente. Cerremos sesión en nuestra aplicación web y abramos . Deberíamos ser redirigidos a la página . http://localhost:3000/ /login Iniciemos sesión nuevamente e intentemos ingresar . Deberíamos ser redirigidos a página. http://localhost:3000/login / No solo brindamos una experiencia de usuario perfecta. es una biblioteca que funciona solo en el servidor de la aplicación y no introduce código adicional del lado del cliente. El paquete resultante es realmente . Eso es lo que yo llamo perfecto. next-firebase-auth-edge de tamaño de paquete cero mínimo Nuestra aplicación ahora está completamente integrada con Firebase Authentication tanto en los componentes del Servidor como del Cliente. ¡Estamos listos para liberar todo el potencial de Next.js! El código fuente de la aplicación se puede encontrar en next-firebase-auth-edge/examples/next-typescript-minimal Epílogo En esta guía, analizamos la integración de la nueva aplicación Next.js con Firebase Authentication. Aunque es bastante extenso, el artículo omitió algunas partes importantes del flujo de autenticación, como el formulario de restablecimiento de contraseña o métodos de inicio de sesión distintos del correo electrónico y la contraseña. Si está interesado en la biblioteca, puede obtener una vista previa . de la página de demostración inicial completa de next-firebase-auth-edge Cuenta con , , y más integración de Firestore acciones del servidor compatibilidad con App-Check La biblioteca proporciona una con toneladas de ejemplos. página de documentación dedicada Si le gustó el artículo, le agradecería destacar el repositorio . ¡Salud! 🎉 next-firebase-auth-edge Bonificación: implementación de la aplicación en Vercel Esta guía adicional le enseñará cómo implementar su aplicación Next.js en Vercel. Creando repositorio git Para poder implementar en Vercel, deberá crear un repositorio para su nueva aplicación. Dirígete a y crea un nuevo repositorio. https://github.com/ ya inició un repositorio git local para nosotros, por lo que solo necesita ir a la carpeta raíz de su proyecto y ejecutar: create-next-app git add --all git commit -m "first commit" git branch -M main git remote add origin git@github.com:path-to-your-new-github-repository.git git push -u origin main Agregar nuevo proyecto Vercel Vaya a e inicie sesión con su cuenta de Github https://vercel.com/ Después de haber iniciado sesión, vaya a la página Descripción general de Vercel y haga clic en Agregar nuevo > Proyecto. Haga clic en junto al repositorio de Github que acabamos de crear. No lo implementes todavía. Importar Antes de implementar, debemos proporcionar la configuración del proyecto. Agreguemos algunas variables de entorno: Recuerde configurar en , ya que Vercel usa HTTPS de forma predeterminada USE_SECURE_COOKIES true Ahora estamos listos para hacer clic en Implementar. Espere uno o dos minutos y debería poder acceder a su aplicación con una URL similar a esta: https://next-typescript-minimal-xi.vercel.app/ Hecho. Apuesto a que no esperabas que fuera tan fácil. Si le gustó la guía, le agradecería destacar el repositorio . next-firebase-auth-edge También puedes dejarme saber tus comentarios en los comentarios. ¡Salud! 🎉