Estuve lidiando con auth en NextJS, usando next-auth.
Si no estás familiarizado con este stack, esta imagen puede ser muy útil.
Building Your Application: Authentication | Next.js
Todo lo que se muestra en la imagen transcurre en tu app con NextJS.
El server no es una API externa. Perdí bastante tiempo hasta que entendí esto.
Es un poco raro si uno no está al día con las tendencias frontenders.
Para la posteridad, si tenes una app NextJS y querés enviar JWTs a un backend que tengas, tenes un par de opciones. Yo me encontré con este approach perdido en una discusión de github y me sirvió.
En el callback jwt, el token viene desencriptado, es decir, con los datos del usuario.
En mi caso esperaba un string que comenzara con ey... pero esto ya venía decodificado
- next-auth genera un JWT, lo encripta (JWE) y lo guarda en una cookie
next-auth.session-token - Podemos enviar este JWE y desencriptarlo en nuestro back usando
getToken - Podemos firmar nuestro propio JWT para enviar al back y desencriptarlo como un JWT tradicional, utilizando el secret
NEXTAUTH_SECRET(Forma tradicional)
// auth.ts
import { verify, JwtPayload } from "jsonwebtoken";
const token = req.headers.authorization?.split(" ")[1];
if (!token || !apiKey) {
return res.status(401).json({ error: "No token provided" });
}
const decodedtoken = verify(token, process.env.JWT_TOKEN as string);
try {
if (typeof decoded === "object") {
req.user = decoded;
}
} catch (err) {
throw new Error("Invalid token");
}