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: "configuration-du-plugiciel-auth0-config",
title: "Configuration du plugiciel Auth0 Config"
}, {
id: "générer-le-code-source-natif",
title: "Générer le code source natif"
}, {
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 cadre Expo. Pour intégrer Auth0 dans votre application React Native, reportez-vous au Guide rapide React Native.
Cette trousse SDK n’est pas compatible avec l’application "Expo Go". Elle est uniquement compatible avec les versions Custom Dev Client et EAS.
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.
Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.
### Configuration des URL de rappel et des URL 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 la valeur suivante :
* iOS : `com.auth0samples.auth0://{yourDomain}/ios/com.auth0samples/callback`
* Android : `com.auth0samples.auth0://{yourDomain}/android/com.auth0samples/callback`
Dans cette section, vous apprendrez comment installer le module React Native Auth0.
Veuillez vous reporter à la [documentation officielle](https://facebook.github.io/react-native/) pour plus de détails sur React Native.
### Yarn
`yarn add react-native-auth0`
Pour en savoir plus sur `yarn`, consultez leur [documentation officielle](https://yarnpkg.com/en/docs).
### npm
`npm install react-native-auth0 --save`
Le package Auth0 exécute du code natif personnalisé qui doit être configuré au moment de la génération. Utilisez le [plugiciel Expo Config](https://docs.expo.dev/guides/config-plugins/) pour y parvenir.
Le plugiciel `react-native-auth0` sera ajouté dans [Expo config](https://docs.expo.dev/workflow/configuration/).
Vous devez générer le code natif pour que la configuration ci-dessus soit définie. Pour ce faire, exécutez la commande suivante :
`expo prebuild`
Vous serez invité à fournir le [package Android](https://github.com/expo/fyi/blob/main/android-package.md) et l’[identificateur du bundle iOS](https://github.com/expo/fyi/blob/main/bundle-identifier.md) si ils ne sont pas déjà présents dans la configuration d’Expo.
```
? What would you like your Android package name to be? > com.auth0samples # or your desired package name
? What would you like your iOS bundle identifier to be? > com.auth0samples # or your desired bundle identifier
```
Ces valeurs sont utilisées pour définir les Callback URL et les URL de déconnexion.
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 intégrer 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é, indiquez dans ce champ votre domaine personnalisé.
* `clientId` : L’identificateur du client de l’application Auth0 que vous avez configurée précédemment dans ce guide rapide. Vous pouvez le trouver dans Auth0 Dashboard sous vos **paramètres** d’application dans le champ **Client ID (Identificateur client)**.
##### Point de contrôle
Votre composant `Auth0Provider` devrait maintenant être correctement configuré. Exécutez votre application pour vérifier que :
la trousse SDK est correctement initialisée,
votre application ne génère aucune erreur liée à Auth0.
Authentifiez l’utilisateur en appelant la méthode `authorize` fournie par le hook `useAuth0`. Cette action redirige l’utilisateur vers la page Universal Login (Connexion universelle) Auth0 pour authentification, puis vers votre application.
Pour confirmer que l’utilisateur s’est connecté avec succès, 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 Auth0 en appelant `clearSession`. Cela supprimera leur session du serveur d’autorisations et déconnectera l’utilisateur 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.
Le hook `useAuth0` expose un objet `user` qui contient des informations sur l’utilisateur authentifié. Vous pouvez utiliser cette option pour accéder aux informations du profil utilisateur sur l’utilisateur authentifié qui a été décodé à partir de [Jeton d’ID](https://auth0.com/docs/secure/tokens/id-tokens).
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` par rapport au 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 theme={null}
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={31-36} theme={null}
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={46-48} theme={null}
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 {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 {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={32-34} theme={null}
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.