SuperAPI AI 工具集

neon-auth-react

前端与建站

查看项目

更新于 10-16 01:35

技能介绍

用途:在 React 应用(Vite、Create React App 或类似打包器)中配置 @neondatabase/auth,仅做认证、不涉及数据库。适用于已有数据库方案、用户提到 @neondatabase/auth 而非 neon-js、且不使用 Next.js 的场景(Next.js 应改用 neon-auth-nextjs 技能)。

主要能力:提供认证客户端创建、React 适配器、UI 组件与路由保护。支持邮箱密码登录注册、社交/OAuth(google、github、twitter、discord、apple、microsoft、facebook、linkedin、spotify、twitch、gitlab、bitbucket)、邮箱 OTP、邮箱验证、魔法链接、多会话、组织功能、账户设置、会话管理、身份绑定、匿名访问与 JWT 获取。

使用方式:先安装 npm install @neondatabase/auth;在 src/auth-client.ts 用 createAuthClient(url, config) 创建客户端,适配器须以工厂函数调用,如 BetterAuthReactAdapter(),React 适配器从 @neondatabase/auth/react/adapters 导入;在 providers.tsx 用 NeonAuthUIProvider 包裹并传入 authClient、navigate、Link、redirectTo;在 main.tsx 用 BrowserRouter 包裹 Providers。CSS 只能二选一:@neondatabase/auth/ui/css 或 @neondatabase/auth/ui/tailwind,不可同时导入。UI 组件包括 AuthView、SignedIn、SignedOut、AuthLoading、RedirectToSignIn、UserButton 及账户、组织相关卡片。

限制:资料未提供收费、价格与平台支持信息;匿名访问需在数据库为 anonymous 角色授权;OAuth 在 iframe 中自动使用弹窗流程。