From 3923eb2f86c304bbd90c4eae9a338f7bc21c9e90 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sat, 6 Dec 2025 18:30:04 +0900
Subject: feat(client): add auth store with React context
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements token management via AuthProvider context that wraps the app.
Provides useAuth hook for components to access auth state and actions
(login, register, logout). Includes comprehensive tests.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/client/stores/auth.tsx | 94 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 src/client/stores/auth.tsx

(limited to 'src/client/stores/auth.tsx')

diff --git a/src/client/stores/auth.tsx b/src/client/stores/auth.tsx
new file mode 100644
index 0000000..cca314a
--- /dev/null
+++ b/src/client/stores/auth.tsx
@@ -0,0 +1,94 @@
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
+import { ApiClientError, apiClient } from "../api/client";
+import type { User } from "../api/types";
+
+export interface AuthState {
+	user: User | null;
+	isAuthenticated: boolean;
+	isLoading: boolean;
+}
+
+export interface AuthActions {
+	login: (username: string, password: string) => Promise<void>;
+	register: (username: string, password: string) => Promise<void>;
+	logout: () => void;
+}
+
+export type AuthContextValue = AuthState & AuthActions;
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export interface AuthProviderProps {
+	children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+	const [user, setUser] = useState<User | null>(null);
+	const [isLoading, setIsLoading] = useState(true);
+
+	// Check for existing auth on mount
+	useEffect(() => {
+		const tokens = apiClient.getTokens();
+		if (tokens) {
+			// We have tokens stored, but we don't have user info cached
+			// For now, just set authenticated state. User info will be fetched when needed.
+			// In a full implementation, we'd decode the JWT or call an API endpoint
+			setIsLoading(false);
+		} else {
+			setIsLoading(false);
+		}
+	}, []);
+
+	const login = useCallback(async (username: string, password: string) => {
+		const response = await apiClient.login(username, password);
+		setUser(response.user);
+	}, []);
+
+	const register = useCallback(
+		async (username: string, password: string) => {
+			await apiClient.register(username, password);
+			// After registration, log in automatically
+			await login(username, password);
+		},
+		[login],
+	);
+
+	const logout = useCallback(() => {
+		apiClient.logout();
+		setUser(null);
+	}, []);
+
+	const isAuthenticated = apiClient.isAuthenticated();
+
+	const value = useMemo<AuthContextValue>(
+		() => ({
+			user,
+			isAuthenticated,
+			isLoading,
+			login,
+			register,
+			logout,
+		}),
+		[user, isAuthenticated, isLoading, login, register, logout],
+	);
+
+	return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth(): AuthContextValue {
+	const context = useContext(AuthContext);
+	if (!context) {
+		throw new Error("useAuth must be used within an AuthProvider");
+	}
+	return context;
+}
+
+export { ApiClientError };
-- 
cgit v1.2.3-70-g09d2