Login con Auth0

Instalación de auth0 en nuestra aplicación

Puedes reutilizar este completísimo servicio de login.

Para ello, instalaremos el siguiente módulo:

npm install @auth0/auth0-react

Iremos a la web de auth0 y crearemos una nueva aplicación. En Applications → applications → seleccionamos nuestra aplicación podremos obtener los datos:

• domain
• client ID

Que tendremos que poner en el código fuente de nuestra aplicación:

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);

También en el area de administración de auth0, deberemos establecer los siguientes valores:

• Allowed Callback URLs
• Allowed Logout URLs
• Allowed Web Origins
• Allowed Origins (CORS)

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

Configuración de auth0

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

Para cambiar el logo y la apariencia, iremos a Branding → Universal Login.

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).

Api de auth0

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