How to Detect Auth State Changes in Firebase

1import { getAuth, onAuthStateChanged, User } from 'firebase/auth';
2
3const auth = getAuth();
4
5const unsubscribe = onAuthStateChanged(auth, (user: User | null) => {
6  if (user) {
7    console.log('User signed in:', user.uid, user.email);
8  } else {
9    console.log('User signed out');
10  }
11});
12
13// Call unsubscribe() when you no longer need the listener

1import { getAuth, onAuthStateChanged, User } from 'firebase/auth';
2
3let currentUser: User | null = null;
4let isLoading = true;
5
6const auth = getAuth();
7
8onAuthStateChanged(auth, (user) => {
9  currentUser = user;
10  isLoading = false;
11  // Update your UI here
12  renderApp();
13});
14
15function renderApp() {
16  if (isLoading) {
17    // Show loading spinner
18    return;
19  }
20  if (currentUser) {
21    // Show authenticated UI
22  } else {
23    // Show login screen
24  }
25}

1import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
2import { getAuth, onAuthStateChanged, User } from 'firebase/auth';
3
4interface AuthContextType {
5  user: User | null;
6  loading: boolean;
7}
8
9const AuthContext = createContext<AuthContextType>({
10  user: null,
11  loading: true,
12});
13
14export function AuthProvider({ children }: { children: ReactNode }) {
15  const [user, setUser] = useState<User | null>(null);
16  const [loading, setLoading] = useState(true);
17
18  useEffect(() => {
19    const auth = getAuth();
20    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
21      setUser(firebaseUser);
22      setLoading(false);
23    });
24    return unsubscribe;
25  }, []);
26
27  return (
28    <AuthContext.Provider value={{ user, loading }}>
29      {children}
30    </AuthContext.Provider>
31  );
32}
33
34export const useAuth = () => useContext(AuthContext);

1import { Navigate } from 'react-router-dom';
2import { useAuth } from './AuthProvider';
3
4export function ProtectedRoute({ children }: { children: ReactNode }) {
5  const { user, loading } = useAuth();
6
7  if (loading) {
8    return <div>Loading...</div>;
9  }
10
11  if (!user) {
12    return <Navigate to="/login" replace />;
13  }
14
15  return <>{children}</>;
16}
17
18// Usage in your router:
19// <Route path="/dashboard" element={
20//   <ProtectedRoute><Dashboard /></ProtectedRoute>
21// } />

1import { getAuth, onIdTokenChanged } from 'firebase/auth';
2
3const auth = getAuth();
4
5const unsubscribe = onIdTokenChanged(auth, async (user) => {
6  if (user) {
7    // Get the fresh token to send to your backend
8    const token = await user.getIdToken();
9    console.log('Token refreshed for:', user.uid);
10    // Send token to your API for session management
11  } else {
12    console.log('No user — clear session');
13  }
14});
15
16// Call unsubscribe() to stop listening