Integración de Auth0 en una aplicación Express

La autenticación de los usuarios es un parte fundamental para cualquier aplicación o servicio en línea. La necesidad de garantizar tanto la seguridad como la privacidad de los usuarios ha llevado al desarrollo de estándares y protocolos para abordar los desafíos que presenta la autenticación en los entornos modernos, como son OAuth 2.0 y OpenID Connect (OIDC). Por lo tanto, saber cómo integrar estos estándares y protocolos en las aplicaciones es clave para la seguridad de estas. En esta entrada se va a explicar cómo integrar Auth0 en una aplicación Express, una plataforma de autenticación y autorización.

Autenticación con y OAuth 2.0 y OpenID: Simplificando la gestión de identidades

La autenticación de los usuarios de forma segura es un proceso complejo en las aplicaciones actuales. Por eso es tan habitual adaptar estándares como OAuth 2.0 y OpenID Connect (OIDC) ya que ofrecen múltiples ventajas tanto para los desarrolladores como los usuarios. Estos estándares permiten la implementación de Single Sign-On (SSO), que mejora la experiencia del usuario al permitirles iniciar sesión una vez y acceder a múltiples aplicaciones sin tener que volver a autenticarse. Lo que evita la necesidad de obligar a los usuarios a volverse a registrar en cada servicio. Eliminado la fricción que conlleva crear un nuevo usuario en cada servicio que se desea probar. Además, OAuth 2.0 y OIDC son altamente interoperables, lo que significa que funcionan bien con una amplia variedad de plataformas (Google, Microsoft, GitHub, …) y servicios, lo que facilita su implementación en diferentes entornos de desarrollo.

Sin embargo, trabajar con OAuth 2.0 y OIDC puede ser complejo y requiere un conocimiento profundo de los estándares y protocolos subyacentes. Es aquí donde entra en juego servicios como Auth0, una plataforma de autenticación y autorización que simplifica la gestión de identidades tanto para los desarrolladores y cómo las organizaciones. La plataforma ofrece características como la gestión de usuarios, SSO, autenticación multifactor (MFA), evitando la necesidad de implementar estas en las propias aplicaciones.

Creación de una cuenta en Auth0

Para poder usar Auth0 es una aplicación Express es necesario crear una cuenta, la cual es gratuita para aplicaciones con pocos usuarios. Para esto solamente se deben seguir estos pasos:

1. Visitar el sitio web de Auth0 y hacer clic sobre el botón “Sign Up”.
2. Completar el formulario de registro con una dirección de correo electrónico y una contraseña segura.
3. Seguir las instrucciones para verificar la dirección de correo electrónico y completar el proceso de registro.
4. Una vez que verificada la dirección de correo electrónico, se puede iniciar sesión en la cuenta de Auth0.

Crear una aplicación en Auth0

Antes poder integrar Auth0 en una aplicación es necesario crear es necesario crear las credenciales para esta. Lo que se consigue creando una nueva aplicación en el panel de control de Auth0. Para esto solamente se deben seguir los siguientes pasos:

1. Con una sesión iniciada en Auth0 se debe acceder al menú de la izquierda “Applications” y seleccionar dentro de este la opción “Applications”.
2. En la página de aplicaciones, se debe hacer clic en el botón “+ Create Application” situado a la derecha.
3. Seleccionar el tipo de aplicación que deseas crear.
4. Asignar un nombre que identifique a la aplicación y pulsar sobre el botón “Create” para crearla.

Una vez creada la aplicación en Auth0, se puede acceder a las páginas de la misma para obtener las credenciales y las configuraciones necesarias para usar en la aplicación. Estas credenciales incluyen el dominio de Auth0, el ID de cliente, el secreto de cliente y la URL de devolución de llamada, que se utilizarán para configurar la estrategia de autenticación en la aplicación Express.

Uso de Auth0 en una aplicación Express

Una vez que se tengan las credenciales de la aplicación ya se puede integrar Auth0 en una aplicación Express para facilitar la autenticación segura a los usuarios. Para lo que se deberá crear un proyecto Node.js con las dependencias necesarias. Creando una carpeta y ejecutando el siguiente comando en una terminal:

npm install express express-session passport passport-auth0 dotenv

Lo que instalara tanto Express como el resto de las librerías necesarias. En primer lugar, express-session permite gestionar las sesiones de los usuarios en la aplicación. Algo crucial para mantener el estado de autenticación del usuario durante su visita a la aplicación.

A continuación, Passport el middleware de autenticación para Node.js con el que se integrará la autenticación de los usuarios. Empleando en este caso la estrategia passport-auth0 que se corresponde con el servicio Auth0.

Finalmente, el módulo dotenv permite cargar variables de entorno desde un archivo .env. Lo que permite guardar las credenciales en este archivo y evitar la inclusión de estas en el código.

Configuración de la aplicación Express

Una vez instaladas las dependencias necesarias, ya se puede crear una aplicación Express que se integre con Auth0. Por ejemplo, el siguiente código.

// Importa las dependencias necesarias
const express = require('express');
const session = require('express-session');
const passport = require('passport');
const Auth0Strategy = require('passport-auth0');

// Importar la configuración del archivo .env
require("dotenv").config();

// Configura Express
const app = express();
const PORT = process.env.PORT || 3000;

// Configura la sesión
app.use(session({
  secret: process.env.SESSION_SECRET,
  cookie: {},
  resave: false,
  saveUninitialized: false
}));

// Inicializa Passport
app.use(passport.initialize());
app.use(passport.session());

// Configura la estrategia de autenticación de Auth0
const strategy = new Auth0Strategy({
  domain: process.env.AUTH0_DOMAIN,
  clientID: process.env.AUTH0_CLIENT_ID,
  clientSecret: process.env.AUTH0_CLIENT_SECRET,
  callbackURL: process.env.AUTH0_CALLBACK_URL
}, (accessToken, refreshToken, extraParams, profile, done) => {
  // Aquí se pude hacer algo con el perfil del usuario, como guardarlo en la base de datos
  return done(null, profile);
});

passport.use(strategy);

passport.serializeUser((user, done) => {
  done(null, user);
});

passport.deserializeUser((user, done) => {
  done(null, user);
});

// Define las rutas
app.get('/', (req, res) => {
  if (req.isAuthenticated()) {
    const userProfile = req.user;
    res.send(`Bienvenido, ${userProfile.displayName}!`);
  } else {
    res.send('Inicia sesion para ver tu perfil');
  }
});

// Inicia la autenticación
app.get("/login",
 passport.authenticate("auth0", { scope: "openid email profile" }),
  (req, res) => {
    res.redirect("/");
  }
);

// Maneja la respuesta de autenticación
app.get("/callback", (req, res, next) => {
  passport.authenticate("auth0", (err, user, info) => {
    if (err) {
      return next(err);
    }
    if (!user) {
      return res.redirect("/login");
    }
    req.logIn(user, (err) => {
      if (err) {
        return next(err);
      }
      res.redirect("/");
    });
  })(req, res, next);
});

// Gestiona el cierre de sesión
app.get("/logout", (req, res) => {
  req.logout(() => { });
  res.redirect('/');
});

// Inicia el servidor
app.listen(PORT, () => {
  console.log(`Servidor en ejecución en http://localhost:${PORT}`);
});

En este programa, una vez importadas las dependencias, se llama a la función config() de dotenv para cargar las variables de entorno definidas en un archivo .env. En este archivo es donde se guardarán las credenciales de la aplicación.

Tras esto, se crea una instancia de la aplicación Express y se configura el middleware de sesión. Usando una clave secreta que está en el archivo .env para firmar las cookies de sesión. Posteriormente se inicia Passport y se configura para usar sesiones de Express.

Tras esto se configura la estrategia de autenticación de Passport para utilizar Auth0. Indicando las credenciales necesarias para conectarse con Auth0, como el dominio, el ID de cliente y el secreto de cliente. Además, se define una función de devolución de llamada para procesar la respuesta de autenticación de Auth0 y guardar el perfil del usuario. La URL de la devolución de llamada se deberá autorizar de forma explícita en el panel de Auth0, para ello se deberá ir a la aplicación y buscar la casilla “Allowed Callback URLs” en la que deberá incluirá http://localhost:3000/callback o la URL en la que se publica la ruta de callback. Para guardar los cambios se deberá pulsar sobre el botón “Save Changes”.

A continuación, se crean las funciones para serializar y deserializar usuarios, las rutas y se inicia el servidor.

Las rutas de la aplicación

En la aplicación se han creado 4 rutas:

1. Ruta principal (“/”): Esta es una ruta en la que se muestra si el usuario ha iniciado sesión o no. Si un usuario está autenticado (autenticado con éxito), se muestra un mensaje de bienvenida que incluye el nombre de usuario del perfil. Si el usuario no está autenticado, se muestra un mensaje para iniciar sesión.
2. Ruta de inicio de sesión (“/login”): Utiliza el middleware para iniciar el proceso de autenticación utilizando la estrategia de autenticación de Auth0.
3. Ruta de respuesta de autenticación (“/callback”): Utiliza el middleware para procesar la respuesta de autenticación de Auth0. Si la autenticación es exitosa, se inicia sesión en el usuario y se redirige a la página de inicio. Si no se puede autenticar al usuario, se redirige de nuevo a la página de inicio de sesión.
4. Ruta de cierre de sesión (“/logout”): Cierra la sesión del usuario y elimina cualquier información de sesión existente. Luego, se redirige al usuario de vuelta a la página principal (“/”).

Verificar el proceso de autenticación en la aplicación

Una vez hecho esto se puede lanzar el servicio con ejecutando en el proyecto el siguiente comando:

node index.js

Para acceder a la aplicación escribiendo en el navegador http://localhost:3000.

En este punto, como se ha iniciado sesión todavía, la aplicación nos invita a iniciar la sesión. Para ello, como, por simplicidad, no se ha creado una página web se debe escribir en el navegador la dirección para hacer login: http://localhost:3000/login. Apareciendo la página de Auth0 para iniciar la sesión.

Una vez iniciada la sesión, tanto sea con Google como una cuenta propia, la ventana nos devolverá a la página principal indicando el nombre del usuario.

Para salir solamente se deberá ir a ruta de logout http://localhost:3000/logout. Lo que cerrará la sesión y nos devolverá a la ruta raíz sin un usuario.

Conclusiones

En esta entrada se han visto los pasos básicos para integrar Auth0 en una aplicación Express. Una forma sencilla para usar las mejores prácticas de autenticación en las aplicaciones creadas con Node.

Imagen de Gerd Altmann en Pixabay