refactor: clean up

pan93412 · pan93412 · commit ff68eaa7a7d3 · 2025-09-14T01:59:17.000+08:00
diff --git a/app/(admin)/layout.tsx b/app/(admin)/layout.tsx
@@ -1,22 +1,25 @@
 import { AppSidebar } from "@/components/app-sidebar";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { UserProvider } from "@/providers/use-user";
 
 export default function AdminLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <SidebarProvider
-      style={{
-        "--sidebar-width": "calc(var(--spacing) * 72)",
-        "--header-height": "calc(var(--spacing) * 12)",
-      } as React.CSSProperties}
-    >
-      <AppSidebar variant="inset" />
-      <SidebarInset>
-        {children}
-      </SidebarInset>
-    </SidebarProvider>
+    <UserProvider>
+      <SidebarProvider
+        style={{
+          "--sidebar-width": "calc(var(--spacing) * 72)",
+          "--header-height": "calc(var(--spacing) * 12)",
+        } as React.CSSProperties}
+      >
+        <AppSidebar variant="inset" />
+        <SidebarInset>
+          {children}
+        </SidebarInset>
+      </SidebarProvider>
+    </UserProvider>
   );
 }
diff --git a/app/api/auth/login/route.ts b/app/api/auth/login/route.ts
@@ -4,9 +4,9 @@ import {
   generateCodeVerifier,
   generateState,
   OAUTH_CONFIG,
-  redirectIfAuthenticated,
   setOAuthState,
 } from "@/lib/auth";
+import { redirectIfAuthenticated } from "@/lib/auth.rsc";
 
 /**
  * OAuth 2.0 Authorization Code Flow with PKCE - Login Initiation
diff --git a/app/forbidden/page.tsx b/app/forbidden/page.tsx
@@ -1,11 +1,15 @@
+import { Logo } from "@/components/logo";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import type { BasicUserInfo } from "@/lib/user";
+import { redirectIfAuthenticated } from "@/lib/auth.rsc";
 import { AlertTriangle } from "lucide-react";
 import Link from "next/link";
-import { Logo } from "../logo";
 
-export default function Forbidden({ user }: { user: BasicUserInfo }) {
+export default async function ForbiddenPage({ searchParams }: { searchParams: Promise<{ name?: string; email?: string }> }) {
+  await redirectIfAuthenticated();
+
+  const { name, email } = await searchParams;
+
   return (
     <div
       className={`
@@ -38,14 +42,14 @@ export default function Forbidden({ user }: { user: BasicUserInfo }) {
         </CardHeader>
         <CardContent className="flex flex-col items-center gap-4">
           <Button asChild variant="outline">
-            <Link href="/">回到主程式</Link>
+            <Link href="/login">重新登入</Link>
           </Button>
         </CardContent>
         <CardFooter
           className={`justify-center text-center text-xs text-muted-foreground`}
         >
           <section className="flex flex-col items-center gap-1">
-            <p>您目前登入的帳號是：{user.name} ({user.email})</p>
+            <p>您目前登入的帳號是：{name} ({email})</p>
             <p>如果這不是您想登入的帳號，請切換 Google 帳號後重新登入</p>
           </section>
         </CardFooter>
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -44,9 +44,7 @@ export default function RootLayout({
         `}
       >
         <ApolloWrapper>
-          <UserProvider>
-            {children}
-          </UserProvider>
+          {children}
         </ApolloWrapper>
         <Toaster />
       </body>
diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -1,6 +1,6 @@
 import { LoginForm } from "@/components/login-form";
 import { Logo } from "@/components/logo";
-import { redirectIfAuthenticated } from "@/lib/auth";
+import { redirectIfAuthenticated } from "@/lib/auth.rsc";
 import Link from "next/link";
 
 interface LoginPageProps {
diff --git a/components/auth-guard/index.tsx b/components/auth-guard/index.tsx
diff --git a/components/login-form.tsx b/components/login-form.tsx
@@ -86,6 +86,8 @@ function getErrorMessage(error: string, description?: string): string {
       return "認證過程中發生錯誤，請重新登入。";
     case "logout_failed":
       return "登出時發生錯誤，但您的本地工作階段已清除。";
+    case "forbidden":
+      return "您沒有權限存取此應用程式。";
     default:
       return "登入時發生未知錯誤，請重試。";
   }
diff --git a/lib/apollo.ts b/lib/apollo.ts
@@ -1,14 +1,9 @@
 import { HttpLink } from "@apollo/client";
 import { ApolloClient, InMemoryCache } from "@apollo/client-integration-nextjs";
+import buildUri from "./build-uri";
 
 /**
  * Creates an Apollo Client instance that uses the GraphQL proxy API.
- * 
- * This implementation follows the Backend for Frontend (BFF) pattern:
- * - All GraphQL requests go through /api/graphql proxy
- * - The proxy automatically handles authentication by adding Authorization headers
- * - Works consistently for both SSR and CSR without exposing tokens to the client
- * - Removes the need for client-side token management
  */
 export function makeClient() {
   const httpLink = new HttpLink({
@@ -22,3 +17,22 @@ export function makeClient() {
     link: httpLink,
   });
 }
+
+/**
+ * Create an Apollo Client instance that uses the upstream GraphQL API.
+ *
+ * You should add the token to the headers of the request.
+ */
+export function makeUpstreamClient({ token }: { token?: string | null }) {
+  const httpLink = new HttpLink({
+    uri: buildUri("/query"),
+    headers: {
+      Authorization: token ? `Bearer ${token}` : "",
+    },
+  });
+
+  return new ApolloClient({
+    cache: new InMemoryCache(),
+    link: httpLink,
+  });
+}
diff --git a/lib/auth.rsc.ts b/lib/auth.rsc.ts
@@ -0,0 +1,9 @@
+import { redirect } from "next/navigation";
+import { getAuthStatus } from "./auth";
+
+export async function redirectIfAuthenticated(): Promise<void> {
+    const isAuthenticated = await getAuthStatus();
+    if (isAuthenticated.role === 'admin') {
+        redirect("/");
+    }
+}
diff --git a/lib/auth.ts b/lib/auth.ts
@@ -1,7 +1,9 @@
 import { cookies } from "next/headers";
-import { redirect } from "next/navigation";
 import { getIronSession } from "iron-session";
 import buildUri from "./build-uri";
+import { makeUpstreamClient } from "./apollo";
+import { BASIC_USER_INFO_QUERY, isAdmin, type BasicUserInfo } from "./user";
+import { CombinedGraphQLErrors } from "@apollo/client";
 
 // Constants for OAuth 2.0 PKCE flow
 export const OAUTH_CONFIG = {
@@ -20,7 +22,6 @@ export interface SessionData {
   access_token?: string;
   token_type?: string;
   expires_in?: number;
-  isLoggedIn: boolean;
 }
 
 if (!process.env.AUTH_SECRET) {
@@ -83,15 +84,14 @@ export async function setAuthToken(
   session.access_token = token;
   session.token_type = tokenType;
   session.expires_in = expiresIn;
-  session.isLoggedIn = true;
   
   await session.save();
 }
 
 export async function getAuthToken(): Promise<string | null> {
   const session = await getSession();
   
-  if (!session.isLoggedIn || !session.access_token) {
+  if (!session.access_token) {
     return null;
   }
   
@@ -221,19 +221,49 @@ export async function revokeToken(token: string): Promise<void> {
 }
 
 // Auth validation
-export async function validateAuth(): Promise<boolean> {
-  const token = await getAuthToken();
-  return token !== null;
+export interface AuthStatus {
+  loggedIn: boolean;
+  
+  role?: "admin" | "user";
+  user?: BasicUserInfo;
 }
 
-// Redirect helpers
-export async function requireAuth(): Promise<never> {
-  redirect("/login");
-}
+export async function getAuthStatus(): Promise<AuthStatus> {
+  const token = await getAuthToken();
+  if (!token) {
+    return {
+      loggedIn: false,
+    };
+  }
+
+  // get user info
+  const client = makeUpstreamClient({ token });
+
+  try {
+    const { data } = await client.query({
+      query: BASIC_USER_INFO_QUERY,
+    });
+    if (!data) {
+      return {
+        loggedIn: true,
+      };
+    }
+
+    return {
+      role: isAdmin(data?.me) ? "admin" : "user",
+      user: data.me,
+      loggedIn: true,
+    };
+  } catch (error) {
+    if (CombinedGraphQLErrors.is(error) && error.message === 'require authentication') {
+      return {
+        loggedIn: false,
+      };
+    }
 
-export async function redirectIfAuthenticated(): Promise<void> {
-  const isAuthenticated = await validateAuth();
-  if (isAuthenticated) {
-    redirect("/");
+    console.log("Error validating auth:", error);
+    return {
+      loggedIn: false,
+    };
   }
 }
diff --git a/lib/user.ts b/lib/user.ts
@@ -1,6 +1,5 @@
 import { graphql } from "@/gql";
 import type { BasicUserInfoQuery } from "@/gql/graphql";
-import buildUri from "./build-uri";
 
 export type BasicUserInfo = BasicUserInfoQuery["me"];
 
@@ -22,14 +21,3 @@ export const BASIC_USER_INFO_QUERY = graphql(`
 export function isAdmin(user: BasicUserInfo): boolean {
   return user.group?.name === "admin";
 }
-
-export async function logout() {
-  const response = await fetch(buildUri("/api/auth/logout"), {
-    method: "POST",
-    credentials: "include",
-  });
-
-  if (!response.ok) {
-    throw new Error("Failed to logout");
-  }
-}
diff --git a/middleware.ts b/middleware.ts
@@ -1,24 +1,10 @@
 import { NextRequest, NextResponse } from "next/server";
-import { getIronSession } from "iron-session";
-import { sessionOptions, type SessionData } from "@/lib/auth";
-import { cookies } from "next/headers";
-
-/**
- * Authentication Middleware for Next.js
- * 
- * This middleware implements server-side authentication according to the
- * OAuth 2.0 for Browser-Based Applications RFC draft.
- * 
- * It runs on every request and:
- * 1. Checks for valid authentication tokens in HttpOnly cookies
- * 2. Redirects unauthenticated users to login page
- * 3. Allows authenticated users to access protected routes
- * 4. Handles public routes without authentication
- */
+import { getAuthStatus } from "@/lib/auth";
 
 // Define public routes that don't require authentication
 const PUBLIC_ROUTES = [
   "/login",
+  "/forbidden",
   "/api/auth/login",
   "/api/auth/callback",
   "/api/auth/logout",
@@ -29,7 +15,7 @@ const PUBLIC_ROUTES = [
 ];
 
 // Define API routes that should return JSON errors instead of redirects
-const API_ROUTES = ["/api/", "/query"];
+const API_ROUTES = ["/api/"];
 
 function isPublicRoute(pathname: string): boolean {
   return PUBLIC_ROUTES.some(route => pathname.startsWith(route));
@@ -48,10 +34,9 @@ export async function middleware(request: NextRequest) {
   }
 
   try {
-    // Check for authentication session
-    const session = await getIronSession<SessionData>(await cookies(), sessionOptions);
-    
-    if (!session.isLoggedIn || !session.access_token) {
+    const { role, loggedIn, user } = await getAuthStatus();
+
+    if (!loggedIn) {
       // Handle unauthenticated requests
       if (isApiRoute(pathname)) {
         // Return JSON error for API routes
@@ -70,16 +55,24 @@ export async function middleware(request: NextRequest) {
       }
     }
 
-    // Add auth token to request headers for downstream consumption
-    const requestHeaders = new Headers(request.headers);
-    requestHeaders.set("x-auth-token", session.access_token);
-
-    return NextResponse.next({
-      request: {
-        headers: requestHeaders,
-      },
-    });
+    if (role !== "admin") {
+      if (isApiRoute(pathname)) {
+        return NextResponse.json(
+          { 
+            error: "forbidden", 
+            error_description: "You must be an admin to access this resource" 
+          },
+          { status: 403 }
+        );
+      } else {
+        const loginUrl = new URL("/forbidden", request.url);
+        loginUrl.searchParams.set("name", user?.name ?? '');
+        loginUrl.searchParams.set("email", user?.email ?? '');
+        return NextResponse.redirect(loginUrl);
+      }
+    }
 
+    return NextResponse.next();
   } catch (error) {
     console.error("Middleware authentication error:", error);
     

Original file line number	Diff line number	Diff line change
`@@ -86,6 +86,8 @@ function getErrorMessage(error: string, description?: string): string {`
`86`	`86`	`return "認證過程中發生錯誤，請重新登入。";`
`87`	`87`	`case "logout_failed":`
`88`	`88`	`return "登出時發生錯誤，但您的本地工作階段已清除。";`
	`89`	`+ case "forbidden":`
	`90`	`+ return "您沒有權限存取此應用程式。";`
`89`	`91`	`default:`
`90`	`92`	`return "登入時發生未知錯誤，請重試。";`
`91`	`93`	`}`