Firebase Integration with React

Firebase Project Setup and Integration with React

This guide will walk you through the steps of setting up a Firebase project, configuring Firebase services like Authentication and Cloud Messaging, and integrating them into a React app.

Step 1: Create a Firebase Project

1. Go to the Firebase Console.
2. Click on Add Project and follow the steps to create a new Firebase project. You will be prompted to:
   • Enter a project name.
   • Enable or disable Google Analytics for the project.
   • Choose a region for the Firebase services.
3. Once the project is created, you will be taken to the Firebase project dashboard.

Step 2: Add Firebase SDK to Your React App

To integrate Firebase with your React app, you first need to install the Firebase SDK:

        npm install firebase
    

After installation, import Firebase and initialize it in your React app. You will also need the configuration details for your Firebase project, which can be found in the Firebase Console under Project Settings > General > Your Apps.

 

In your React app, in the firebase.jsx file, which contains your Firebase configuration profile.

Example Firebase Configuration (firebase.jsx)

    // Import only the specific services you need from Firebase
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: "your_apiKey",

  authDomain: "your_authDomain",

  databaseURL: "your_databaseURL",

  projectId: "your_projectId",

  storageBucket: "your_storageBucket",

  messagingSenderId: "your_messagingSenderId",

  appId: "your_appId",

  measurementId: "your_measurementId"

};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize services
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db };
    

Step 3: Set Up Firebase Authentication

Firebase Authentication allows you to easily add login functionality to your app. You can use Email/Password, Google, Facebook, and other sign-in methods.

1. In the Firebase Console, go to Authentication > Sign-in method.
2. Enable the sign-in methods you want (e.g., Email/Password, Google sign-in).
3. In your React app, you can now implement Firebase Authentication. Here's an example using Email/Password Authentication:

React Example: Firebase Authentication (Register.jsx)

    import React, { useState } from "react";
import { auth, db } from "./firebase"; // Using Firebase 9+ imports
import { useNavigate } from "react-router-dom"; // Using useNavigate for navigation
import { Link } from 'react-router-dom';

// Importing required Firebase functions for creating a user and writing to Firestore
import { createUserWithEmailAndPassword } from 'firebase/auth';
import { doc, setDoc } from 'firebase/firestore';

const Register = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const navigate = useNavigate(); // Using useNavigate for routing

  const handleRegister = async (e) => {
    e.preventDefault();
    try {
      // Create a user using Firebase v9+ syntax
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      const user = userCredential.user;

      // Save user data to Firestore
      await setDoc(doc(db, "users", user.uid), {
        name: "John Doe",
        email: user.email,
      });

      // Navigate to dashboard
      navigate("/dashboard");
    } catch (error) {
      setError(error.message); // Handle registration errors
    }
  };

  return (
    

      
Register
      {error && 
{error}
}
      

         setEmail(e.target.value)}
          className="border p-2 w-full mb-3 rounded"
        />
         setPassword(e.target.value)}
          className="border p-2 w-full mb-3 rounded"
        />
        
      
      
Already a User? Login
    
  );
};

export default Register;
    

Visit Github

Further Reading

1.