---
title: Bonnes pratiques pour gérer vos clés d’API avec Kuzzle mobile et React Native
description: Enfin, voici la 3ème partie de notre série d'articles sur Kuzzle Mobile et React Native
image: https://blog.kuzzle.io/hubfs/blog%20post%20hubspot_%20%20kuzzle%20mobile%20(6).png
---

<https://kuzzle.io/>

c'est ici qu'on rajoute le truc en français<-->

- [EN](https://kuzzle.io)
- [Github](https://github.com/kuzzleio)
- [Offre d'emploi](https://kuzzle.io/fr/a-propos/rejoignez-kuzzle/)
- [Nous Contacter](https://info.kuzzle.io/contacter-kuzzle?hsLang=fr)
- [Newsletter](https://info.kuzzle.io/inscription-a-notre-newsletter?hsLang=fr)
- [Blog FR](https://blog.kuzzle.io/fr/)
- [Télécharger](https://kuzzle.io/download)

- [Notre Vision](https://kuzzle.io/fr/a-propos/notre-vision/)
- [Kuzzle en 5 minutes](https://kuzzle.io/fr/a-propos/kuzzle-en-5-minutes/)
- [L'équipe](https://kuzzle.io/fr/a-propos/l-equipe/)
- [Rejoignez l'équipe Kuzzle](https://kuzzle.io/fr/a-propos/rejoignez-kuzzle/)
- [Espace Presse](https://kuzzle.io/fr/a-propos/presse/)

Suivez-nous

- <https://www.facebook.com/kuzzleio>
- <https://twitter.com/kuzzleio>
- <https://github.com/kuzzleio/kuzzle>

# Bonnes pratiques pour gérer vos clés d’API avec Kuzzle mobile et React Native

Par Alicia Thermos le 10 septembre 2020

Enfin, voici la 3ème partie de notre série d'articles sur Kuzzle Mobile et React Native :

- **Partie 1:** [Initialisation de l'application et gestion de la connexion des utilisateurs](https://blog.kuzzle.io/develop-a-real-time-messaging-mobile-with-react_native?hsLang=fr)
- **Partie 2:** [Codons un chat en temps réel](https://blog.kuzzle.io/fr/developper-apps-mobile-react-native-0?hsLang=fr)
- **Partie 3:** Bonnes pratiques de Kuzzle Mobile

Cette partie est consacrée aux bonnes pratiques de l'utilisation de Kuzzle et en particulier à la gestion des clés API des utilisateurs.

 

Si vous avez suivi les parties 1 et 2 (ce que je vous encourage vivement à faire), vous devriez avoir une application mobile de messagerie en temps réel qui fonctionne parfaitement ! Mais il y a plus... en effet, vous avez peut-être remarqué que lorsque l'application est redémarrée, il est nécessaire de refaire l'authentification à chaque fois. Troublant, n'est-ce pas ?

 

Aujourd'hui, nous allons donc voir comment générer des clés API et comment faire persister les informations de l'utilisateur actuel avec Kuzzle Mobile, Expo et React en natif.

 

## Petit rappel

Dans la première partie de cette série, nous avons créé notre nouveau projet pour notre application mobile, configuré notre pile de backend et utilisé le SDK Kuzzle Javascript pour effectuer la connexion des utilisateurs. Dans la deuxième partie, nous avons mis en œuvre toute la logique du chat en temps réel.

 

Commençons la troisième partie, mais avant cela, pour rappel, voici deux commandes utiles dont nous aurons besoin :

 

Pour lancer la stack Kuzzle :

 

```
docker-compose up
```

 

Pour relancer l'application mobile avec Expo :

 

```
npm start
```

 

Ces 2 commandes doivent être exécutées à la racine de votre projet.

 

## Persistez l'utilisateur courant

Pour conserver les informations actuelles sur l'utilisateur et ne pas être obligé de s'authentifier à nouveau chaque fois que nous lançons l'application, nous devrons procéder à une petite refonte de notre code.

 

Dans le fichier **App.js** se trouvent les deux lignes où nous déclarons les deux états React **JWT** et **username** :

 

```
const [jwt, setJwt] = useState(null);
const [username, setUsername] = useState(null);
```

 

Nous pouvons les supprimer tous les deux et les remplacer par une nouvelle déclaration "**useState**" :

 

```
const [currentUser, setCurrentUser] = useState(null);
```

 

C'est donc dans cette variable de notre état que nous allons stocker les informations que nous voulons de l'utilisateur fraîchement connecté.

 

Nous devons maintenant modifier la fonction **onLoginSuccess**. Ce que nous voulons, c'est créer une nouvelle clé API une fois que l'utilisateur est connecté avec succès.

 

Si vous allez sur le site de documentation Kuzzle et en particulier sur la [section Clé API](https://docs.kuzzle.io/core/2/api/controllers/auth/create-api-key/). Vous apprendrez que les clés API ne sont que des jetons d'authentification. Vous pouvez utiliser votre clé API de la même manière que vous utilisez votre jeton d'authentification. La principale différence est qu'il n'y a pas de date d'expiration pour ce jeton.

 

Dans le fichier **App.js**, localisez la méthode **onLoginSuccess** et modifiez-la pour faire ce que nous voulons maintenant :

 

```
const onLoginSuccess = async (username) => {
 try {
   const apiKey = await kuzzle.auth.createApiKey(`${username} API key`);
   const currentUser = {
     username,
     jwt: apiKey._source.token,
     tokenId: apiKey._id
   };
 
   await SecureStore.setItemAsync('persistedUser', JSON.stringify(currentUser));
 
   setCurrentUser(currentUser)
 } catch {
   showToast(
     "danger",
     "Sorry an error occurred during authentication"
   );
 }
};
```

 

Nous devons maintenant appeler la méthode createApiKey du contrôleur d'authentification du SDK Kuzzle. Nous lui donnons comme paramètre une description de la clé API que nous voulons créer. Cela peut être utile si vous devez gérer différentes clés.

 

Ensuite, nous créons un nouvel objet représentant l'utilisateur actuel : **username**, **jwt** et **tokenId**. Ce dernier est l'identifiant unique, renvoyé par le SDK, de la clé API que nous venons de créer. Nous en aurons besoin dans la partie suivante.

 

Si vous vous souvenez du premier article de cette série. Nous avions installé la bibliothèque "**Expo-secure-store**" et nous ne l'avons jamais utilisée. C'est maintenant le moment de s'en servir.

Cette bibliothèque permet de chiffrer et de stocker en toute sécurité des paires clé-valeur localement sur l'appareil (vous pouvez en savoir plus [ici](https://docs.expo.io/versions/latest/sdk/securestore/)).

C'est parfait pour nos besoins. Nous pouvons utiliser la méthode **SecureStore.setItemAsync** pour conserver nos informations d'utilisateur. Celle-ci prend 2 paramètres : la clé à associer à la valeur stockée et la valeur à stocker. Notez que nous devons utiliser **JSON.stringify** pour convertir notre objet JS en une chaîne de caractères.

 

Si tout se passe bien, il suffit d'appeler la fonction **setCurrentUser** pour le sauvegarder.

 

Ensuite, localisez la déclaration de hook useEffect qui s'est déclenchée sur JWT et la modification du nom d'utilisateur :

 

```
useEffect(() => {
 if (jwt && username) {
   setIsLoggedIn(true);
 }
}, [jwt, username]);
```

 

Et le modifier pour l'activer sur la mise à jour de l'état de l'utilisateur actuel :

 

```
useEffect(() => {
 if (currentUser) {
   setIsLoggedIn(true);
 }
}, [currentUser]);
```

 

Et pour finir sur ce fichier, sur la fonction **renderApp**, changez la condition basée sur l'état comme ceci :

 

```
if (!isLoadingComplete && isRessourcesLoaded) {
 pageContent = <Spinner />;
} else if (!isLoggedIn) {
 pageContent = <LoginForm onLoginSuccess={onLoginSuccess} />;
} else if (currentUser) {
 pageContent = <Chat currentUsername={currentUser.username} />;
}
```

 

Ouvrez maintenant le fichier **LoginForm.js** et trouvez la méthode **performLogin**. En regardant les modifications précédentes, vous aurez remarqué que nous ne devons plus donner qu'un seul paramètre à la fonction **onLoginSuccess**. Donc, mettez à jour l'appel de cette fonction dans la méthode **performLogin** comme ceci :

 

```
onLoginSuccess(username);
```

 

C'est tout pour cette première partie de refonte. Maintenant, chaque fois qu'un utilisateur remplit le formulaire de connexion et que l'authentification est réussie, une clé API est alors créée par Kuzzle. Ainsi, nous pouvons conserver dans le store local ainsi que dans l'état de notre application toutes les informations nécessaires de l'utilisateur concerné.

 

## Récuperer l'utilisateur courant

Pour le chapitre suivant, nous voulons modifier notre application pour pouvoir récuperer l'utilisateur courant store local du téléphone, s'il y en a un, et aussi, vérifier que la clé API de l'utilisateur est valide avant de continuer avec cet utilisateur.

 

Une fois de plus, allez dans **App.js** et localisez le hook **useState** utilisant la variable d'état **connected**

 

```
useEffect(() => {
 if (connected) {
   setIsLoadingComplete(true);
 }
}, [connected]);
```

 

Nous devons mettre à jour la logique de ce **hook** pour récupérer les informations de l'utilisateur précédemment connecté, puis vérifier si la clé API est valide et enfin si tout va bien, montrer à l'utilisateur le composant de chat, sinon nous devons lui demander de se connecter.

 

Remplacez le code du **hook** par celui-ci :

 

```
useEffect(() => {
 if (connected) {
   SecureStore.getItemAsync('persistedUser').then(async (persistedUser) => {
     persistedUser = JSON.parse(persistedUser);
 
     if (await checkTokenValidity(persistedUser.jwt)) {
       kuzzle.jwt = persistedUser.jwt; // set the jwt on the kuzzle SDK property to automatically use it
       setCurrentUser(persistedUser)
     }
 
     setIsLoadingComplete(true);
   }).catch(() => setIsLoadingComplete(true));
 }
}, [connected]);
```

 

Ce que nous faisons ici est d'appeler la méthode **SecureStore.getItemAsync** fournie par Expo-secure-store et s'il y a un résultat, nous pouvons essayer de vérifier si le jeton est valide puis si c'est le cas, nous pouvons mettre l'utilisateur actuel sur l'état de l'application.

 

Notez que nous utilisons une **promise** pour appeler **getItemAsync** parce que nous ne pouvons pas déclarer un hook asynchrone. S'il n'y a pas de résultat, nous passons dans le cas du **catch** et nous n'avons pas besoin de montrer une erreur. En fait, nous devons juste continuer l'exécution sans définir les informations actuelles de l'utilisateur.

 

Il faut aussi ajouter une nouvelle fonction dans le composant pour implémenter la vérification de la clé API, la voici :

 

```
const checkTokenValidity = async (jwt) => {
 try {
   const verifiedToken = await kuzzle.auth.checkToken(jwt);
   return verifiedToken.valid;
 } catch {
   showToast(La première chose à faire est d'ajouter un bouton de déconnexion. Pour ce faire, nous devons importer de nouveaux composants de la bibliothèque Native-base.
     "danger",
     "Sorry an error occurred during user verification"
   );
 }
}
```

 

Celle-ci appelle la méthode checkToken du contrôleur d'authentification, fournie par le SDK Kuzzle (plus d'info sur cette méthode [ici](https://docs.kuzzle.io/sdk/js/7/controllers/auth/check-token/?__hstc=233546881.f60ea50b8bdc2dfdf17ac346556c332b.1599485680733.1599485680733.1599485680733.1&__hssc=233546881.1.1599485680734&__hsfp=1575489133)).

 

À ce stade, vous pouvez lancer l'application avec Expo et essayer de vous authentifier. Si vous fermez l'application et la redémarrez, vous serez automatiquement connecté et vous verrez directement l'écran de discussion.

 

## Déconnexion

Pour cette étape, nous mettrons en œuvre la logique de déconnexion. Pour permettre aux utilisateurs de se déconnecter de l'application et de supprimer leur clé API.

 

La première chose à faire est d'ajouter un bouton de déconnexion. Pour ce faire, nous devons importer de nouveaux composants de la bibliothèque Native-base.

 

Dans App.js, en haut du fichier, trouvez cette déclaration d'importation :

 

```
import {
 Root,
 Header,
 Body,
 Title,
 Container,
 Toast,
 Text,
 Spinner,
} from "native-base";
```

 

Et ajouter les nouveaux composants dont nous avons besoin, pour être précis : **Right**, **Icon** et **Button**

 

```
import {
 Root,
 Header,
 Body,
 Right,
 Icon,
 Button,
 Title,
 Container,
 Toast,
 Text,
 Spinner,
} from "native-base";
```

 

Ces trois éléments nous permettront d'ajouter un bouton à l'élément d'en-tête de l'application.

Allez à la fonction **renderApp** et mettez à jour la déclaration de retour comme ceci :

 

```
return (
 <Root>
   <Container>
     <Header>
       <Body>
         <Title>Kuzzle Chat</Title>
       </Body>
       {isLoggedIn && <Right>
         <Button transparent onPress={logout}>
           <Icon name='log-out' />
         </Button>
       </Right>}
     </Header>
     <Container padder>{pageContent}</Container>
   </Container>
 </Root>
);
```

 

Nous avons ajouté un bouton transparent placé à droite avec une icône de déconnexion et, bien sûr, nous ne l'afficherons que si l'utilisateur est connecté.

 

Ensuite, nous devons ajouter une nouvelle fonction, celle qui est appelée lorsque l'utilisateur appuie sur le bouton.

 

```
const logout = async () => {
 try {
   await SecureStore.deleteItemAsync('persistedUser');
   await kuzzle.auth.deleteApiKey(currentUser.tokenId);
 
   setCurrentUser(null);
   setIsLoggedIn(false);
 } catch {
   showToast(
     "danger",
     "Sorry an error occurred during log-out"
   );
 }
}
```

 

Ici, nous supprimons l'élément **PersistedUser** du store Expo, puis nous supprimons la clé API de l'utilisateur avec Kuzzle-SDK et nous réinitialisons également l'état **CurrentUser** et **isLoggedIn** de notre application.

 

Lorsque l'utilisateur appuie sur le bouton, il est automatiquement redirigé vers le formulaire de connexion.

 

Une fois de plus, vous pouvez lancer l'application et tester le bouton de déconnexion par vous-même.

 

![](https://blog.kuzzle.io/hubfs/Google%20Drive%20Integration/Develop%20a%20real-time%20messaging%20mobile%20app%20-%20part%203.png)

 

## Aller plus loin

Nous disposons maintenant d'une application mobile pleinement fonctionnelle ! Les utilisateurs peuvent s'authentifier, recevoir et envoyer des messages via l'écran de chat et déconnecter leur session. Nous en avons fini avec la mise en œuvre du code et de la logique !

Pour le dernier chapitre, je veux vous donner quelques conseils et outils pour aller plus loin avec Kuzzle Mobile et tout son écosystème.

 

#### Kourou:

Le CLI qui vous aide à gérer vos instances Kuzzle ! C'est un outil formidable pour administrer votre pile Kuzzle et vous aider tout au long du développement de votre projet. De nombreux membres de l'équipe Kuzzle l'utilisent tous les jours. Nous essayons d'ajouter de nombreuses commandes utiles et vous pouvez voir la liste détaillée et la documentation ici : [Kourou sur Github](https://github.com/kuzzleio/kourou).

 

#### Plugins Kuzzle:

Nous avons développé une application mobile complète sans coder une seule ligne pour la partie backend. C'est l'une des plus grandes forces de Kuzzle, mais parfois, pour certains projets, vous serez obligé de mettre en œuvre une logique metier du côté du backend. C'est là que le système de plugin entre en jeu !

 

- [Documentation plugin Kuzzle](https://docs.kuzzle.io/core/2/plugins/plugin-context/log/intro/?__hstc=233546881.f60ea50b8bdc2dfdf17ac346556c332b.1599485680733.1599485680733.1599485680733.1&__hssc=233546881.1.1599485680734&__hsfp=1575489133)
- [Kuzzle plugin boilerplate](https://github.com/kuzzleio/kuzzle-core-plugin-boilerplate)

Nous fournissons également des plugins officiels, vous pouvez en consulter la liste complète [ici](https://docs.kuzzle.io/official-plugins/?__hstc=233546881.f60ea50b8bdc2dfdf17ac346556c332b.1599485680733.1599485680733.1599485680733.1&__hssc=233546881.1.1599485680734&__hsfp=1575489133).

 

## Conclusion

Ceci complète notre série d'articles sur React Native et Kuzzle Mobile.

Si nécessaire, vous pouvez trouver l'intégralité du code du projet sur ce  [dépôt github](https://github.com/Njuelle/kuzzle-react-native-real-time-chat/).

 

Dans ces trois articles, nous avons abordé de nombreuses notions importantes pour le développement d'une application de messagerie mobile en temps réel, comme la configuration et l'installation d'une instance de Kuzzle Mobile via docker et docker-compose, l'utilisation de la console d'administration Kuzzle, la gestion des titres, des utilisateurs et de leurs clés API, la compréhension des mappings Elasticsearch, la création d'un index, d'une collection et de quelques documents et bien sûr comment ajouter des fonctionnalités en temps réel à notre application.

 

J'espère que cela vous a aidé à vous familiariser avec Kuzzle. Une fois de plus, n'hésitez pas à venir sur notre [serveur Discord](https://discord.gg/tAEtyDZ) si vous avez des questions ou des suggestions.

 

- [Tweet](https://twitter.com/share)

![Alicia Thermos](https://app.hubspot.com/settings/avatar/47c07be51c528b59e92581e25bfcc712)

Par Alicia Thermos le 10 septembre 2020

### Postes associés

 Qu'est-ce que Kuzzle ?

 Kuzzle est un backend sécurisé, évolutif, entièrement personnalisable et open-source.  
 Il dispose également d'une console d'administration, de notifications en temps réel, de fonctions de géofencing et d'un moteur de recherche rapide. 

[Prise en main](https://info.kuzzle.io/start-with-kuzzle?hsLang=fr)

Une question technique? [Demandez sur Discord](https://discord.gg/tAEtyDZ)

Vous avez un projet? [Demandez une démo](https://info.kuzzle.io/demandez-une-demo?hsLang=fr)

[![cta-discover-kuzzle-fr](https://no-cache.hubspot.com/cta/default/3803374/82d4c883-8082-4587-92e3-09c146d13bc2.png)](https://cta-redirect.hubspot.com/cta/redirect/3803374/82d4c883-8082-4587-92e3-09c146d13bc2)

[![cta-dive-in-kuzzle-fr](https://no-cache.hubspot.com/cta/default/3803374/f426ae55-8332-440b-a5ac-7a13afb52ac3.png)](https://cta-redirect.hubspot.com/cta/redirect/3803374/f426ae55-8332-440b-a5ac-7a13afb52ac3)

### categories

- [Bâtiments intelligents (4)](https://blog.kuzzle.io/fr/tag/bâtiments-intelligents)
- [Jumeaux numériques (5)](https://blog.kuzzle.io/fr/tag/jumeaux-numériques)
- [Kuzzle (8)](https://blog.kuzzle.io/fr/tag/kuzzle)
- [Logistique et transport (1)](https://blog.kuzzle.io/fr/tag/logistique-et-transport)
- [Plateforme IoT (12)](https://blog.kuzzle.io/fr/tag/plateforme-iot)
- [Territoires connectés (4)](https://blog.kuzzle.io/fr/tag/territoires-connectés)

### Derniers posts

### Inscription

Veuillez remplir le formulaire ci-dessous pour vous abonner à notre blog

[Abonnez-vous à notre flux RSS](https://blog.kuzzle.io/fr/rss.xml)

[Tweets by kuzzleio](https://twitter.com/kuzzleio?ref_src=twsrc%5Etfw)

[PRODUITS](https://kuzzle.io/fr/) [![DEMANDER UNE DEMO IOT](https://no-cache.hubspot.com/cta/default/3803374/b06c7be7-0b3d-47ed-bcbc-9d9ac5b63b77.png)](https://kuzzle.io/fr/kuzzle-iot-plateforme-open-source/demo-kuzzke-iot/?hsCtaTracking=b71c079c-26bb-4aa4-ab8d-09e9d93d52e5%7C7456984a-b366-4fec-b69c-57feff222eb5)

PRODUITS KUZZLE

[Kuzzle Backend](https://kuzzle.io/fr/kuzzle-backend/)

[Kuzzle IoT](https://kuzzle.io/fr/kuzzle-iot-plateforme-open-source/)

FONCTIONNALITES PRETES A L'EMPLOI

[Securite & Authentification des utilisateurs](https://kuzzle.io/fr/kuzzle-backend/)

[Base de données en temps réel](https://kuzzle.io/fr/kuzzle-backend/)

[Geolocalisation en temps réel](https://kuzzle.io/fr/kuzzle-backend/)

[Moteur Pub/Sub en temps réel](https://kuzzle.io/fr/kuzzle-backend/)

[Kuzzle Admin Console](https://kuzzle.io/fr/kuzzle-backend/)

[Installable On Premise & Cloud Agnostic](https://kuzzle.io/fr/kuzzle-backend/)

[CAS CLIENTS](https://kuzzle.io/fr/cas-clients/)

[Smart Cities](https://kuzzle.io/fr/cas-clients/)

[Smart Building](https://kuzzle.io/fr/cas-clients/)

[Smart Industrie](https://kuzzle.io/fr/cas-clients/)

[Smart Logistique](https://kuzzle.io/fr/cas-clients/)

[TARIFS](https://kuzzle.io/fr/tarifs/)

[Nos tarifs](https://kuzzle.io/fr/tarifs/)

[DÉVELOPPEURS](https://docs.kuzzle.io) [![Télécharger Kuzzle](https://no-cache.hubspot.com/cta/default/3803374/9230fbb8-1602-40d6-b5e9-7395705251de.png)](https://cta-redirect.hubspot.com/cta/redirect/3803374/9230fbb8-1602-40d6-b5e9-7395705251de)

GUIDES

[Getting Started](https://docs.kuzzle.io/guide/getting-started)

[Essentials](https://docs.kuzzle.io/guide/essentials)

[Kuzzle in Depth](https://docs.kuzzle.io/guide/kuzzle-depth)

DOCUMENTATION

[SDK Reference](https://docs.kuzzle.io/sdk-reference/kuzzle)

[Koncorde](https://docs.kuzzle.io/core/1/guides/cookbooks/realtime-api/introduction/)

[API Documentation](https://docs.kuzzle.io/core/1/api/essentials/connecting-to-kuzzle/)

[Plugin Reference](https://docs.kuzzle.io/plugins/1/essentials/getting-started/)

[Elasticsearch Cookbook](https://docs.kuzzle.io/guide/1/elasticsearch/introduction/)

COMMUNAUTÉ

[Github](https://github.com/kuzzleio/kuzzle)

[Discord](https://discord.gg/tAEtyDZ)

[ENTREPRISE](https://kuzzle.io/company/) [![Inscription à notre newsletter](https://no-cache.hubspot.com/cta/default/3803374/63a23e8f-3fe5-476a-bb0e-b6f94bd3ac7a.png)](https://kuzzle.io/fr/newsletter/)

À PROPOS

[Qui sommes-nous](https://kuzzle.io/fr/qui-sommes-nous/)

[Rejoignez l'équipe](https://kuzzle.io/fr/qui-sommes-nous/recrutement/)

[Méthodes de travail](https://kuzzle.io/fr/company/methodes-de-travail/)

[Presse](https://kuzzle.io/fr/qui-sommes-nous/espace-presse/)

[Partenaires](https://kuzzle.io/fr/qui-sommes-nous/espace-partenaire/)

[Nous contacter](https://kuzzle.io/fr/nous-contacter/)

SUIVEZ-NOUS

[Twitter](https://twitter.com/kuzzleio)

[Facebook](https://www.facebook.com/kuzzleio)

[Github](https://github.com/kuzzleio)

[Linkedin](https://www.linkedin.com/company/kuzzle/)

[Youtube](https://www.youtube.com/channel/UCHcEzVQoH10YSyxc7jD3SMw)

- [Politique de confidentialité](https://kuzzle.io/privacy-policy)

©2021 KUZZLE - Tous droits réservés