Enregistrement des utilisateurs avec Firebase et réagir

L'authentification robuste de l'utilisateur est cruciale pour la sécurité des applications. La construction de cette fonctionnalité à partir de zéro est longue et complexe, augmentant le risque de vulnérabilités de sécurité. Firebase simplifie considérablement ce processus, offrant une approche rationalisée à la gestion de l'identité des utilisateurs. Ce didacticiel montre comment implémenter l'enregistrement, la vérification et l'authentification des utilisateurs à l'aide de l'API modulaire de Firebase V9.

Ce tutoriel suppose la familiarité avec React, React Hooks et Firebase V8. Vous aurez besoin d'un compte Google et Node.js installé.

Table des matières

• Configuration de Firebase
• Configuration du projet
• Intégration de base
• Enregistrement des utilisateurs
• Gestion de l'état utilisateur (API React Context)
• Vérification par e-mail
• Page de profil
• Protection d'itinéraire privée
• Fonctionnalité de connexion
• Résumé
• Dès la lecture

Configuration de Firebase

1. Connectez-vous à votre compte Google et accédez à la console Firebase.
2. Créez un nouveau projet Firebase (par exemple, "Firebase-User-Reg-Auth"). Vous pouvez ignorer Google Analytics pour ce tutoriel.
3. Accédez à la section d'authentification dans la barre latérale de la console Firebase.
4. Activez l'authentification par e-mail / mot de passe.

Configuration du projet

Clone le référentiel de démarrage:

 git clone -b starter https://github.com/tamnimbriggs/firebase_user_auth.git
CD Firebase_User_Auth
Installation de NPM

Cela inclut Firebase V9 dans package.json . Exécutez npm start pour lancer l'application.

Intégration de base

1. Dans la console Firebase, obtenez l'objet de configuration Web pour votre projet.
2. Créez firebase.js dans le répertoire src de votre application React.
3. Importer les modules nécessaires:

 // src / firebase.js
import {initializeapp} à partir de 'Firebase / app';
import {getAuth} de 'Firebase / Auth';

4. Collez votre objet FirebaseConfig et initialisez Firebase:

 // src / firebase.js
const FirebaseConfig = {/ * votre configuration ici * /};
const app = initialiseApp (firebaseConfig);
const auth = getAuth (app);
export {auth};

Enregistrement des utilisateurs

Le composant Register.js utilise createUserWithEmailAndPassword (Firebase V9). La validation des mots de passe garantit des mots de passe correspondants. La fonction d'enregistrement gère la création des utilisateurs et la gestion des erreurs. L'événement onSubmit du formulaire déclenche le processus d'enregistrement.

Gestion de l'état utilisateur (API React Context)

Un fichier AuthContext.js fournit un contexte pour gérer l'état utilisateur. AuthProvider partage l'état de l'utilisateur et useAuthValue y accède. App.js enveloppe les composants avec AuthProvider et onAuthStateChanged met à jour l'état utilisateur.

Vérification par e-mail

Après l'inscription, sendEmailVerification envoie un e-mail de vérification. L'utilisateur est redirigé vers une page A /verify-email . Cette page affiche l'e-mail de l'utilisateur et un bouton "Repenser le courrier électronique" avec un temps de recharge de 60 secondes en utilisant useEffect et la gestion de l'État pour empêcher la limitation des taux. Une fois vérifié, l'utilisateur est automatiquement redirigé vers son profil.

Page de profil

Le composant Profile.js affiche l'état des e-mails et de vérification utilisateur à l'aide useAuthValue . Le bouton "Connexion" utilise signOut de Firebase.

Protection d'itinéraire privée

PrivateRoute.js restreint l'accès à la page de profil aux utilisateurs vérifiés à l'aide Redirect . Les routes App.js sont mises à jour pour utiliser PrivateRoute pour le composant de profil.

Fonctionnalité de connexion

Le composant Login.js utilise signInWithEmailAndPassword . Après la connexion, il vérifie la vérification des e-mails et redirige vers /verify-email si nécessaire, en commençant le compte à rebours de 60 secondes.

Résumé

Ce tutoriel fournit un guide complet pour implémenter l'authentification sécurisée des utilisateurs dans une application React à l'aide de Firebase V9. L'utilisation de Firebase simplifie considérablement le processus, offrant une solution robuste et efficace.

Dès la lecture

• Documentation d'authentification Firebase
• React Contexte API Documentation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!