Sécurité et persistance avec Firebase

Découverte de Firebase

À présent que nous savons créer des formulaires et gérer le routage dans une application, la prochaine étape est d’ajouter une couche de sécurité en permettant aux utilisateurs de s’inscrire et de s’identifier pour utiliser cette application, ou certaines ressources privées de celle-ci. En effet, nous allons dans ce chapitre réutiliser le formulaire d’inscription créé au début du livre, mais également adapter notre routage pour rendre certaines routes privées. En l’occurrence, un utilisateur devra être identifié pour créer et visualiser des dépenses, puis les visualiser.

Pour gérer cela, nous allons utiliser Firebase de Google. Il s’agit d’un ensemble d’outils mettant à disposition un back-end, avec notamment la gestion de l’authentification d’utilisateurs et la persistance de données dans le cloud. Le but de ce chapitre n’est pas de présenter Firebase en détail, mais plutôt de profiter de la simplicité avec laquelle il permet de mettre en œuvre un back-end sans avoir à le créer ou l’héberger soi-même. Les concepts vus ici pourront être appliqués à n’importe quel back-end.

Pour commencer à utiliser Firebase, il vous faudra créer et configurer...

Gestion de l’authentification

import emailValidator from 'email-validator' 
// ... 
// Dans la validation: 
if (!values.email) { 
 errors.email = 'Please enter your e-mail address.' 
} else if (!emailValidator.validate(values.email)) { 
 errors.email = 'Please enter a valid e-mail address.' 
} 

class SignUpForm extends Component { 
 state = { 
   hasError: false 
 } 
 render() { 
   const { hasError } = this.state 
   return ( 
     <Fragment> 
       <h2>Sign up</h2> 
       <Formik /*...*/> 
         {({ handleSubmit, isSubmitting }) => ( 
           <form> 
             {/* ... */} 
             <footer> 
               <button type="submit" disabled={isSubmitting}> 
                 {isSubmitting ? 'Signing...

Persistance de données avec Firebase

Dans cette dernière section du chapitre, nous allons mettre en place la dernière brique de notre application pour la rendre complète : le stockage des dépenses dans Firebase, plutôt que dans le stockage local du navigateur. Ainsi l’utilisateur pourra retrouver ses dépenses depuis n’importe quel navigateur. De plus, il ne verra que ses propres dépenses, et non celles des autres utilisateurs.

Pour cela, nous utiliserons la fonction Database de Firebase. Il s’agit d’une base de données accessible en passant par la bibliothèque que nous avons déjà utilisée dans la section précédente. Nous ne nous attacherons pas à comprendre en détail comment fonctionne cette base de données ni à décrire toutes ses fonctionnalités. Néanmoins il peut être utile de savoir certaines choses à son sujet.

Tout d’abord, au sein d’une application Firebase, il n’y a qu’une seule base de données. Les données peuvent y être hétérogènes, et semblables à un objet JSON. Cela ressemble à ce que vous pouvez retrouver dans MongoDB, à la différence qu’il n’y a pas de notion de collection. Ou bien imaginez qu’il n’y a qu’une seule collection.

Les données sont organisées de manière hiérarchique. Pour notre application, voici un exemple de que nous pourrons retrouver :

{ 
 "users": { 
   "a8G0FIKc1KgWlHkH6TjH8W9Tjjg2": { 
     "expenses": { 
       "-LOuERjsbDYssMPnRaTe": { 
         "amount": 30, 
         "date": "2018-10-16", 
         "notes": "Ceci est la première dépense.", 
         "title": "Dépense 1" 
       } 
     } 
   } 
 } 
} 

Dans cette base de données, nous avons un utilisateur dont l’ID esta 8G0... (Firebase utilise la terminologie uid pour user ID), et celui-ci...

En conclusion

Faisons un petit résumé de ce que nous avons appris dans ce chapitre :

Les notions développées dans ces deux derniers chapitres vous rapprochent encore du stade où vous aurez tous les éléments en main pour créer des applications web ou mobiles autonomes. En fait, je pense même que vous avez déjà atteint ce stade ou, du moins, vous en être très proches. Pensez au nombre d’applications que vous pouvez commencer à développer grâce aux connaissances que vous avez acquises depuis le début de ce livre.

Vous savez créer des composants React et les ordonnancer au sein d’une application complexe, aidé de Redux ou non. Vous savez même le faire pour le web et le mobile. Et maintenant, vous savez permettre à un utilisateur de s’identifier, et de saisir des données, qui seront sauvegardées sur un service externe. 

Autant dire que vous en savez beaucoup ! Si votre objectif est de pratiquer React dans...