Autenticación en Aplicaciones Universales en React con Next.js
Cuando finalmente me di tiempo de probar Next.js, lo primero que quise hacer es escribir una aplicación, pero caí en cuenta que la parte de autenticación no está establecida de manera estándar. Así que trate de implementar una solución que pudiese reutilizar en mis proyectos.
¿Qué es lo que vamos a implementar?
Vamos a implementar un proyecto pequeño en dónde podemos ver como manejar la autenticación con Next.js. Para esto voy a usar un API en Rails con Autenticación usando JWT. Puedes leer al respecto aquí,
El proyecto que vamos a implementar tiene cuatro páginas: creación de cuenta, inicio de sesión, lista de usuarios y detalle de usuario. Si tienes curiosidad de ver el estado final de la aplicación aquí está el demo.
Iniciar el proyecto
Para iniciar el proyecto, necesitamos ejecutar el siguiente comando usando yarn.
yarn add next react react-dom prop-types axios js-cookieO el siguiente comando si usas npm:
npm install next react react-dom prop-types axios js-cookie --saveDecidí usar axios pues es un cliente http que corre en node.js y el navegador. También incluí js-cookie, pues voy a usar cookies en lugar de localStorage (o sessionStorage) para almacenar el JWT. La ventaja de tenerlo en un cookie es que también podemos acceder a el JWT en el lado del servidor mientras que eso no ocurre con localStorage.
¿Cómo funciona la autenticación?
Los siguientes archivos son los que se encargan de la autenticación.
/lib/auth.js
/lib/redirect.js
/lib/session.js
/pages/auth/login.js
/pages/auth/logout.js
/pages/auth/register.js
/pages/user.jsEn ellos la clave es el manejo del JWT en el cookie. Cuando el usuario es validado, recibe un JWT desde el /user_token API y este es guardado. Entender el rol de las funciones existentes en auth.js es la clave.
/lib/auth.js
/lib/redirect.js
/lib/session.js
/pages/auth/login.js
/pages/auth/register.js
/pages/auth/logout.js
/pages/user.js
Código Fuente
El código fuente está en mi repositorio de GitHub aquí. Si ya tienes instalado Node.js y Git, sólo debes hacer lo siguiente.
git clone https://github.com/carlos-peru/next-with-api.git
cd next-with-api
yarn install
yarn run devGracias
Gracias por haber llegado hasta el final. Si deseas hacer preguntas, compartir una observación o dar una opinión, por favor no dejes de comentar.