Autenticación en Aplicaciones Universales en React con Next.js

Carlos Castro
Aug 26, 2017 · 2 min read

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-cookie

O el siguiente comando si usas npm:

npm install next react react-dom prop-types axios js-cookie --save

Decidí 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.js

En 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 dev

Gracias

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.

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade