Ce guide de démarrage rapide suppose que vous avez déjà une application Ionic en cours d’exécution avec Capacitor. Si ce n’est pas le cas, consultez Using Capacitor with Ionic Framework guide (Utiliser Capacitor avec le cadre d’applications Ionic) pour commencer avec une application simple ou clonez nos our sample apps (exemples d’applications).

Vous devez également être familiarisé avec Capacitor development workflow (le flux de production de développement Capacitor).

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour votre projet.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configuration des URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Configurer les origines autorisées

Pour pouvoir faire des requêtes à partir de votre application d’origine vers Auth0, définissez les origines autorisées dans vos Application Settings (Paramètres d’application).

Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les Application Settings (Paramètres d’application).

Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK React Auth0 :

npm install @auth0/auth0-react

La trousse SDK expose des méthodes et variables qui vous aident à intégrer Auth0 avec votre application React en utilisant les Crochets React ou les Composants d’ordre supérieur.

Installer les plugiciels Capacitor

Ce guide rapide et cet exemple utilisent certains des plugiciels officiels Capacitor. Installez-les dans votre application à l’aide de la commande suivante :

npm install @capacitor/browser @capacitor/app

• @capacitor/browser : Vous permet d’interagir avec le navigateur de système de l’appareil, et est utilisé pour ouvrir l’URL vers le point de terminaison d’autorisation d’Auth0.

• @capacitor/app : Vous permet de vous abonner à des événements d’application de haut niveau, utiles pour la gestion des Callbacks depuis Auth0.

Au cours de son fonctionnement, la trousse SDK React Auth0 utilise React Context pour gérer l’état d’authentification de vos utilisateurs. Une façon d’intégrer Auth0 avec votre application React est d’envelopper votre composant racine avec un Auth0Provider que vous pouvez importer à partir de la trousse SDK.

Le composant Auth0Provider prend les props suivants :

• domain : La valeur du domain présente dans les paramètres de l’application que vous avez créée dans votre Auth0 Dashboard, ou votre domaine personnalisé si vous utilisez la fonctionnalité Domaines personnalisés d’Auth0.

• clientId : La valeur de l’identifiant du client présente dans les paramètres de l’application que vous avez créée dans votre Auth0 Dashboard.

• useRefreshTokens : Pour utiliser auth0-react avec Ionic sur Android et iOS, il est nécessaire d’activer les jetons d’actualisation.

• useRefreshTokensFallback : Pour utiliser auth0-react avec Ionic sur Android et iOS, il est nécessaire de désactiver le iframe de substitution.

• authorizationParams.redirect_uri : L’URL vers laquelle vous souhaitez rediriger vos utilisateurs après qu’ils se soient authentifiés avec Auth0.

Dans une application Capacitor, le plugiciel Capacitor’s Browser effectue une redirection vers la Universal Login Page (page de connexion universelle) d’Auth0 Auth0. Définissez le paramètre openUrl sur la fonction loginWithRedirect pour utiliser Browser.open afin que l’URL soit ouverte à l’aide du composant de navigateur système de l’appareil (SFSafariViewController sur iOS et Chrome Custom Tabs [Onglets personnalisés Chrome] sur Android).

Une fois que les utilisateurs sont connectés avec la page de connexion universelle, ils sont redirigés vers votre application au moyen d’une URL avec un schéma d’URL personnalisé. L’événement appUrlOpen doit être traité au sein de votre application. Vous pouvez appeler la méthode handleRedirectCallback à partir de la trousse SDK Auth0 pour initialiser l’état d’authentification.

Vous pouvez utiliser cette méthode uniquement sur une redirection depuis Auth0. Vérifiez que les paramètres code et state sont présents dans l’URL.

La méthode Browser.close() devrait fermer le navigateur lorsque cet événement est déclenché.

Maintenant que les utilisateurs peuvent se connecter, vous devez configurer une façon de se déconnecter. Les utilisateurs doivent être redirigés vers le point de terminaison de déconnexion Auth0 dans le navigateur pour effacer leur session de navigation. Encore une fois, le plugiciel du navigateur de Capacitor doit effectuer cette redirection afin que l’utilisateur ne quitte pas votre application et ne vive pas une expérience frustrante.

Pour y parvenir avec Ionic et Capacitor en conjonction avec le SDK Auth0 :

• Créez l’URL de votre application vers laquelle Auth0 doit rediriger après la déconnexion. Il s’agit d’une URL qui utilise votre schéma personnalisé enregistré et le domaine Auth0. Ajoutez-la à votre configuration URL de déconnexions autorisées dans Auth0 Dashboard

• Déconnectez-vous de la trousse SDK en appelant logout et transmettez votre URL de redirection comme paramètre logoutParams.returnTo.

• Définissez le paramètre openUrl sur un callback qui utilise le plugiciel de navigateur Capacitor pour ouvrir l’URL à l’aide de Browser.open.

La trousse SDK React Auth0 récupère le user’s profile (profil utilisateur) associé aux utilisateurs connectés dans n’importe quel composant dont vous avez besoin, comme leur nom ou leur image de profil, pour personnaliser l’interface utilisateur. Les informations de profil sont accessibles via la propriété user exposée par l’appel useAuth0().

L’initialisation de la trousse SDK est asynchrone, et vous devez protéger le profil utilisateur en activant les propriétés isLoading et user. Une fois que isLoading est false et que user a une valeur, le profil utilisateur peut être utilisé.