Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.
;
};
export const sections = [{
id: "configuration-d-auth0",
title: "Configuration d’Auth0"
}, {
id: "installer-les-dépendances",
title: "Installer les dépendances"
}, {
id: "intégrer-auth0-dans-votre-application",
title: "Intégrer Auth0 dans votre application"
}, {
id: "configurer-le-composant-auth0provider",
title: "Configurer le composant Auth0Provider"
}, {
id: "ajouter-une-fonctionnalité-de-connexion-à-votre-application",
title: "Ajouter une fonctionnalité de connexion à votre application"
}, {
id: "ajouter-une-fonctionnalité-de-déconnexion-à-votre-application",
title: "Ajouter une fonctionnalité de déconnexion à votre application"
}, {
id: "afficher-les-informations-du-profil-utilisateur",
title: "Afficher les informations du profil utilisateur"
}];
Ce guide rapide est destiné au framework React Native. Pour intégrer Auth0 dans votre application Expo, référez-vous au [Guide rapide Expo](https://auth0.com/docs/quickstart/native/react-native-expo/interactive).
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 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 démarrage rapide seront automatiquement mis à jour pour votre application dans le [Dashboard](https://manage.auth0.com/#/), qui est l’endroit où vous pourrez gérer vos Applications à l’avenir.
Pour explorer une configuration complète, examinez l’application faisant office d’exemple dans votre Dashboard.
### Configurer des URL de rappel et de déconnexion
Auth0 fait appel aux Callback URL et aux URL de déconnexion pour rediriger les utilisateurs vers votre application. Auth0 fait appel à une URL de rappel après avoir authentifié l’utilisateur et à une URL de déconnexion après avoir supprimé le témoin de session. Si vous ne définissez pas les Callback URL et les URL de déconnexion, les utilisateurs ne pourront pas se connecter et se déconnecter de l’application, et votre application produira une erreur.
Ajoutez l’URL correspondante aux **URL de rappel** et aux **URL de déconnexion**, en fonction de la plateforme de votre application. Si vous utilisez un domaine personnalisé, utilisez la valeur de votre domaine personnalisé au lieu du domaine de votre locataire Auth0.
#### iOS
```
BUNDLE_IDENTIFIER.auth0://{yourDomain}/ios/BUNDLE_IDENTIFIER/callback
```
#### Android
```
PACKAGE_NAME.auth0://{yourDomain}/android/PACKAGE_NAME/callback
```
Si vous suivez notre exemple de projet, utilisez l’URL suivante :
* **iOS** :
`com.auth0samples.auth0://labs-fundtraining.us.auth0.com/ios/com.auth0samples/callback`
* **Android** :
`com.auth0samples.auth0://labs-fundtraining.us.auth0.com/android/com.auth0samples/callback`
Dans cette section, vous installerez le module React Native Auth0.
Veuillez vous référer à la [documentation officielle](https://facebook.github.io/react-native/) pour plus de détails sur React Native.
### Yarn
```bash theme={null}
yarn add react-native-auth0
```
Pour en savoir plus sur yarn, consultez la [documentation officielle](https://yarnpkg.com/en/docs).
### npm
```bash theme={null}
npm install react-native-auth0 --save
```
### Étape iOS supplémentaire : installez le module Pod.
Notre trousse SDK nécessite au minimum une cible de déploiement iOS 13.0. Dans le \`ios/Podfile\`\` de votre profil, vérifiez que la cible de votre plateforme est 13.0.
```
platform :ios '13.0'
```
CocoaPods est l’outil de gestion de package iOS que le framework React Native utilise pour s’installer dans votre projet. Pour que le module natif iOS fonctionne avec votre application iOS, installez d’abord la bibliothèque Pod. Si vous êtes familier avec les anciennes versions de la trousse SDK React Native, cela est similaire à la précédente liaison d’un module natif. Le processus est désormais simplifié :
Placez-vous dans le dossier `ios` et exécutez `pod install`.
```
cd ios
pod install
```
Au préalable, vous devez fournir un moyen pour vos utilisateurs de se connecter. Nous recommandons d’utiliser la page de connexionhébergée par Auth0.
### Configurer Android
Ouvrez le fichier `build.gradle` dans le répertoire de votre application (généralement dans `android/app/build.gradle`) et ajoutez les placeholders du manifeste suivants. La valeur de `auth0Domain` doit contenir les paramètres de l’application Auth0 tels qu’ils sont configurés ci-dessus.
```
android {
defaultConfig {
// Add the next line
manifestPlaceholders = [auth0Domain: "{yourDomain}", auth0Scheme: "${applicationId}.auth0"]
}
...
}
```
Au moment de l’exécution, la valeur `applicationId` se mettra automatiquement à jour avec le nom ou l’identifiant de package de votre application (p. ex., `com.example.app`). Vous pouvez modifier cette valeur à partir du fichier `build.gradle`. Vous pouvez également la vérifier en haut de votre fichier `AndroidManifest.xml`.
### Configurer iOS
Dans le fichier `ios//AppDelegate.mm`, ajoutez ce qui suit :
```
#import
(BOOL)application:(UIApplication *)app openURL:(NSURL *)url
options:(NSDictionary *)options
{
return [RCTLinkingManager application:app openURL:url options:options];
}
```
Ce fichier sera `ios//AppDelegate.m` pour les applications utilisant l’[ancienne architecture](https://reactnative.dev/docs/next/new-architecture-app-intro#ios---use-objective-c-mm-extension).
Ensuite, ajoutez un URLScheme à l’aide de l’identifiant de l’ensemble de votre application.
Dans le dossier `ios`, ouvrez le fichier `Info.plist` et localisez la valeur de `CFBundleIdentifier`.
```html theme={null}
CFBundleIdentifier$(PRODUCT_BUNDLE_IDENTIFIER)
```
Sous cette valeur, enregistrez une entrée de type URL en utilisant la valeur de `CFBundleIdentifier` comme valeur pour `CFBundleURLSchemes`.
```html theme={null}
CFBundleURLTypesCFBundleTypeRoleNoneCFBundleURLNameauth0CFBundleURLSchemes$(PRODUCT_BUNDLE_IDENTIFIER).auth0
```
Si votre application a été générée à l’aide de React Native CLI, la valeur par défaut de `$(PRODUCT\_BUNDLE\_IDENTIFIER)` correspond dynamiquement à `org.reactjs.native.example.$(PRODUCT\_NAME:rfc1034identifier)`. Pour l’application faisant office d’exemple, cette valeur correspond à `com.auth0samples`.
Dans une étape ultérieure, vous utiliserez cette valeur pour définir les URL de rappel ci-dessous. Vous pouvez la modifier en utilisant XCode avec les étapes suivantes :
* Ouvrez le fichier `ios/.xcodeproj` ou exécutez `xed ios` dans un terminal depuis la racine de l’application.
* Ouvrez l’onglet des paramètres de construction de votre projet ou de la cible souhaitée et recherchez la section contenant « Bundle Identifier » (Identifiant de l’ensemble).
* Remplacez la valeur « Identifiant de l’ensemble » par le nom de l’identifiant de l’ensemble de votre application souhaitée.
Pour des informations supplémentaires, veuillez consulter [la documentation de React Native](https://facebook.github.io/react-native/docs/linking).
L’appel `useAuth0` s’appuie sur un contexte React pour fournir une gestion d’état. Ce contexte est fourni par le composant `Auth0Provider`.
Importer l’appel `useAuth0` et le composant `Auth0Provider` du package `react-native-auth0` :
```js theme={null}
import {useAuth0, Auth0Provider} from 'react-native-auth0';
```
Pour que la trousse SDK fonctionne correctement, vous devez envelopper votre application dans le composant `Auth0Provider` et définir les propriétés suivantes :
* `domain` : Le domaine de votre locataire Auth0. En général, vous le trouvez dans Auth0 Dashboard sous vos paramètres d’application dans le champ Domain (Domaine). Si vous utilisez un domaine personnalisé, définissez-le plutôt sur la valeur de votre domaine personnalisé.
* `clientId` : L’identificateur de l’application Auth0 que vous avez configurée précédemment dans ce guide rapide. Celui-ci figure dans Auth0 Dashboard, sous l’onglet des paramètres de votre application du champ ID client.
##### Point de contrôle
Vous venez de configurer le composant `Auth0Provider`. Exécutez votre application pour vérifier que :
la trousse SDK s’initialise correctement,
votre application ne génère aucune erreur liée à Auth0.
Authentifiez l’utilisateur en appelant la méthode `authorize` fournie par le crochet `useAuth0`. Cette méthode redirige l’utilisateur vers la page Universal Login (Connexion universelle) Auth0 pour authentification, puis vers votre application.
Pour confirmer que l’utilisateur a bien ouvert une session, vérifiez que la propriété `user` fournie par le hook n’est pas `null`.
##### Point de contrôle
Ajoutez un bouton qui appelle `authorize` lorsqu’on clique dessus. Vérifiez que vous êtes redirigé vers la page de connexion, puis renvoyé vers votre application.
Pour déconnecter l’utilisateur, redirigez-le vers le point de terminaison de déconnexion Auth0 en appelant `clearSession`. Cette action supprimera la session de l’utilisateur du serveur d’autorisations et le déconnectera de l’application.
##### Point de contrôle
Ajoutez un bouton qui appelle `clearSession` et observez si vous êtes redirigé vers le point de terminaison de déconnexion Auth0, puis renvoyé de nouveau. Vous ne devriez plus être connecté à votre application.
L’appel `useAuth0` expose un objet `user` qui contient des informations sur l’utilisateur authentifié. Vous pouvez utiliser cette option pour accéder aux informations décodées du profil utilisateur concernant l’utilisateur authentifié à partir du jeton d’ID.
Si un utilisateur n’a pas été authentifié, cette propriété sera `null`.
##### Point de contrôle
Connectez-vous et inspectez la propriété `user` sur le résultat. Vérifiez les informations de profil utilisateur actuel, telles que son `email` ou `name`.
## Étapes suivantes
Beau travail! Si vous en êtes arrivé là, vous devriez avoir la connexion, la déconnexion et les informations de profil utilisateur actives dans votre application.
Cela conclut notre tutoriel de démarrage rapide, mais il y a tellement plus à explorer. Pour en savoir plus sur ce que vous pouvez faire avec Auth0, consultez :
* [Auth0 Dashboard](https://manage.auth0.com/#) : apprenez à configurer et gérer votre locataire et vos applications Auth0
* [Trousse SDK react-native-auth0](https://github.com/auth0/react-native-auth0) : explorez en détail la trousse SDK utilisée dans ce tutoriel
* [Auth0 Marketplace](https://marketplace.auth0.com/) : découvrez des intégrations que vous pouvez activer pour étendre les fonctionnalités d’Auth0
```jsx app.js lines highlight={46-48} theme={null}
import React from 'react';
import {Button, Text, View, StyleSheet} from 'react-native';
import {useAuth0, Auth0Provider} from 'react-native-auth0';
const Home = () => {
const {authorize, clearSession, user, error, isLoading} = useAuth0();
const onLogin = async () => {
try {
await authorize();
} catch (e) {
console.log(e);
}
};
const onLogout = async () => {
try {
await clearSession();
} catch (e) {
console.log('Log out cancelled');
}
};
if (isLoading) {
return Loading;
}
const loggedIn = user !== undefined && user !== null;
return (
{loggedIn && You are logged in as {user.name}}
{!loggedIn && You are not logged in}
{error && {error.message}}
);
};
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
export default App;
```
```jsx app.js lines highlight={8-14} theme={null}
import React from 'react';
import {Button, Text, View, StyleSheet} from 'react-native';
import {useAuth0, Auth0Provider} from 'react-native-auth0';
const Home = () => {
const {authorize, clearSession, user, error, isLoading} = useAuth0();
const onLogin = async () => {
try {
await authorize();
} catch (e) {
console.log(e);
}
};
const onLogout = async () => {
try {
await clearSession();
} catch (e) {
console.log('Log out cancelled');
}
};
if (isLoading) {
return Loading;
}
const loggedIn = user !== undefined && user !== null;
return (
{loggedIn && You are logged in as {user.name}}
{!loggedIn && You are not logged in}
{error && {error.message}}
);
};
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
export default App;
```
```jsx app.js lines highlight={16-22} theme={null}
import React from 'react';
import {Button, Text, View, StyleSheet} from 'react-native';
import {useAuth0, Auth0Provider} from 'react-native-auth0';
const Home = () => {
const {authorize, clearSession, user, error, isLoading} = useAuth0();
const onLogin = async () => {
try {
await authorize();
} catch (e) {
console.log(e);
}
};
const onLogout = async () => {
try {
await clearSession();
} catch (e) {
console.log('Log out cancelled');
}
};
if (isLoading) {
return Loading;
}
const loggedIn = user !== undefined && user !== null;
return (
{loggedIn && You are logged in as {user.name}}
{!loggedIn && You are not logged in}
{error && {error.message}}
);
};
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
export default App;
```
```jsx app.js lines highlight={28-34} theme={null}
import React from 'react';
import {Button, Text, View, StyleSheet} from 'react-native';
import {useAuth0, Auth0Provider} from 'react-native-auth0';
const Home = () => {
const {authorize, clearSession, user, error, isLoading} = useAuth0();
const onLogin = async () => {
try {
await authorize();
} catch (e) {
console.log(e);
}
};
const onLogout = async () => {
try {
await clearSession();
} catch (e) {
console.log('Log out cancelled');
}
};
if (isLoading) {
return Loading;
}
const loggedIn = user !== undefined && user !== null;
return (
{loggedIn && You are logged in as {user.name}}
{!loggedIn && You are not logged in}
{error && {error.message}}
);
};
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
export default App;
```
Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.
### Configurer Android
Ouvrez le fichier `build.gradle` dans le répertoire de votre application (généralement dans `android/app/build.gradle`) et ajoutez les placeholders du manifeste suivants. La valeur de `auth0Domain` doit contenir les paramètres de l’application Auth0 tels qu’ils sont configurés ci-dessus.
```
android {
defaultConfig {
// Add the next line
manifestPlaceholders = [auth0Domain: "{yourDomain}", auth0Scheme: "${applicationId}.auth0"]
}
...
}
```