Auth0 React SDK pour les applications monopages

Décrit le Auth0 React SDK pour les applications monopages

Le SDK Auth0 React (auth0-react.js) est une bibliothèque JavaScript qui permet d’implémenter l’authentification et l’autorisation dans des applications React avec Auth0. Il fournit un hook React personnalisé et d’autres composants d’ordre supérieur afin que vous puissiez sécuriser vos applications React selon les meilleures pratiques, tout en écrivant moins de code.

Le SDK Auth0 React gère les détails liés au grant et au protocole, l’expiration et le renouvellement des tokens, ainsi que le stockage des tokens et la mise en cache. En arrière-plan, il implémente Universal Login et le Authorization Code Grant Flow with PKCE.

La bibliothèque est hébergée sur GitHub, où vous pouvez en savoir plus sur l’API.

Installation

Vous avez plusieurs façons d’utiliser auth0-react.js dans votre projet.

• Avec npm :

  npm install @auth0/auth0-react

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

Pour commencer

D’abord, vous devrez encapsuler votre application dans un seul composant Auth0Provider. Ce composant fournira le contexte React aux composants contenus dans votre application.

isLoading et error

Attendez que le SDK s’initialise et gérez les erreurs éventuelles à l’aide des états isLoading et 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;

Connexion

Utilisez loginWithRedirect ou loginWithPopup pour permettre à vos utilisateurs de se connecter.

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;

Déconnexion

Utilisez logout pour déconnecter les utilisateurs. Assurez-vous que returnTo figure dans “Allowed Logout URLs” de l’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;

Utilisateur

Accédez aux renseignements du profil utilisateur à l’aide de la valeur 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;

Utilisation avec un composant de classe

Utilisez le withAuth0 composant d’ordre supérieur pour ajouter la propriété auth0 à des composants de classe plutôt que d’utiliser le 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);

Protéger une route

Protégez un composant de route à l’aide du composant d’ordre supérieur withAuthenticationRequired. Si un utilisateur non authentifié accède à cette route, il sera redirigé vers la page de connexion, puis ramené à cette page après la connexion.

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

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

export default withAuthenticationRequired(PrivateRoute, {
  // Afficher un message pendant que l'utilisateur attend d'être redirigé vers la page de connexion.
  onRedirecting: () => (<div>Redirecting you to the login page...</div>)
});

Remarque Si vous utilisez un routeur personnalisé, vous devrez fournir à Auth0Provider une méthode onRedirectCallback personnalisée pour exécuter l’action qui renvoie l’utilisateur à la page protégée. Consultez des exemples pour react-router, Gatsby et Next.js.

Appeler une API

Pour appeler une API protégée avec un jeton d’accès, assurez-vous de préciser l’audience et le scope de votre jeton d’accès, soit dans Auth0Provider, soit dans getAccessTokenSilently. Utilisez-le ensuite pour appeler une API protégée en le transmettant dans l’en-tête Authorization de votre requête.

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/', // Valeur dans le champ Identifiant pour l'API appelée.
            scope: 'read:posts', // Portée qui existe pour l'API appelée. Vous pouvez en créer via l'Auth0 Management API ou via l'Auth0 Dashboard dans la vue Permissions de votre 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;