From 5f7aed1ae527753b12e5180e52974835a8bb9ac2 Mon Sep 17 00:00:00 2001
From: Nat Silprasert <natsilprasert@gmail.com>
Date: Mon, 14 Sep 2026 13:15:14 +0700
Subject: [PATCH 1/5] refactor: reorganize into feature folders and share auth
 state via context

- Move business components from components/{auth,profile,wallet} into
  features/{auth,profile,wallet}; components/ now holds only the design
  system (ui/), route guards (guards/), and app shell (Navbar, Footer).
- Rename AuthBoundary to AuthGuard.
- Add AuthProvider/useAuth (contexts/auth-context.tsx) as the single source
  of truth for the signed-in user's profile, replacing independent
  /users/me and localStorage reads in AuthGuard, Navbar, and ProfilePanel.
- Update AGENTS.md and README.md to document the new structure.
---
 AGENTS.md                                     |   7 +
 README.md                                     |   7 +
 apps/web/src/app/balance/top-up/page.tsx      |   2 +-
 apps/web/src/app/complete-profile/page.tsx    |   2 +-
 apps/web/src/app/layout.tsx                   |   9 +-
 apps/web/src/app/login/page.tsx               |   2 +-
 apps/web/src/app/profile/edit/page.tsx        |   2 +-
 apps/web/src/app/profile/page.tsx             |   2 +-
 apps/web/src/app/register/page.tsx            |   2 +-
 apps/web/src/components/Navbar.tsx            |  54 +----
 .../web/src/components/auth/auth-boundary.tsx | 151 --------------
 apps/web/src/components/guards/auth-guard.tsx | 113 +++++++++++
 .../src/components/profile/profile-panel.tsx  | 190 ------------------
 apps/web/src/contexts/auth-context.tsx        | 107 ++++++++++
 .../auth/login-form.stories.tsx               |   0
 .../auth/login-form.tsx                       |   0
 .../auth/login-panel.tsx                      |   2 +-
 .../auth/registration-form.stories.tsx        |   0
 .../auth/registration-form.tsx                |   0
 .../auth/registration-panel.tsx               |   2 +-
 .../profile/profile-avatar.tsx                |   0
 .../profile/profile-completion-form.tsx       |   0
 .../profile/profile-details.stories.tsx       |   0
 .../profile/profile-details.tsx               |   2 +-
 .../profile/profile-edit-form.tsx             |   5 +-
 .../src/features/profile/profile-panel.tsx    |  72 +++++++
 .../wallet/top-up-form.tsx                    |   4 +-
 27 files changed, 336 insertions(+), 401 deletions(-)
 delete mode 100644 apps/web/src/components/auth/auth-boundary.tsx
 create mode 100644 apps/web/src/components/guards/auth-guard.tsx
 delete mode 100644 apps/web/src/components/profile/profile-panel.tsx
 create mode 100644 apps/web/src/contexts/auth-context.tsx
 rename apps/web/src/{components => features}/auth/login-form.stories.tsx (100%)
 rename apps/web/src/{components => features}/auth/login-form.tsx (100%)
 rename apps/web/src/{components => features}/auth/login-panel.tsx (92%)
 rename apps/web/src/{components => features}/auth/registration-form.stories.tsx (100%)
 rename apps/web/src/{components => features}/auth/registration-form.tsx (100%)
 rename apps/web/src/{components => features}/auth/registration-panel.tsx (95%)
 rename apps/web/src/{components => features}/profile/profile-avatar.tsx (100%)
 rename apps/web/src/{components => features}/profile/profile-completion-form.tsx (100%)
 rename apps/web/src/{components => features}/profile/profile-details.stories.tsx (100%)
 rename apps/web/src/{components => features}/profile/profile-details.tsx (99%)
 rename apps/web/src/{components => features}/profile/profile-edit-form.tsx (98%)
 create mode 100644 apps/web/src/features/profile/profile-panel.tsx
 rename apps/web/src/{components => features}/wallet/top-up-form.tsx (97%)

diff --git a/AGENTS.md b/AGENTS.md
index 4f0f467..e83c178 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -24,9 +24,16 @@ Yarn workspaces monorepo, two independent apps talking only over HTTP:
 
 - `apps/api` — Express + Prisma/Postgres, layered `router/ → controller/ → service/ → repository/` per resource (see `task.*.ts` for the pattern). Validation is zod in the controller; no DTO layer. Every response is `{ success, message, data }`, thrown via `common/errors/app-error.ts` typed errors and centralized in `common/middleware/error-handler.middleware.ts`.
 - `apps/web` — Next.js App Router. Server Components fetch data (`lib/api-client.ts`, which unwraps the `{ success, data }` envelope); anything interactive needs its own `"use client"` component, and mutations should call `router.refresh()` afterward since there's no client cache.
+  - `src/features/<domain>/` — business-specific components grouped by feature (`auth`, `profile`, `wallet`); e.g. `features/auth/login-panel.tsx` wires the presentational form to the API and router.
+  - `src/components/ui/` — base/design-system primitives (button, input, select, ...), documented in `DESIGN.md`.
+  - `src/components/guards/auth-guard.tsx` (`AuthGuard`) — the single client-side route guard, mounted once in `app/layout.tsx`. Matches the path against a `ROUTE_RULES` table (guest-only / profile-completion-required / role-restricted per prefix) and redirects before rendering — add a route there instead of a new `layout.tsx`.
+  - `src/components/Navbar.tsx`, `Footer.tsx` — global app shell, not tied to one feature.
+  - `src/contexts/auth-context.tsx` — `AuthProvider` + `useAuth()`, the single source of truth for the signed-in user's profile (`GET /users/me`). `AuthGuard`, `Navbar`, and profile/wallet features read from it instead of each fetching independently; call `refresh()` after a mutation that can change role/profile-completion/wallet state.
 
 ## Conventions
 
 - New API resource: add one file each to `router/`, `controller/`, `service/`, `repository/`, then register in `apps/api/src/routes.ts`.
 - New shared frontend type: one file per resource under `apps/web/src/types/`.
+- New frontend feature UI goes under `apps/web/src/features/<domain>/`, not `components/`; `components/` is reserved for the design system (`ui/`), route guards (`guards/`), and app-shell pieces (`Navbar`, `Footer`).
+- New protected/guest page: add a prefix to `ROUTE_RULES` in `apps/web/src/components/guards/auth-guard.tsx`.
 - Formatting is enforced by Prettier (100 cols, double quotes, semicolons) + ESLint, run automatically on commit via husky/lint-staged — don't bypass with `--no-verify`.
diff --git a/README.md b/README.md
index 90a0b2d..8918d53 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,13 @@ Monorepo: Next.js frontend + Express API, Prisma/Postgres, Swagger docs, Storybo
 ## Stack
 
 - **apps/web** — Next.js, Tailwind CSS, shadcn/ui, lucide-react, Storybook
+  - `src/features/<domain>/` — feature UI grouped by business domain (`auth`,
+    `profile`, `wallet`)
+  - `src/components/ui/` — base design-system primitives, see `DESIGN.md`
+  - `src/components/guards/auth-guard.tsx` — the single route guard mounted in
+    `app/layout.tsx`; redirects per-route based on sign-in/profile-completion/role
+  - `src/contexts/auth-context.tsx` — `AuthProvider`/`useAuth()`, the shared
+    signed-in user profile consumed by the guard, navbar, and feature components
 - **apps/api** — Express, Prisma, PostgreSQL, Swagger (`swagger-jsdoc` + `swagger-ui-express`)
   - Layers: `router/` → `controller/` → `service/` → `repository/`. Validation
     (zod) lives in the controller; no separate DTO layer.
diff --git a/apps/web/src/app/balance/top-up/page.tsx b/apps/web/src/app/balance/top-up/page.tsx
index 8c3425b..d397380 100644
--- a/apps/web/src/app/balance/top-up/page.tsx
+++ b/apps/web/src/app/balance/top-up/page.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { TopUpForm } from "@/components/wallet/top-up-form";
+import { TopUpForm } from "@/features/wallet/top-up-form";
 
 export const metadata: Metadata = { title: "Top up balance | Tutorist" };
 
diff --git a/apps/web/src/app/complete-profile/page.tsx b/apps/web/src/app/complete-profile/page.tsx
index ff1da77..f5e1439 100644
--- a/apps/web/src/app/complete-profile/page.tsx
+++ b/apps/web/src/app/complete-profile/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import { ProfileCompletionForm } from "@/components/profile/profile-completion-form";
+import { ProfileCompletionForm } from "@/features/profile/profile-completion-form";
 
 export const metadata: Metadata = {
   title: "Complete your profile | Tutorist",
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 6710bd0..bb56d49 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,8 +1,9 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { AuthBoundary } from "@/components/auth/auth-boundary";
+import { AuthGuard } from "@/components/guards/auth-guard";
 import { Footer } from "@/components/Footer";
 import { Navbar } from "@/components/Navbar";
+import { AuthProvider } from "@/contexts/auth-context";
 
 export const metadata: Metadata = {
   title: "SE Project",
@@ -13,8 +14,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body>
-        <Navbar />
-        <AuthBoundary>{children}</AuthBoundary>
+        <AuthProvider>
+          <Navbar />
+          <AuthGuard>{children}</AuthGuard>
+        </AuthProvider>
         <Footer />
       </body>
     </html>
diff --git a/apps/web/src/app/login/page.tsx b/apps/web/src/app/login/page.tsx
index 6fdf90a..6753c21 100644
--- a/apps/web/src/app/login/page.tsx
+++ b/apps/web/src/app/login/page.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { LoginPanel } from "@/components/auth/login-panel";
+import { LoginPanel } from "@/features/auth/login-panel";
 
 export const metadata: Metadata = {
   title: "Log in | Tutorist",
diff --git a/apps/web/src/app/profile/edit/page.tsx b/apps/web/src/app/profile/edit/page.tsx
index 8f9fe04..d41bc58 100644
--- a/apps/web/src/app/profile/edit/page.tsx
+++ b/apps/web/src/app/profile/edit/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 
-import { ProfileEditForm } from "@/components/profile/profile-edit-form";
+import { ProfileEditForm } from "@/features/profile/profile-edit-form";
 
 export const metadata: Metadata = {
   title: "Edit profile | Tutorist",
diff --git a/apps/web/src/app/profile/page.tsx b/apps/web/src/app/profile/page.tsx
index 7975751..9ee2d98 100644
--- a/apps/web/src/app/profile/page.tsx
+++ b/apps/web/src/app/profile/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import { ProfilePanel } from "@/components/profile/profile-panel";
+import { ProfilePanel } from "@/features/profile/profile-panel";
 
 export const metadata: Metadata = {
   title: "My profile | Tutorist",
diff --git a/apps/web/src/app/register/page.tsx b/apps/web/src/app/register/page.tsx
index 016f96b..79c7cb2 100644
--- a/apps/web/src/app/register/page.tsx
+++ b/apps/web/src/app/register/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import { RegistrationPanel } from "@/components/auth/registration-panel";
+import { RegistrationPanel } from "@/features/auth/registration-panel";
 
 export const metadata: Metadata = {
   title: "Sign up | Tutorist",
diff --git a/apps/web/src/components/Navbar.tsx b/apps/web/src/components/Navbar.tsx
index 301dc82..c23c7b3 100644
--- a/apps/web/src/components/Navbar.tsx
+++ b/apps/web/src/components/Navbar.tsx
@@ -7,10 +7,7 @@ import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
-import { getToken, getUser } from "@/lib/auth-storage";
-import { apiClient } from "@/lib/api-client";
-import type { WalletBalance } from "@/types/wallet";
-import type { LoginResponse } from "@/types/auth";
+import { useAuth } from "@/contexts/auth-context";
 
 const NAV_LINKS = [
   { label: "Find tutors", href: "/tutors" },
@@ -34,51 +31,16 @@ export function Navbar({ isLoggedIn, userName, userMoney, profileUrl }: NavbarPr
   const pathname = usePathname();
   const router = useRouter();
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-  const [session, setSession] = useState<LoginResponse["user"] | null>(null);
-  const [balance, setBalance] = useState<string>();
+  const { profile } = useAuth();
   const menuToggleRef = useRef<HTMLButtonElement>(null);
   const sidebarRef = useRef<HTMLDivElement>(null);
 
-  // The session lives in localStorage, so it can only be read after mount —
-  // the first paint always renders signed-out. Re-reading on navigation is what
-  // makes logging in or out update the header, since this component never
-  // unmounts during client-side routing.
-  useEffect(() => {
-    let active = true;
-    let accountVersion = 0;
-    function updateAccount() {
-      const version = ++accountVersion;
-      const user = getToken() ? getUser() : null;
-      setSession(user);
-      setBalance(undefined);
-      if (user?.role === "student") {
-        apiClient.get<WalletBalance>("/wallet").then(
-          (wallet) => {
-            if (active && version === accountVersion) {
-              setBalance(Number(wallet.walletBalance).toFixed(2));
-            }
-          },
-          () => {
-            /* The top-up page displays wallet loading errors. */
-          }
-        );
-      }
-    }
-    updateAccount();
-    window.addEventListener("wallet-updated", updateAccount);
-    window.addEventListener("storage", updateAccount);
-    return () => {
-      active = false;
-      window.removeEventListener("wallet-updated", updateAccount);
-      window.removeEventListener("storage", updateAccount);
-    };
-  }, [pathname]);
-
-  const signedIn = isLoggedIn ?? session !== null;
-  const displayName = userName ?? session?.name ?? session?.email;
-  const displayPhoto = profileUrl ?? session?.profileUrl ?? undefined;
-  const displayBalance = userMoney ?? balance;
-  const isStudent = session?.role === "student";
+  const signedIn = isLoggedIn ?? profile !== null;
+  const displayName = userName ?? profile?.name ?? profile?.email;
+  const displayPhoto = profileUrl ?? profile?.profileUrl ?? undefined;
+  const displayBalance =
+    userMoney ?? (profile?.role === "student" ? profile.walletBalance.toFixed(2) : undefined);
+  const isStudent = profile?.role === "student";
 
   useEffect(() => {
     if (!isSidebarOpen) return;
diff --git a/apps/web/src/components/auth/auth-boundary.tsx b/apps/web/src/components/auth/auth-boundary.tsx
deleted file mode 100644
index e5c32f5..0000000
--- a/apps/web/src/components/auth/auth-boundary.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-"use client";
-
-import { useEffect, useState, type ReactNode } from "react";
-import { usePathname, useRouter } from "next/navigation";
-
-import { Button } from "@/components/ui/button";
-import { ApiError, apiClient } from "@/lib/api-client";
-import { clearSession, getToken } from "@/lib/auth-storage";
-import type { UserRole } from "@/types/auth";
-import type { UserProfile } from "@/types/user";
-
-type GuestRule = { prefix: string; guest: true };
-
-type ProtectedRule = {
-  prefix: string;
-  guest?: false;
-  /** Roles allowed to view this route. Omit to allow any signed-in role. */
-  allowRoles?: UserRole[];
-  /** False on complete-profile, which must stay reachable while incomplete. Default true. */
-  requireProfileComplete?: boolean;
-  /** True on complete-profile, so a finished profile bounces away instead of re-showing the form. */
-  redirectIfProfileComplete?: boolean;
-};
-
-type RouteRule = GuestRule | ProtectedRule;
-
-/**
- * Every route that needs a signed-in (or signed-out) gate, keyed by path
- * prefix. Add a new protected/guest page here instead of a new layout.tsx —
- * one boundary, one `/users/me` fetch per navigation, no per-route wiring.
- */
-const ROUTE_RULES: RouteRule[] = [
-  { prefix: "/login", guest: true },
-  { prefix: "/register", guest: true },
-  { prefix: "/complete-profile", requireProfileComplete: false, redirectIfProfileComplete: true },
-  { prefix: "/balance", allowRoles: ["student"] },
-  { prefix: "/profile" },
-  { prefix: "/classroom" },
-  { prefix: "/message" },
-];
-
-function matchRule(pathname: string): RouteRule | undefined {
-  const matches = ROUTE_RULES.filter(
-    (rule) => pathname === rule.prefix || pathname.startsWith(`${rule.prefix}/`)
-  );
-  return matches.sort((a, b) => b.prefix.length - a.prefix.length)[0];
-}
-
-/**
- * Single client-side gate mounted once in the root layout. Matches the
- * current path against `ROUTE_RULES` and, for a match, fetches `/users/me`
- * (role/completion can't be trusted from localStorage alone) before
- * rendering children, so protected content never flashes on screen.
- * Unmatched paths (home, tutors, ...) render immediately with no fetch.
- */
-export function AuthBoundary({ children }: { children: ReactNode }) {
-  const pathname = usePathname();
-  const router = useRouter();
-  const [allowedPath, setAllowedPath] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [retryToken, setRetryToken] = useState(0);
-
-  useEffect(() => {
-    let active = true;
-    const rule = matchRule(pathname);
-    setError(null);
-
-    async function run() {
-      if (!rule) return;
-
-      const token = getToken();
-
-      if (rule.guest) {
-        if (!token) {
-          setAllowedPath(pathname);
-          return;
-        }
-        try {
-          const profile = await apiClient.get<UserProfile>("/users/me");
-          if (!active) return;
-          router.replace(profile.profileComplete ? "/" : `/complete-profile?role=${profile.role}`);
-        } catch (error) {
-          if (!active) return;
-          if (error instanceof ApiError && error.status === 401) clearSession();
-          setAllowedPath(pathname);
-        }
-        return;
-      }
-
-      if (!token) {
-        router.replace("/login");
-        return;
-      }
-
-      try {
-        const profile = await apiClient.get<UserProfile>("/users/me");
-        if (!active) return;
-
-        const requireProfileComplete = rule.requireProfileComplete ?? true;
-        if (requireProfileComplete && !profile.profileComplete) {
-          router.replace(`/complete-profile?role=${profile.role}`);
-          return;
-        }
-        if (rule.redirectIfProfileComplete && profile.profileComplete) {
-          router.replace("/");
-          return;
-        }
-        if (rule.allowRoles && !rule.allowRoles.includes(profile.role)) {
-          router.replace("/");
-          return;
-        }
-        setAllowedPath(pathname);
-      } catch (error) {
-        if (!active) return;
-        if (error instanceof ApiError && error.status === 401) {
-          clearSession();
-          router.replace("/login");
-          return;
-        }
-        // Backend unreachable or another transient error: keep the session
-        // but never authorize the route on an unverified profile/role — show
-        // a retry instead of guessing.
-        setError(
-          error instanceof Error && error.message ? error.message : "Unable to verify your session."
-        );
-      }
-    }
-
-    void run();
-    return () => {
-      active = false;
-    };
-  }, [pathname, router, retryToken]);
-
-  if (!matchRule(pathname)) return <>{children}</>;
-
-  if (error) {
-    return (
-      <div className="flex min-h-[50vh] flex-col items-center justify-center gap-3 px-4 text-center">
-        <p className="text-sm text-ink">{error}</p>
-        <Button variant="outline" onClick={() => setRetryToken((token) => token + 1)}>
-          Retry
-        </Button>
-      </div>
-    );
-  }
-
-  if (allowedPath !== pathname) return null;
-
-  return <>{children}</>;
-}
diff --git a/apps/web/src/components/guards/auth-guard.tsx b/apps/web/src/components/guards/auth-guard.tsx
new file mode 100644
index 0000000..84d386a
--- /dev/null
+++ b/apps/web/src/components/guards/auth-guard.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect, type ReactNode } from "react";
+import { usePathname, useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { useAuth } from "@/contexts/auth-context";
+import { getToken } from "@/lib/auth-storage";
+import type { UserRole } from "@/types/auth";
+import type { UserProfile } from "@/types/user";
+
+type GuestRule = { prefix: string; guest: true };
+
+type ProtectedRule = {
+  prefix: string;
+  guest?: false;
+  /** Roles allowed to view this route. Omit to allow any signed-in role. */
+  allowRoles?: UserRole[];
+  /** False on complete-profile, which must stay reachable while incomplete. Default true. */
+  requireProfileComplete?: boolean;
+  /** True on complete-profile, so a finished profile bounces away instead of re-showing the form. */
+  redirectIfProfileComplete?: boolean;
+};
+
+type RouteRule = GuestRule | ProtectedRule;
+
+/**
+ * Every route that needs a signed-in (or signed-out) gate, keyed by path
+ * prefix. Add a new protected/guest page here instead of a new layout.tsx —
+ * one boundary, no per-route wiring.
+ */
+const ROUTE_RULES: RouteRule[] = [
+  { prefix: "/login", guest: true },
+  { prefix: "/register", guest: true },
+  { prefix: "/complete-profile", requireProfileComplete: false, redirectIfProfileComplete: true },
+  { prefix: "/balance", allowRoles: ["student"] },
+  { prefix: "/profile" },
+  { prefix: "/classroom" },
+  { prefix: "/message" },
+];
+
+function matchRule(pathname: string): RouteRule | undefined {
+  const matches = ROUTE_RULES.filter(
+    (rule) => pathname === rule.prefix || pathname.startsWith(`${rule.prefix}/`)
+  );
+  return matches.sort((a, b) => b.prefix.length - a.prefix.length)[0];
+}
+
+type Verdict = { type: "allow" } | { type: "redirect"; to: string } | { type: "wait" };
+
+function evaluate(rule: RouteRule, profile: UserProfile | null, hasToken: boolean): Verdict {
+  if (rule.guest) {
+    if (!hasToken) return { type: "allow" };
+    if (!profile) return { type: "wait" };
+    return {
+      type: "redirect",
+      to: profile.profileComplete ? "/" : `/complete-profile?role=${profile.role}`,
+    };
+  }
+
+  if (!hasToken) return { type: "redirect", to: "/login" };
+  if (!profile) return { type: "wait" };
+
+  const requireProfileComplete = rule.requireProfileComplete ?? true;
+  if (requireProfileComplete && !profile.profileComplete) {
+    return { type: "redirect", to: `/complete-profile?role=${profile.role}` };
+  }
+  if (rule.redirectIfProfileComplete && profile.profileComplete) {
+    return { type: "redirect", to: "/" };
+  }
+  if (rule.allowRoles && !rule.allowRoles.includes(profile.role)) {
+    return { type: "redirect", to: "/" };
+  }
+  return { type: "allow" };
+}
+
+/**
+ * Client-side gate mounted once in the root layout, inside AuthProvider.
+ * Matches the current path against `ROUTE_RULES` and redirects before
+ * rendering children, so protected content never flashes on screen.
+ * Unmatched paths (home, tutors, ...) render immediately.
+ */
+export function AuthGuard({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { profile, isLoading, error, refresh } = useAuth();
+  const rule = matchRule(pathname);
+
+  useEffect(() => {
+    if (!rule || isLoading) return;
+    const result = evaluate(rule, profile, Boolean(getToken()));
+    if (result.type === "redirect") router.replace(result.to);
+  }, [rule, profile, isLoading, router]);
+
+  if (!rule) return <>{children}</>;
+
+  if (error && !profile) {
+    return (
+      <div className="flex min-h-[50vh] flex-col items-center justify-center gap-3 px-4 text-center">
+        <p className="text-sm text-ink">{error}</p>
+        <Button variant="outline" onClick={() => void refresh()}>
+          Retry
+        </Button>
+      </div>
+    );
+  }
+
+  if (isLoading) return null;
+
+  if (evaluate(rule, profile, Boolean(getToken())).type !== "allow") return null;
+
+  return <>{children}</>;
+}
diff --git a/apps/web/src/components/profile/profile-panel.tsx b/apps/web/src/components/profile/profile-panel.tsx
deleted file mode 100644
index 85e7275..0000000
--- a/apps/web/src/components/profile/profile-panel.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useState } from "react";
-import { AlertCircle } from "lucide-react";
-import { useRouter } from "next/navigation";
-
-import { ProfileDetails } from "@/components/profile/profile-details";
-import { Button } from "@/components/ui/button";
-import { ApiError, apiClient } from "@/lib/api-client";
-import { clearSession, getToken } from "@/lib/auth-storage";
-import type { UserProfile } from "@/types/user";
-
-const LOAD_ERROR = "Unable to load your profile.";
-const NETWORK_ERROR = "Unable to reach the server. Please try again.";
-
-const SKELETON_CARD = "rounded-[10px] border border-hairline bg-canvas shadow-sm";
-
-function ProfileSkeleton() {
-  return (
-    <div
-      role="status"
-      aria-live="polite"
-      className="gap-base grid animate-pulse items-start lg:grid-cols-3"
-    >
-      <span className="sr-only">Loading your profile…</span>
-
-      <div className={`${SKELETON_CARD} flex flex-col items-center px-6 py-8`}>
-        <div className="bg-surface-disabled size-[120px] rounded-full" />
-        <div className="bg-surface-disabled mt-5 h-6 w-40 rounded-md" />
-        <div className="bg-surface-disabled mt-3 h-5 w-20 rounded-lg" />
-        <div className="bg-surface-disabled mt-4 h-4 w-44 rounded-md" />
-        <div className="border-hairline gap-lg mt-6 flex w-full flex-col border-t pt-6">
-          <div className="bg-surface-disabled h-9 w-32 rounded-md" />
-          <div className="bg-surface-disabled h-9 w-32 rounded-md" />
-        </div>
-      </div>
-
-      <div className={`${SKELETON_CARD} gap-xl flex flex-col px-6 py-8 sm:px-8 lg:col-span-2`}>
-        <div className="gap-xs flex flex-col">
-          <div className="bg-surface-disabled h-4 w-20 rounded-md" />
-          <div className="bg-surface-disabled h-4 w-full rounded-md" />
-        </div>
-        <div className="border-hairline border-t" />
-        <div className="gap-xs flex flex-col">
-          <div className="bg-surface-disabled h-4 w-24 rounded-md" />
-          <div className="bg-surface-disabled h-4 w-40 rounded-md" />
-        </div>
-        <div className="border-hairline border-t" />
-        <div className="gap-xs flex flex-col">
-          <div className="bg-surface-disabled h-4 w-28 rounded-md" />
-          <div className="bg-surface-disabled h-4 w-2/3 rounded-md" />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Loads the signed-in user's profile and hands it to the view. Kept separate
- * from the page so the route itself stays a server component and can export
- * metadata, and because the session token lives in localStorage — only the
- * browser can read it.
- */
-export function ProfilePanel() {
-  const router = useRouter();
-  const [profile, setProfile] = useState<UserProfile | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [loadError, setLoadError] = useState<string | null>(null);
-  const [isLoggingOut, setIsLoggingOut] = useState(false);
-  const [isStatusUpdating, setIsStatusUpdating] = useState(false);
-  const [statusError, setStatusError] = useState<string | null>(null);
-  const [statusMessage, setStatusMessage] = useState<string | null>(null);
-
-  /** A token the API rejects is worse than no token — drop it and start over. */
-  const endSession = useCallback(() => {
-    clearSession();
-    router.replace("/login");
-  }, [router]);
-
-  const handleLogout = useCallback(async () => {
-    setIsLoggingOut(true);
-    try {
-      await apiClient.post("/auth/logout", {});
-    } finally {
-      clearSession();
-      router.replace("/login");
-    }
-  }, [router]);
-
-  const handleAccountStatusToggle = useCallback(async () => {
-    if (!profile) return;
-
-    const nextStatus = profile.accountStatus === "ACTIVE" ? "INACTIVE" : "ACTIVE";
-    setIsStatusUpdating(true);
-    setStatusError(null);
-    setStatusMessage(null);
-
-    try {
-      const updatedProfile = await apiClient.patch<UserProfile>("/users/me/status", {
-        status: nextStatus,
-      });
-      setProfile(updatedProfile);
-      setStatusMessage(
-        nextStatus === "INACTIVE"
-          ? "Account is now inactive. Your data has been kept."
-          : "Account is now active."
-      );
-      router.refresh();
-    } catch (error) {
-      if (error instanceof ApiError && error.status === 401) {
-        endSession();
-        return;
-      }
-      setStatusError(
-        error instanceof Error ? error.message : "Unable to update your account status."
-      );
-    } finally {
-      setIsStatusUpdating(false);
-    }
-  }, [endSession, profile, router]);
-
-  const load = useCallback(async () => {
-    setIsLoading(true);
-    setLoadError(null);
-
-    try {
-      setProfile(await apiClient.get<UserProfile>("/users/me"));
-    } catch (error) {
-      if (error instanceof ApiError && error.status === 401) {
-        endSession();
-        return;
-      }
-      if (error instanceof TypeError) {
-        setLoadError(NETWORK_ERROR);
-      } else {
-        setLoadError(error instanceof Error && error.message ? error.message : LOAD_ERROR);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  }, [endSession]);
-
-  useEffect(() => {
-    if (!getToken()) {
-      router.replace("/login");
-      return;
-    }
-    void load();
-  }, [load, router]);
-
-  if (isLoading) {
-    return <ProfileSkeleton />;
-  }
-
-  if (loadError) {
-    return (
-      <section
-        role="alert"
-        className="border-hairline bg-canvas flex flex-col items-center gap-4 rounded-[10px] border px-6 py-16 text-center shadow-sm"
-      >
-        <span className="border-hairline flex size-12 items-center justify-center rounded-full border">
-          <AlertCircle aria-hidden="true" className="text-error size-6" />
-        </span>
-        <div className="flex flex-col gap-1">
-          <h1 className="font-outfit text-ink-black text-xl font-bold">
-            We couldn&apos;t load your profile
-          </h1>
-          <p className="font-inter text-caption text-ink">{loadError}</p>
-        </div>
-        <Button type="button" onClick={() => void load()}>
-          Try again
-        </Button>
-      </section>
-    );
-  }
-
-  if (!profile) return null;
-
-  return (
-    <ProfileDetails
-      profile={profile}
-      onLogout={handleLogout}
-      isLoggingOut={isLoggingOut}
-      onToggleAccountStatus={handleAccountStatusToggle}
-      isStatusUpdating={isStatusUpdating}
-      statusError={statusError}
-      statusMessage={statusMessage}
-    />
-  );
-}
diff --git a/apps/web/src/contexts/auth-context.tsx b/apps/web/src/contexts/auth-context.tsx
new file mode 100644
index 0000000..9aa424a
--- /dev/null
+++ b/apps/web/src/contexts/auth-context.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { usePathname, useRouter } from "next/navigation";
+
+import { ApiError, apiClient } from "@/lib/api-client";
+import { clearSession, getToken } from "@/lib/auth-storage";
+import type { UserProfile } from "@/types/user";
+
+type AuthContextValue = {
+  /** null while signed out; stays populated during a background revalidation. */
+  profile: UserProfile | null;
+  /** True only until the first check resolves — not on every revalidation. */
+  isLoading: boolean;
+  /** Set when a revalidation fails for a reason other than an expired session. */
+  error: string | null;
+  /** Re-fetches `/users/me`. Call after an action that can change role/profile state. */
+  refresh: () => Promise<void>;
+  logout: () => Promise<void>;
+};
+
+const AuthContext = createContext<AuthContextValue | undefined>(undefined);
+
+/**
+ * Single source of truth for the signed-in user's profile, shared by the
+ * Navbar, route guard, and profile page — previously each fetched
+ * `/users/me` (or read localStorage) independently and could disagree.
+ * Mounted once at the root; revalidates on navigation and on the `storage`
+ * event, which callers dispatch manually to signal a same-tab session change
+ * localStorage's own `storage` event doesn't fire for (see
+ * profile-completion-form.tsx).
+ */
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    if (!getToken()) {
+      setProfile(null);
+      setError(null);
+      setIsLoading(false);
+      return;
+    }
+
+    setError(null);
+    try {
+      const data = await apiClient.get<UserProfile>("/users/me");
+      setProfile(data);
+    } catch (err) {
+      if (err instanceof ApiError && err.status === 401) {
+        clearSession();
+        setProfile(null);
+      } else {
+        // Transient failure: keep whatever profile we already had rather
+        // than signing the user out over a flaky connection.
+        setError(
+          err instanceof Error && err.message ? err.message : "Unable to verify your session."
+        );
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load, pathname]);
+
+  useEffect(() => {
+    window.addEventListener("storage", load);
+    return () => window.removeEventListener("storage", load);
+  }, [load]);
+
+  const logout = useCallback(async () => {
+    try {
+      await apiClient.post("/auth/logout", {});
+    } finally {
+      clearSession();
+      setProfile(null);
+      router.replace("/login");
+    }
+  }, [router]);
+
+  const value = useMemo(
+    () => ({ profile, isLoading, error, refresh: load, logout }),
+    [profile, isLoading, error, load, 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;
+}
diff --git a/apps/web/src/components/auth/login-form.stories.tsx b/apps/web/src/features/auth/login-form.stories.tsx
similarity index 100%
rename from apps/web/src/components/auth/login-form.stories.tsx
rename to apps/web/src/features/auth/login-form.stories.tsx
diff --git a/apps/web/src/components/auth/login-form.tsx b/apps/web/src/features/auth/login-form.tsx
similarity index 100%
rename from apps/web/src/components/auth/login-form.tsx
rename to apps/web/src/features/auth/login-form.tsx
diff --git a/apps/web/src/components/auth/login-panel.tsx b/apps/web/src/features/auth/login-panel.tsx
similarity index 92%
rename from apps/web/src/components/auth/login-panel.tsx
rename to apps/web/src/features/auth/login-panel.tsx
index b417c52..77ff649 100644
--- a/apps/web/src/components/auth/login-panel.tsx
+++ b/apps/web/src/features/auth/login-panel.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { LoginForm, type LoginFormValues } from "@/components/auth/login-form";
+import { LoginForm, type LoginFormValues } from "@/features/auth/login-form";
 import { apiClient } from "@/lib/api-client";
 import { saveSession } from "@/lib/auth-storage";
 import type { LoginResponse } from "@/types/auth";
diff --git a/apps/web/src/components/auth/registration-form.stories.tsx b/apps/web/src/features/auth/registration-form.stories.tsx
similarity index 100%
rename from apps/web/src/components/auth/registration-form.stories.tsx
rename to apps/web/src/features/auth/registration-form.stories.tsx
diff --git a/apps/web/src/components/auth/registration-form.tsx b/apps/web/src/features/auth/registration-form.tsx
similarity index 100%
rename from apps/web/src/components/auth/registration-form.tsx
rename to apps/web/src/features/auth/registration-form.tsx
diff --git a/apps/web/src/components/auth/registration-panel.tsx b/apps/web/src/features/auth/registration-panel.tsx
similarity index 95%
rename from apps/web/src/components/auth/registration-panel.tsx
rename to apps/web/src/features/auth/registration-panel.tsx
index 928e31f..57e5348 100644
--- a/apps/web/src/components/auth/registration-panel.tsx
+++ b/apps/web/src/features/auth/registration-panel.tsx
@@ -2,7 +2,7 @@
 
 import { useRouter } from "next/navigation";
 
-import { RegistrationForm, type RegistrationFormValues } from "@/components/auth/registration-form";
+import { RegistrationForm, type RegistrationFormValues } from "@/features/auth/registration-form";
 import { apiClient } from "@/lib/api-client";
 import { saveSession } from "@/lib/auth-storage";
 import type { RegistrationResponse } from "@/types/auth";
diff --git a/apps/web/src/components/profile/profile-avatar.tsx b/apps/web/src/features/profile/profile-avatar.tsx
similarity index 100%
rename from apps/web/src/components/profile/profile-avatar.tsx
rename to apps/web/src/features/profile/profile-avatar.tsx
diff --git a/apps/web/src/components/profile/profile-completion-form.tsx b/apps/web/src/features/profile/profile-completion-form.tsx
similarity index 100%
rename from apps/web/src/components/profile/profile-completion-form.tsx
rename to apps/web/src/features/profile/profile-completion-form.tsx
diff --git a/apps/web/src/components/profile/profile-details.stories.tsx b/apps/web/src/features/profile/profile-details.stories.tsx
similarity index 100%
rename from apps/web/src/components/profile/profile-details.stories.tsx
rename to apps/web/src/features/profile/profile-details.stories.tsx
diff --git a/apps/web/src/components/profile/profile-details.tsx b/apps/web/src/features/profile/profile-details.tsx
similarity index 99%
rename from apps/web/src/components/profile/profile-details.tsx
rename to apps/web/src/features/profile/profile-details.tsx
index e37d5f9..fb1d562 100644
--- a/apps/web/src/components/profile/profile-details.tsx
+++ b/apps/web/src/features/profile/profile-details.tsx
@@ -3,7 +3,7 @@
 import { LogOut, Mail, Pencil } from "lucide-react";
 import Link from "next/link";
 
-import { ProfileAvatar } from "@/components/profile/profile-avatar";
+import { ProfileAvatar } from "@/features/profile/profile-avatar";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import type { UserProfile } from "@/types/user";
diff --git a/apps/web/src/components/profile/profile-edit-form.tsx b/apps/web/src/features/profile/profile-edit-form.tsx
similarity index 98%
rename from apps/web/src/components/profile/profile-edit-form.tsx
rename to apps/web/src/features/profile/profile-edit-form.tsx
index 204f86d..6f5aa15 100644
--- a/apps/web/src/components/profile/profile-edit-form.tsx
+++ b/apps/web/src/features/profile/profile-edit-form.tsx
@@ -11,9 +11,10 @@ import { Input } from "@/components/ui/input";
 import { MultiSelect } from "@/components/ui/multi-select";
 import { Select } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
+import { useAuth } from "@/contexts/auth-context";
 import { ApiError, apiClient } from "@/lib/api-client";
 import { clearSession, getToken, saveSession } from "@/lib/auth-storage";
-import { GRADE_LEVELS } from "@/components/profile/profile-completion-form";
+import { GRADE_LEVELS } from "@/features/profile/profile-completion-form";
 import type { Subject } from "@/types/subject";
 import type { ProfileUpdateResponse, UserProfile } from "@/types/user";
 
@@ -33,6 +34,7 @@ function haveSameSubjectIds(left: string[], right: string[]) {
 
 export function ProfileEditForm() {
   const router = useRouter();
+  const { refresh } = useAuth();
   const [profile, setProfile] = useState<UserProfile | null>(null);
   const [name, setName] = useState("");
   const [about, setAbout] = useState("");
@@ -164,6 +166,7 @@ export function ProfileEditForm() {
         saveSession({ token, user: { id, name, email, role, profileUrl } });
       }
       setSaved(true);
+      void refresh();
       router.refresh();
     } catch (error) {
       if (error instanceof ApiError && error.status === 401) {
diff --git a/apps/web/src/features/profile/profile-panel.tsx b/apps/web/src/features/profile/profile-panel.tsx
new file mode 100644
index 0000000..34b253e
--- /dev/null
+++ b/apps/web/src/features/profile/profile-panel.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useRouter } from "next/navigation";
+
+import { ProfileDetails } from "@/features/profile/profile-details";
+import { useAuth } from "@/contexts/auth-context";
+import { ApiError, apiClient } from "@/lib/api-client";
+import type { UserProfile } from "@/types/user";
+
+/**
+ * Renders the signed-in user's profile. Reads from AuthContext rather than
+ * fetching its own copy — the route guard (`AuthGuard`) already blocks
+ * this page behind a loaded profile, so `profile` is never null here.
+ */
+export function ProfilePanel() {
+  const router = useRouter();
+  const { profile, refresh, logout } = useAuth();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const [isStatusUpdating, setIsStatusUpdating] = useState(false);
+  const [statusError, setStatusError] = useState<string | null>(null);
+  const [statusMessage, setStatusMessage] = useState<string | null>(null);
+
+  const handleLogout = useCallback(async () => {
+    setIsLoggingOut(true);
+    await logout();
+  }, [logout]);
+
+  const handleAccountStatusToggle = useCallback(async () => {
+    if (!profile) return;
+
+    const nextStatus = profile.accountStatus === "ACTIVE" ? "INACTIVE" : "ACTIVE";
+    setIsStatusUpdating(true);
+    setStatusError(null);
+    setStatusMessage(null);
+
+    try {
+      await apiClient.patch<UserProfile>("/users/me/status", { status: nextStatus });
+      await refresh();
+      setStatusMessage(
+        nextStatus === "INACTIVE"
+          ? "Account is now inactive. Your data has been kept."
+          : "Account is now active."
+      );
+      router.refresh();
+    } catch (error) {
+      if (error instanceof ApiError && error.status === 401) {
+        await logout();
+        return;
+      }
+      setStatusError(
+        error instanceof Error ? error.message : "Unable to update your account status."
+      );
+    } finally {
+      setIsStatusUpdating(false);
+    }
+  }, [logout, profile, refresh, router]);
+
+  if (!profile) return null;
+
+  return (
+    <ProfileDetails
+      profile={profile}
+      onLogout={handleLogout}
+      isLoggingOut={isLoggingOut}
+      onToggleAccountStatus={handleAccountStatusToggle}
+      isStatusUpdating={isStatusUpdating}
+      statusError={statusError}
+      statusMessage={statusMessage}
+    />
+  );
+}
diff --git a/apps/web/src/components/wallet/top-up-form.tsx b/apps/web/src/features/wallet/top-up-form.tsx
similarity index 97%
rename from apps/web/src/components/wallet/top-up-form.tsx
rename to apps/web/src/features/wallet/top-up-form.tsx
index 97b7e5e..299b46a 100644
--- a/apps/web/src/components/wallet/top-up-form.tsx
+++ b/apps/web/src/features/wallet/top-up-form.tsx
@@ -3,12 +3,14 @@
 import { useEffect, useRef, useState, type FormEvent } from "react";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
+import { useAuth } from "@/contexts/auth-context";
 import { apiClient } from "@/lib/api-client";
 import { getToken, getUser } from "@/lib/auth-storage";
 import type { Wallet, WalletBalance } from "@/types/wallet";
 
 export function TopUpForm() {
   const router = useRouter();
+  const { refresh } = useAuth();
   const [wallet, setWallet] = useState<Wallet | null>(null);
   const [amount, setAmount] = useState<number | null>(null);
   const [error, setError] = useState("");
@@ -55,7 +57,7 @@ export function TopUpForm() {
       setWallet({ ...wallet, ...updated });
       setAmount(null);
       setSuccess(`Added $${amount} in demo credit to your balance.`);
-      window.dispatchEvent(new Event("wallet-updated"));
+      void refresh();
       router.refresh();
     } catch (err) {
       setError(err instanceof Error ? err.message : "Unable to top up your balance.");

From 4dc6789fe04bd33fcd9d7b6e40f1ede74d2fdc1a Mon Sep 17 00:00:00 2001
From: Nat Silprasert <natsilprasert@gmail.com>
Date: Mon, 14 Sep 2026 14:00:31 +0700
Subject: [PATCH 2/5] fix: delete storybook

---
 .../src/features/auth/login-form.stories.tsx  |  64 ------
 .../auth/registration-form.stories.tsx        | 187 ------------------
 .../profile/profile-details.stories.tsx       |  95 ---------
 3 files changed, 346 deletions(-)
 delete mode 100644 apps/web/src/features/auth/login-form.stories.tsx
 delete mode 100644 apps/web/src/features/auth/registration-form.stories.tsx
 delete mode 100644 apps/web/src/features/profile/profile-details.stories.tsx

diff --git a/apps/web/src/features/auth/login-form.stories.tsx b/apps/web/src/features/auth/login-form.stories.tsx
deleted file mode 100644
index 18f382e..0000000
--- a/apps/web/src/features/auth/login-form.stories.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { LoginForm } from "./login-form";
-
-const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
-
-const meta = {
-  title: "Auth/LoginForm",
-  component: LoginForm,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "Login form for the email/password flow. Field errors are validated on submit; " +
-          "credential failures surface as a single form-level message so the UI never " +
-          "reveals whether the email or the password was wrong. Press **Log in** in each " +
-          "story to see the state it demonstrates.",
-      },
-    },
-  },
-  tags: ["autodocs"],
-  args: {
-    onSubmit: async () => delay(600),
-  },
-} satisfies Meta<typeof LoginForm>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Happy path — resolves after a short delay, as a successful login would. */
-export const Default: Story = {};
-
-/** Submit with both fields empty to see the per-field required messages. */
-export const ValidationErrors: Story = {};
-
-/** Submit anything to see the loading state; the promise never settles. */
-export const Submitting: Story = {
-  args: {
-    onSubmit: () => new Promise<void>(() => {}),
-  },
-};
-
-/**
- * What a 401 looks like. The API answers a wrong password and an unknown email
- * with this same message, so the form cannot distinguish the two either.
- */
-export const InvalidCredentials: Story = {
-  args: {
-    onSubmit: async () => {
-      await delay(600);
-      throw new Error("Invalid email or password");
-    },
-  },
-};
-
-/** A fetch-level failure (API down, no network) rather than a rejected login. */
-export const ServerUnreachable: Story = {
-  args: {
-    onSubmit: async () => {
-      await delay(600);
-      throw new TypeError("Failed to fetch");
-    },
-  },
-};
diff --git a/apps/web/src/features/auth/registration-form.stories.tsx b/apps/web/src/features/auth/registration-form.stories.tsx
deleted file mode 100644
index b831c2c..0000000
--- a/apps/web/src/features/auth/registration-form.stories.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { expect, fn, userEvent, within } from "storybook/test";
-
-import { RegistrationForm } from "./registration-form";
-
-const delay = (milliseconds: number) =>
-  new Promise<void>((resolve) => setTimeout(resolve, milliseconds));
-
-async function fillForm(
-  canvasElement: HTMLElement,
-  values: {
-    email?: string;
-    password?: string;
-    confirmPassword?: string;
-  } = {}
-) {
-  const canvas = within(canvasElement);
-
-  await userEvent.type(
-    canvas.getByRole("textbox", { name: "Gmail" }),
-    values.email ?? "user@gmail.com"
-  );
-  await userEvent.type(canvas.getByLabelText("Password"), values.password ?? "password");
-  await userEvent.type(
-    canvas.getByLabelText("Confirm password"),
-    values.confirmPassword ?? "password"
-  );
-
-  return canvas;
-}
-
-const meta = {
-  title: "Auth/RegistrationForm",
-  component: RegistrationForm,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "Frontend-only student and tutor registration form. Each validation and submission " +
-          "story runs its interaction automatically when opened.",
-      },
-    },
-  },
-  tags: ["autodocs"],
-  args: {
-    onSubmit: async () => delay(400),
-  },
-} satisfies Meta<typeof RegistrationForm>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Student: Story = {};
-
-export const Tutor: Story = {
-  args: {
-    defaultRole: "tutor",
-  },
-};
-
-export const RoleSwitchPreservesFields: Story = {
-  args: {
-    onSubmit: fn(async () => undefined),
-  },
-  play: async ({ args, canvasElement }) => {
-    const canvas = await fillForm(canvasElement);
-    const email = canvas.getByRole("textbox", { name: "Gmail" });
-    const password = canvas.getByLabelText("Password");
-    const confirmPassword = canvas.getByLabelText("Confirm password");
-
-    await userEvent.click(canvas.getByRole("combobox", { name: "Signing up as" }));
-    await userEvent.click(canvas.getByRole("option", { name: "Tutor" }));
-
-    await expect(canvas.getByRole("combobox", { name: "Signing up as" })).toHaveTextContent(
-      "Tutor"
-    );
-    await expect(email).toHaveValue("user@gmail.com");
-    await expect(password).toHaveValue("password");
-    await expect(confirmPassword).toHaveValue("password");
-
-    await userEvent.click(canvas.getByRole("combobox", { name: "Signing up as" }));
-    await userEvent.click(canvas.getByRole("option", { name: "Student" }));
-
-    await expect(canvas.getByRole("combobox", { name: "Signing up as" })).toHaveTextContent(
-      "Student"
-    );
-    await expect(email).toHaveValue("user@gmail.com");
-    await expect(password).toHaveValue("password");
-    await expect(confirmPassword).toHaveValue("password");
-
-    await userEvent.click(canvas.getByRole("button", { name: "Sign up" }));
-    await expect(args.onSubmit).toHaveBeenCalledWith({
-      role: "student",
-      email: "user@gmail.com",
-      password: "password",
-      confirmPassword: "password",
-    });
-  },
-};
-
-export const EmptyFieldErrors: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Sign up" }));
-
-    await expect(canvas.getByText("Gmail is required")).toBeVisible();
-    await expect(canvas.getByText("Password is required")).toBeVisible();
-    await expect(canvas.getByText("Please confirm your password")).toBeVisible();
-  },
-};
-
-export const InvalidGmail: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = await fillForm(canvasElement, { email: "user@example.com" });
-    await userEvent.click(canvas.getByRole("button", { name: "Sign up" }));
-
-    await expect(canvas.getByText("Please enter a valid Gmail address")).toBeVisible();
-  },
-};
-
-export const ShortPassword: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = await fillForm(canvasElement, {
-      password: "short",
-      confirmPassword: "short",
-    });
-    await userEvent.click(canvas.getByRole("button", { name: "Sign up" }));
-
-    await expect(canvas.getByText("Password must be at least 8 characters")).toBeVisible();
-  },
-};
-
-export const MismatchedConfirmation: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = await fillForm(canvasElement, { confirmPassword: "different" });
-    await userEvent.click(canvas.getByRole("button", { name: "Sign up" }));
-
-    await expect(canvas.getByText("Passwords do not match")).toBeVisible();
-  },
-};
-
-export const Submitting: Story = {
-  args: {
-    onSubmit: () => new Promise<void>(() => undefined),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = await fillForm(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Sign up" }));
-
-    await expect(canvas.getByRole("button", { name: "Sign up" })).toHaveAttribute(
-      "aria-busy",
-      "true"
-    );
-    await expect(canvas.getByRole("combobox", { name: "Signing up as" })).toBeDisabled();
-  },
-};
-
-export const GenericRejection: Story = {
-  args: {
-    onSubmit: async () => {
-      throw new Error();
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = await fillForm(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Sign up" }));
-
-    await expect(canvas.findByText("Unable to sign up. Please try again.")).resolves.toBeVisible();
-  },
-};
-
-export const NetworkRejection: Story = {
-  args: {
-    onSubmit: async () => {
-      throw new TypeError("Failed to fetch");
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = await fillForm(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Sign up" }));
-
-    await expect(
-      canvas.findByText("Unable to reach the server. Please try again.")
-    ).resolves.toBeVisible();
-  },
-};
diff --git a/apps/web/src/features/profile/profile-details.stories.tsx b/apps/web/src/features/profile/profile-details.stories.tsx
deleted file mode 100644
index fb0ae0b..0000000
--- a/apps/web/src/features/profile/profile-details.stories.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { ProfileDetails } from "./profile-details";
-import type { UserProfile } from "@/types/user";
-
-const studentProfile: UserProfile = {
-  id: "0f7d4b9a-6b6a-4a1f-9a5c-2b8f2f0c1d11",
-  name: "Mali Chen",
-  email: "mali@example.com",
-  role: "student",
-  accountStatus: "ACTIVE",
-  profileUrl: null,
-  bio: "Year 11 student aiming for a science scholarship.",
-  hourlyRate: null,
-  gradeLevel: "Grade 11",
-  goals: "Get comfortable with calculus before my final exam in March.",
-  walletBalance: 120.5,
-  profileComplete: true,
-  createdAt: "2026-01-15T08:30:00.000Z",
-  subjects: [],
-};
-
-const tutorProfile: UserProfile = {
-  id: "2c1e8f3d-7a45-4f2b-9c31-77c5d0a9e402",
-  name: "Alex Rivera",
-  email: "alex@example.com",
-  role: "tutor",
-  accountStatus: "INACTIVE",
-  profileUrl: null,
-  bio: "Ten years teaching physics and maths, mostly to exam-year students.",
-  hourlyRate: 25,
-  gradeLevel: null,
-  goals: null,
-  walletBalance: 1840,
-  profileComplete: true,
-  createdAt: "2025-09-02T08:30:00.000Z",
-  subjects: [
-    { id: "s1", name: "Mathematics" },
-    { id: "s2", name: "Physics" },
-  ],
-};
-
-const meta = {
-  title: "Profile/ProfileDetails",
-  component: ProfileDetails,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component:
-          "Renders the signed-in user's profile. The panel owns the data, so this " +
-          "component only displays what it is given — which fields appear depends on " +
-          "whether the profile belongs to a student or a tutor.",
-      },
-    },
-  },
-  tags: ["autodocs"],
-  args: {
-    profile: studentProfile,
-  },
-} satisfies Meta<typeof ProfileDetails>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** A student: grade level and learning goals, no rate or subjects. */
-export const Student: Story = {};
-
-/** A tutor: hourly rate and the subject list replace the student fields. */
-export const Tutor: Story = {
-  args: { profile: tutorProfile },
-};
-
-/** Everything optional left unset — each field falls back to a muted placeholder. */
-export const EmptyProfile: Story = {
-  args: {
-    profile: {
-      ...studentProfile,
-      name: null,
-      bio: null,
-      gradeLevel: null,
-      goals: null,
-      walletBalance: 0,
-    },
-  },
-};
-
-/** With a photo — the avatar renders the linked image instead of the placeholder. */
-export const WithPhoto: Story = {
-  args: {
-    profile: {
-      ...tutorProfile,
-      profileUrl: "https://placecats.com/224/224",
-    },
-  },
-};

From 54c39c7bfff3dd2720f7f30a4f210d3179ad17e0 Mon Sep 17 00:00:00 2001
From: Nat Silprasert <natsilprasert@gmail.com>
Date: Mon, 14 Sep 2026 14:02:41 +0700
Subject: [PATCH 3/5] fix: remove my profile from navbar

---
 apps/web/src/components/Navbar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/src/components/Navbar.tsx b/apps/web/src/components/Navbar.tsx
index c23c7b3..20ae524 100644
--- a/apps/web/src/components/Navbar.tsx
+++ b/apps/web/src/components/Navbar.tsx
@@ -13,7 +13,6 @@ const NAV_LINKS = [
   { label: "Find tutors", href: "/tutors" },
   { label: "My classroom", href: "/classroom" },
   { label: "Message", href: "/message" },
-  { label: "My profile", href: "/profile" },
 ];
 
 const FOCUSABLE_SELECTOR =

From 90d87127825605ffc58d225b5d9625bc24225408 Mon Sep 17 00:00:00 2001
From: Nat Silprasert <natsilprasert@gmail.com>
Date: Mon, 14 Sep 2026 14:12:11 +0700
Subject: [PATCH 4/5] fix: trust the signed-in user's role for profile
 completion, not the URL

- ProfileCompletionForm now reads role from AuthContext instead of a
  ?role= query param, so a student can no longer render/submit the tutor
  completion form (or vice versa) by editing the URL.
- AuthGuard now also redirects a signed-in incomplete profile to
  /complete-profile from unmatched (public) routes like / and /tutors,
  not just the explicitly guarded ones.
---
 apps/web/src/app/complete-profile/page.tsx    | 12 ++---------
 apps/web/src/components/guards/auth-guard.tsx | 21 ++++++++++++-------
 .../src/features/auth/registration-panel.tsx  |  2 +-
 .../profile/profile-completion-form.tsx       | 17 ++++++++-------
 4 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/apps/web/src/app/complete-profile/page.tsx b/apps/web/src/app/complete-profile/page.tsx
index f5e1439..263d71b 100644
--- a/apps/web/src/app/complete-profile/page.tsx
+++ b/apps/web/src/app/complete-profile/page.tsx
@@ -7,19 +7,11 @@ export const metadata: Metadata = {
   description: "Finish setting up your Tutorist profile.",
 };
 
-type CompleteProfilePageProps = {
-  searchParams: Promise<{ role?: string }>;
-};
-
-export default async function CompleteProfilePage({ searchParams }: CompleteProfilePageProps) {
-  const { role } = await searchParams;
-  const normalizedRole = role?.trim().toLowerCase();
-  const profileRole = normalizedRole === "tutor" ? "tutor" : "student";
-
+export default function CompleteProfilePage() {
   return (
     <main className="flex min-h-[calc(100vh-64px)] items-center bg-[#faf9fc] px-4 py-6 sm:px-6 sm:py-10 lg:px-10">
       <div className="mx-auto w-full max-w-6xl">
-        <ProfileCompletionForm role={profileRole} />
+        <ProfileCompletionForm />
       </div>
     </main>
   );
diff --git a/apps/web/src/components/guards/auth-guard.tsx b/apps/web/src/components/guards/auth-guard.tsx
index 84d386a..b49e292 100644
--- a/apps/web/src/components/guards/auth-guard.tsx
+++ b/apps/web/src/components/guards/auth-guard.tsx
@@ -52,10 +52,7 @@ function evaluate(rule: RouteRule, profile: UserProfile | null, hasToken: boolea
   if (rule.guest) {
     if (!hasToken) return { type: "allow" };
     if (!profile) return { type: "wait" };
-    return {
-      type: "redirect",
-      to: profile.profileComplete ? "/" : `/complete-profile?role=${profile.role}`,
-    };
+    return { type: "redirect", to: profile.profileComplete ? "/" : "/complete-profile" };
   }
 
   if (!hasToken) return { type: "redirect", to: "/login" };
@@ -63,7 +60,7 @@ function evaluate(rule: RouteRule, profile: UserProfile | null, hasToken: boolea
 
   const requireProfileComplete = rule.requireProfileComplete ?? true;
   if (requireProfileComplete && !profile.profileComplete) {
-    return { type: "redirect", to: `/complete-profile?role=${profile.role}` };
+    return { type: "redirect", to: "/complete-profile" };
   }
   if (rule.redirectIfProfileComplete && profile.profileComplete) {
     return { type: "redirect", to: "/" };
@@ -78,7 +75,11 @@ function evaluate(rule: RouteRule, profile: UserProfile | null, hasToken: boolea
  * Client-side gate mounted once in the root layout, inside AuthProvider.
  * Matches the current path against `ROUTE_RULES` and redirects before
  * rendering children, so protected content never flashes on screen.
- * Unmatched paths (home, tutors, ...) render immediately.
+ * Unmatched paths (home, tutors, ...) render immediately for anyone signed
+ * out or with a complete profile; a signed-in incomplete profile still gets
+ * bounced to /complete-profile from there via the effect below — a brief
+ * flash of that public page's (already-public) content is an acceptable
+ * trade for not delaying first paint on every route for the common case.
  */
 export function AuthGuard({ children }: { children: ReactNode }) {
   const pathname = usePathname();
@@ -87,7 +88,13 @@ export function AuthGuard({ children }: { children: ReactNode }) {
   const rule = matchRule(pathname);
 
   useEffect(() => {
-    if (!rule || isLoading) return;
+    if (isLoading) return;
+
+    if (!rule) {
+      if (profile && !profile.profileComplete) router.replace("/complete-profile");
+      return;
+    }
+
     const result = evaluate(rule, profile, Boolean(getToken()));
     if (result.type === "redirect") router.replace(result.to);
   }, [rule, profile, isLoading, router]);
diff --git a/apps/web/src/features/auth/registration-panel.tsx b/apps/web/src/features/auth/registration-panel.tsx
index 57e5348..5e703e7 100644
--- a/apps/web/src/features/auth/registration-panel.tsx
+++ b/apps/web/src/features/auth/registration-panel.tsx
@@ -18,7 +18,7 @@ export function RegistrationPanel() {
     });
 
     saveSession(registration);
-    router.push(`/complete-profile?role=${registration.user.role}`);
+    router.push("/complete-profile");
     router.refresh();
   }
 
diff --git a/apps/web/src/features/profile/profile-completion-form.tsx b/apps/web/src/features/profile/profile-completion-form.tsx
index 04a2805..79498ba 100644
--- a/apps/web/src/features/profile/profile-completion-form.tsx
+++ b/apps/web/src/features/profile/profile-completion-form.tsx
@@ -9,16 +9,11 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
+import { useAuth } from "@/contexts/auth-context";
 import { apiClient } from "@/lib/api-client";
 import { getToken, getUser, saveUser } from "@/lib/auth-storage";
 import type { PublicUser } from "@/types/user";
 
-type UserRole = "student" | "tutor";
-
-type ProfileCompletionFormProps = {
-  role: UserRole;
-};
-
 export const GRADE_LEVELS = [
   "Grade 7",
   "Grade 8",
@@ -30,8 +25,16 @@ export const GRADE_LEVELS = [
   "Other",
 ];
 
-export function ProfileCompletionForm({ role }: ProfileCompletionFormProps) {
+/**
+ * `role` always comes from the signed-in user's own profile (via
+ * AuthContext), never from a URL param — AuthGuard already guarantees a
+ * loaded profile before this route renders, and trusting a query string
+ * here would let a student render (and submit) the tutor form and vice versa.
+ */
+export function ProfileCompletionForm() {
   const router = useRouter();
+  const { profile } = useAuth();
+  const role = profile?.role ?? "student";
   const photoInputId = useId();
   const [name, setName] = useState("");
   const [profileImage, setProfileImage] = useState<File | null>(null);

From e4dfb5b9f843c4a26d62e374a6842159ca3e051e Mon Sep 17 00:00:00 2001
From: Nat Silprasert <natsilprasert@gmail.com>
Date: Mon, 14 Sep 2026 14:27:17 +0700
Subject: [PATCH 5/5] fix: refresh AuthContext after completing profile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Calling POST /users/profile changes profileComplete, but the previous storage-event dispatch only ran when getUser() returned a cached user — if it returned null, AuthContext kept profileComplete:false and AuthGuard bounced the user back to /complete-profile from every page.
---
 apps/web/src/features/profile/profile-completion-form.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/features/profile/profile-completion-form.tsx b/apps/web/src/features/profile/profile-completion-form.tsx
index 79498ba..f258834 100644
--- a/apps/web/src/features/profile/profile-completion-form.tsx
+++ b/apps/web/src/features/profile/profile-completion-form.tsx
@@ -33,7 +33,7 @@ export const GRADE_LEVELS = [
  */
 export function ProfileCompletionForm() {
   const router = useRouter();
-  const { profile } = useAuth();
+  const { profile, refresh } = useAuth();
   const role = profile?.role ?? "student";
   const photoInputId = useId();
   const [name, setName] = useState("");
@@ -112,6 +112,7 @@ export function ProfileCompletionForm() {
         window.dispatchEvent(new Event("storage"));
       }
 
+      await refresh();
       router.refresh();
       setSubmitted(true);
     } catch (error) {