Firebase Authentication How to configure Firebase Authentication step-by-step guide.

Step 1: Create a Firebase Project

1. Go to https://console.firebase.google.com
   
2. Click “Add project” – enter your project name 
3. Disable Google Analytics (optional) –  click Create project.
   
4. Once it’s created, click Continue to go to the project dashboard.

Step 2: Add a Web App

1. In the Firebase project dashboard, click “</>” (Web icon) to add a web app.
   
2. Enter your app nickname – click Register app.
3. Copy the Firebase configuration snippet, which looks like this:
   

const firebaseConfig = {

     apiKey: “AIzaSyD-EXAMPLE_KEY”,

     authDomain: “your-project-id.firebaseapp.com”,

     projectId: “your-project-id”,

     storageBucket: “your-project-id.appspot.com”,

     messagingSenderId: “1234567890”,

     appId: “1:1234567890:web:abc1234567890”

};

• You’ll use this in your project file (like firebase.ts or firebase.js).

Step 3: Install Firebase SDK
npm install firebase

or

yarn add firebase

Step 4: Create a Firebase Configuration File
Create a file named firebase.ts or firebase.js inside /src:

• // firebase.ts

            import { initializeApp } from “firebase/app”;

            import { getAuth } from “firebase/auth”;

• // Your Firebase config

             const firebaseConfig = {

                     apiKey: “AIzaSyD-EXAMPLE_KEY”,

                     authDomain: “your-project-id.firebaseapp.com”,

                     projectId: “your-project-id”,

                     storageBucket: “your-project-id.appspot.com”,

                     messagingSenderId: “1234567890”,

                     appId: “1:1234567890:web:abc1234567890”

            };

• // Initialize Firebase

                  const app = initializeApp(firebaseConfig);

• // Export auth

                  export const auth = getAuth(app);

Step 5: Enable Authentication Methods

1. Go to Firebase Console – Authentication – Get Started.

2. Under Sign-in method, click the pencil  to enable:
   • Email/Password

   • Google

   • GitHub, etc. (optional)

3. Click Save.

Step 6: Implement Authentication in Code
Example (Email & Password signup/login):
import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from “firebase/auth”;

import { auth } from “./firebase”;

• // Signup

             export const signup = async (email, password) => {

                   await createUserWithEmailAndPassword(auth, email, password);

                   console.log(“User signed up!”);

              };

• // Login

               export const login = async (email, password) => {

                    await signInWithEmailAndPassword(auth, email, password);

                    console.log(“User logged in!”);

               };

• //  Logout

                 export const logout = async () => {

                       await signOut(auth);

                       console.log(“User logged out!”);

                  };

Step 7: Listen to Auth State Changes
This helps you detect if a user is logged in or not:

import { onAuthStateChanged } from “firebase/auth”;

import { auth } from “./firebase”;

onAuthStateChanged(auth, (user) => {

  if (user) {

    console.log(“User logged in:”, user.email);

  } else {

    console.log(“User logged out”);

  }

});

Step 8: Protect Routes (Optional)
If you use React Router, you can make Private Routes that only logged-in users can access.

Example:

import { Navigate } from “react-router-dom”;

import { useAuthState } from “react-firebase-hooks/auth”;

import { auth } from “./firebase”;

const PrivateRoute = ({ children }) => {

  const [user] = useAuthState(auth);

  return user ? children : <Navigate to=”/login” />;

};

Step 9: Test It

1. Start your project (npm run dev or npm start).
2. Try signing up and logging in.
3. Test Firebase – Authentication – Users tab – you should be able to see your new users on the Firebase.