> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

# SDK React d’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>;
};

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](/fr-CA/docs/authenticate/login/auth0-universal-login) et le [flux d’autorisation par code avec PKCE](/fr-CA/docs/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/).

<div id="installation">
  ## Installation
</div>

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

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

  `npm install @auth0/auth0-react`
* Depuis [yarn](https://yarnpkg.com/) :
  `yarn add @auth0/auth0-react`

<div id="getting-started">
  ## Pour commencer
</div>

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.

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="js" />

<div id="isloading-and-error">
  ## isLoading et error
</div>

Attendez que le SDK soit initialisé et gérez les erreurs à l’aide des états `isLoading` et `error`.

```js 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;
```

<div id="login">
  ## Connexion
</div>

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

```js 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;
```

<div id="logout">
  ## Déconnexion
</div>

Utilisez `logout` pour déconnecter vos utilisateurs. Assurez-vous que `returnTo` figure dans les « Allowed Logout URLs » de votre <Tooltip tip="Auth0 Dashboard : produit principal d’Auth0 pour configurer vos services." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>.

```js 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;
```

<div id="user">
  ## Utilisateur
</div>

Accédez aux renseignements du profil utilisateur à l’aide de la valeur `user`.

```js 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;
```

<div id="use-with-a-class-component">
  ## Utilisation avec un composant de classe
</div>

Utilisez le composant d’ordre supérieur `withAuth0` pour ajouter la propriété `auth0` aux composants de classe au lieu d’utiliser le hook.

```jsx 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);
```

<div id="protect-a-route">
  ## Protéger une route
</div>

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.

```js lines theme={null}
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](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).

<div id="call-an-api">
  ## Appeler une API
</div>

Pour appeler une API protégée à l’aide d’un <Tooltip tip="Jeton d’accès : donnée d’autorisation, sous la forme d’une chaîne opaque ou d’un JWT, utilisée pour accéder à une API." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Access+Token">Jeton d’accès</Tooltip>, assurez-vous de préciser l’`audience` et le `scope` de votre [jeton d’accès](/fr-CA/docs/secure/tokens/access-tokens/get-access-tokens), 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.

```jsx lines expandable 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/', // 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;
```