Construire l'authentification Expo (React Native) avec Logto
Apprends à construire un flux d'authentification utilisateur avec Expo (React Native) en intégrant le SDK Logto.
Founder
Commencer
Introduction
- Logto est une alternative open-source à Auth0 pour construire des infrastructures d'identité. Il prend en charge diverses méthodes de connexion, y compris le nom d'utilisateur, l'email, le numéro de téléphone et les connexions sociales populaires comme Google et GitHub.
- Expo (React Native) est un écosystème d'outils qui t'aide à créer des applications natives universelles avec React qui fonctionnent sur Android, iOS et le web.
Dans ce tutoriel, nous allons vous montrer comment créer un flux d'authentification utilisateur avec Expo (React Native) en intégrant le SDK Logto. Le tutoriel utilise TypeScript comme langage de programmation.
Prérequis
Avant de commencer, assurez-vous d'avoir les éléments suivants :
- Un compte Logto. Si vous n'en avez pas, vous pouvez vous inscrire gratuitement.
- Environnement de développement An Expo (React Native) et un projet.
Créer une application Logto
Pour commencer, créez une application Logto avec le type "Native". Suivez ces étapes pour créer une application Logto :
- Connectez-vous à la Console Logto.
- Dans la barre de navigation de gauche, cliquez sur Applications.
- Cliquez sur Créer une application.
- Sur la page ouverte, trouvez la section "Native" et localisez la carte "Expo (React Native)".
- Cliquez sur Commencer à construire et entrez le nom de votre application.
- Cliquez sur Créer.
Vous devriez ensuite voir un guide interactif qui vous guide à travers le processus d'intégration du SDK Logto avec votre application Expo (React Native). Le contenu suivant peut être une référence pour une utilisation future.
Intégrer avec le SDK Logto
Installation
Installe le SDK Logto et ses dépendances via ton gestionnaire de paquets préféré :
Le package @logto/rn est le SDK pour Logto. Les autres packages sont ses dépendances. Elles ne peuvent pas être listées comme des dépendances directes car l'Expo CLI requiert que toutes les dépendances pour les modules natifs soient installées directement dans le package.json du projet racine.
Initialiser le fournisseur Logto
Importe et utilise LogtoProvider pour fournir un contexte Logto :
Mettre en œuvre la connexion et la déconnexion
Passe à la page de détails de l'application de la Console Logto. Ajoute un URI de redirection native (par exemple, io.logto://callback), puis clique sur "Enregistrer".
-
Pour iOS, le schéma de l'URI de redirection n'a pas vraiment d'importance puisque la classe
ASWebAuthenticationSessionécoutera l'URI de redirection qu'il soit enregistré ou non. -
Pour Android, le schéma de l'URI de redirection doit être renseigné dans le fichier
app.jsond'Expo, par exemple :
Reviens maintenant à ton application, tu peux utiliser le hook useLogto pour te connecter et te déconnecter :
Afficher les informations de l'utilisateur
Pour afficher les informations de l'utilisateur, tu peux utiliser la méthode getIdTokenClaims() :
Point de contrôle : Lancer l'application
Vous pouvez maintenant exécuter l'application et essayer de vous connecter/déconnecter avec Logto :
- Ouvrez l'application dans votre navigateur, vous devriez voir le bouton "Se connecter".
- Cliquez sur le bouton "Se connecter" et vous devriez être redirigé vers la page de connexion Logto.
- Après vous être connecté, vous devriez être redirigé vers l'application et vous devriez voir les données utilisateur et le bouton "Se déconnecter".
- Cliquez sur le bouton "Se déconnecter" et vous devriez être redirigé vers la page de déconnexion Logto, puis redirigé vers l'application avec un état non connecté.
Si vous rencontrez des problèmes lors de l'intégration, n'hésitez pas à rejoindre notre serveur Discord pour discuter avec la communauté et l'équipe Logto !