Catégories
Plugin et site web

Authentification des applications React avec Auth0 – Smashing Magazine

A propos de l'auteur

Nefe est un développeur frontend qui aime apprendre de nouvelles choses et partager ses connaissances avec les autres.
Plus à propos
Nefe

Un aspect important du développement d'applications est de s'assurer que seuls les utilisateurs vérifiés ont accès à nos applications. Cela peut être fastidieux et coûteux, en particulier lorsque vous ajoutez des méthodes alternatives de connexion aux e-mails et mots de passe externes. Auth0 est un service qui fournit des fonctionnalités d'authentification aux développeurs prêts à l'emploi.

Dans cet article, nous allons découvrir comment authentifier nos applications React à l'aide de Auth0. Nous apprendrons également comment configurer les connexions sociales dans nos applications. Cet article sera utile aux lecteurs qui souhaitent ajouter une forme d'authentification à leurs applications ou qui souhaitent se familiariser avec Auth0.

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 ne sont accessibles qu'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 votre préférence. 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 approfondie 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 que Auth0?

Auth0 est une solution flexible pour ajouter une authentification et une 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 livré avec différents formulaires de connexion, leur connexion universelle est la plus sûre et la plus rapide pour démarrer. Auth0 vous 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 une action. 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.
  • jeton d'identification
    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 disponible au format JSON Web Token (JWT).
  • expire dans
    Cela nous indique combien 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 expirera, l'application sera obligée de permettre à l'utilisateur de se reconnecter.
  • portée
    Les étendues 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 étendues demandées, les revendications sont renvoyées dans un jeton d'identification et sont également disponibles via le point de terminaison / userinfo.

Méthodes d'authentification Auth0

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

  • SDK JavaScript: il s'agit d'une boîte à outils JavaScript côté client pour l'API Auth0.
  • React SDK: Le SDK Auth0 React (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

Votre tableau de bord Auth0
Votre tableau de bord Auth0. (Grand aperçu)
  • Sélectionnez le type d'application. Le nôtre est un SPA.
Choisissez le type d'application
Choisissez le type d'application. (Grand aperçu)
Choisissez la technologie
Choisissez la technologie. (Grand aperçu)
  • Prenez note de vos identifiants d'application. Nous en aurons besoin pour intégrer Auth0 dans notre application react.
informations d'identification de l'application
Informations d'identification de l'application. (Grand aperçu)

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 une fois qu'il s'est authentifié. Pour notre application, définissez le URL de rappel autorisée à http://localhost:3000.

Une fois qu'Auth0 a déconnecté l'utilisateur du serveur d'autorisation, l'URL de déconnexion est l'URL vers laquelle l'utilisateur est redirigé. Nous définissons également ceci sur http://localhost:3000. Les URL de rappel peuvent être manipulées par des tiers non autorisés. Auth0 reconnaît donc uniquement les URL dans le URL de rappel autorisées champ des paramètres d'une application comme valide.

Origines Web autorisées gère la vérification des sessions d'authentification en cours. Cela garantit que la connexion de l'utilisateur persiste lorsqu'il quitte votre application ou actualise la page. Nous définissons également ceci 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 le Auth classe que nous créerons plus tard pour 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 s'est connecté.

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

REACT_APP_AUTH0_DOMAIN=your-domain
REACT_APP_AUTH0_CLIENTID=your-client-id
REACT_APP_AUTH0_CALLBACK_URL=your-callback-url

Créer un .env pour stocker le domain et cleintId les informations d'identification 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.

Ajouter une instance Auth0

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

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

export default class Auth {
  constructor(history){
    this.history = history;
    this.auth0 = new auth0.WebAuth({
      domain: process.env.REACT_APP_AUTH0_DOMAIN,
      clientID: process.env.REACT_APP_AUTH0_CLIENTID,
      redirectUri: process.env.REACT_APP_AUTH0_CALLBACK_URL,
      responseType: "token id_token",
      scope: "openid profile email"
    })
}

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 options objet contenant certains paramètres.

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

  • domain: le domaine de votre compte Auth0.
  • clientID: votre ID client Auth0.
  • redirectUri: l'URL Auth0 redirige votre utilisateur lorsqu'il est authentifié. Par défaut, l'URL que vous avez spécifiée pour votre application URL de rappel sera utilisé, donc ce paramètre n'est pas obligatoire.
  • responseType: nous définissons la réponse que nous voulons obtenir d'Auth0 lors de l'authentification de notre utilisateur. Nous précisons que nous voulons obtenir le id_token de retour de la réponse.
  • scope: nous définissons les informations que 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 Auth la classe accepte react-routerS history prop 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 passez dans les configurations. Nous attribuons la nouvelle instance à this.auth0. Nous obtenons des valeurs de domain, clientID et redirectUri sont de la .env fichier que nous avons créé plus tôt.

Ajout de la fonctionnalité de connexion

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 des Auth0 authorize() méthode pour login. authorize() est utilisé pour la connexion des utilisateurs via la connexion universelle. Quand authorize() est appelé, il redirige l'utilisateur vers la page de connexion d'Auth0.

le Auth la classe doit être transmise aux autres composants, le Nav, Home et Callback Composants.

import Auth from './Auth';

function App({history}) {
  const auth = new Auth(history) 
  return (
    
); } export default withRouter(App);

Ici, nous créons une nouvelle instance du Auth classe et transmettez-le aux composants qui en ont besoin comme accessoire.

Depuis le Auth besoins de la classe history, nous utiliserons withRouter afin que nous puissions accéder history.

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

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

Maintenant que nous avons défini le login() méthode, 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 s'est connecté.

import React from 'react'

const Callback = () => {
  return (
    

I am the callback component

) } export default Callback

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

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 un handleAuth() méthode dans le Auth classe. Cette méthode sera appelée dans le Callback composant.

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

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

Nous utiliserons setSession() pour créer une 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 le alert pour les afficher et également enregistrer l'objet d'erreur dans la console.

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

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

  return (
    

I am the callback component

) } export default Callback

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

Suivi de l'état d'authentification

Nous ne voulons pas profile 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é, puis de lui donner accès au profile page. Nous pouvons utiliser le setSession() méthode que nous avons appelée dans le handleAuth() méthode que nous avons dans le Auth classe.

setSession = authResult => {
    //set the time the access token will expire
    const expiresAt = JSON.stringify(
      authResult.expiresIn * 1000 + new Date().getTime()
    )

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

Dans setSession() on ajoute un expiresAt variable 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 l'heure d'expiration que nous obtenons expiresIn à l'époque de l'époque Unix. Ensuite, nous économisons expiresAt, et le authResultS accessToken et idToken au stockage local.

L'étape suivante de la configuration d'un tracker pour l'état d'authentification consiste à créer un isAuthenticated méthode.

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

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

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

import React from 'react';
import { Link } from 'react-router-dom' 

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

export default Nav

Au lieu de coder en dur un bouton de connexion et d'utiliser le login() méthode, nous rendons dynamiquement soit le bouton de connexion avec le login() méthode ou le bouton de déconnexion avec la logout() méthode basée sur la isAuthenticated Etat. dans le 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 mettre en œuvre le Home composant.

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

home

{ auth.isAuthenticated() && (

You are logged in! You can now view your{' '} profile

) }
) } export default Home

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

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

getAccessToken = () => {
    const accessToken = localStorage.getItem("access_token")
    if(!accessToken){
      throw new Error("No access token found")
    }
    return accessToken
}

Le jeton d'accès est requis pour obtenir les données utilisateur. Nous créons un getAccessToken() méthode 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.

le getProfile() method récupère les données utilisateur pour nous et voici à quoi cela devrait ressembler.

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

le getProfile() méthode appelle la userInfo() méthode qui fera une demande au /userinfo endpoint et renvoyez l'objet utilisateur, qui contient les informations utilisateur. Le jeton d'accès est requis pour le /userinfo point final, donc nous passons 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 profile et email, ce sont donc les seules informations sur l'utilisateur que nous obtiendrons.

Laissez-nous mettre en place le Profile composant.

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

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

  if (!profile) {
    return 

Loading...

; } return (

profile

<>

{profile.name}

{profile.nickname}

{JSON.stringify(profile, null, 2)}

);
};
exporter le profil par défaut;

Dans Profile.js, nous créons un profile état, et dans le useEffect nous appelons le getProfile méthode pour accéder au profil de l'utilisateur. Ensuite, nous affichons les données utilisateur que nous obtenons du profile Etat.

Ajout de la fonctionnalité de déconnexion

Nous définissons un logout() méthode dans le Auth classe.

logout = () => {
    localStorage.removeItem("access_token")
    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 le authResult, accessToken, et idToken nous avons précédemment stocké dans le stockage local. Ensuite, nous dirigeons l'utilisateur vers la page d'accueil.

Pour déconnecter un utilisateur des serveurs d’Auth0, utilisez Auth0 logout() méthode. Cette méthode accepte un objet d'options qui contient le clientID et un returnTo propriété. 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. le returnTo L'URL fournie doit être répertoriée dans l'application URL de déconnexion autorisées dans le tableau de bord Auth0.

Authentification à l'aide du SDK React

Contrairement au SDK JavaScript, 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: c'est le composant racine.
  • LoginButton.js: gère la fonctionnalité de connexion.
  • LogoutButon.js: gère la fonctionnalité de déconnexion.
  • Navbar.js: cela contient les boutons de déconnexion et de connexion.
  • Profile.js: cela contiendra les informations de l'utilisateur connecté.

Tout d'abord, nous installons 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 le domain et cleintId les informations d'identification de votre application.

import {Auth0Provider} from '@auth0/auth0-react';

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

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

Pour utiliser le SDK, nous devons encapsuler notre application dans un Auth0Provider composant. 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 de la connexion

Ici, nous configurons le bouton de connexion.

import {useAuth0} from '@auth0/auth0-react';
import {Button} from './Styles';

const LoginButton = () => {
  const {loginWithPopup} = useAuth0()
 return(
   
 )
}

Auth0 nous offre deux façons de configurer la connexion dans nos applications. Nous pouvons utiliser le loginWithPopup() ou loginWithRedirect() méthodes. Dans ce cas, j'ai utilisé loginWithPopup().

Nous déstructurons loginWithPopup() du useAuth0 hook fourni par le SDK. Puis nous passons loginWithPopup() au bouton onClick un événement. 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 redirige le dos vers votre application.

Configurer la déconnexion

Configurons la fonctionnalité de déconnexion.

import {Button} from './Styles';
import {useAuth0} from '@auth0/auth0-react';

const LogoutButton = () => {
  const {logout} = useAuth0()
  return(
    
 )
}

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 le logout fonction, et c’est ce que nous transmettons au bouton onClick un événement.

Appel logout() redirige vos utilisateurs vers votre point de terminaison de déconnexion Auth0 (https://YOUR_DOMAIN/v2/logout) puis les redirige immédiatement vers l'URL que vous avez spécifiée dans le URL de déconnexion autorisées rempli des paramètres de votre application.

Suivi de l'état d'authentification

Nous voulons rendre conditionnellement le LogoutButton ou la LoginButton basé sur l'état d'authentification.

import {StyledNavbar} from './Styles';
import {useAuth0} from '@auth0/auth0-react';
import LoginButton from './LoginButton';
import LogoutButton from './LogoutButton';

const Navbar = () => {
  const {isAuthenticated} = useAuth0()
  return (
    
     { isAuthenticated ?  :   }  
    
  )
}

On a 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 isAuthenticated boolean nous facilite la vie.

Affichage des données utilisateur

Nous souhaitons afficher les données de l'utilisateur une fois qu'il s'est connecté avec succès à notre application.

import {useAuth0} from '@auth0/auth0-react'
import {ProfileBox, Image, P} from './Styles';

const Profile = () => {
const {user, isAuthenticated} = useAuth0()
 return(
  isAuthenticated && ( 
    {user.name}/
    

Name: {user.name}

Username: {user.nickname}

Email: {user.email}

) ) }

Une fois connecté, nous avons accès à un user objet, dont nous pouvons obtenir useAuth0 et permettant d'accéder à des informations sur l'utilisateur à partir de l'objet. Ici, on obtient aussi isAuthenticated de useAuth0 car nous voulons afficher les données uniquement lorsqu'un utilisateur est connecté.

Contrairement au SDK JavaScript où nous devions utiliser le getAccessToken() et getProfile() méthodes 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 Social. Là, vous verrez les connexions que vous avez configurées. Clique sur le Créer une connexion bouton. J'ai déjà activé Github dans mon application, et c'est pourquoi vous le voyez ici.
Paramètres des connexions sociales
Paramètres des connexions sociales. (Grand aperçu)
  • Sélectionnez la connexion Github. Nous obtiendrons le clientID et le clientSecret de Github et mettez cela dans les paramètres de connexion sociale.
Choisissez la connexion
Choisissez la connexion. (Grand aperçu)
Identifiants de connexion Github
Informations d'identification de connexion Github. (Grand aperçu)
Enregistrer une nouvelle application 0Auth
Enregistrez une nouvelle application 0Auth. (Grand aperçu)

Pour l'URL de la page d'accueil et les champs URL de rappel d'autorisation, vous pouvez utiliser https://localhost:3000 ou quelle que soit 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 en utilisant Auth0. Nous sommes également passés par le processus de configuration de la connexion sociale Github dans notre application. Amusez-vous à ajouter une authentification à votre application React avec Auth0.

Nous avons également vu comment authentifier notre application avec Auth0 et les avantages de l'utilisation du SDK React sur le SDK JavaScript.

Ressources

Éditorial fracassant(ks, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *