feat(auth): Add AuthProvider and TokenProvider for user authentication and token management

Author: Aya-X

app/features/login/index.tsx

@@ -19,13 +19,16 @@ import { Lock, Mail, Eye, EyeOff, BookOpen } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { useToggle } from "@/hooks/useToggle";
 
+import { useAuth } from "@/providers/AuthProvider";
 import { useSignin } from "@/service/auth";
 
 import { loginSchema, defaultValues } from "./data/schema";
 
 type LoginFormValues = z.infer<typeof loginSchema>;
 
 export default function Login() {
+  const { handleLogin } = useAuth();
+
   const { toast } = useToast();
   const { open: isPasswordVisibility, toggle: togglePasswordVisibility } =
     useToggle(false);
@@ -46,9 +49,10 @@ export default function Login() {
     try {
       const response = await trigger({ data });
       const { token, expired } = response;
-      document.cookie = `hexToken=${token};expires=${new Date(
-        String(expired)
-      ).toUTCString()};`;
+      handleLogin({
+        token: String(token),
+        expired: Number(expired),
+      });
 
       toast({
         title: "登入成功",

app/hooks/useApiFactory.ts

@@ -50,7 +50,12 @@ export const createApiHooks = <T extends EndpointConfig>(endpoints: T): HooksTyp
       return (params?: GetParams, swrConfig?: SWRConfiguration) => {
         return useSWR<APIResponse<TData>>(
           params ? [path, params] : path,
-          async () => fetcher<TData>(path, { method: 'GET', params }),
+          async (url) => {
+            return fetcher(url, {
+              method,
+              params: params,
+            });
+          },
           swrConfig
         );
       };
@@ -77,13 +82,12 @@ export const createApiHooks = <T extends EndpointConfig>(endpoints: T): HooksTyp
         MutationParams<TData>
       >(
         path,
-        async (url: string, { arg }: { arg?: MutationParams<TData> }) => {
-          return fetcher<TData>(url, {
+        async (url: string, { arg }: { arg?: MutationParams<TData> }) =>
+          fetcher(url, {
             method,
             params: arg?.params,
             data: arg?.data,
-          });
-        },
+          }),
         mutationConfig
       );
 

app/providers/AuthProvider/index.tsx

@@ -0,0 +1,102 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+} from "react";
+
+import { useCheckUser } from "~/service/auth";
+
+type LoginResponseType = {
+  token: string;
+  expired: number;
+};
+
+type AuthContextType = {
+  isLogin: boolean;
+  isLoading: boolean;
+  handleLogin: (response: LoginResponseType) => void;
+};
+
+const AuthContext = createContext<AuthContextType>({
+  isLogin: false,
+  isLoading: false,
+  handleLogin: () => {},
+});
+
+export default function AuthProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [isLogin, setIsLogin] = useState<boolean>(false);
+
+  const { trigger, isMutating } = useCheckUser();
+
+  useEffect(() => {
+    const abortController = new AbortController();
+
+    const checkUserStatus = async () => {
+      const token = document.cookie
+        .split("; ")
+        .find((row) => row.startsWith("hexToken="))
+        ?.split("=")[1];
+
+      if (!token) {
+        setIsLogin(false);
+        return;
+      }
+
+      try {
+        const response = await trigger();
+        if (response.success) {
+          setIsLogin(true);
+        } else {
+          setIsLogin(false);
+        }
+      } catch (error) {
+        if (!abortController.signal.aborted) {
+          console.log("檢查使用者狀態時發生錯誤:", error);
+          setIsLogin(false);
+        }
+      }
+    };
+
+    checkUserStatus();
+
+    return () => {
+      abortController.abort();
+    };
+  }, [trigger]);
+
+  const handleLogin = useCallback(
+    (response: LoginResponseType) => {
+      setIsLogin(true);
+
+      const { token, expired } = response;
+      document.cookie = `hexToken=${token};expires=${new Date(
+        expired
+      ).toUTCString()};`;
+    },
+    [setIsLogin]
+  );
+
+  return (
+    <AuthContext.Provider
+      value={{ isLogin, isLoading: isMutating, handleLogin }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+
+  if (context === undefined) {
+    throw new Error("useAuth must be used within a AuthProvider");
+  }
+
+  return context;
+}

app/providers/TokenProvider/index.tsx

@@ -0,0 +1,33 @@
+import { SWRConfig, type Middleware, type SWRHook } from "swr";
+
+const tokenMiddleware: Middleware = (useSWRNext: SWRHook) => {
+  return (key, fetcher, config) => {
+    const token =
+      typeof document !== "undefined"
+        ? document.cookie
+            .split("; ")
+            .find((row) => row.startsWith("hexToken="))
+            ?.split("=")[1]
+        : undefined;
+
+    const withToken = key
+      ? [
+          key,
+          {
+            headers: {
+              Authorization: `${token}`,
+            },
+          },
+        ]
+      : null;
+
+    const swr = useSWRNext(withToken, fetcher, config);
+    return swr;
+  };
+};
+
+export default function TokenProvider(props: { children: React.ReactNode }) {
+  return (
+    <SWRConfig value={{ use: [tokenMiddleware] }}>{props.children}</SWRConfig>
+  );
+}

app/root.tsx

@@ -11,6 +11,9 @@ import { Toaster } from "@/components/ui/toaster";
 
 import stylesheet from "./app.css?url";
 
+import TokenProvider from "./providers/TokenProvider";
+import AuthProvider from "./providers/AuthProvider";
+
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
   {
@@ -36,7 +39,12 @@ export function Layout({ children }: { children: React.ReactNode }) {
       </head>
 
       <body>
-        {children}
+        <TokenProvider>
+          <AuthProvider>
+            <>{children}</>
+          </AuthProvider>
+        </TokenProvider>
+
         <Toaster />
         <ScrollRestoration />
         <Scripts />

app/utils/fetcher.ts

@@ -1,7 +1,7 @@
 const API_PREFIX = '/v2';
 
 const createUrl = (path: string, params?: Record<string, string | number>) => {
-  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+  const normalizedPath = path[0].startsWith('/') ? path[0] : `/${path[0]}`;
   const fullPath = `${API_PREFIX}${normalizedPath}`;
 
   if (!params) {
@@ -26,6 +26,7 @@ export const fetcher = async <T>(
     headers: {
       'Content-Type': 'application/json',
       ...headers,
+      ...(Array.isArray(path) ? path[1]?.headers : {}),
     },
     body: data ? JSON.stringify(data) : undefined,
     ...config,