Back to Details

neon-auth

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Neon Auth Integration

Neon Auth 集成

Add authentication to your application.
为你的应用添加认证功能。

When to Use This Skill

何时使用此Skill

  • Adding authentication to a new or existing project
  • Implementing sign-in, sign-up, and session management
  • Configuring social authentication (Google, GitHub)
Package: 
@neondatabase/auth
(auth only, smaller bundle)
Need database queries too? Use the 
neon-js
skill instead for 
@neondatabase/neon-js
with unified auth + data API.
  • 为新的或现有项目添加认证功能
  • 实现登录、注册和会话管理
  • 配置社交认证（Google、GitHub）
包：
@neondatabase/auth
（仅包含认证功能，包体积更小）
同时需要数据库查询功能？ 请使用
neon-js
skill，它提供的
@neondatabase/neon-js
包含统一的认证+数据API。

Code Generation Rules

代码生成规则

When generating TypeScript/JavaScript code, follow these rules:
Complete reference: See Code Generation Rules for:
  • Import path handling (path aliases vs relative imports)
  • Neon package imports (subpath exports, adapter patterns)
  • CSS import strategy (Tailwind detection, single import method)
  • File structure patterns
Key points:
  • Check 
    tsconfig.json
    for path aliases before generating imports
  • Use relative imports if unsure or no aliases exist
  • BetterAuthReactAdapter
    MUST be imported from 
    auth/react/adapters
    subpath
  • Adapters are factory functions - call them with 
    ()
  • Choose ONE CSS import method (Tailwind or CSS, not both)
生成TypeScript/JavaScript代码时，请遵循以下规则：
完整参考：查看代码生成规则了解：
  • 导入路径处理（路径别名 vs 相对导入）
  • Neon包导入（子路径导出、适配器模式）
  • CSS导入策略（Tailwind检测、单一导入方式）
  • 文件结构模式
关键点：
  • 生成导入前先检查
    tsconfig.json
    中的路径别名
  • 若不确定或无别名存在，使用相对导入
  • BetterAuthReactAdapter
    必须从
    auth/react/adapters
    子路径导入
  • 适配器是工厂函数 - 需调用
    ()
  • 选择一种CSS导入方式（Tailwind或CSS，不可同时使用）

Available Guides

可用指南

Each guide is a complete, self-contained walkthrough with numbered phases:
  • guides/nextjs-setup.md
     - Complete Next.js App Router setup guide
  • guides/react-spa-setup.md
     - Detailed React SPA guide with react-router-dom integration
I'll automatically detect your context (package manager, framework, existing setup) and select the appropriate guide based on your request.
For troubleshooting, see the Troubleshooting Guide in references.
每个指南都是完整的、独立的分步教程：
  • guides/nextjs-setup.md
     - 完整的Next.js App Router设置指南
  • guides/react-spa-setup.md
     - 详细的React SPA指南，包含react-router-dom集成
我会自动检测你的项目环境（包管理器、框架、现有设置），并根据你的请求选择合适的指南。
如需故障排查，请查看参考资料中的故障排查指南。

Quick Examples

快速示例

Tell me what you're building - I'll handle the rest:
  • "Add authentication to my Next.js app" -> Loads setup guide, sets up auth routes
  • "Set up sign-in with Google" -> Configures social auth provider
  • "Debug my auth session not persisting" -> Loads troubleshooting guide
告诉我你正在构建的内容 - 我会处理其余部分：
  • "为我的Next.js应用添加认证" -> 加载设置指南，配置认证路由
  • "设置Google登录" -> 配置社交认证提供商
  • "排查我的认证会话无法持久化的问题" -> 加载故障排查指南

Reference Documentation

参考文档

Primary Resource: See neon-auth.mdc for comprehensive guidelines including:
  • All authentication methods (email/password, social, magic link)
  • Session data structure
  • UI components reference
  • Error handling
Framework-Specific Setup (choose your framework):
Framework-Specific UI (choose your framework):
Shared References:
主要资源：查看neon-auth.mdc获取全面指南，包括：
  • 所有认证方式（邮箱/密码、社交认证、魔法链接）
  • 会话数据结构
  • UI组件参考
  • 错误处理
框架特定设置（选择你的框架）：
框架特定UI（选择你的框架）：
通用参考：

Templates

模板

  • templates/nextjs-api-route.ts
    - API route handler for Next.js
  • templates/auth-client.ts
    - Client-side auth configuration
  • templates/nextjs-api-route.ts
    - Next.js的API路由处理器
  • templates/auth-client.ts
    - 客户端认证配置

Related Skills

相关Skills

  • neon-js - Full SDK with auth + database queries (use if you need PostgREST-style data access)
  • neon-drizzle - Drizzle ORM setup (for database queries)
  • neon-serverless - Direct database connections
  • add-neon-docs - Add Neon best practices to your project (run after setup)
  • neon-js - 包含认证+数据库查询的完整SDK（如果需要PostgREST风格的数据访问，请使用此Skill）
  • neon-drizzle - Drizzle ORM设置（用于数据库查询）
  • neon-serverless - 直接数据库连接
  • add-neon-docs - 为你的项目添加Neon最佳实践文档（设置完成后运行）

Workflow

工作流程

I will:
  1. Detect your project context automatically (Next.js, React SPA, Node.js)
  2. Select and load the appropriate guide
  3. Follow the guide's phases sequentially
  4. Track progress using the guide's workflow checklist
  5. Load reference files only when needed
  6. Offer to add Neon best practices to your project docs
Ready to get started? Just describe what you're building!
我会：
  1. 自动检测你的项目环境（Next.js、React SPA、Node.js）
  2. 选择并加载合适的指南
  3. 按指南的步骤顺序执行
  4. 使用指南的工作流程清单跟踪进度
  5. 仅在需要时加载参考文件
  6. 提供为你的项目文档添加Neon最佳实践的选项
准备好开始了吗？只需描述你正在构建的内容即可！