How to Check If a User Is Logged In with Firebase

1import { auth } from "@/lib/firebase";
2
3// BAD — currentUser is null during initialization
4const user = auth.currentUser;
5console.log(user); // null on page load, even if user is signed in!
6
7// This causes the logged-out UI to flash before the user appears

1import { auth } from "@/lib/firebase";
2import { onAuthStateChanged } from "firebase/auth";
3
4onAuthStateChanged(auth, (user) => {
5  if (user) {
6    // User is signed in
7    console.log("Logged in as:", user.uid);
8    console.log("Email:", user.email);
9    console.log("Display name:", user.displayName);
10  } else {
11    // User is signed out
12    console.log("Not logged in");
13  }
14});

1import { auth } from "@/lib/firebase";
2import { onAuthStateChanged, User } from "firebase/auth";
3
4function getCurrentUser(): Promise<User | null> {
5  return new Promise((resolve) => {
6    const unsubscribe = onAuthStateChanged(auth, (user) => {
7      unsubscribe(); // Stop listening after first result
8      resolve(user);
9    });
10  });
11}
12
13// Usage:
14async function fetchProtectedData() {
15  const user = await getCurrentUser();
16  if (!user) {
17    throw new Error("Not authenticated");
18  }
19  // Proceed with the authenticated user
20  const token = await user.getIdToken();
21  // Use token for API calls...
22}

1// src/hooks/useAuth.ts
2import { useState, useEffect } from "react";
3import { auth } from "@/lib/firebase";
4import { onAuthStateChanged, User } from "firebase/auth";
5
6export function useAuth() {
7  const [user, setUser] = useState<User | null>(null);
8  const [loading, setLoading] = useState(true);
9
10  useEffect(() => {
11    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
12      setUser(firebaseUser);
13      setLoading(false);
14    });
15
16    return () => unsubscribe(); // Cleanup on unmount
17  }, []);
18
19  return { user, loading, isAuthenticated: !!user };
20}
21
22// Usage in a component:
23// const { user, loading, isAuthenticated } = useAuth();
24// if (loading) return <Spinner />;
25// if (!isAuthenticated) return <LoginPage />;

1// src/components/ProtectedRoute.tsx
2import { useAuth } from "@/hooks/useAuth";
3import { Navigate } from "react-router-dom";
4
5export function ProtectedRoute({
6  children,
7}: {
8  children: React.ReactNode;
9}) {
10  const { user, loading } = useAuth();
11
12  if (loading) {
13    return <div className="flex justify-center p-8">Loading...</div>;
14  }
15
16  if (!user) {
17    return <Navigate to="/login" replace />;
18  }
19
20  return <>{children}</>;
21}
22
23// Usage in your router:
24// <Route path="/dashboard" element={
25//   <ProtectedRoute><Dashboard /></ProtectedRoute>
26// } />