feat: 添加本地开发者策略，即没有.env的情况

longsizhuo · longsizhuo · commit 563ed4866d00 · 2025-09-22T02:03:34.000+08:00
diff --git a/app/api/auth/[...nextauth]/README.md b/app/api/auth/[...nextauth]/README.md
@@ -0,0 +1,17 @@
+# Login Flow Overview
+
+这个目录承载站点的 NextAuth 路由处理。下面是登录流程与依赖的简要说明：
+
+- **身份验证框架**：使用 [NextAuth.js 5 (Auth.js)](https://authjs.dev/) 作为认证核心，通过 `app/auth.ts` 暴露的 `handlers` 响应 GET/POST 请求。
+- **OAuth provider**：接入 GitHub OAuth（`next-auth/providers/github`），读取用户的 `id/name/email/avatar` 并持久化到本地用户表。
+- **数据库适配器**：优先使用 [@auth/neon-adapter](https://authjs.dev/reference/adapter/neon) 将用户、账户、会话数据写入 Neon Postgres。若运行环境缺少 `DATABASE_URL`，系统会回退到 JWT 会话策略，不再访问数据库，方便协作者在无 Neon 凭据的情况下开发。
+- **会话策略**：有 Neon 配置时启用数据库会话（`strategy: "database"`），否则改用默认的 JWT 签名。
+- **必要环境变量**：`AUTH_SECRET`/`NEXTAUTH_SECRET` 用于签名；`AUTH_GITHUB_ID`、`AUTH_GITHUB_SECRET` 用于 GitHub OAuth；`DATABASE_URL` 控制 Neon 连接（可选）。开发环境缺少这些变量时会给出控制台警告并使用安全兜底逻辑，以保证本地能跑通。
+
+### 本地无 `.env` 的执行策略
+
+- 如果 `.env` 没有配置，只要 GitHub 登录仍在，NextAuth 会使用内置的开发密钥和 JWT 会话继续工作，登录流程不会报错。
+- Neon 数据库适配器会被自动禁用，此时用户信息只保存在 cookie/JWT 中，不会写入 `users / sessions` 表；适合纯前端协作者快速启动项目。
+- 控制台会输出显式警告，提示缺少密钥或数据库连接，确保真正部署前补齐配置。
+
+如需扩展更多 provider 或调整会话策略，可直接修改 `auth.config.ts` 与 `auth.ts`。
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -3,8 +3,12 @@ import { Button } from "../../components/ui/button";
 import { MessageCircle } from "lucide-react";
 import { Github as GithubIcon } from "./icons/Github";
 import { SignInButton } from "./SignInButton";
+import { auth } from "@/auth";
+import { UserMenu } from "./UserMenu";
 
-export function Header() {
+export async function Header() {
+  const session = await auth();
+  const user = session?.user;
   return (
     <header className="fixed top-0 w-full z-50 bg-background/80 backdrop-blur-lg border-b border-border">
       <div className="container mx-auto px-6 h-16 flex items-center justify-between">
@@ -63,7 +67,7 @@ export function Header() {
             </a>
           </Button>
           <ThemeToggle />
-          <SignInButton />
+          {user ? <UserMenu user={user} /> : <SignInButton />}
         </div>
       </div>
     </header>
diff --git a/app/components/UserMenu.tsx b/app/components/UserMenu.tsx
@@ -0,0 +1,62 @@
+import { signOut } from "@/auth";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/app/components/ui/avatar";
+
+interface UserMenuProps {
+  user: {
+    name?: string | null;
+    email?: string | null;
+    image?: string | null;
+  };
+}
+
+export function UserMenu({ user }: UserMenuProps) {
+  const initials = user.name?.[0] ?? user.email?.[0] ?? "?";
+
+  return (
+    <details className="relative inline-block text-left">
+      <summary
+        className="flex cursor-pointer list-none items-center rounded-full border border-border bg-background p-0.5 transition hover:border-primary/60 [&::-webkit-details-marker]:hidden"
+        aria-label="Account menu"
+      >
+        <Avatar className="size-9">
+          {user.image ? (
+            <AvatarImage src={user.image} alt={user.name ?? "User avatar"} />
+          ) : (
+            <AvatarFallback>{initials}</AvatarFallback>
+          )}
+        </Avatar>
+      </summary>
+
+      <div className="absolute right-0 mt-2 w-60 overflow-hidden rounded-md border border-border bg-popover shadow-lg">
+        <div className="border-b border-border bg-muted/40 px-4 py-3">
+          <p className="text-sm font-medium text-foreground">
+            {user.name ?? "Signed in"}
+          </p>
+          {user.email ? (
+            <p className="text-xs text-muted-foreground" title={user.email}>
+              {user.email}
+            </p>
+          ) : null}
+        </div>
+
+        <form
+          action={async () => {
+            "use server";
+            await signOut();
+          }}
+        >
+          <button
+            type="submit"
+            className="w-full px-4 py-2 text-left text-sm text-foreground transition hover:bg-muted"
+          >
+            Sign out
+          </button>
+        </form>
+      </div>
+    </details>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -3,30 +3,10 @@ import { Hero } from "./components/Hero";
 import { Features } from "./components/Features";
 import { Community } from "./components/Community";
 import { Footer } from "./components/Footer";
-import { neon } from "@neondatabase/serverless";
-
-export function Page() {
-  async function create(formData: FormData) {
-    "use server";
-    // Connect to the Neon database
-    const sql = neon(`${process.env.DATABASE_URL}`);
-    const comment = formData.get("comment");
-    // Insert the comment from the form into the Postgres database
-    await sql`INSERT INTO comments (comment) VALUES (${comment})`;
-  }
-
-  return (
-    <form action={create} className="flex flex-col gap-2 mt-72">
-      <input type="text" placeholder="write a comment" name="comment" />
-      <button type="submit">Submit</button>
-    </form>
-  );
-}
 
 export default function DocsIndex() {
   return (
     <>
-      <Page />
       <Header />
       <Hero />
       <Features />
diff --git a/auth.config.ts b/auth.config.ts
@@ -1,7 +1,26 @@
 import type { NextAuthConfig } from "next-auth";
 import GitHub from "next-auth/providers/github";
 
+// 在本地开发环境允许没有 .env 的协作者运行站点，因此先尝试读取两个常见的密钥变量，缺失时再使用内置的开发兜底值。
+const envSecret = process.env.AUTH_SECRET ?? process.env.NEXTAUTH_SECRET;
+const secret =
+  envSecret ??
+  (process.env.NODE_ENV !== "production"
+    ? "__involutionhell_dev_secret__"
+    : undefined);
+
+if (!envSecret && process.env.NODE_ENV !== "production") {
+  console.warn(
+    "[auth] AUTH_SECRET missing – using development fallback secret",
+  );
+}
+
+if (!secret) {
+  throw new Error("[auth] AUTH_SECRET is required in production environments");
+}
+
 export const authConfig = {
+  secret,
   pages: {
     signIn: "/login",
   },
diff --git a/auth.ts b/auth.ts
@@ -1,18 +1,28 @@
-import NextAuth, { CredentialsSignin } from "next-auth";
+import NextAuth from "next-auth";
 import { authConfig } from "./auth.config";
 import GitHub from "next-auth/providers/github";
 import { Pool } from "@neondatabase/serverless";
 import NeonAdapter from "@auth/neon-adapter";
 
-class InvalidLoginError extends CredentialsSignin {
-  code = "Invalid identifier or password";
-}
+type NeonAdapterPool = Parameters<typeof NeonAdapter>[0];
 
 export const { handlers, auth, signIn, signOut } = NextAuth(() => {
-  const pool = new Pool({ connectionString: process.env.DATABASE_URL });
+  // Neon 连接只在有数据库配置时启用；本地协作者若没有 `.env`，将回退为纯 JWT 会话，避免直接抛错阻塞开发。
+  const databaseUrl = process.env.DATABASE_URL;
+  const adapter = databaseUrl
+    ? NeonAdapter(
+        new Pool({
+          connectionString: databaseUrl,
+        }) as unknown as NeonAdapterPool,
+      )
+    : undefined;
+
+  if (!databaseUrl) {
+    console.warn("[auth] DATABASE_URL missing – running without Neon adapter");
+  }
+
   return {
     ...authConfig,
-    adapter: NeonAdapter(pool),
     providers: [
       GitHub({
         profile(profile) {
@@ -25,8 +35,17 @@ export const { handlers, auth, signIn, signOut } = NextAuth(() => {
         },
       }),
     ],
+    ...(adapter
+      ? {
+          adapter,
+          session: {
+            strategy: "database" as const,
+          },
+        }
+      : {
+          session: {
+            strategy: "jwt" as const,
+          },
+        }),
   };
-  session: {
-    strategy: "database";
-  }
 });
