Robust user authentication is crucial for application security. Building this functionality from scratch is time-consuming and complex, increasing the risk of security vulnerabilities. Firebase simplifies this process significantly, offering a streamlined approach to user identity management. This tutorial demonstrates how to implement user registration, verification, and authentication using Firebase v9's modular API.

This tutorial assumes familiarity with React, React hooks, and Firebase v8. You'll need a Google account and Node.js installed.

Table of Contents

• Setting up Firebase
• Project Setup
• Firebase Integration
• User Registration
• User State Management (React Context API)
• Email Verification
• Profile Page
• Private Route Protection
• Login Functionality
• Summary
• Further Reading

Setting up Firebase

1. Log into your Google account and access the Firebase console.
2. Create a new Firebase project (e.g., "Firebase-user-reg-auth"). You can skip Google Analytics for this tutorial.
3. Navigate to the Authentication section in the Firebase console sidebar.
4. Enable Email/Password authentication.

Project Setup

Clone the starter repository:

git clone -b starter https://github.com/Tammibriggs/Firebase_user_auth.git
cd Firebase_user_auth
npm install

This includes Firebase v9 in package.json. Run npm start to launch the application.

Firebase Integration

1. In the Firebase console, obtain the web configuration object for your project.
2. Create firebase.js in your React app's src directory.
3. Import necessary modules:

// src/firebase.js
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

4. Paste your firebaseConfig object and initialize Firebase:

// src/firebase.js
const firebaseConfig = { /* Your config here */ };
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export { auth };

User Registration

The Register.js component uses createUserWithEmailAndPassword (Firebase v9). Password validation ensures matching passwords. The registration function handles user creation and error handling. The form's onSubmit event triggers the registration process.

User State Management (React Context API)

An AuthContext.js file provides a context for managing user state. AuthProvider shares the user state, and useAuthValue accesses it. App.js wraps components with AuthProvider, and onAuthStateChanged updates the user state.

Email Verification

After registration, sendEmailVerification sends a verification email. The user is redirected to a /verify-email page. This page displays the user's email and a "Resend Email" button with a 60-second cooldown using useEffect and state management to prevent rate limiting. Once verified, the user is automatically redirected to their profile.

Profile Page

The Profile.js component displays user email and verification status using useAuthValue. The "Sign Out" button utilizes signOut from Firebase.

Private Route Protection

PrivateRoute.js restricts access to the profile page to verified users using Redirect. The App.js routes are updated to use PrivateRoute for the profile component.

Login Functionality

The Login.js component uses signInWithEmailAndPassword. After login, it checks email verification and redirects to /verify-email if necessary, starting the 60-second countdown.

Summary

This tutorial provides a comprehensive guide to implementing secure user authentication in a React application using Firebase v9. The use of Firebase simplifies the process significantly, offering a robust and efficient solution.

Further Reading

• Firebase Authentication Documentation
• React Context API Documentation

The above is the detailed content of User Registration With Firebase and React. For more information, please follow other related articles on the PHP Chinese website!