setup-react-spa

# Neon Auth 设置 - React SPA (Vite) 在 React 单页应用（Vite, Create React App 等）中配置 Neon Auth 的完整说明。 --- ## 1. 安装包 bash npm install @neondatabase/auth # 或者: npm install @neondatabase/neon-js npm install react-router-dom # UI 组件必需 ## 2. 环境变量 创建或更新 `.env`: **针对 Vite:** bash VITE_NEON_AUTH_URL=https://ep-xxx.neonauth.c-2.us-east-2.aws.neon.build/dbname/auth **针对 Create React App:** bash REACT_APP_NEON_AUTH_URL=https://ep-xxx.neonauth.c-2.us-east-2.aws.neon.build/dbname/auth **在哪里查找 Auth URL：** 1. 进入 Neon 项目仪表板 2. 导航到 "Auth" 选项卡 3. 复制 Auth URL ## 3. 认证客户端配置 创建 `src/lib/auth-client.ts`: **针对 `@neondatabase/auth`:** typescript import { createAuthClient } from "@neondatabase/auth"; import { BetterAuthReactAdapter } from "@neondatabase/auth/react/adapters"; export const authClient = createAuthClient(import.meta.env.VITE_NEON_AUTH_URL, { adapter: BetterAuthReactAdapter(), }); **针对 `@neondatabase/neon-js`:** typescript import { createClient } from "@neondatabase/neon-js"; import { BetterAuthReactAdapter } from "@neondatabase/neon-js/auth/react/adapters"; export const client = createClient({ auth: { adapter: BetterAuthReactAdapter(), url: import.meta.env.VITE_NEON_AUTH_URL, }, dataApi: { url: import.meta.env.VITE_NEON_DATA_API_URL, }, }); export const authClient = client.auth; **关键点：** - `BetterAuthReactAdapter` 必须从 `/react/adapters` 子路径导入 - 适配器必须作为函数调用: `BetterAuthReactAdapter()` ## 4. 在组件中使用 typescript import { authClient } from "./lib/auth-client"; function App() { const session = authClient.useSession(); if (session.isPending) return ; if (!session.data) return ; return ; } --- ## 5. UI Provider 设置 (可选) 如果你正在构建自定义认证表单，请跳过此部分。如果你想使用预构建的 UI 组件，请使用此设置。 ### 5a. 导入 CSS **关键：** 选择一种导入方法。切勿同时导入两者 - 这会导致样式重复。 **通过检查以下内容确认项目是否使用 Tailwind CSS：** - 项目根目录下的 `tailwind.config.js` 或 `tailwind.config.ts` - CSS 文件中的 `@import 'tailwindcss'` 或 `@tailwind` 指令 - package.json 依赖中的 `tailwindcss`