Cómo usar Auth0 para tu plataforma B2B multitenant con Next y Vercel

Me encontré con el siguiente problema: construir una plataforma que debería servir a varias empresas de forma aislada y personalizada, es decir, una plataforma B2B multicliente o multitenant.

Así que creé una aplicación en Next.js que usa Auth0 para autenticación y Vercel para alojamiento con subdominios para cada cliente/tenant.

Entendamos mejor estos conceptos:

Multi-tenant

Multi-tenant es una arquitectura en la que una única instancia de software (código fuente) sirve a múltiples clientes o "inquilinos", en nuestro caso, empresas. Este enfoque permite que varios usuarios compartan los mismos recursos y datos, pero de forma aislada y segura. Para lograr esto, es crucial implementar estrictos controles de acceso y segregación de datos para garantizar que los inquilinos no puedan acceder a los datos de los demás.

• Base de datos separada para cada inquilino: Cada inquilino tiene su propia base de datos independiente. Esto ofrece el nivel más alto de aislamiento, pero puede resultar más caro y complejo de gestionar.
  
• Esquema separado para cada inquilino: Cada inquilino tiene su propio esquema dentro de una base de datos compartida. Esto ofrece un buen equilibrio entre aislamiento y eficiencia, pero requiere cuidado en la gestión de esquemas.
  
• Tablas compartidas con la columna del inquilino: Todos los inquilinos comparten las mismas tablas y se utiliza una columna de ID de inquilino para separar los datos. Este enfoque es muy eficiente en cuanto a recursos, pero el aislamiento y la seguridad de los datos pueden ser más desafiantes.
  
• Virtualización a nivel de base de datos: Al utilizar tecnologías de virtualización, es posible crear instancias virtuales separadas para cada inquilino dentro de una única base de datos. Esto puede ofrecer un buen equilibrio entre aislamiento y eficiencia.

La arquitectura multitenant se utiliza comúnmente en aplicaciones SaaS (Software as a Service), lo que permite una escalabilidad eficiente y una personalización más sencilla para satisfacer las necesidades específicas de cada cliente.

Subdominios

La idea es tener subdominios debajo de nuestro dominio principal que representarán a los inquilinos, los cuales apuntarán a la misma aplicación:

*.midominio.com.br

• empresa1.midominio.com.br
• empresa2.midominio.com.br
  

Auth0 - Autenticación

La autenticación es un componente esencial en cualquier plataforma, más aún cuando se trata de empresas. Después de todo, la seguridad de los datos es una preocupación prioritaria para garantizar la confiabilidad e integridad de la información entre los diferentes usuarios de una plataforma B2B.

En este sentido, el uso de un servicio de autenticación robusto y confiable es crucial. Auth0 es uno de esos servicios que proporciona una solución completa para autenticación y autorización en diversas aplicaciones.

Auth0 tiene algunos conceptos:

• Aplicaciones: Representa un cliente o entidad que puede solicitar tokens de autenticación. Podría ser una aplicación móvil, una aplicación web, un servidor backend, etc.
  
• Tenant: Se refiere a una instancia aislada y dedicada de la plataforma que un cliente puede controlar y configurar. Normalmente se utiliza para representar entornos como desarrollo, sandbox y producción, etc.
  
• Organizaciones: Es una abstracción que facilita la colaboración y la gestión del acceso en un contexto empresarial. Es especialmente útil para representar empresas o equipos que utilizan aplicaciones SaaS (Software as a Service).
  

Manos a la obra

1. Crear una aplicación: Primero necesitas crear tu cuenta Auth0 y crear tu primera aplicación.

Puedes personalizar el HTML, CSS y JS de esta pantalla de inicio de sesión. Conoce más aquí.

Luego de completar la primera autenticación, recibirás el token con la información del usuario:

2. Configura tu aplicación: Por motivos de seguridad auth0 nos pide unas urls:

• Application Login URI: Esta es la URL de inicio de sesión principal, donde los usuarios serán invitados y podrán iniciar sesión. Lamentablemente no tenemos una URL por organización, sino una global por aplicación. Por lo tanto, necesitaremos dirigirnos mediante código a la URL del inquilino/organización específica.
  
• Allowed Callback URLs: Estas son las URL a las que se puede llamar después de iniciar sesión.
  
• Allowed Logout URLs: Estas son las URL a las que se puede acceder después de cerrar sesión.
  
• Allowed Web Origins: Estas son las URL permitidas para realizar llamadas a funciones Auth0 específicas.
  

3. Guarde algumas informações: Una vez creada su aplicación, necesitará el dominio y el ID de cliente.

Además, necesitarás la API Audience, que se encuentra en este link.

Flujo de Autenticación

Al acceder a cualquier subdominio, la aplicación no sabe qué tenant necesita configurar. Por lo tanto, debemos obtener la información del tenant de un servicio de backend. Esta información puede ser el endpoint del backend, el nombre del inquilino, el logotipo, feature flags, etc., pero lo más importante para este ejemplo es el ID de la organización en Auth0.

Con esta información podemos dirigir al usuario a la organización correcta, sin necesidad de que el usuario ingrese a la organización.

Como el mismo usuario Auth0 puede conectarse a más de una organización, para que el flujo de inicio de sesión funcione como se indica arriba, debemos realizar algunas configuraciones.

4. En la página de tu aplicación: selecciona a pestaña Organization. Después, Business User en tipos de usuarios y Prompt for Organization en flujo de login.

Esta funcionalidad permite seleccionar la organización si tienes más de una y también si inicias sesión sin indicar qué organización está relacionada. Imaginemos que iniciamos sesión desde nuestro dominio raíz: midominio.com.br.

Siguiendo nuestro flujo, después de iniciar sesión y seleccionar la organización, se nos dirige nuevamente a nuestra aplicación. Por lo tanto, debemos obtener el token JWT de nuestro usuario que inició sesión y dirigirlo a la URL de la organización correcta; esta URL debe estar en el JWT. Para ello, sigamos algunos pasos:

5. Navega hasta la sección de Actions: En el panel de navegación a la izquierda, haz clic en Actions y, enseguida, en el botón Flows.

6. Selecciona el flow de login: Haz clic en el flujo de login para modificarlo.

7. Crea una acción: Crea una acción con Login / Post Login. Coloca Add metadata to access token.

8. Inserta el script que añadirá los metadados al access token: Asegúrate de sustituir my_application con el nombre que deseas usar. Ese nombre o namespace debe ser una URL, pero no necesita ser una accesible. Por ejemplo, puedes usar https://tu_dominio.com.

Mira el código completo aquí.

9. Guarda la regla: Arrastra la acción al diagrama y haga clic en el botón Deploy para guardar tu regla.

Notas Importantes

• El uso de espacios de nombres personalizados es una práctica recomendada para evitar colisiones con reclamaciones JWT estándar.
• La información que agrega al token debe considerarse confidencial, así que asegúrese de que se maneje de forma segura en su aplicación.

Ahora, cada vez que un usuario se autentica, la información del perfil y de la organización se incluirá en los tokens de acceso e identificación, y podrá acceder a ella en su aplicación según sea necesario.

10. Crear una organización: Ahora, creemos una organización (tenant). Recordando que puedes automatizar todas estas configuraciones a través de las API de Auth0 en la pestaña organization -> Create Organization. Coloca el nombre y el display name:

11. Agrega información de la organización: Ahora vamos a la página de la organización para añadior metadados como tenant_url y tenant_name. También podemos agregar otros datos personalizados que tu aplicación pueda necesitar para personalizar una organización.

12. Habilita la conexión para tu organización: Aún en la página de la organización, ve a Connections y haz clic en Enable Connections.

Selecciona Username-Password-Authentication. Si quisieras habilitar la autenticación con la cuenta de Google, puedes hacerlo después.

Puedes elegir si permitir que cualquier usuario ingrese a la organización o no.

Bien, ahora tienes tu conexión configurada:

13. Invita a tus usuarios: En la pestaña Invitations puedes invitar a los usuarios para que acudan a tu organización:

Código para flujo de login

El primer paso en nuestro flujo de autenticación es recuperar las configuraciones del inquilino/organización. Para hacer esto, creamos un contexto llamado TenantContext que devuelve la configuración basada en la URL actual de la aplicación.

Mira el código aquí.

En el ejemplo del link, recuperamos la configuración a través de un objeto, pero podemos tener una API para este propósito.

Una vez que tengamos la configuración del inquilino/organización, podemos configurar nuestra aplicación y llamar a la función de inicio de sesión Auth0 indicando el ID de la organización actual.

Mira el código aquí.

Tenga en cuenta que este contexto es un contenedor del contexto oficial Auth0, para que podamos respaldar nuestro flujo B2B.

La aplicación completa está en este repositorio.

Al recibir una invitación, el usuario será redirigido a la siguiente página:

Al aceptar la invitación, el usuario deberá crear una contraseña.

Y será redirigido a la URL de la organización a la que fue invitado:

Para acceder a la aplicación de este tutorial accede a una de las empresas e inicia sesión.

https://empresa1.b2b.abilioazevedo.com.br/

https://empresa2.b2b.abilioazevedo.com.br/

Después de eso, si accedes a la URL principal:

https://b2b.abilioazevedo.com.br/

podrás iniciar sesión y, si tienes acceso a ambas empresas, deberás elegir en cuál iniciarás sesión:

Auth0 tiene funciones mejoradas para admitir mejor los flujos B2B. Una mejora futura es tener URL de inicio de sesión por organización y no globalmente por aplicación.

Por tanto, más que dominar una herramienta específica como Auth0, necesitamos comprender los flujos y conceptos para elegir mejor nuestras soluciones. Espero que este artículo sea útil para sus futuras aplicaciones.

¡Hasta luego!