> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Trousse SDK Auth0 pour React pour les applications monopages

> Décrit la Trousse SDK Auth0 pour les applications monopages

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASKED*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

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](/docs/fr-ca/authenticate/login/auth0-universal-login) et le [flux de code d’autorisation avec PKCE](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce).

La bibliothèque est [hébergée sur GitHub](https://github.com/auth0/auth0-react), où vous pouvez [en savoir plus sur l’API](https://auth0.github.io/auth0-react/).

## Installation

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

* [npm](https://npmjs.org/) :

  `npm install @auth0/auth0-react`
* [yarn](https://yarnpkg.com/) :
  `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.

export const codeExample = `import React from 'react';
    import ReactDOM from 'react-dom';
    import { Auth0Provider } from '@auth0/auth0-react';
    import App from './App';
    ReactDOM.render(
      <Auth0Provider
        domain="{yourDomain}"
        clientId="{yourClientId}"
        authorizationParams={{
          redirect_uri: window.location.origin
        }}
    >
      <App />
    </Auth0Provider>,
    document.getElementById('app')
 );`;

<AuthCodeBlock children={codeExample} language="javascript" />

## isLoading et error

Attendez que la trousse SDK s’initialise et gérez les éventuelles erreurs avec les états `isLoading` et `error`.

```javascript lines theme={null}
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.

```javascript lines theme={null}
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 <Tooltip href="/docs/fr-ca/glossary?term=auth0-dashboard" tip="Auth0 Dashboard
Principal produit d’Auth0 pour configurer vos services." cta="Voir le glossaire">Auth0 Dashboard</Tooltip>.

```javascript lines theme={null}
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`.

```javascript lines theme={null}
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.

```javascript lines theme={null}
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.

```javascript lines theme={null}
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](https://github.com/auth0/auth0-react/blob/master/EXAMPLES.md#1-protecting-a-route-in-a-react-router-dom-app), [Gatsby](https://github.com/auth0/auth0-react/blob/master/EXAMPLES.md#2-protecting-a-route-in-a-gatsby-app) et [Next.js](https://github.com/auth0/auth0-react/blob/master/EXAMPLES.md#3-protecting-a-route-in-a-nextjs-app-in-spa-mode).

## Appeler une API

Pour appeler une API protégée avec un jeton d’accès, veillez à préciser `audience`et `scope` de votre [jeton d’accès](/docs/fr-ca/secure/tokens/access-tokens/get-access-tokens), 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.

```javascript lines theme={null}
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;
```