Trousse SDK Auth0 pour React pour les applications monopages

Décrit la Trousse SDK Auth0 pour les applications monopages

La trousse SDK Auth0 pour React (auth0-react.js) est une bibliothèque JavaScript permettant de mettre en œuvre l’authentification et l’autorisation dans les applications React avec Auth0. Elle fournit un hook React personnalisé et d’autres composants d’ordre supérieur afin que vous puissiez sécuriser les applications React en utilisant les meilleures pratiques, tout en écrivant moins de code.

La trousse SDK Auth0 pour React pour les applications monopages (SPA) gère les détails de l’autorisation et du protocole, l’expiration et le renouvellement des jetons, ainsi que le stockage et la mise en cache des jetons. Concrètement, elle met en œuvre la connexion universelle et le flux de code d’autorisation avec PKCE.

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

Installation

Vous avez quelques options pour utiliser auth0-react.js dans vos projets.

• npm :

  npm install @auth0/auth0-react

• yarn : yarn add @auth0/auth0-react

Démarrage

Dans un premier temps, vous devez intégrer votre application dans un seul composant Auth0Provider. Cela fournira le contexte React aux composants qui sont placés dans votre application.

isLoading et error

Attendez que la trousse SDK s’initialise et gérez les éventuelles erreurs avec les é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 connecter vos utilisateurs.

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 (déconnexion) pour déconnecter vos utilisateurs. Assurez-vous que returnTo est indiqué dans « URL de déconnexions autorisées » dans 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 informations du profil utilisateur avec 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);

Protection d’une route

Protégez un composant de route en utilisant le composant d’ordre supérieur withAuthenticationRequired. Les visites vers cette route en l’absence d’authentification redirigeront l’utilisateur vers la page de connexion et le renverront 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, {
  // Show a message while the user waits to be redirected to the login page.
  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. Voir 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, veillez à préciser audienceet 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 passant 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/', // Value in Identifier field for the API being called.
            scope: 'read:posts', // Scope that exists for the API being called. You can create these through the Auth0 Management API or through the Auth0 Dashboard in the Permissions view of your 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;