feat: Implement Supabase authentication, account management UI, and entitlement services.

frontend/app/account/page.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import { I18nProvider } from "@/hooks/useI18n";
+import { AccountCenter } from "@/components/account/AccountCenter";
+
+export const metadata: Metadata = {
+  title: "PolyWeather | Account Center",
+  description: "PolyWeather account center for identity and entitlement status.",
+};
+
+export default function AccountPage() {
+  return (
+    <I18nProvider>
+      <AccountCenter />
+    </I18nProvider>
+  );
+}
+

frontend/app/api/auth/me/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  applyAuthResponseCookies,
+  buildBackendRequestHeaders,
+} from "@/lib/backend-auth";
+
+const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
+
+export async function GET(req: NextRequest) {
+  if (!API_BASE) {
+    return NextResponse.json(
+      { error: "POLYWEATHER_API_BASE_URL is not configured" },
+      { status: 500 },
+    );
+  }
+
+  try {
+    const auth = await buildBackendRequestHeaders(req);
+    const res = await fetch(`${API_BASE}/api/auth/me`, {
+      headers: auth.headers,
+      cache: "no-store",
+    });
+    if (!res.ok) {
+      const raw = await res.text();
+      const response = NextResponse.json(
+        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
+        { status: 502 },
+      );
+      return applyAuthResponseCookies(response, auth.response);
+    }
+    const data = await res.json();
+    const response = NextResponse.json(data);
+    return applyAuthResponseCookies(response, auth.response);
+  } catch (error) {
+    return NextResponse.json(
+      { error: "Failed to fetch auth profile", detail: String(error) },
+      { status: 500 },
+    );
+  }
+}
+

frontend/app/api/cities/route.ts

@@ -1,5 +1,8 @@
 import { NextRequest, NextResponse } from "next/server";
-import { buildBackendRequestHeaders } from "@/lib/backend-auth";
+import {
+  applyAuthResponseCookies,
+  buildBackendRequestHeaders,
+} from "@/lib/backend-auth";
 import { buildCachedJsonResponse } from "@/lib/http-cache";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
@@ -7,34 +10,39 @@ export const dynamic = "force-dynamic";
 
 export async function GET(req: NextRequest) {
   if (!API_BASE) {
-    return NextResponse.json(
+    const response = NextResponse.json(
       { error: "POLYWEATHER_API_BASE_URL is not configured" },
       { status: 500 },
     );
+    return response;
   }
 
   try {
+    const auth = await buildBackendRequestHeaders(req);
     const res = await fetch(`${API_BASE}/api/cities`, {
-      headers: buildBackendRequestHeaders(),
+      headers: auth.headers,
       cache: "no-store",
     });
     if (!res.ok) {
       const raw = await res.text();
-      return NextResponse.json(
+      const response = NextResponse.json(
         { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
         { status: 502 },
       );
+      return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
-    return buildCachedJsonResponse(
+    const response = buildCachedJsonResponse(
       req,
       data,
       "public, max-age=0, s-maxage=300, stale-while-revalidate=1800",
     );
+    return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
+    const response = NextResponse.json(
       { error: "Failed to fetch cities", detail: String(error) },
       { status: 500 },
     );
+    return response;
   }
 }

frontend/app/api/city/[name]/detail/route.ts

@@ -1,5 +1,8 @@
 import { NextRequest, NextResponse } from "next/server";
-import { buildBackendRequestHeaders } from "@/lib/backend-auth";
+import {
+  applyAuthResponseCookies,
+  buildBackendRequestHeaders,
+} from "@/lib/backend-auth";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -8,10 +11,11 @@ export async function GET(
   context: { params: Promise<{ name: string }> },
 ) {
   if (!API_BASE) {
-    return NextResponse.json(
+    const response = NextResponse.json(
       { error: "POLYWEATHER_API_BASE_URL is not configured" },
       { status: 500 },
     );
+    return response;
   }
 
   const { name } = await context.params;
@@ -30,23 +34,27 @@ export async function GET(
   const url = `${API_BASE}/api/city/${encodeURIComponent(name)}/detail?${searchParams.toString()}`;
 
   try {
+    const auth = await buildBackendRequestHeaders(req);
     const res = await fetch(url, {
-      headers: buildBackendRequestHeaders(),
+      headers: auth.headers,
       cache: "no-store",
     });
     if (!res.ok) {
       const raw = await res.text();
-      return NextResponse.json(
+      const response = NextResponse.json(
         { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
         { status: 502 },
       );
+      return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
-    return NextResponse.json(data);
+    const response = NextResponse.json(data);
+    return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
+    const response = NextResponse.json(
       { error: "Failed to fetch city detail aggregate", detail: String(error) },
       { status: 500 },
     );
+    return response;
   }
 }

frontend/app/api/city/[name]/route.ts

@@ -1,5 +1,8 @@
 import { NextRequest, NextResponse } from "next/server";
-import { buildBackendRequestHeaders } from "@/lib/backend-auth";
+import {
+  applyAuthResponseCookies,
+  buildBackendRequestHeaders,
+} from "@/lib/backend-auth";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -8,10 +11,11 @@ export async function GET(
   context: { params: Promise<{ name: string }> },
 ) {
   if (!API_BASE) {
-    return NextResponse.json(
+    const response = NextResponse.json(
       { error: "POLYWEATHER_API_BASE_URL is not configured" },
       { status: 500 },
     );
+    return response;
   }
 
   const { name } = await context.params;
@@ -19,23 +23,27 @@ export async function GET(
   const url = `${API_BASE}/api/city/${encodeURIComponent(name)}?force_refresh=${forceRefresh}`;
 
   try {
+    const auth = await buildBackendRequestHeaders(req);
     const res = await fetch(url, {
-      headers: buildBackendRequestHeaders(),
+      headers: auth.headers,
       cache: "no-store",
     });
     if (!res.ok) {
       const raw = await res.text();
-      return NextResponse.json(
+      const response = NextResponse.json(
         { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
         { status: 502 },
       );
+      return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
-    return NextResponse.json(data);
+    const response = NextResponse.json(data);
+    return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
+    const response = NextResponse.json(
       { error: "Failed to fetch city detail", detail: String(error) },
       { status: 500 },
     );
+    return response;
   }
 }

frontend/app/api/city/[name]/summary/route.ts

@@ -1,5 +1,8 @@
 import { NextRequest, NextResponse } from "next/server";
-import { buildBackendRequestHeaders } from "@/lib/backend-auth";
+import {
+  applyAuthResponseCookies,
+  buildBackendRequestHeaders,
+} from "@/lib/backend-auth";
 import { buildCachedJsonResponse } from "@/lib/http-cache";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
@@ -9,10 +12,11 @@ export async function GET(
   context: { params: Promise<{ name: string }> },
 ) {
   if (!API_BASE) {
-    return NextResponse.json(
+    const response = NextResponse.json(
       { error: "POLYWEATHER_API_BASE_URL is not configured" },
       { status: 500 },
     );
+    return response;
   }
 
   const { name } = await context.params;
@@ -21,34 +25,39 @@ export async function GET(
   const url = `${API_BASE}/api/city/${encodeURIComponent(name)}/summary?force_refresh=${forceRefresh}`;
 
   try {
+    const auth = await buildBackendRequestHeaders(req);
     const res = await fetch(url, {
-      headers: buildBackendRequestHeaders(),
+      headers: auth.headers,
       cache: "no-store",
     });
     if (!res.ok) {
       const raw = await res.text();
-      return NextResponse.json(
+      const response = NextResponse.json(
         { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
         { status: 502 },
       );
+      return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
     if (bypassCache) {
-      return NextResponse.json(data, {
+      const response = NextResponse.json(data, {
         headers: {
           "Cache-Control": "no-store",
         },
       });
+      return applyAuthResponseCookies(response, auth.response);
     }
-    return buildCachedJsonResponse(
+    const response = buildCachedJsonResponse(
       req,
       data,
       "public, max-age=0, s-maxage=20, stale-while-revalidate=60",
     );
+    return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
+    const response = NextResponse.json(
       { error: "Failed to fetch city summary", detail: String(error) },
       { status: 500 },
     );
+    return response;
   }
 }

frontend/app/api/history/[name]/route.ts

@@ -1,5 +1,8 @@
 import { NextRequest, NextResponse } from "next/server";
-import { buildBackendRequestHeaders } from "@/lib/backend-auth";
+import {
+  applyAuthResponseCookies,
+  buildBackendRequestHeaders,
+} from "@/lib/backend-auth";
 import { buildCachedJsonResponse } from "@/lib/http-cache";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
@@ -9,37 +12,42 @@ export async function GET(
   context: { params: Promise<{ name: string }> },
 ) {
   if (!API_BASE) {
-    return NextResponse.json(
+    const response = NextResponse.json(
       { error: "POLYWEATHER_API_BASE_URL is not configured" },
       { status: 500 },
     );
+    return response;
   }
 
   const { name } = await context.params;
   const url = `${API_BASE}/api/history/${encodeURIComponent(name)}`;
 
   try {
+    const auth = await buildBackendRequestHeaders(req);
     const res = await fetch(url, {
-      headers: buildBackendRequestHeaders(),
+      headers: auth.headers,
       cache: "no-store",
     });
     if (!res.ok) {
       const raw = await res.text();
-      return NextResponse.json(
+      const response = NextResponse.json(
         { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
         { status: 502 },
       );
+      return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
-    return buildCachedJsonResponse(
+    const response = buildCachedJsonResponse(
       req,
       data,
       "public, max-age=0, s-maxage=60, stale-while-revalidate=300",
     );
+    return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
+    const response = NextResponse.json(
       { error: "Failed to fetch history", detail: String(error) },
       { status: 500 },
     );
+    return response;
   }
 }

frontend/app/auth/callback/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from "next/server";
+import { createSupabaseRouteClient, hasSupabaseServerEnv } from "@/lib/supabase/server";
+
+function normalizeNextPath(input: string | null) {
+  const fallback = "/";
+  const raw = String(input || "").trim();
+  if (!raw) return fallback;
+  if (!raw.startsWith("/")) return fallback;
+  if (raw.startsWith("//")) return fallback;
+  return raw;
+}
+
+export async function GET(request: NextRequest) {
+  const nextPath = normalizeNextPath(request.nextUrl.searchParams.get("next"));
+  const redirectUrl = request.nextUrl.clone();
+  redirectUrl.pathname = nextPath;
+  redirectUrl.search = "";
+
+  if (!hasSupabaseServerEnv()) {
+    return NextResponse.redirect(redirectUrl);
+  }
+
+  const response = NextResponse.redirect(redirectUrl);
+  const supabase = createSupabaseRouteClient(request, response);
+  const code = request.nextUrl.searchParams.get("code");
+  if (code) {
+    await supabase.auth.exchangeCodeForSession(code);
+  }
+
+  return response;
+}
+

frontend/app/auth/login/page.tsx

@@ -0,0 +1,21 @@
+import { LoginClient } from "@/components/auth/LoginClient";
+
+type PageProps = {
+  searchParams?: Promise<{ next?: string }>;
+};
+
+function normalizeNextPath(input: string | undefined) {
+  const fallback = "/";
+  const raw = String(input || "").trim();
+  if (!raw) return fallback;
+  if (!raw.startsWith("/")) return fallback;
+  if (raw.startsWith("//")) return fallback;
+  return raw;
+}
+
+export default async function LoginPage({ searchParams }: PageProps) {
+  const params = (await searchParams) || {};
+  const nextPath = normalizeNextPath(params.next);
+  return <LoginClient nextPath={nextPath} />;
+}
+

frontend/app/entitlement-required/page.tsx

@@ -33,9 +33,17 @@ export default async function EntitlementRequiredPage({ searchParams }: Props) {
           Entitlement Required
         </h1>
         <p style={{ marginTop: 12, color: "#9fb2da", lineHeight: 1.6 }}>
-          This dashboard is protected. Append{" "}
-          <code>?access_token=&lt;your-token&gt;</code> to the URL once, and
-          the session cookie will be set automatically.
+          This dashboard is protected. If Supabase auth is enabled, please go to{" "}
+          <a
+            href={`/auth/login?next=${encodeURIComponent(nextPath)}`}
+            style={{ color: "#8fc5ff" }}
+          >
+            /auth/login
+          </a>{" "}
+          to sign in first.
+        </p>
+        <p style={{ marginTop: 12, color: "#9fb2da", lineHeight: 1.6 }}>
+          Legacy mode still supports <code>?access_token=&lt;your-token&gt;</code>.
         </p>
         <p style={{ marginTop: 12, color: "#9fb2da", lineHeight: 1.6 }}>
           Requested path: <code>{nextPath}</code>