How to Use Firebase Auth with React

1// src/lib/firebase.ts
2import { initializeApp } from 'firebase/app';
3import { getAuth } from 'firebase/auth';
4
5const firebaseConfig = {
6  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
7  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
8  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
9  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
10  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
11  appId: import.meta.env.VITE_FIREBASE_APP_ID,
12};
13
14const app = initializeApp(firebaseConfig);
15export const auth = getAuth(app);
16export default app;

1// src/contexts/AuthContext.tsx
2import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
3import {
4  onAuthStateChanged,
5  signInWithEmailAndPassword,
6  createUserWithEmailAndPassword,
7  signInWithPopup,
8  GoogleAuthProvider,
9  signOut as firebaseSignOut,
10  User,
11} from 'firebase/auth';
12import { auth } from '../lib/firebase';
13
14interface AuthContextType {
15  user: User | null;
16  loading: boolean;
17  signIn: (email: string, password: string) => Promise<void>;
18  signUp: (email: string, password: string) => Promise<void>;
19  signInWithGoogle: () => Promise<void>;
20  signOut: () => Promise<void>;
21}
22
23const AuthContext = createContext<AuthContextType | null>(null);
24
25export function AuthProvider({ children }: { children: ReactNode }) {
26  const [user, setUser] = useState<User | null>(null);
27  const [loading, setLoading] = useState(true);
28
29  useEffect(() => {
30    const unsubscribe = onAuthStateChanged(auth, (user) => {
31      setUser(user);
32      setLoading(false);
33    });
34    return unsubscribe;
35  }, []);
36
37  const value: AuthContextType = {
38    user,
39    loading,
40    signIn: async (email, password) => {
41      await signInWithEmailAndPassword(auth, email, password);
42    },
43    signUp: async (email, password) => {
44      await createUserWithEmailAndPassword(auth, email, password);
45    },
46    signInWithGoogle: async () => {
47      await signInWithPopup(auth, new GoogleAuthProvider());
48    },
49    signOut: async () => {
50      await firebaseSignOut(auth);
51    },
52  };
53
54  return (
55    <AuthContext.Provider value={value}>
56      {children}
57    </AuthContext.Provider>
58  );
59}
60
61export function useAuth() {
62  const context = useContext(AuthContext);
63  if (!context) throw new Error('useAuth must be used within AuthProvider');
64  return context;
65}

1// src/components/LoginForm.tsx
2import { useState, FormEvent } from 'react';
3import { useAuth } from '../contexts/AuthContext';
4import { FirebaseError } from 'firebase/app';
5
6export function LoginForm() {
7  const { signIn, signInWithGoogle } = useAuth();
8  const [email, setEmail] = useState('');
9  const [password, setPassword] = useState('');
10  const [error, setError] = useState('');
11  const [loading, setLoading] = useState(false);
12
13  async function handleSubmit(e: FormEvent) {
14    e.preventDefault();
15    setError('');
16    setLoading(true);
17
18    try {
19      await signIn(email, password);
20    } catch (err) {
21      if (err instanceof FirebaseError) {
22        switch (err.code) {
23          case 'auth/user-not-found':
24            setError('No account found with this email.');
25            break;
26          case 'auth/wrong-password':
27            setError('Incorrect password.');
28            break;
29          case 'auth/invalid-email':
30            setError('Please enter a valid email.');
31            break;
32          default:
33            setError('Sign-in failed. Please try again.');
34        }
35      }
36    } finally {
37      setLoading(false);
38    }
39  }
40
41  return (
42    <form onSubmit={handleSubmit}>
43      {error && <p style={{ color: 'red' }}>{error}</p>}
44      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" required />
45      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" required />
46      <button type="submit" disabled={loading}>Sign In</button>
47      <button type="button" onClick={signInWithGoogle}>Sign in with Google</button>
48    </form>
49  );
50}

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

1// src/App.tsx
2import { BrowserRouter, Routes, Route } from 'react-router-dom';
3import { AuthProvider } from './contexts/AuthContext';
4import { ProtectedRoute } from './components/ProtectedRoute';
5import { LoginForm } from './components/LoginForm';
6import { Dashboard } from './pages/Dashboard';
7
8export default function App() {
9  return (
10    <AuthProvider>
11      <BrowserRouter>
12        <Routes>
13          <Route path="/login" element={<LoginForm />} />
14          <Route
15            path="/dashboard"
16            element={
17              <ProtectedRoute>
18                <Dashboard />
19              </ProtectedRoute>
20            }
21          />
22        </Routes>
23      </BrowserRouter>
24    </AuthProvider>
25  );
26}