Estoy moviendo un proyecto de React a Next.js y me preguntaba si el mismo proceso de autenticación está bien. Básicamente, el usuario ingresa su nombre de usuario y contraseña y esto se compara con las credenciales de la base de datos a través de una API (Node.js/Express). Por lo tanto, no estoy usando la funcionalidad API interna de Next.js, sino una API totalmente desacoplada de mi proyecto Next.js.
Si las credenciales de inicio de sesión son correctas, se devuelve un token JWT al cliente. Quería almacenar eso en el almacenamiento local y luego redirigir al usuario. Cualquier solicitud http futura enviará el token en el encabezado y verificará que sea válido a través de la API. ¿Está bien hacer esto? Pregunto porque veo mucha autenticación de Next.js usando cookies o sesiones y no sé si ese es el enfoque 'estándar' que debería adoptar.
Mi respuesta se basa puramente en mis experiencias y las cosas que leo. Siéntase libre de corregirlo si me equivoqué.
Entonces, mi forma es almacenar su token en la cookie HttpOnly
, y siempre usar esa cookie para autorizar sus solicitudes a la API de Nodo a través del encabezado de Authorization
. También uso la API de Node.js en mi propio proyecto, así que sé lo que está pasando.
El siguiente es un ejemplo de cómo manejo normalmente la autenticación con Next.js y la API de Node.js.
Para aliviar los problemas de autenticación, estoy usando la función getServerSideProps integrada de getServerSideProps
en una página para crear un nuevo componente reutilizable de orden superior que se encargará de la autenticación. En este caso, lo isLoggedIn
.
// isLoggedIn.jsx export default (GetServerSidePropsFunction) => async (ctx) => { // 1. Check if there is a token in cookies. Let's assume that your JWT is stored in 'jwt'. const token = ctx.req.cookies?.jwt || null; // 2. Perform an authorized HTTP GET request to the private API to check if the user is genuine. const { data } = await authenticate(...); // your code here... // 3. If there is no user, or the user is not authenticated, then redirect to homepage. if (!data) { return { redirect: { destination: '/', permanent: false, }, }; } // 4. Return your usual 'GetServerSideProps' function. return await GetServerSidePropsFunction(ctx); };
getServerSideProps
bloqueará la representación hasta que se haya resuelto la función, así que asegúrese de que su autenticación sea rápida y no pierda mucho tiempo.
Puede usar el componente de orden superior como este. Llamemos a este profile.jsx
, para la página de perfil de uno.
// profile.jsx export default isLoggedIn(async (ctx) => { // In this component, do anything with the authorized user. Maybe getting his data? const token = ctx.req.cookies.jwt; const { data } = await getUserData(...); // don't forget to pass his token in 'Authorization' header. return { props: { data, }, }, });
Esto debería ser seguro, ya que es casi imposible manipular cualquier cosa que esté en el lado del servidor, a menos que uno logre encontrar una manera de acceder a su back-end.
Si desea realizar una solicitud POST, generalmente lo hago así.
// profile.jsx const handleEditProfile = async (e) => { const apiResponse = await axios.post(API_URL, data, { withCredentials: true }); // do anything... };
En una solicitud POST, la cookie HttpOnly
también se enviará al servidor, debido a que el parámetro withCredentials
se establece en verdadero.
También hay una forma alternativa de usar la API sin servidor de Next.js para enviar los datos al servidor. En lugar de realizar una solicitud POST a la API, realizará una solicitud POST a la API sin servidor del 'proxy' Next.js, donde realizará otra solicitud POST a su API.