Firebase Authentication in React: A Simple Step-by-Step Guide

Firebase Authentication in React: A Simple Step-by-Step Guide Authentication is a fundamental requirement for most web applications. In this tutorial, I'll walk you through implementing Firebase Authentication in a React application without using the Context API. We'll create sign-up and sign-in pages and set up navigation to a home page after successful authentication. What We'll Build A React application with Firebase Authentication Sign-up page for new users Sign-in page for existing users Protected home page that requires authentication Simple navigation between these pages Prerequisites Basic knowledge of React Node.js and npm installed on your computer A Google account to set up Firebase Step 1: Set Up a New React Project Let's start by creating a new React application: npx create-react-app firebase-auth-app cd firebase-auth-app Step 2: Install Required Dependencies We'll need to install Firebase and React Router: npm install firebase react-router-dom Step 3: Create a Firebase Project Go to the Firebase Console Click "Add project" and follow the setup instructions Once your project is created, click on the web icon () to add a web app to your project Register your app with a nickname (e.g., "firebase-auth-app") Copy the Firebase configuration object that looks like this: 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" }; Step 4: Enable Authentication Methods in Firebase In the Firebase Console, navigate to "Authentication" in the left sidebar Click on "Get started" Enable "Email/Password" authentication by clicking on it and toggling the switch to "Enable" Click "Save" Step 5: Set Up Firebase in Your React App Create a new file src/firebase.js to initialize Firebase: // src/firebase.js import { initializeApp } from 'firebase/app'; import { getAuth } from 'firebase/auth'; const firebaseConfig = { // Replace with your Firebase config object 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" }; // Initialize Firebase const app = initializeApp(firebaseConfig); export const auth = getAuth(app); export default app; Step 6: Create the Sign-Up Component // src/components/Signup.js import React, { useState } from 'react'; import { createUserWithEmailAndPassword } from 'firebase/auth'; import { auth } from '../firebase'; import { Link, useNavigate } from 'react-router-dom'; function Signup() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const navigate = useNavigate(); async function handleSubmit(e) { e.preventDefault(); if (password !== confirmPassword) { return setError('Passwords do not match'); } try { setError(''); setLoading(true); await createUserWithEmailAndPassword(auth, email, password); navigate('/'); } catch (error) { setError('Failed to create an account: ' + error.message); } setLoading(false); } return ( Sign Up {error && {error}} Email setEmail(e.target.value)} required /> Password setPassword(e.target.value)} required /> Confirm Password setConfirmPassword(e.target.value)} required /> Sign Up Already have an account? Log In ); } export default Signup; Step 7: Create the Login Component // src/components/Login.js import React, { useState } from 'react'; import { signInWithEmailAndPassword } from 'firebase/auth'; import { auth } from '../firebase'; import { Link, useNavigate } from 'react-router-dom'; function Login() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const navigate = useNavigate(); async function handleSubmit(e) { e.preventDefault(); try { setError(''); setLoading(true); await signInWithEmailAndPassword(auth, email, password); navigate('/'); } catch (error) { setError('Failed to log in: ' + error.message); } setLoading(false); } return (

npx create-react-app firebase-auth-app
cd firebase-auth-app

npm install firebase react-router-dom

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"
};

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

const firebaseConfig = {
  // Replace with your Firebase config object
  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"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export default app;

// src/components/Signup.js
import React, { useState } from 'react';
import { createUserWithEmailAndPassword } from 'firebase/auth';
import { auth } from '../firebase';
import { Link, useNavigate } from 'react-router-dom';

function Signup() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  async function handleSubmit(e) {
    e.preventDefault();

    if (password !== confirmPassword) {
      return setError('Passwords do not match');
    }

    try {
      setError('');
      setLoading(true);
      await createUserWithEmailAndPassword(auth, email, password);
      navigate('/');
    } catch (error) {
      setError('Failed to create an account: ' + error.message);
    }

    setLoading(false);
  }

  return (
    <div className="signup-container">
      <div className="signup-form">
        <h2>Sign Up</h2>
        {error && <div className="error-message">{error}</div>}
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label>Email</label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <div className="form-group">
            <label>Password</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
          <div className="form-group">
            <label>Confirm Password</label>
            <input
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              required
            />
          </div>
          <button disabled={loading} type="submit" className="submit-button">
            Sign Up
          </button>
        </form>
        <div className="login-link">
          Already have an account? <Link to="/login">Log In</Link>
        </div>
      </div>
    </div>
  );
}

export default Signup;