DEV Community

Usama
Usama

Posted on

Day 3 – Designing and Implementing a Logout Button with Firebase – My Journey 🔐✨

#react #firebase #ui #frontend

Hey fellow devs! 👋

Today, I want to share a small but super satisfying milestone in my React journey: creating a Logout button, designing it beautifully in the UI, and hooking it up with Firebase Authentication.

It might sound simple, but the process gave me a lot of hands-on learning about state management, user feedback, and real-world authentication flows. Plus, it’s a feature every app needs. Let’s dive in! 🚀

Step 1: The UI – Making Logout Look Good 🖌️

Before writing any code, I decided to design the button in my Logo component. I wanted it to feel natural and integrated with the app’s header.

Here’s a sneak peek:

<button className="logout-btn" onClick={onLogout}>
  <img
    src={user?.photoURL || "/user-icon.png"}
    alt="User Avatar"
    className="logout-avatar"
  />
  <span className="logout-text">Logout</span>
</button>
Enter fullscreen mode Exit fullscreen mode

💡 Key points:

Added a small avatar for a personal touch.

Used flex styling to make it look clean.

Made it obvious: clicking this logs the user out.

UI is not just about looks—it’s about clarity for the user. 👍

Step 2: Implementing Logout Functionality with Firebase 🔐

Once the UI was ready, it was time to connect the button to real functionality. I’m using Firebase Authentication, which makes it simple:

import { signOut } from "firebase/auth";
import { auth } from "../config/firebase";

const handleLogout = async () => {
  try {
    await signOut(auth);
    console.log("User logged out successfully!");
  } catch (error) {
    console.error("Logout error:", error);
  }
};
Enter fullscreen mode Exit fullscreen mode

Then I just passed it to the button:

<Logo onLogout={handleLogout} user={user} />
Enter fullscreen mode Exit fullscreen mode

And boom 💥—clicking the button logs the user out immediately.

Step 3: Handling State – Keeping UI Reactive 🔄

Firebase’s auth.currentUser is not reactive, so I used onAuthStateChanged to make sure the UI updates when the user logs out:

import { useEffect, useState } from "react";
import { onAuthStateChanged } from "firebase/auth";

const [user, setUser] = useState(null);

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
    setUser(currentUser);
  });
  return () => unsubscribe();
}, []);
Enter fullscreen mode Exit fullscreen mode

This way, the logout button disappears when the user logs out, and you can show a login form again—smooth UX matters! ✨

Step 4: Lessons Learned 📚

  1. UI + Functionality Together: Designing a button is only half the work—connecting it to real functionality makes it meaningful.

  2. Firebase is awesome: signOut is literally one line of code, but handling state correctly takes some thought.

  3. User Feedback Matters: Always show alerts or update UI so the user knows they’ve logged out.

Step 5: Personal Reflection ❤️

Building small features like this is super rewarding. It’s not flashy, but it’s essential. Every time I click the logout button and see the app react immediately, I feel like I’m leveling up as a developer.

Even a simple button taught me a lot about React state, Firebase auth, and UX design. And hey, every app needs a logout feature—it’s the unsung hero of user control. 😉

Final Thoughts 💡

Whether you’re building a todo app, a shopping list, or a full-stack web app, don’t underestimate the power of small UI features. They teach you state management, user experience, and real-world coding patterns in the best way.

Next step for me? Adding forgot password functionality and Google Sign-In integration! But that’s a story for another blog post. 😎

If you liked this post or found it helpful, feel free to connect or drop a comment. I love hearing about how other devs tackle these small but important UI/UX challenges! 🖤

Top comments (0)