REACT Authentication with Firebase

This tutorial will help you set up user authentication in a React app using Firebase Authentication (Google Sign-In & Email/Password Login).

Steps to Set Up Firebase Authentication

1. Create a Firebase Project

  1. Go to Firebase Console.
  2. Click “Add Project”, give it a name, and complete setup.
  3. Navigate to Project Settings > General > Your Apps.
  4. Click “Add app” → Select “Web” → Register App.
  5. Copy your Firebase config (you’ll use it in step 3).
  6. Enable Authentication:
    • Go to Authentication > Sign-in method.
    • Enable Google Sign-In and Email/Password.

2. Install Firebase in React

Run this in your project folder:

npm install firebase

3. Configure Firebase in React (src/firebase.js)

Create a new file src/firebase.js and paste the following:

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const googleProvider = new GoogleAuthProvider();

export { auth, googleProvider };

🔹 Replace YOUR_API_KEY, YOUR_PROJECT_ID, etc. with the actual values from your Firebase console.

 

Implement Authentication in src/App.js

Replace the content of src/App.js:

import React, { useState } from "react";
import { auth, googleProvider } from "./firebase";
import {
  signInWithPopup,
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  signOut,
} from "firebase/auth";

function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [user, setUser] = useState(null);

  // Sign in with Google
  const signInWithGoogle = async () => {
    try {
      const result = await signInWithPopup(auth, googleProvider);
      setUser(result.user);
    } catch (error) {
      console.error(error.message);
    }
  };

  // Sign up with Email/Password
  const register = async () => {
    try {
      const result = await createUserWithEmailAndPassword(auth, email, password);
      setUser(result.user);
    } catch (error) {
      console.error(error.message);
    }
  };

  // Sign in with Email/Password
  const login = async () => {
    try {
      const result = await signInWithEmailAndPassword(auth, email, password);
      setUser(result.user);
    } catch (error) {
      console.error(error.message);
    }
  };

  // Logout
  const logout = async () => {
    try {
      await signOut(auth);
      setUser(null);
    } catch (error) {
      console.error(error.message);
    }
  };

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>🔥 Firebase Authentication</h1>

      {user ? (
        <>
          <h2>Welcome, {user.displayName || user.email}!</h2>
          <img src={user.photoURL} alt="User Avatar" style={{ borderRadius: "50%" }} />
          <br />
          <button onClick={logout}>Logout</button>
        </>
      ) : (
        <>
          <input
            type="email"
            placeholder="Email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <input
            type="password"
            placeholder="Password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          <button onClick={login}>Login</button>
          <button onClick={register}>Register</button>
          <br />
          <button onClick={signInWithGoogle}>Sign in with Google</button>
        </>
      )}
    </div>
  );
}

export default App;

Features

✔ Google Sign-In
✔ Email & Password Authentication (Login/Register)
✔ User Profile Display (Name & Profile Picture)
✔ Logout Functionality