Comment utiliser Auth0 avec React

Pour intégrer Auth0 avec une application React, vous pouvez suivre ces étapes :

1. Créer un compte Auth0 : Inscrivez-vous sur le site web Auth0. Une fois votre compte créé, vous pouvez créer une nouvelle application pour obtenir les identifiants nécessaires.

2. Installer le SDK Auth0 : Dans votre projet React, naviguez vers le répertoire racine et installez le SDK Auth0 en exécutant la commande suivante :

   npm install @auth0/auth0-react

3. Configurer le fournisseur Auth0 : Créez un nouveau fichier, Auth0Provider.js, et importez les modules nécessaires :

   import React from 'react'
   import { Auth0Provider } from '@auth0/auth0-react'
   
   const Auth0ProviderWithHistory = ({ children }) => {
     const domain = process.env.REACT_APP_AUTH0_DOMAIN
     const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID
     const audience = process.env.REACT_APP_AUTH0_AUDIENCE
   
     return (
       <Auth0Provider
         domain={domain}
         clientId={clientId}
         audience={audience}
         redirectUri={window.location.origin}
       >
         {children}
       </Auth0Provider>
     )
   }
   
   export default Auth0ProviderWithHistory

   Assurez-vous de remplacer REACT_APP_AUTH0_DOMAIN, REACT_APP_AUTH0_CLIENT_ID et REACT_APP_AUTH0_AUDIENCE par vos propres identifiants Auth0.

4. Envelopper votre application avec Auth0Provider : Dans votre fichier index.js, importez le composant Auth0ProviderWithHistory et enveloppez votre application avec lui :

   import React from 'react'
   import ReactDOM from 'react-dom'
   import App from './App'
   import Auth0ProviderWithHistory from './Auth0Provider'
   
   ReactDOM.render(
     <Auth0ProviderWithHistory>
       <App />
     </Auth0ProviderWithHistory>,
     document.getElementById('root'),
   )

5. Utiliser les hooks et composants Auth0 : Vous pouvez maintenant commencer à utiliser les hooks et composants Auth0 dans vos composants React. Par exemple, pour afficher un bouton de connexion, vous pouvez utiliser le hook useAuth0 :

   import { useAuth0 } from '@auth0/auth0-react'
   
   const LoginButton = () => {
     const { loginWithRedirect } = useAuth0()
   
     return <button onClick={() => loginWithRedirect()}>Log In</button>
   }

   Vous trouverez d’autres exemples et la documentation sur l’utilisation d’Auth0 avec React dans la documentation du SDK Auth0 React.

En suivant ces étapes, vous pouvez facilement intégrer Auth0 avec votre application React et offrir une expérience d’authentification sécurisée et transparente à vos utilisateurs.