SDK React d’Auth0 pour les applications monopages

Décrit le SDK React d’Auth0 pour les applications monopages

Le SDK React d’Auth0 (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 en appliquant les pratiques exemplaires, tout en écrivant moins de code.

Le SDK React d’Auth0 gère les détails liés aux mécanismes d’autorisation et aux protocoles, l’expiration et le renouvellement des jetons, ainsi que le stockage et la mise en cache des jetons. En arrière-plan, il implémente Universal Login et le flux d’autorisation par code avec PKCE.

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

Installation

Vous avez plusieurs options pour utiliser auth0-react.js dans votre projet.

• Depuis npm :

  npm install @auth0/auth0-react

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

Pour commencer

Tout d’abord, vous devez encapsuler votre application dans un seul composant Auth0Provider. Cela fournira le contexte React aux composants situés dans votre application.

isLoading et error

Attendez que le SDK soit initialisé et gérez les erreurs à 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 vos utilisateurs. Assurez-vous que returnTo figure dans les « Allowed Logout URLs » de votre 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 composant d’ordre supérieur withAuth0 pour ajouter la propriété auth0 aux composants de classe au lieu 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 l’utilisateur n’est pas authentifié, toute tentative d’accès à cette route le redirige vers la page de connexion, puis de retour vers 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 devez fournir à Auth0Provider une méthode personnalisée onRedirectCallback pour exécuter l’action qui redirige l’utilisateur vers la page protégée. Consultez les exemples pour react-router, Gatsby et Next.js.

Appeler une API

Pour appeler une API protégée à l’aide d’un Jeton d’accès, assurez-vous de préciser l’audience et le scope de votre jeton d’accès, dans Auth0Provider ou 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 Identifier pour l'API appelée.
            scope: 'read:posts', // Scope qui existe pour l'API appelée. Vous pouvez en créer via le Management API ou via le 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;