Implementación de Firebase Authentication con Auth0 y Firebase Admin

¿Cómo integrar Firebase Authentication con Auth0?

Implementar Firebase Authentication con Auth0 puede parecer una tarea complicada, pero dividida en pasos se transforma en una tarea manejable. Comenzamos configurando Firebase para recibir las credenciales adecuadas y luego procedemos con la vinculación entre ambos servicios para autenticar y autorizar usuarios correctamente.

¿Cuál es el primer paso en la configuración de Firebase?

Primero, accedemos al proyecto de Firebase para descargar una nueva llave privada desde la sección de "Service Accounts". Este archivo es esencial para establecer la comunicación segura entre su aplicación y Firebase. No olvides que esta llave debe ser resguardada y no publicada en un repositorio público; añadirla al archivo .gitignore es una práctica recomendada.

# En el archivo .gitignore
ServiceAccountKey.json

Descargada la llave, colócala en el directorio de Firebase en tu proyecto, renombrándola a ServiceAccountKey.json. Esto permitirá que tu código la acceda fácilmente cuando la necesite.

¿Cómo se prepara Firebase Admin?

Con la llave en su lugar, el siguiente paso es configurar el módulo administrativo de Firebase. Crea un archivo admin.js y asegúrate de instalar la dependencia firebase-admin.

const admin = require('firebase-admin');
const serviceAccount = require('./ServiceAccountKey.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: `https://${serviceAccount.project_id}.firebaseio.com`
});

Este paso configura tu aplicación para comunicarte con Firebase utilizando credenciales seguras. Verifica cuidadosamente todos los detalles dentro del archivo JSON para garantizar la correcta inicialización.

¿Cómo crear un Custom Token con Auth0?

Dentro de tus rutas de API, será necesario establecer una nueva ruta que cree un Custom Token. Esto garantiza que solo los usuarios autenticados previamente en Auth0 puedan interactuar con tu aplicación.

Para esto, necesitarás importar autenticación desde Auth0 utilizando getSession y requireAuth, además de configurar jsonwebtoken para manejar tokens si aún no está instalada.

npm install jsonwebtoken

Así, puedes proceder implementando la lógica que permita la interacción mediante tokens personalizados:

import { getSession, requireAuth } from '@auth0/nextjs-auth0';
import jwt from 'jsonwebtoken';
import admin from './admin';

export default requireAuth(async function handler(req, res) {
  const session = await getSession(req, res);
  const userId = session.user.sub;
  
  const accessToken = session.accessToken;
  const decodedToken = jwt.decode(accessToken);

  const claims = mapPermissionsToClaims(decodedToken.permissions);

  const firebaseToken = await admin.auth().createCustomToken(userId, claims);

  res.json({ firebaseToken, claims });
});

function mapPermissionsToClaims(permissions) {
  const genres = [];
  
  if (permissions.includes('read:HorrorMovies')) {
    genres.push('Horror');
  }
  
  if (permissions.includes('read:ThrillerMovies')) {
    genres.push('Thriller');
  }

  return genres;
}

¿Cómo verificar que todo funciona correctamente?

Después de configurar y levantar tu proyecto, es importante realizar pruebas en el navegador. Al acceder a la API Route y revisar la salida JSON puedes verificar que se estén generando tokens con las reclamaciones esperadas. Esto asegura que los roles y permisos configurados en Auth0 se estén reflejando correctamente en Firebase.

Este proceso permite gestionar diversos tipos de acceso a tu aplicación basada en roles, como los creados en Auth0 y gestionados mediante tus Custom Tokens en Firebase. Con esta base sólida, puedes extender la funcionalidad mediante el agregado de más servicios o ajustando las reglas de interfaz con Firestore en próximas fases.