SDK de Auth0 para aplicaciones de una sola página de React

Describe el SDK de Auth0 para aplicaciones de una sola página de React

El SDK de React de Auth0 (auth0-react.js) es una biblioteca de JavaScript para implementar autenticación y autorización en aplicaciones React con Auth0. Proporciona un hook personalizado de React y otros componentes de orden superior para que puedas proteger aplicaciones React siguiendo prácticas recomendadas y escribiendo menos código.

El SDK de React de Auth0 se encarga de los detalles de las concesiones y los protocolos, la expiración y renovación de tokens, así como del almacenamiento y almacenamiento en caché de tokens. Internamente, implementa Universal Login y el flujo de código de autorización con PKCE.

La biblioteca está alojada en GitHub, donde puedes obtener más información sobre la API.

Instalación

Tiene varias opciones para usar auth0-react.js en su proyecto.

• Desde npm:

  npm install @auth0/auth0-react

• Desde yarn: yarn add @auth0/auth0-react

Primeros pasos

Primero, debes envolver tu aplicación en un único componente Auth0Provider. Esto proporcionará el contexto de React a los componentes que estén dentro de tu aplicación.

isLoading y error

Espera a que se inicialice el SDK y gestiona cualquier error con los estados isLoading y error.

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
function Wrapper({ children }) {
  const {
    isLoading,
    error,
  } = useAuth0();
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Oops... {error.message}</div>;
  }
  return <>{children}</>;
}
export default Wrapper;

Login

Usa loginWithRedirect o loginWithPopup para iniciar la sesión de tus usuarios.

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

function LoginButton() {
  const {
    isAuthenticated,
    loginWithRedirect,
  } = useAuth0();

  return !isAuthenticated && (
    <button onClick={loginWithRedirect}>Log in</button>
  );
}

export default LoginButton;

Cerrar sesión

Use logout para cerrar la sesión de los usuarios. Asegúrese de que returnTo esté especificado en “Allowed Logout URLs” en el Auth0 Dashboard.

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

function LogoutButton() {
  const {
    isAuthenticated,
    logout,
  } = useAuth0();

  return isAuthenticated && (
    <button onClick={() => {
      logout({ 
        logoutParams: {
          returnTo: window.location.origin
        }
      });
    }}>Log out</button>
  );
}

export default LogoutButton;

Usuario

Accede a la información del perfil de usuario con el valor user.

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

function Profile() {
  const { user } = useAuth0();

  return <div>Hello {user.name}</div>;
}

export default Profile;

Uso con un componente de clase

Utiliza el componente de orden superior withAuth0 para añadir la propiedad auth0 a los componentes de clase en lugar de usar el Hook.

import React, { Component } from 'react';
import { withAuth0 } from '@auth0/auth0-react';

class Profile extends Component {
  render() {
    const { user } = this.props.auth0;
    return <div>Hello {user.name}</div>;
  }
}

export default withAuth0(Profile);

Proteger una ruta

Protege un componente de ruta mediante el componente de orden superior withAuthenticationRequired. Si se accede a esta ruta sin autenticarse, se redirigirá al usuario a la página de Login y, después del Login, de vuelta a esta página.

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

const PrivateRoute = () => (<div>Private</div>);

export default withAuthenticationRequired(PrivateRoute, {
  // Muestra un mensaje mientras el usuario espera ser redirigido a la página de Login.
  onRedirecting: () => (<div>Redirecting you to the login page...</div>)
});

Nota Si utiliza un router personalizado, deberá proporcionar a Auth0Provider un método onRedirectCallback personalizado para realizar la acción que hace que el usuario vuelva a la página protegida. Consulte los ejemplos de react-router, Gatsby y Next.js.

Llamar a una API

Para llamar a una API protegida con un Token de acceso, asegúrate de especificar la audience y el scope de tu token de acceso, ya sea en Auth0Provider o en getAccessTokenSilently. Después, úsalo para llamar a una API protegida pasándolo en el encabezado Authorization de la solicitud.

import React, { useEffect, useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';

const Posts = () => {
  const { getAccessTokenSilently } = useAuth0();
  const [posts, setPosts] = useState(null);

  useEffect(() => {
    (async () => {
      try {
        const token = await getAccessTokenSilently({
          authorizationParams: {
            audience: 'https://api.example.com/', // Valor en el campo Identifier para la API que se está llamando.
            scope: 'read:posts', // Scope que existe para la API que se está llamando. Puede crearlos a través de la Auth0 Management API o mediante el Auth0 Dashboard en la vista Permissions de su API.
          }
        });
        const response = await fetch('https://api.example.com/posts', {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        setPosts(await response.json());
      } catch (e) {
        console.error(e);
      }
    })();
  }, [getAccessTokenSilently]);

  if (!posts) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {posts.map((post, index) => {
        return <li key={index}>{post}</li>;
      })}
    </ul>
  );
};

export default Posts;