Cómo Implementar Autenticación en una SPA React con Auth0 como Proveedor de Identidad

Aprende a integrar un método de autenticación fácil y rápido a una SPA con Auth0.

Auth0 es un proveedor de identidades, que nos permite administrar la identidad de nuestros usuarios de forma efectiva y con mucho control.

No me adentraré más en la teoría detrás de esta plataforma, en este blog es un paso a paso para integrar una SPA en ReactJs a auth0, crearas una nueva cuenta gratuita, crearas un tenant, una api, roles, y finalmente conectaras todo para tener autenticación rápido en tu aplicación.

Vamos a ello:

Para seguir este paso a paso, necesitas conocimientos básicos en ReactJs, para entender, navegar y manipular en el proyecto demo para adaptarlo a tus necesidades.

Paso 1: Crea una cuenta gratuita en auth0

Entra a https://auth0.com/ y crea una cuenta gratuita de tipo personal.

Paso 2: Crea un tenant

Una vez creada tu cuenta, te encontrarás en el dashboard de la plataforma. En el proceso de creación se creó un tenant por defecto. Puedes usar ese o crear uno nuevo:

En la parte superior izquierda, selecciona el componente luego del icono de auth0.

Se desplegará una pestaña, al final de esta podrás ver la opción “Create tenant”

Elige un nombre, el cual si es que no tienes un nombre de dominio personalizado te servirá como tal.

Elije una región donde existirá este tenant, te recomiendo la más cercana a tu ubicación geográfica.

Por último escoge el Enviroment Tag, ya que esto es una demo, la mejor opción es developement.

Puedes crear n tenants y cambiar entre ellos más tarde. [por ahora solo necesitas uno]

💡 Más información sobre Tenant: https://auth0.com/docs/get-started/auth0-overview/create-tenants

Paso 3: Añade un user a la db por defecto

En el panel izquierdo tienes acceso a todos las opciones y apartados de auth0. En “Authentication” puedes ver las “Database”. Por defecto hay una llamada “Username-Password-Authentication” allí entre otras cosas podrás configurar las políticas válidas para passwords y ver cuál de tus aplicaciones está habilitada para usar esa Database.

Es en las Database de auth0 donde existirán los Users o identidades que podrán acceder a la aplicación a la que tengan acceso.

Entonces puedes crear un usuario y asignarle la database por defecto o puedes crear una nueva. Luego de tomar esa decisión, dirígete a “User Management” y luego “Users” en el panel izquierdo.

Si bien hay maneras de migrar usuarios desde otros orígenes, ya sean en la nube u on-premise, en este ejemplo solo crearemos un usuario directamente en auth0.

Para saber mas sobre migración de Users en auth0: https://auth0.com/docs/manage-users/user-migration

Para crear un user, presiona “Create User” agrega un correo, una password y una conexión a la database default.

Los criterios aceptables para la password serán determinados en la configuración de la database con la que se conecte. Por lo tanto, si quieres modificar esos criterios para, ya sea aumentar el length o imponer el uso de caracteres especiales, debes volver al apartado “Authentication” presionar la database e ir a “password policy”.

Paso 4: Crea una aplicación SPA

Una aplicación en auth0 no implica ninguna característica en particular, pero se clasifican en 4 tipos:

Native: Aplicaciones móviles o de escritorio que se ejecutan de forma nativa en un dispositivo (como iOS o Android)

M2M: Aplicaciones no interactivas, como herramientas de línea de comandos, daemons, dispositivos IoT o servicios que se ejecutan en un backend.

Regular web application: Aplicaciones web tradicionales que realizan la mayor parte de su lógica de aplicación en el servidor como Express.js o ASP.NET

SPA: Aplicaciones JavaScript que realizan la mayor parte de su lógica de interfaz de usuario en un navegador web, comunicándose con un servidor web principalmente mediante APIs (como AngularJS + Node.js o React).

Para este caso se busca conectar a una SPA en React por lo que usaremos esta última opción.

En el panel izquierdo dirígete a “Applications/applications” luego presiona el botón “Create Application”, finalmente elige un nombre y selecciona el tipo SPA.

Una vez aquí podrás darte cuenta de que auth0 nos proporciona templates en las diferentes librerías/frameworks en el apartado Quickstart.

Si no tienes previamente una aplicación terminada, puedes comenzar con este template, de lo contrario pon atención a la configuración para aplicarlo en tu propia aplicación.

El apartado settings encontrarás los datos importantes que necesitaras agregar al código, como el ClientID y el Client Secret. También necesitarás una audience que se obtiene creando una API en auth0, pero eso lo verás en el siguiente paso.

Antes de continuar, verifica que esta aplicación tenga acceso a la Database default o a la que creaste. Puedes revisar en el apartado “Connections”

Auth0 permite la autenticación con terceros como google, twitter, github, facebook, etc. Debes hacer una configuración para habilitar cada uno, si necesitas esta opción puedes ver mas aquí: https://marketplace.auth0.com/features/social-connections

Paso 5: Crea una API

Para crear una API en auth0, dirígete en el panel izquierdo al apartado “Applications/Apis”, encontrarás la API por defecto que está enfocada en administrar la cuenta auth0 y sus recursos vía código, por ejemplo, crear una action, modificar un user, etc. Por lo que no servirá para este ejemplo, por lo tanto, crea una API nueva, con el boton “Create API”

Paso 6: Conecta tu SPA-React a Auth0

Link repositorio con la demo: https://github.com/JazminTrujilloEyzaguirre/demo-react-auth0

En la raíz del proyecto encontrarás un archivo llamado api-server.js que tiene la configuración para la autenticación, haciendo uso de dos librerías [ express-jwt // jwks-rsa ] y los datos en el archivo auth-config.js

Dirígete a settings de la aplicación y configura el host y el puerto.

Lo siguiente sera correr el comando para instalar los paquetes necesarios y correr la aplicación: npm install & npm start

En el proceso de login, se genera un authorization_code, se generará un access_token y un id_token con la información de autenticación del usuario, la aplicación a la que está accediendo, la audiencia de la api, etc.

En el proceso de autenticación, el usuario es redirigido a un proveedor de identidad [auth0], donde ingresa sus credenciales. Si la autenticación es exitosa, el proveedor de identidad emite un token de identificación que contiene información sobre el usuario, como su nombre y dirección de correo electrónico. La aplicación que recibe el token puede verificar la autenticación del usuario y utilizar la información incluida en el token para personalizar la experiencia del usuario y proteger los recursos.

Paso 7: [opcional] Habilita y personaliza universal Login, new experience en auth0

Como pudiste notar el login usando universal login de auth0 está personalizado en este demo, para que tú puedas personalizar tu login, debes conocer que es universal login en auth0 y que tan avanzadas son las opciones que ofrece. Te cuento un poco sobre esto:

Universal Login es una funcionalidad de Auth0 que permite a los desarrolladores crear un punto de inicio único y personalizado para la autenticación de usuarios en sus aplicaciones. Con Universal Login, los usuarios pueden iniciar sesión en diferentes aplicaciones utilizando el mismo proveedor de autenticación, lo que mejora la experiencia del usuario y reduce la complejidad de la gestión de contraseñas. Universal Login también ofrece una amplia variedad de personalizaciones, como la personalización de la página de inicio de sesión, la adición de logotipos y colores corporativos y la integración con las políticas de autenticación de la empresa.

New Experience y Classic Experience son las dos opciones de interfaces de usuario que se ofrece Auth0 para la configuración y gestión de la plataforma en cuanto a login.

New Experience es la experiencia de usuario más moderna y reciente de Auth0. Ofrece una interfaz de usuario intuitiva, una vista de tablero detallada y una mejor organización de los recursos y configuraciones. Está diseñado para ser más fácil de usar y para mejorar la productividad de los desarrolladores y los administradores de seguridad.

Classic Experience es la experiencia de usuario anterior de Auth0. Es una interfaz de usuario más tradicional con una estructura de menú y vista de tablero más sencilla. Algunos usuarios pueden estar familiarizados con esta experiencia y pueden optar por usarla si prefieren una interfaz más simple y directa.

Ambas opciones ofrecen las mismas funciones y características de Auth0, pero varían en la forma en que se presentan y se organizan las configuraciones y los recursos.

En este demo, use New experience. Y ya que necesitaba una personalización rápida, use la configuración más básica que ofrece, donde no es necesario escribir código ni CSS.

En Customization Options, encontrarás una interfaz amigable que te permitirá hacer cambios básicos, de color, fuente, etc.

En Advance Options te permitirá acceder a un editor donde podrás insertar código HTML, CSS y hacer uso de librerías como Bootstrap.

Bien, en este punto hemos navegado y usado algunas funciones de las que auth0 nos ofrece, para integrar rápidamente una SPA y tener una autenticación rápida, con los últimos estándares de seguridad.

Aun así, auth0 tiene mucho, muchísimo más que ofrecer, si te interesa saber más, escríbenos y estaremos felices de ayudarte.

¿Listo para mejorar la autenticación en tus aplicaciones web?

En Kranio, contamos con expertos en integración de soluciones de autenticación como Auth0 en aplicaciones React. Te ayudamos a implementar sistemas seguros y escalables que protegen la información de tus usuarios y optimizan la experiencia de acceso. Contáctanos y descubre cómo podemos impulsar la seguridad y eficiencia de tus proyectos tecnológicos.

‍