Login con Auth0

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.

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

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.

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 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 install @auth0/auth0-react

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

REACT_APP_AUTH0_DOMAIN = tuDominioDeAuth0
REACT_APP_AUTH0_CLIENT_ID = tuClientIdDeAuth0

3. Editaremos ./src/index.js

El atributo redirectUri debe terminar en barra para

import ReactDOM from "react-dom";
import App from "./App";
import { Auth0Provider } from "@auth0/auth0-react";

ReactDOM.render(
  <Auth0Provider
    domain={process.env.REACT_APP_AUTH0_DOMAIN}
    clientId={process.env.REACT_APP_AUTH0_CLIENT_ID}
    redirectUri={window.location.origin + process.env.PUBLIC_URL + '/'}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

import { useAuth0, withAuthenticationRequired } from '@auth0/auth0-react';

const App = () => {
    const { isAuthenticated, logout, user } = useAuth0();

    return (
        <div>
            <span>Hi, {user.name} <img width={50} height={50} src={user.picture} alt="" /></span>
            <div>Logged: {String(isAuthenticated)}</div>
            <div>Verified: {String(user.email_verified)}</div>
            <button onClick={logout}>Logout</button>
        </div>
    );
};

export default withAuthenticationRequired(App);

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.