À propos de l'auteur

Nefe est un développeur Frontend qui aime apprendre de nouvelles choses et partager ses connaissances avec les autres.
En savoir plus sur
Nefe
…

L'authentification est un aspect critique de la plupart des applications, car les développeurs doivent s'assurer que les applications qu'ils créent sont sécurisées et peuvent accessible uniquement aux utilisateurs vérifiés. Bien que des solutions d'authentification personnalisées puissent être créées, le coût et les ressources nécessaires pour les créer, les maintenir, les héberger et les sécuriser peuvent être élevés. C'est là qu'intervient Auth0.

Auth0 fournit des SDK pour toutes les plates-formes Web, mobiles et natives populaires, permettant une intégration profonde avec la langue et la pile de vos préférences. Vous pouvez également configurer différentes options de connexion afin que vos utilisateurs puissent se connecter à votre application avec leur méthode préférée.

Cet article ne couvre pas une explication détaillée du fonctionnement de l'authentification sous le capot. Auth0 a une ressource qui couvre cela.

Remarque: Pour suivre, vous aurez besoin d'une compréhension de base de React et React Hooks.

Qu'est-ce qu'auth0? [19659003] Auth0 est une solution flexible pour ajouter l'authentification et l'autorisation à vos applications. Vous pouvez connecter n'importe quelle application à Auth0 et définir les fournisseurs d'identité que vous souhaitez utiliser, que ce soit Google, Facebook, Github ou autres. Chaque fois qu'un utilisateur se connecte à votre application, Auth0 vérifie son identité et renvoie les données d'authentification à votre application.

Bien qu'Auth0 soit fourni avec différents formulaires de connexion, leur connexion universelle est la plus sûre et la plus rapide pour démarrer. Auth0 recommande également de l'utiliser. Avec la connexion universelle, l'utilisateur est redirigé vers la page de connexion, authentifié par les serveurs d'Auth0, puis il est redirigé vers votre application. Lorsque vous utilisez la connexion universelle, vous pouvez commencer par utiliser un nom d'utilisateur et un mot de passe simples, puis ajouter d'autres méthodes de connexion, en fonction des exigences de votre application.

Un autre avantage de la connexion universelle est que vous n'avez pas besoin de configurer une page de connexion personnalisée. Cependant, vous pouvez personnaliser la connexion universelle en fonction de vos besoins.

Comment fonctionne Auth0?

Lorsque les serveurs d'Auth0 redirigent un utilisateur vers votre application, l'URL de redirection contient des informations sur l'utilisateur authentifié. Cela nous permet d'accéder aux données sur l'utilisateur à partir des informations que nous obtenons du fournisseur d'identité. Un profil d'utilisateur dans Auth0 est l'information obtenue d'un fournisseur d'identité. Les données utilisateur que nous récupérons différeront d'un fournisseur d'identité à l'autre.

Lorsque l'utilisateur est redirigé vers l'application, les informations envoyées dans l'URL de redirection sont les suivantes:

• jeton d'accès
  Ceci est utilisé pour informer une API que le porteur du jeton est autorisé à accéder à l'API et à effectuer certaines actions. Les jetons d'accès ne sont pas destinés à transporter des informations sur l'utilisateur. Ils ne sont utilisés que pour autoriser l'accès à une ressource.
• ID token
  Il s'agit d'un jeton de sécurité accordé par le fournisseur OpenID qui contient des informations sur un utilisateur. Ces informations indiquent à votre application cliente que l'utilisateur est authentifié et peuvent également vous fournir des informations telles que son nom d'utilisateur. Il est au format JSON Web Token (JWT) .
• expire dans
  Cela nous indique le nombre de secondes avant que le jeton d'accès ne soit plus valide. Par défaut, c'est 1200 secondes (20 minutes). Lorsque le jeton d’accès expire, l’application sera forcée de se reconnecter.
• Portée
  Les portées OpenID Connect (OIDC) sont utilisées par une application lors de l’authentification pour autoriser l’accès aux détails d’un utilisateur, comme le nom et l'image. Chaque étendue renvoie un ensemble d'attributs utilisateur, appelés revendications. Les portées qu'une application doit demander dépendent des attributs utilisateur dont l'application a besoin. Une fois que l'utilisateur autorise les portées demandées, les revendications sont renvoyées dans un jeton d'identification et sont également disponibles via le / userinfo endpoint .

Auth0 Authentication Methods

Auth0 fournit plusieurs intégrations de plate-forme. Dans cet article, nous examinerons le SDK JavaScript et le SDK React.

• JavaScript SDK : Il s'agit d'un kit d'outils JavaScript côté client pour l'API Auth0.
• React SDK : The Auth0 React SDK (auth0-react.js) est une bibliothèque JavaScript permettant d'implémenter l'authentification et l'autorisation dans les applications React avec Auth0.

Configuration de votre application Auth0

• Sélectionnez le type d'application. Le nôtre est un SPA.

• Notez les informations d'identification de votre application. Nous en aurons besoin pour intégrer Auth0 dans notre application de réaction.

Nous configurons les URL de l'application dans ses paramètres pour que la fonctionnalité de connexion et de déconnexion fonctionne correctement.

Une URL de rappel est une URL dans votre application où Auth0 redirige l'utilisateur après qu'ils se soient authentifiés. Pour notre application, définissez URL de rappel autorisé sur http: // localhost: 3000 .

Une fois qu'Auth0 a déconnecté l'utilisateur du serveur d'autorisation, l'URL de déconnexion est l'URL l'utilisateur est redirigé vers. Nous avons également défini ceci sur http: // localhost: 3000 . Les URL de rappel peuvent être manipulées par des parties non autorisées. Auth0 ne reconnaît donc que les URL du champ URL de rappel autorisé des paramètres d'une application comme valides.

Allowed Web Origins gère la vérification de l'authentification actuelle sessions. Cela garantit que la connexion de l'utilisateur persiste lorsqu'il quitte votre application ou actualise la page. Nous avons également défini ce paramètre sur http: // localhost: 3000 .

Authentification à l'aide du SDK JavaScript Auth0

Utilisons ce SDK pour simuler un flux de connexion Auth0 de base. Le code source de cette section est disponible sur GitHub . Les composants de cette application de démonstration sont:

• App.js : c'est le composant racine. Nous passons la classe Auth que nous créerons plus tard à chaque composant à partir d'ici.
• Nav.js : il contiendra les boutons de connexion et de déconnexion, aidant l'utilisateur à naviguer correctement d'une page à l'autre .
• Profile.js : le profil de l'utilisateur. Il ne sera accessible que si l'utilisateur s'est connecté à l'application.
• Home.js : le composant Home.
• Auth.js : nous définissons ici les utilitaires d'authentification dans un Auth classe que nous définirons.
• Callback.js : le composant Auth0 redirige l'utilisateur vers une fois qu'il se connecte.

Configurons les informations d'identification de notre application en tant que variables d'environnement.

 REACT_APP_AUTH0_DOMAIN = votre-domaine
REACT_APP_AUTH0_CLIENTID = votre-id-client
REACT_APP_AUTH0_CALLBACK_URL = votre-url-de-rappel 

Créez un .env pour stocker les informations d'identification de domaine et cleintId de votre application. Définissez également l'URL de rappel dans le fichier. Dans cette application, j'utiliserai http: // localhost: 3000 comme URL de rappel.

Ajout d'une instance Auth0

 npm i auth0-js
import auth0 de 'auth0-js'; 

Pour utiliser le SDK JavaScript dans notre application, nous installons d'abord le SDK. Ensuite, nous créons un fichier Auth.js dans lequel nous configurons la fonctionnalité d'authentification. Importez auth0 de auth0-js dans le fichier Auth.js .

 export default class Auth {
  constructeur (historique) {
    this.history = histoire;
    this.auth0 = nouveau auth0.WebAuth ({
      domaine: process.env.REACT_APP_AUTH0_DOMAIN,
      clientID: process.env.REACT_APP_AUTH0_CLIENTID,
      redirectUri: process.env.REACT_APP_AUTH0_CALLBACK_URL,
      responseType: "jeton id_token",
      champ d'application: "e-mail de profil openid"
    })
} 

Ensuite, nous initialisons une nouvelle instance de l'application Auth0. Pour ce faire, créez une classe appelée Auth . Ici, nous initialisons une nouvelle instance Auth0. Nous passons dans un objet options qui contient quelques paramètres.

Il y a plusieurs paramètres que nous pouvons ajouter à l'instance Auth0, et parmi ces paramètres, seuls le domaine et clientID sont obligatoires.

• domain : le domaine de votre compte Auth0.
• clientID : votre ID client Auth0.
• redirectUri : l'URL Auth0 redirige votre utilisateur lorsqu'il a été authentifié. Par défaut, l'URL que vous avez spécifiée pour l'URL de rappel de votre application sera utilisée, ce paramètre n'est donc pas obligatoire.
• responseType : nous définissons la réponse que nous voulons obtenir d'Auth0 lors de son authentification notre utilisateur. Nous spécifions que nous voulons récupérer le id_token de la réponse.
• scope : nous définissons quelles informations nous voulons obtenir de l'utilisateur. De cette façon, nous pourrons accéder à leur adresse e-mail et à toutes les informations stockées dans leur profil. Les informations que nous pourrons obtenir de l'utilisateur dépendent du fournisseur d'identité qu'il utilise pour se connecter. Nous utiliserons le protocole OpenID Connect pour accéder aux informations sur l'utilisateur.

Le La classe Auth accepte l'historique de react-router comme argument. Plus tard, nous l'utiliserons pour rediriger l'utilisateur vers différentes pages de notre application.

Nous créons une nouvelle instance de auth0 et passons les configurations. Nous attribuons la nouvelle instance à this.auth0 . Nous obtenons les valeurs de domain clientID et redirectUri proviennent du fichier .env que nous avons créé précédemment.

Ajout de la fonctionnalité de connexion [19659069] Nous devons ajouter une méthode de connexion à la classe que nous avons créée dans Auth.js .

 login = () => {
  this.auth0.authorize ()
} 

Pour ce faire, nous ajoutons la méthode authorize () d'Auth0 à login . authorize () est utilisé pour la connexion des utilisateurs via la connexion universelle. Lorsque authorize () est appelé, il redirige l'utilisateur vers la page de connexion d'Auth0.

La ​​classe Auth doit être transmise à d'autres composants, le Nav , Composants Home et Callback .

 import Auth from './Auth';

function App ({historique}) {
  const auth = new Auth (historique)
  revenir (
    

      
  );
}

export default withRouter (App); 

Ici, nous créons une nouvelle instance de la classe Auth et la passons aux composants qui en ont besoin comme accessoire.

Depuis le Auth la classe a besoin de histoire nous utiliserons withRouter afin que nous puissions accéder à l'historique .

 import {Link} de 'react -router-dom '

const Nav = ({auth}) => {
  revenir (
    
  )
}
export default Nav 

Maintenant que nous avons défini la méthode login () nous pouvons l'utiliser dans le bouton de connexion. L'utilisateur sera redirigé vers la page de connexion d'Auth0, puis vers l'URL de rappel une fois authentifié.

Ensuite, nous devons créer le composant vers lequel l'utilisateur est redirigé une fois qu'il se connecte.

 import React from 'react '

Const Callback = () => {
  revenir (
    

      
 Je suis le composant de rappel 
    
  )
}
export default Callback 

Créez un fichier Callback.js et configurez-y un composant Callback . Désormais, lorsque l'utilisateur se connecte, il est redirigé vers le composant Callback .

Gestion de l'authentification

Lorsque Auth0 redirige l'utilisateur vers l'application, il envoie des données d'authentification dans l'URL de rappel. Ces données contiennent des informations codées sur l'utilisateur authentifié.
Pour accéder aux données renvoyées par Auth0 dans l'URL de redirection, nous avons mis en place une méthode handleAuth () dans la classe Auth . Cette méthode sera appelée dans le composant Callback .

 handleAuth = () => {
    this.auth0.parseHash ((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.setSession (authResult);
        this.history.push ("/");
      } else if (err) {
        alert (ʻErreur: $ {err.error} `)
        console.log (err);
      }
    })
} 

Une fois l'utilisateur redirigé, nous pouvons utiliser la méthode parseHash pour analyser les informations qui sont renvoyées dans l'URL de rappel. Après analyse, nous récupérons un objet error et un authResult . Nous vérifions s'il existe un authResult et un accessToken et idToken . Si c'est vrai, nous passons le authResult à la méthode setSession et redirigeons l'utilisateur vers la page d'accueil.

Nous utiliserons setSession () pour créer un session pour l'utilisateur authentifié et stocker les données d'authentification dans le stockage local ultérieurement. S'il y a des erreurs, nous utilisons la méthode alert pour les afficher et également enregistrer l'objet d'erreur dans la console.

Nous appelons la méthode handleAuth () que nous avons définie ci-dessus dans le useEffect chaque fois que Callback monte, c'est-à-dire lorsque l'utilisateur est redirigé après la connexion.

 import React, {useEffect} de 'react'
const Callback = ({auth}) => {
  useEffect (() => {
    auth.handleAuth ()
  }, [])

  revenir (
    

      
 Je suis le composant de rappel 
    
  )
}
Exporter le rappel par défaut

Nous faisons cela parce que lorsque Auth0 redirige l'utilisateur vers le composant Callback nous voulons pouvoir accéder aux données de réponse qu'il envoie dans l'URL de redirection, et le handleAuth () est l'endroit où nous appelons la méthode parseHash d'Auth0. Ainsi, lorsque le composant est monté, nous appelons handleAuth () dans la page useEffect .

Tracking Authentication State

Nous ne voulons pas du profil page pour être accessible si un utilisateur ne s'est pas connecté. Nous devons être en mesure de vérifier si l'utilisateur est authentifié et de lui donner accès à la page de profil . Nous pouvons utiliser la méthode setSession () que nous avons appelée dans la méthode handleAuth () que nous avons dans la classe Auth .

 setSession = authResult = > {
    // définit l'heure d'expiration du jeton d'accès
    const expiresAt = JSON.stringify (
      authResult.expiresIn * 1000 + nouvelle date (). getTime ()
    )

    localStorage.setItem ("access_token", authResult.accessToken)
    localStorage.setItem ("id_token", authResult.idToken)
    localStorage.setItem ("expires_at", expiresAt)
} 

Dans setSession () nous ajoutons une variable expiresAt pour contenir la durée d'expiration du jeton d'accès. expiresIn est une chaîne contenant le délai d'expiration (en secondes) du accessToken . Nous convertissons le temps d'expiration que nous obtenons de expiresIn en temps d'époque Unix. Ensuite, nous sauvegardons expiresAt et le authResult accessToken et idToken dans le stockage local.

La ​​prochaine étape dans la configuration un outil de suivi de l'état d'authentification consiste à créer une méthode isAuthenticated .

 isAuthenticated = () => {
    const expiresAt = JSON.parse (localStorage.getItem ("expires_at"));
    return new Date (). getTime () <expiresAt;
} 

Dans la méthode ci-dessus, nous analysons la valeur expires_at que nous avons sauvegardée dans le stockage local et vérifions si l'heure actuelle est inférieure à l'heure d'expiration du jeton. Si true alors l'utilisateur est authentifié.

Maintenant que nous pouvons suivre l'état isAuthenticated nous pouvons l'utiliser dans notre application. Utilisons-le dans le fichier Nav.js .

 import React de 'react';
importer {Link} depuis 'react-router-dom'

const Nav = ({auth}) => {
  revenir (
    
  )
}

export default Nav 

Au lieu de coder en dur un bouton de connexion et d'utiliser la méthode login () nous rendons dynamiquement le bouton de connexion avec la méthode login () ou la déconnexion avec la méthode logout () basée sur l'état isAuthenticated . Dans le composant Nav nous utilisons un opérateur ternaire pour déterminer le texte qui s'affiche sur le bouton et la méthode qui est appelée lorsque l'utilisateur clique sur le bouton. Le texte affiché et la méthode appelée dépendent de la valeur de auth.isAuthenticated () .

Nous pouvons maintenant implémenter le composant Home .

 import {Link } de 'react-router-dom'
const Home = ({auth}) => {
  revenir (
    

      
 domicile 
      {
        auth.isAuthenticated () && (
          

            Vous êtes connecté! Vous pouvez maintenant afficher votre {''}
             profil 
          
        )
        }
    
  )
}
export default Home 

Dans le composant Home ci-dessus, nous utilisons l'état isAuthenticated pour afficher dynamiquement un lien vers le profil de l'utilisateur si l'utilisateur est connecté.

Nous voulons pour afficher des informations sur un utilisateur lorsqu'il se connecte à l'application. Pour ce faire, nous devons créer deux méthodes dans la classe Auth qui obtiendront ces informations.

 getAccessToken = () => {
    const accessToken = localStorage.getItem ("access_token")
    if (! accessToken) {
      lancer une nouvelle erreur ("Aucun jeton d'accès trouvé")
    }
    retour accèsToken
} 

Le jeton d'accès est requis pour obtenir les données utilisateur. Nous créons une méthode getAccessToken () qui obtient le jeton d'accès à partir du stockage local. S'il n'y a pas de jeton d'accès, nous lançons une erreur.

La ​​méthode getProfile () récupère les données utilisateur pour nous et voici à quoi elles devraient ressembler.

 getProfile = callback => {
  this.auth0.client.userInfo (this.getAccessToken (), (err, profil) => {
    rappel (profil);
  });
} 

La méthode getProfile () appelle la méthode userInfo () qui effectuera une requête au point de terminaison / userinfo et retournera l'objet utilisateur, qui contient les informations utilisateur. Le jeton d'accès est requis pour le point de terminaison / userinfo nous passons donc getAccessToken () comme argument.

Les informations de profil utilisateur incluses dans la réponse dépendent des portées que nous définissons . Auparavant, nous avons défini la portée de notre application sur profil et email ce sont donc les seules informations sur l'utilisateur que nous obtiendrons.

Configurons le composant Profile .

 import React, {useEffect, useState} de "react";

profil const = ({auth}) => {
  const [profile, setProfile] = useState (null);
  useEffect (() => {
    auth.getProfile ((profil) => {
      setProfile (profil);
    });
  }, [auth]);

  if (! profil) {
    retour 
 Chargement ... 
;
  }

  revenir (
    

      
 profil 
      <>
        
 {profile.name} 
        
 {profile.nickname} 
        
        
 {JSON.stringify (profile, null, 2)} 
 
 );
 };
 Exporter le profil par défaut; 
 Dans  Profile.js nous créons un état  profile et dans  useEffect  nous appelons le  getProfile  méthode pour accéder au profil de l'utilisateur. Ensuite, nous affichons les données utilisateur obtenues à partir de l'état  profile .
 Ajout de la fonctionnalité de déconnexion
 Nous définissons une méthode  logout ()  dans le  Auth  classe.
 déconnexion = () => {
    localStorage.removeItem ("jeton_accès")
    localStorage.removeItem ("id_token")
    localStorage.removeItem ("expires_at")
    this.auth0.logout ({
      clientID: process.env.REACT_APP_AUTH0_CLIENTID,
      returnTo: "http: // localhost: 3000"
    });
} 
 Ici, nous supprimons les  authResult  accessToken  et  idToken  que nous avions précédemment stockés dans le stockage local. Ensuite, nous dirigeons l'utilisateur vers la page d'accueil.
 Pour déconnecter un utilisateur des serveurs d'Auth0, utilisez la méthode Auth0  logout () . Cette méthode accepte un objet d'options contenant le clientID   et une propriété  returnTo .  returnTo  est l'endroit où vous spécifiez l'URL dans votre application vers laquelle l'utilisateur doit être redirigé une fois qu'il se déconnecte. L'URL  returnTo  fournie doit être répertoriée dans les URL de déconnexion autorisées  de l'application  dans le tableau de bord  Auth0 .
 Authentification à l'aide du SDK React
 Contrairement à JavaScript SDK, le SDK React est plus facile à utiliser. Le code de cette section est disponible sur  GitHub .
 Configurons-le dans notre application. Les composants de cette application de démonstration sont:
 App.js : il s'agit du composant racine.
 LoginButton.js : gère la fonctionnalité de connexion.
 LogoutButon.js : poignées la fonctionnalité de déconnexion.
 Navbar.js : contient les boutons de déconnexion et de connexion.
 Profile.js : il contiendra les informations de l'utilisateur connecté.
 Premièrement, nous installez le SDK React d'Auth0 dans notre application React.
 npm install @ auth0 / auth0-react 
 De la même manière que nous avons configuré l'utilisation du SDK JavaScript, nous avons configuré les informations d'identification Auth0 dont nous avons besoin. Nous créons un  .env  pour stocker les identifiants  domain  et  cleintId  de votre application.
 import {Auth0Provider} depuis '@ auth0 / auth0-react' ;

domaine const = process.env.REACT_APP_AUTH0_DOMAIN
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID

ReactDOM.render (
  
    
  ,
  document.getElementById ('racine')
); 
 Pour utiliser le SDK, nous devons encapsuler notre application dans un composant  Auth0Provider . Cela fournira le contexte React aux composants qui se trouvent à l'intérieur de votre application. Nous avons également défini un  redirectUri vers lequel Auth0 redirige l'utilisateur lorsqu'il se connecte. Sous le capot, le SDK Auth0 React utilise React Context pour gérer l'état d'authentification de vos utilisateurs.
 Configuration Login
 Ici, nous configurons le bouton de connexion.
 import {useAuth0} from '@ auth0 / auth0-react';
import {Button} de './Styles';

const LoginButton = () => {
  const {loginWithPopup} = useAuth0 ()
 revenir(
    loginWithPopup ()}>
    S'identifier
   
 )
} 
 Auth0 nous offre deux façons de configurer la connexion dans nos applications. Nous pouvons utiliser les méthodes  loginWithPopup ()  ou  loginWithRedirect () . Dans ce cas, j'ai utilisé  loginWithPopup () .
 We destructure  loginWithPopup ()  à partir du hook  useAuth0  fourni par le SDK. Ensuite, nous passons  loginWithPopup ()  à l'événement onClick  du bouton . Avec cela, nous avons configuré le bouton de connexion. Si nous avions utilisé  loginWithRedirect () l'utilisateur serait redirigé vers la page de connexion Auth0. Une fois l'utilisateur authentifié, Auth0 le redirige vers votre application.
 Configuration de la déconnexion
 Configurons la fonctionnalité de déconnexion.
 import {Button} de './Styles';
import {useAuth0} de '@ auth0 / auth0-react';

const LogoutButton = () => {
  const {déconnexion} = useAuth0 ()
  revenir(
     déconnexion ()}>
      Se déconnecter
    
 )
} 
 Ce que nous avons ici est similaire à la configuration du bouton de connexion. La seule différence est que ce que nous avons retiré du SDK est la fonction  logout et c'est ce que nous passons à l'événement onClick  du bouton.
 Appel de  logout ( )  redirige vos utilisateurs vers votre  point de terminaison de déconnexion Auth0  ( https: // VOTRE_DOMAINE / v2 / déconnexion ) puis les redirige immédiatement vers l'URL que vous avez spécifiée dans le  URL de déconnexion autorisées  classées dans les paramètres de votre application.
 Suivi de l'état d'authentification
 Nous souhaitons afficher de manière conditionnelle le  LogoutButton  ou le  LoginButton  en fonction de l'état d'authentification.
 import {StyledNavbar} de './Styles';
import {useAuth0} de '@ auth0 / auth0-react';
importer LoginButton depuis './LoginButton';
importer LogoutButton depuis './LogoutButton';

const Navbar = () => {
  const {isAuthenticated} = useAuth0 ()
  revenir (
    
     {isAuthenticated? : }
    
  )
} 
 Nous obtenons  isAuthenticated  de  useAuth0 .  isAuthenticated  est un booléen qui nous indique si quelqu'un s'est connecté ou non. Dans notre  Navbar nous utilisons  isAuthenticated  pour rendre conditionnellement les boutons. Nous n'avons pas à passer par le processus fastidieux de configuration de plusieurs méthodes personnalisées juste pour suivre l'état d'authentification, comme nous l'avons fait avec le SDK JavaScript. Le booléen  isAuthenticated  nous facilite la vie.
 Affichage des données utilisateur
 Nous voulons afficher les données de l'utilisateur une fois qu'il s'est connecté avec succès à notre application.
 import {useAuth0} de '@ auth0 / auth0-react '
import {ProfileBox, Image, P} de './Styles';

Profil const = () => {
const {utilisateur, isAuthenticated} = useAuth0 ()
 revenir(
  isAuthenticated && ( 
    
    
 Nom: {user.name} 
    
 Nom d'utilisateur: {user.nickname} 
    
 E-mail: {user.email} 
   )
 )
} 
 Une fois connecté, nous avons accès à un objet  user que nous pouvons obtenir à partir de  useAuth0  et permettant d'accéder aux informations sur l'utilisateur à partir de l'objet. Ici, nous obtenons également  isAuthenticated  de  useAuth0  car nous ne voulons afficher les données que lorsqu'un utilisateur est connecté.
 Contrairement au SDK JavaScript où nous devions utiliser le  getAccessToken ()  et  getProfile ()  pour accéder au profil de l'utilisateur, nous n'avons pas à le faire avec le SDK React.
 Ajout de connexions sociales
 Par défaut, Auth0 est livré avec la connexion Google activée. Cependant, vous souhaiterez peut-être donner à votre utilisateur plus d'options pour se connecter à votre application. Ajoutons Github Login à notre application.
 Sur votre tableau de bord, accédez à l'onglet Connexions et sélectionnez Réseaux sociaux. Là, vous verrez les connexions que vous avez configurées. Cliquez sur le bouton  Créer une connexion . J'ai déjà activé Github dans mon application, et c'est pourquoi vous le voyez ici.
 Sélectionnez la connexion Github. Nous obtiendrons le  clientID  et le  clientSecret  de Github et les placerons dans les paramètres de connexion sociale.
 Pour les champs URL de la page d'accueil et URL de rappel d'autorisation, vous pouvez utiliser  https: // localhost: 3000  ou l'URL dont votre projet a besoin.
 Ensuite, transmettez l'ID client et le secret dans la connexion Github de votre compte Auth0. Avec cela, vous avez configuré la connexion Github dans votre application.
 Conclusion
 Dans cet article, nous avons vu comment authentifier nos applications React à l'aide d'Auth0. Nous sommes également passés par le processus de configuration de la connexion sociale Github dans notre application. Amusez-vous en ajoutant l'authentification à votre application React avec Auth0.
 Nous avons également vu comment authentifier notre application avec Auth0 et les avantages pour les développeurs de l'utilisation du SDK React par rapport au SDK JavaScript.
 Resources
 (ks, ra, yk, il)