> ## 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 Auth0 React SDK pour les applications monopages

# Auth0 React SDK 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) + "*****MASQUÉ*****";
          }
          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 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](/docs/fr-ca/authenticate/login/auth0-universal-login) et le [Authorization Code Grant Flow with 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/).

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

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

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

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

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

D’abord, vous devrez encapsuler votre application dans un seul composant `Auth0Provider`. Ce composant fournira le contexte React aux composants contenus 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 s’initialise et gérez les erreurs éventuelles à 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 les utilisateurs. Assurez-vous que `returnTo` figure dans "Allowed Logout URLs" de l’<Tooltip tip="Auth0 Dashboard : l’interface principale d’Auth0 pour configurer vos services." cta="Voir le glossaire" href="/docs/fr-ca/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 `withAuth0` composant d’ordre supérieur pour ajouter la propriété `auth0` à des composants de classe plutôt que 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 un utilisateur non authentifié accède à cette route, il sera redirigé vers la page de connexion, puis ramené à 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 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](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 avec un <Tooltip tip="Jeton d’accès : information 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="/docs/fr-ca/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](/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 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 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;
```