Administración de sesiones con service workers

Firebase Auth permite usar service workers a fin de detectar y pasar tokens de ID de Firebase para administrar sesiones. Esto tiene los siguientes beneficios:

  • Capacidad de pasar un token de ID en cada solicitud HTTP desde el servidor sin trabajo adicional.
  • Capacidad de actualizar el token de ID sin ningún recorrido de ida y vuelta ni latencias adicionales.
  • Sesiones sincronizadas de backend y frontend. Las aplicaciones que necesitan acceder a servicios de Firebase, como Realtime Database, Firestore, etc. y algunos recursos externos del servidor (base de datos SQL, etc.) pueden usar esta solución. Además, también se puede acceder a la misma sesión desde el Service Worker, Web Worker o Shared Worker.
  • Quita la necesidad de incluir el código fuente de Firebase Auth en cada página (reduce la latencia). Cuando se cargue y se inicialice, el Service Worker podría controlar la administración de las sesiones de todos los clientes en segundo plano.

Descripción general

Firebase Auth está optimizado para ejecutarse en el lado del cliente. Los tokens se guardan en un almacenamiento web, lo que facilita la integración con otros servicios de Firebase, como Realtime Database, Cloud Firestore, Cloud Storage, etcétera. Para administrar sesiones desde la perspectiva del servidor, los tokens de ID deben recuperarse y pasarse al servidor.

firebase.auth().currentUser.getIdToken()
  .then((idToken) => {
    // idToken can be passed back to server.
  })
  .catch((error) => {
    // Error occurred.
  });

Sin embargo, esto significa que algunas secuencias de comandos se deben ejecutar desde el cliente para obtener el token de ID más reciente y luego pasarlo al servidor a través del encabezado de la solicitud, el cuerpo de POST, etcétera.

Es posible que esto no escale y se necesiten cookies de sesión en el servidor. Los tokens de ID se pueden configurar como cookies de sesión, pero son de corta duración y deberán actualizarse desde el cliente y luego configurarse como cookies nuevas cuando estas caduquen, lo que en ocasiones requiere un recorrido de ida y vuelta adicional si el usuario no ha visitado el sitio por un tiempo.

Aunque Firebase Auth proporciona una solución de administración de sesiones con cookies más tradicional, esta funciona mejor en aplicaciones con cookies httpOnly en el servidor y es más difícil de administrar, ya que los tokens del cliente y los del servidor podrían perder la sincronización, en especial si también necesitas usar servicios de Firebase de otro cliente.

En cambio, los Service Workers se pueden utilizar a fin de administrar sesiones de usuario para el consumo en el servidor. Su funcionamiento se debe a lo siguiente:

  • Los Service Workers tienen acceso al estado actual de Firebase Auth. El token de ID de usuario actual se puede recuperar desde el Service Worker. Si el token caduca, el SDK del cliente lo actualizará y mostrará uno nuevo.
  • Los Service Workers pueden interceptar solicitudes de captura y modificarlas.

Cambios en el Service Worker

El Service Worker deberá incluir la biblioteca de Auth y la capacidad de obtener el token de ID actual si un usuario accedió.

// Initialize the Firebase app in the service worker script.
firebase.initializeApp(config);

/**
 * Returns a promise that resolves with an ID token if available.
 * @return {!Promise<?string>} The promise that resolves with an ID token if
 *     available. Otherwise, the promise resolves with null.
 */
const getIdToken = () => {
  return new Promise((resolve, reject) => {
    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
      unsubscribe();
      if (user) {
        user.getIdToken().then((idToken) => {
          resolve(idToken);
        }, (error) => {
          resolve(null);
        });
      } else {
        resolve(null);
      }
    });
  });
};

Todas las solicitudes de captura del origen de la app se interceptarán y se adjuntarán a la solicitud a través del encabezado si hay un token de ID disponible. Los encabezados de solicitud en el servidor para el token de ID se revisarán, verificarán y procesarán. En la secuencia de comandos del Service Worker, se interceptaría y modificaría la solicitud de obtención.

const getOriginFromUrl = (url) => {
  // https://stackoverflow.com/questions/1420881/how-to-extract-base-url-from-a-string-in-javascript
  const pathArray = url.split('/');
  const protocol = pathArray[0];
  const host = pathArray[2];
  return protocol + '//' + host;
};

self.addEventListener('fetch', (event) => {
  const requestProcessor = (idToken) => {
    let req = event.request;
    // For same origin https requests, append idToken to header.
    if (self.location.origin == getOriginFromUrl(event.request.url) &&
        (self.location.protocol == 'https:' ||
         self.location.hostname == 'localhost') &&
        idToken) {
      // Clone headers as request headers are immutable.
      const headers = new Headers();
      for (let entry of req.headers.entries()) {
        headers.append(entry[0], entry[1]);
      }
      // Add ID token to header.
      headers.append('Authorization', 'Bearer ' + idToken);
      try {
        req = new Request(req.url, {
          method: req.method,
          headers: headers,
          mode: 'same-origin',
          credentials: req.credentials,
          cache: req.cache,
          redirect: req.redirect,
          referrer: req.referrer,
          body: req.body,
          bodyUsed: req.bodyUsed,
          context: req.context
        });
      } catch (e) {
        // This will fail for CORS requests. We just continue with the
        // fetch caching logic below and do not pass the ID token.
      }
    }
    return fetch(req);
  };
  // Fetch the resource after checking for the ID token.
  // This can also be integrated with existing logic to serve cached files
  // in offline mode.
  event.respondWith(getIdToken().then(requestProcessor, requestProcessor));
});

Por lo tanto, en todas las solicitudes autenticadas siempre habrá un token de ID que se pasa en el encabezado sin necesidad de procesamiento adicional.

Para que el Service Worker detecte los cambios en el estado de Auth, por lo general, se debe instalar en la página de registro o de acceso. Después de la instalación, el Service Worker tiene que llamar a clients.claim() cuando se active a fin de que pueda configurarse como controlador de la página actual.

// In service worker script.
self.addEventListener('activate', event => {
  event.waitUntil(clients.claim());
});

Cambios en el cliente

El Service Worker, si es compatible, se debe instalar en la página de registro o de acceso del cliente.

// Install servicerWorker if supported on sign-in/sign-up page.
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js', {scope: '/'});
}

Cuando el usuario accede y se lo redirecciona a otra página, el Service Worker podrá inyectar el token de ID en el encabezado antes de que finalice el redireccionamiento.

// Sign in screen.
firebase.auth().signInWithEmailAndPassword(email, password)
  .then((result) => {
    // Redirect to profile page after sign-in. The service worker will detect
    // this and append the ID token to the header.
    window.location.assign('/profile');
  })
  .catch((error) => {
    // Error occurred.
  });

Cambios en el servidor

El código en el servidor podrá detectar el token de ID en cada solicitud, como se ilustra en el siguiente código de muestra de Express de Node.js:

// Server side code.
const admin = require('firebase-admin');
const serviceAccount = require('path/to/serviceAccountKey.json');

// The Firebase Admin SDK is used here to verify the ID token.
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

function getIdToken(req) {
  // Parse the injected ID token from the request header.
  const authorizationHeader = req.headers.authorization || '';
  const components = authorizationHeader.split(' ');
  return components.length > 1 ? components[1] : '';
}

function checkIfSignedIn(url) {
  return (req, res, next) => {
    if (req.url == url) {
      const idToken = getIdToken(req);
      // Verify the ID token using the Firebase Admin SDK.
      // User already logged in. Redirect to profile page.
      admin.auth().verifyIdToken(idToken).then((decodedClaims) => {
        // User is authenticated, user claims can be retrieved from
        // decodedClaims.
        // In this sample code, authenticated users are always redirected to
        // the profile page.
        res.redirect('/profile');
      }).catch((error) => {
        next();
      });
    } else {
      next();
    }
  };
}

// If a user is signed in, redirect to profile page.
app.use(checkIfSignedIn('/'));

Conclusión

Además, debido a que los tokens de ID se configurarán a través de los Service Workers y estos no pueden ejecutarse desde el mismo origen, no hay riesgo de que ocurra un CSRF, ya que un sitio web de origen distinto que intente llamar a los extremos no podrá invocar al Service Worker y, de esta manera, la solicitud no aparecerá autenticada desde la perspectiva del servidor.

Si bien ahora los Service Workers son compatibles con todos los navegadores principales modernos, hay otros más antiguos que no los admiten. Por lo tanto, es posible que se necesite algún resguardo para pasar el token de ID a tu servidor cuando los Service Workers no estén disponibles o cuando una app solo pueda ejecutarse en navegadores que admiten Service Workers.

Ten en cuenta que los Service Workers tienen un solo origen y solo se instalarán en sitios web que se administran mediante una conexión HTTPS o localhost.

Si deseas obtener más información sobre la compatibilidad del navegador para Service Worker, visita caniuse.com.

Enviar comentarios sobre...

Si necesitas ayuda, visita nuestra página de asistencia.