Comment créer une connexion Firebase et s’inscrire dans React

Firebase est un système qui offre de nombreuses plates-formes aux développeurs pour créer des applications Web. L’un des éléments essentiels d’une application est de créer des utilisateurs et de leur permettre de se connecter. Voyons comment nous pouvons écrire une connexion Firebase complète mais très simple à mettre en œuvre.

Créez votre application Firebase

Vous devez d’abord créer un projet d’application Firebase, alors rendez-vous sur la console Firebase et ajoutez un nouveau projet. Vous allez ajouter l’application ici.

https://console.firebase.google.com/

Il lancera un assistant qui vous demandera le nom du projet.

L’écran suivant vous demandera si vous souhaitez activer l’analyse. Désactivez-le et cliquez sur le bouton Créer un projet. Il faudra un certain temps pour provisionner votre projet et après cela, vous obtiendrez un bouton pour continuer qui vous amènera à la vue d’ensemble du projet.

Vous devez maintenant ajouter une application Firebase au projet Firebase. Logique? Un projet Firebase vous permet de contenir plusieurs applications Firebase pour iOS, Android, Web et Unity. Pour l’instant, créons une application Web puisque nous utiliserons React pour créer notre connexion Firebase.

Il vous sera demandé de nommer cette application et vous recevrez les clés dont vous aurez besoin pour vous connecter à Firebase. Ils ressembleront à quelque chose comme :

var firebaseConfig = {
    apiKey: "1A2B3C4D5E6F7G",
    authDomain: "appname-a123b.firebaseapp.com",
    databaseURL: "https://appname-a123b.firebaseio.com",
    projectId: "appname-a123b",
    storageBucket: "appname-a123b.appspot.com",
    messagingSenderId: "1234567890",
};

Nous utiliserons ces clés dans notre application React pour configurer un fournisseur qui nous permettra d’accéder à Firebase dans n’importe quel composant sous le fournisseur.

Enfin, allez dans Authentification dans la barre latérale gauche, l’ onglet Méthode de connexion et activez l’ authentification par e-mail/mot de passe.

Vous êtes prêt !

Installer les dépendances Firebase

Firebase est disponible pour différentes piles, y compris JavaScript et Node.js, que nous allons utiliser maintenant. Nous allons installer seulement deux dépendances avec npm :

• firebase, cela nous permettra d’accéder à des choses comme la authbibliothèque, que nous utiliserons pour effectuer la connexion et aussi créer un nouvel utilisateur
• reactfire, une collection d’outils utiles pour travailler avec Firebase dans React. Nous les utiliserons useFirebaseApppour nous connecter au contexte et accéder à Firebase

Installons-les avec

npm i firebase reactfire

La structure de l’ application React sera très simple, comme suit :

|-- index.js
|-- App.js
|-- FirebaseUser
    |-- index.js

et ils seront liés comme suit :

Configurer le fournisseur Firebase

Écrivons le premier fichier pour la connexion et l’inscription à Firebase ! Nous n’avons pas vraiment besoin de l’écrire, car cela devrait être ajouté au fichier où vous émettez ReactDOM.render(), dans notre cas ce sera index.js:

import { FirebaseAppProvider } from 'reactfire';

const firebaseConfig = {
    apiKey: "1A2B3C4D5E6F7G",
    authDomain: "appname-a123b.firebaseapp.com",
    databaseURL: "https://appname-a123b.firebaseio.com",
    projectId: "appname-a123b",
    storageBucket: "appname-a123b.appspot.com",
    messagingSenderId: "925199572988",
    appId: "1:123456789:web:12a34b56c78d90e"
};

Cela importe le FirebaseAppProvideret ajoute les clés de configuration que vous lui passerez. Vous pouvez maintenant encapsuler le composant racine, qui dans notre cas est Appavec le fournisseur :

ReactDOM.render(, document.getElementById('root')
);

Super! Désormais, tous les composants ci-dessous pourront accéder à Firebase !

Utiliser le composant de connexion et d’inscription Firebase

Écrivons maintenant le Appcomposant où nous allons importer et utiliser le FirebaseUsercomposant pour créer et connecter un utilisateur. Il n’y a rien de vraiment lié à Firebase ici. Nous allons implémenter une connexion et une inscription en utilisant le même composant afin que vous puissiez voir comment nous pouvons réutiliser le code, donc dans ce composant, nous allons implémenter une paire de boutons qui, une fois cliqués, rendront le FirebaseUseren mode connexion ou un mode d’inscription :

Configurez la connexion Firebase et inscrivez-vous

Nous allons créer un composant pour cela. Nous devons d’abord importer certains modules :

import React, { useState } from 'react';
import { useFirebaseApp } from 'reactfire';
import 'firebase/auth';

Nous allons useStatepour quelques choses, de savoir si l’utilisateur est authentifié pour définir des erreurs. Nous allons utiliser le useFirebaseAppcrochet pour accéder à la connexion Firebase. Cela n’est possible que parce que nous avons configuré le fournisseur Firebase à l’étape précédente, et il n’est disponible que sous la hiérarchie où il a été ajouté. Enfin, nous importerons la authbibliothèque afin de pouvoir appeler les méthodes Firebase pour créer des utilisateurs et se connecter. C’est un moyen efficace car nous ne chargeons que cette bibliothèque, et pas d’autres comme firestorepour la base de données NoSQL, ou messagingpour les messages et les notifications.

Ensuite, nous allons ajouter un crochet rapide pour gérer nos champs de saisie :

Et enfin le composant complet, que nous détaillerons ci-dessous pour indiquer les parties les plus intéressantes, celles liées à la connexion et à l’inscription à Firebase.

Tout d’abord, nous nous connectons à l’instance Firebase :

const firebase = useFirebaseApp();

Comme indiqué précédemment, cela est possible car nous avons précédemment enveloppé le Appcomposant avec le fournisseur Firebase. Maintenant que nous sommes accrochés à Firebase, nous pouvons utiliser la authfonctionnalité et appeler signInWithEmailAndPassword:

Quand il réussit, il définira les données renvoyées et les champs du formulaire seront remplacés par

Logged in as ${ auth?.user.email ?? '' }

Les données renvoyées sont un objet volumineux avec des propriétés très intéressantes, il vaut donc la peine d’ajouter a console.log()à notre setReceivedData()fonction pour voir ce qu’elle inclut d’autre.

Le processus de création d’un utilisateur est similaire, sauf que nous utilisons la fonction createUserWithEmailAndPassword().

Conclusion

Pour tester notre connexion Firebase et vous inscrire, vous pouvez essayer de vous connecter pour un utilisateur qui n’existe pas afin de voir les erreurs. Après cela, créez un utilisateur, puis connectez-vous en tant qu’utilisateur.

Démo de connexion à Firebase et inscription.
Fait amusant: Chrome se plaint que le mot de passe 123456 que j’utilise pour les tests est compromis, ce qui est vrai.

Si vous revenez maintenant à l’application Firebase > Authentification > Utilisateurs, vous verrez le nouvel utilisateur (vous devrez peut-être utiliser le bouton d’actualisation à côté de Ajouter un utilisateur).

Pour récapituler, les étapes essentielles pour intégrer Firebase dans notre application React sont :

• configurez le fournisseur Firebase et encapsulez le composant racine (ou la racine de la hiérarchie où vous souhaitez l’utiliser)
• se connecter au fournisseur Firebase en utilisantuseFirebaseApp
• utilisez les fonctions d’authentification !

Consultez le référentiel GitHub à l’ adresse https://github.com/eliorivero/firebase-login-sign-up. La seule différence avec celui-ci est que je charge les clés pour configurer Firebase à partir d’un fichier .env pour éviter de les exposer publiquement.

Si vous avez des questions, faites-le moi savoir dans les commentaires ci-dessous!