Authentication

1const res = await fetch('/api/auth/login', {
2  method: 'POST',
3  credentials: 'include',                  // send/receive the session cookie
4  headers: { 'Content-Type': 'application/json' },
5  body: JSON.stringify({ email, password }),
6});

1import { createContext, useContext, useEffect, useState } from 'react';
2

3const API = import.meta.env?.VITE_API_URL ?? '/api';
4const AuthContext = createContext(null);
5

6async function api(path, options = {}) {
7  const res = await fetch(API + path, {
8    credentials: 'include',
9    headers: { 'Content-Type': 'application/json' },
10    ...options,
11  });
12  if (res.status === 401) return null;                  // not signed in
13  if (!res.ok) throw new Error(`Request failed: ${res.status}`);
14  return res.status === 204 ? null : res.json();
15}
16

17export function AuthProvider({ children }) {
18  const [user, setUser] = useState(null);
19  const [checking, setChecking] = useState(true);
20

21  useEffect(() => {                                      // restore session on load
22    api('/auth/me').then(setUser).catch(() => setUser(null)).finally(() => setChecking(false));
23  }, []);
24

25  async function login(email, password) {
26    const me = await api('/auth/login', { method: 'POST', body: JSON.stringify({ email, password }) });
27    if (!me) throw new Error('Wrong email or password');
28    setUser(me);
29  }
30

31  async function logout() {
32    await api('/auth/logout', { method: 'POST' });
33    setUser(null);
34  }
35

36  return <AuthContext value={{ user, checking, login, logout }}>{children}</AuthContext>;
37}
38

39export function useAuth() {
40  const ctx = useContext(AuthContext);
41  if (!ctx) throw new Error('useAuth must be used inside <AuthProvider>');
42  return ctx;
43}
44

45export function LoginForm() {
46  const { user, checking, login, logout } = useAuth();
47  const [error, setError] = useState('');
48

49  if (checking) return <p>Checking your session…</p>;
50  if (user) return <p>Signed in as {user.name} <button onClick={logout}>Log out</button></p>;
51

52  async function handleSubmit(e) {
53    e.preventDefault();
54    const { email, password } = Object.fromEntries(new FormData(e.currentTarget));
55    try { setError(''); await login(email, password); }
56    catch (err) { setError(err.message); }
57  }
58

59  return (
60    <form onSubmit={handleSubmit}>
61      <input name="email" type="email" aria-label="Email" required />
62      <input name="password" type="password" aria-label="Password" required />
63      <button>Log in</button>
64      {error && <p role="alert">{error}</p>}
65    </form>
66  );
67}
68

69export default function App() {
70  return <AuthProvider><LoginForm /></AuthProvider>;
71}

On load the app shows “Checking your session…” while it calls /api/auth/me. If the cookie is valid it shows “Signed in as Asha” with a Log out button; otherwise the login form. Wrong credentials show “Wrong email or password”. Logging out calls the API and returns to the form.