How to Sign Out a User in Firebase

1import { getAuth, signOut } from 'firebase/auth';
2import { app } from './firebase'; // your Firebase app instance
3
4const auth = getAuth(app);
5
6async function handleSignOut() {
7  try {
8    await signOut(auth);
9    console.log('User signed out successfully');
10    // Redirect to login page
11    window.location.href = '/login';
12  } catch (error) {
13    console.error('Sign out error:', error);
14  }
15}

1import { getAuth, onAuthStateChanged } from 'firebase/auth';
2
3const auth = getAuth(app);
4
5onAuthStateChanged(auth, (user) => {
6  if (user) {
7    // User is signed in
8    console.log('Signed in as:', user.email);
9  } else {
10    // User is signed out
11    console.log('User signed out');
12    // Clear any cached user data
13    localStorage.removeItem('userProfile');
14    sessionStorage.clear();
15  }
16});

1import { useState } from 'react';
2import { getAuth, signOut } from 'firebase/auth';
3
4export function SignOutButton() {
5  const [loading, setLoading] = useState(false);
6  const [error, setError] = useState<string | null>(null);
7
8  async function handleSignOut() {
9    setLoading(true);
10    setError(null);
11
12    try {
13      const auth = getAuth();
14      await signOut(auth);
15      window.location.href = '/login';
16    } catch (err) {
17      setError('Failed to sign out. Please try again.');
18      setLoading(false);
19    }
20  }
21
22  return (
23    <div>
24      <button onClick={handleSignOut} disabled={loading}>
25        {loading ? 'Signing out...' : 'Sign out'}
26      </button>
27      {error && <p style={{ color: 'red' }}>{error}</p>}
28    </div>
29  );
30}

1import { getAuth, signOut } from 'firebase/auth';
2
3async function fullSignOut() {
4  const auth = getAuth();
5
6  // 1. Sign out from Firebase
7  await signOut(auth);
8
9  // 2. Clear application-specific storage
10  const appKeys = ['userProfile', 'userSettings', 'cart', 'draftData'];
11  appKeys.forEach((key) => localStorage.removeItem(key));
12  sessionStorage.clear();
13
14  // 3. Reset state management store (example with Zustand)
15  // useStore.getState().reset();
16
17  // 4. Full page redirect to clear in-memory state
18  window.location.href = '/login';
19}

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