Account login

web/context/AuthContext.js

@@ -0,0 +1,107 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, useCallback } from "react";
+
+const AuthContext = createContext(null);
+
+const TOKEN_KEY = "auth_token";
+
+async function fetchCurrentUser(token) {
+  const res = await fetch("/api/v1/auth/me", {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (!res.ok) return null;
+  return res.json();
+}
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [token, setToken] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const stored = localStorage.getItem(TOKEN_KEY);
+    if (!stored) {
+      setLoading(false);
+
+      return;
+    }
+    fetchCurrentUser(stored)
+      .then((data) => {
+        if (data) {
+          setToken(stored);
+          setUser(data);
+        } 
+        
+        else {
+          localStorage.removeItem(TOKEN_KEY);
+        }
+      }).catch(() => localStorage.removeItem(TOKEN_KEY)).finally(() => setLoading(false));}, []);
+
+  const login = useCallback(async (username, password) => {
+    const res = await fetch("/api/v1/auth/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username, password }),
+    });
+
+    const data = await res.json();
+
+    if (!res.ok) {
+      throw new Error(data.message || "Login failed");
+    }
+
+    const jwt = data.token;
+    localStorage.setItem(TOKEN_KEY, jwt);
+    setToken(jwt);
+
+    const userInfo = await fetchCurrentUser(jwt);
+
+    setUser(userInfo);
+
+    return userInfo;
+  }, []);
+
+  const register = useCallback(async ({ username, password, email, fullName, phone }) => {
+    const res = await fetch("/api/v1/auth/register", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username, password, email, fullName, phone }),
+    });
+    const data = await res.json();
+
+    if (!res.ok) {
+      throw new Error(data.message || "Registration failed");
+    }
+
+    const jwt = data.token;
+
+    localStorage.setItem(TOKEN_KEY, jwt);
+    setToken(jwt);
+
+    const userInfo = await fetchCurrentUser(jwt);
+    setUser(userInfo);
+
+    return userInfo;
+  }, []);
+
+  const logout = useCallback(() => {
+    localStorage.removeItem(TOKEN_KEY);
+    setToken(null);
+    setUser(null);}, []);
+
+  return (
+    <AuthContext.Provider value={{ user, token, loading, login, logout, register }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+
+  return ctx;
+}