Login con Auth0

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

¿Qué es un tenant?

Un tenant es un proyecto (termine, skillpath, etc…). Dentro de un proyecto puede haber diferentes aplicaciones. Dentro del mismo tenant el concepto de aplicación se refiere a una manera de hacer login. Por tanto, todos los usuarios del mismo tenant tienen en común que forman parte del mismo proyecto.

Configuración del lado de la página de auth0

1. Iremos a la web de auth0 y crearemos una nueva aplicación. En Applications Applications. Una vez creada, haciendo click sobre ella, podremos obtener los datos:

2. Menú Applications → Applications → Seleccionamos nuestra aplicación → pestaña Settings

Debemos tomar nota del domain y del client ID. Los utilizaremos más adelante en nuestro código de React.

Login con Auth0 1

3. Además, en el area de administración de nuestra aplicación de auth0, deberemos establecer los siguientes valores:

  • Allowed Callback URLs → Es la url (también podemos indicar varias separadas por comas) a la que podremos ir después de loguearnos. Si nuestra aplicación estuviese alojada en una carpeta del servidor, deberemos especificarlo expresamente (por ejemplo https://pablomonteserin.com/subcarpeta).
  • Allowed Logout URLs → Es la url (también podemos indicar varias separadas por comas) a la que podremos ir después de desloguearnos.Si nuestra aplicación estuviese alojada en una carpeta del servidor, deberemos especificarlo expresamente (por ejemplo https://pablomonteserin.com/subcarpeta).
  • Allowed Web Origins → Es la url (también podemos indicar varias separadas por comas) desde la que podremos llamar a la aplicación de Auth0.
  • Allowed Origins (CORS) → Es la url (también podemos indicar varias separadas por comas) desde la que podremos hacer peticiones a la API de Auth0.
Login con Auth0 2

En mi caso, asigné la url de la aplicación en local: http://localhost:8080

Personalizando Auth0

Auth0 cuenta con dos opciones generales de visualización: Nueva y Clásica. La denominada Nueva, tiene un acabado mucho más sofisticado, sin embargo, apenas cuenta con opciones de personalización, y si quieres añadir tu propio código Javascript o CSS, tendrás que recurrir al modo clásico. Para seleccionar uno de estos dos modos, tendrás que ir al menú Branding Universal Login Pestaña Settings 1.

Si deseas cambiar la imagen de fondo de la pantalla de login, puedes hacacerlo accediendo al menú Branding → Universal Login → Pestaña Login 2. En esta página podrás modificar aspectos generales de la página de login sobreescribiendo su hoja de estilo. Debes tener el módo clásico activo.

Login con Auth0 3

En esta misma página puedes descomentar el código de una propiedad llamada logo para asignar una imagen de un logo al cuadro de login 3.

Login con Auth0 4

Login con servicios de terceros

En el menú de auth0 Authentification Social → es posible establecer el login mediante diferentes providers.

Para establecer el login con Facebook, deberemos crear una nueva aplicación de Facebook.

Eliminar el popup en el que el usuario que se está registrando autoriza a auth0 a acceder a datos de la cuenta: Applications API Settings → Allow Skipping User Consent (esto no funciona en localhost).

Login con Google

En el menú Authentification Social Google → Debemos introducir dos claves API que obtendremos de los servicios de Google.

Tendremos que crear un nuevo proyecto en la Google Cloud Console → APIs & Services → Credentials → Create Credentials → OAuth Client ID → Tener en cuenta que si estamos haciendo la integración con Auth0, las urls que debemos introducir serán algo similar a esto:

  • Authorized Javascript origins: https://termine.eu.auth0.com
  • Authorized redirect URIs: https://termine.eu.auth0.com/login/callback

Api de auth0

https://auth0.com/docs/api/authentication

Configuración del lado de React

1. Instalaremos el siguiente módulo:

npm i @auth0/auth0-react

2. Añadiremos al fichero .env las siguientes varaibles de entorno

VITE_AUTH0_DOMAIN = sumtopp.eu.auth0.com
VITE_AUTH0_CLIENT_ID = Ve7aHYl8NwMlyK0Fj917WHPsUMSEfizb

3. Podemos vincular el token de autentificación generado por auth0 para que sea enviado en cada petición:

import axios from "axios";

export const i = axios.create({ baseURL: import.meta.env.VITE_SERVER_URL + 'api' });

export const setAuthToken = token => {
    i.defaults.headers.common.Authorization = token;
};

4. Crearemos un Provider para gestionar todo lo que tiene que ver con la autentificación:

./src/app/providers/auth/AuthProvider.jsx

import { createContext, useEffect, useContext, useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { setAuthToken } from '../../services/api';
import { login } from '../../services/auth';

export const AuthContext = createContext();

const AuthProvider = ({ children }) => {
    const { isLoading, loginWithRedirect, isAuthenticated, getIdTokenClaims, logout } = useAuth0();
    const [userId, setUserId] = useState(null);

    useEffect(() => {
        if (isAuthenticated) { // Si el usuario esta autenticado, el método getIdTokenClaims() nos devuelve el token de autenticación que pasaremos a nuestro backend para comprobar que sea correcto. Si lo es, lo vincularemos a nuestra instancia de axios
            getIdTokenClaims().then(({ __raw: idToken }) => {
                login(idToken).then((data) => {
                    setUserId(data.id);
                    setAuthToken(idToken)

                });
            });
        }
    }, [isAuthenticated]);


    return (
        <AuthContext.Provider value={{
            isLogued: isAuthenticated && !!userId,
            loginWithRedirect,
            isLoading,
            logout,
            userId
        }}>
            {children}
        </AuthContext.Provider>
    )
}

export const useAuth = () => useContext(AuthContext);

export default AuthProvider;

5. Editaremos ./src/main.js

El atributo redirectUri debe terminar en barra para

import ReactDOM from "react-dom";
import App from "./App";
import AuthProvider from './app/providers/auth/AuthProvider'

ReactDOM.render(
  <Auth0Provider
    domain={import.meta.env.VITE_AUTH0_DOMAIN}
    clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
    authorizationParams={{
        redirect_uri: window.location.origin + import.meta.env.VITE_PUBLIC_URL,
    }}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

6. Finalmente, cuando querramos acceder a métodos de la autentificación, usaremos el siguiente hook:

const { loginWithRedirect, isLogued, logout } = useAuth();

Validación del Token enviado desde una aplicación

1. Creamos una nueva aplicación Machine to machine.

2. Le asignamos todos los permisos.

3. Vamos a la pestaña Settings de la aplicación creada. En la aplicación de NodeJS, en el fichero .enc, habrá que pegar el AUTH_CLIENT_ID y el AUTH_SECRET.

Tras loguearnos por primera vez en Auth0, crear un registro en Firebase

En el area de administración de Auth0, iremos al menú Auth Pipeline Rules Create Empty → Creamos una rule con el nombre First login y el siguiente código:

function (user, context, callback) {
  // Para enviar propiedades al cliente debo definir una namespace con el valor que yo quiera, pero que empiece por http o https
  const namespace = 'https://pablomonteserin.com.com/isNew';
  context.idToken[namespace] = context.stats.loginsCount;
  callback(null, user, context);
}

Luego, en nuestra aplicación de React, utilizaremos el siguiente código:

import { useAuth0 } from "@auth0/auth0-react";
const { getIdTokenClaims } = useAuth0();

getIdTokenClaims().then(async (data) => {
  console.log(data)
  await createUserIfNotExists(data.sub);
});

api.js

export const createUserIfNotExists = async (userId) => {
    const result = await getDoc(doc(db, collectionName, userId));
    if (!result.data()) await setDoc(doc(db, collectionName, userId), {});
}

Si estamos usando una cuenta gratuita de auth0, deberíamos permitir un sólo medio de registro en la aplicación (correo electrónico/password, cuenta de google, cuenta de facebook, cuenta de github…) ya que la capacidad de identificar los distintos accesos utilizando una única id para todos ellos es una característica de pago en Auth0.

Para deshabilitar el acceso mediante correo electrónico/contraseña y dejar sólo el acceso mediante cuenta de Google, iremos a menú Applications → Seleccionamos la aplicación deseada → Pestaña Connections → deshabilitamos Username-Password-Authentication.

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.