React: How to implement authentication in React?

1import { createContext, useContext, useState, useEffect, ReactNode } from "react";
2
3interface User {
4  id: string;
5  name: string;
6  email: string;
7}
8
9interface AuthContextType {
10  user: User | null;
11  loading: boolean;
12  login: (email: string, password: string) => Promise<void>;
13  logout: () => Promise<void>;
14}
15
16const AuthContext = createContext<AuthContextType>(null!);
17
18function AuthProvider({ children }: { children: ReactNode }) {
19  const [user, setUser] = useState<User | null>(null);
20  const [loading, setLoading] = useState(true);
21
22  useEffect(() => {
23    // Check for existing session on mount
24    checkAuth()
25      .then(setUser)
26      .catch(() => setUser(null))
27      .finally(() => setLoading(false));
28  }, []);
29
30  const login = async (email: string, password: string) => {
31    const response = await fetch("/api/auth/login", {
32      method: "POST",
33      headers: { "Content-Type": "application/json" },
34      body: JSON.stringify({ email, password }),
35    });
36    if (!response.ok) throw new Error("Login failed");
37    const { user } = await response.json();
38    setUser(user);
39  };
40
41  const logout = async () => {
42    await fetch("/api/auth/logout", { method: "POST" });
43    setUser(null);
44  };
45
46  return (
47    <AuthContext.Provider value={{ user, loading, login, logout }}>
48      {children}
49    </AuthContext.Provider>
50  );
51}
52
53function useAuth() {
54  const context = useContext(AuthContext);
55  if (!context) throw new Error("useAuth must be used within AuthProvider");
56  return context;
57}

1import { Navigate, Outlet } from "react-router-dom";
2
3function ProtectedRoute() {
4  const { user, loading } = useAuth();
5
6  if (loading) return <div className="spinner" />;
7  if (!user) return <Navigate to="/login" replace />;
8
9  return <Outlet />;
10}
11
12// Route configuration
13function App() {
14  return (
15    <AuthProvider>
16      <BrowserRouter>
17        <Routes>
18          <Route path="/login" element={<LoginPage />} />
19          <Route element={<ProtectedRoute />}>
20            <Route path="/dashboard" element={<Dashboard />} />
21            <Route path="/settings" element={<Settings />} />
22          </Route>
23        </Routes>
24      </BrowserRouter>
25    </AuthProvider>
26  );
27}

1function useRequireAuth(redirectTo = "/login") {
2  const { user, loading } = useAuth();
3  const navigate = useNavigate();
4
5  useEffect(() => {
6    if (!loading && !user) {
7      navigate(redirectTo, { replace: true });
8    }
9  }, [user, loading, redirectTo, navigate]);
10
11  return { user, loading, isAuthenticated: !!user };
12}