LogoTanStarter 文档
LogoTanStarter 文档
首页模板介绍代码库快速开始环境配置
网站配置
部署

功能集成

Cloudflare数据库身份验证邮件邮件订阅存储支付通知分析聊天框联盟营销

功能定制

元数据页面落地页博客组件用户管理密钥管理

代码库

项目结构代码检查编辑器设置更新代码库
X (Twitter)

身份验证

学习如何在 TanStarter 中使用 Better Auth 设置和使用身份验证

TanStarter 使用 Better Auth 进行身份验证,这是一个 TypeScript 原生的身份验证库。

设置

网站配置

在 src/config/website.ts 中配置身份验证选项:

export const websiteConfig: WebsiteConfig = {
  // ...
  auth: {
    enable: true,
    enableGoogleLogin: true,
    enableCredentialLogin: true, // 启用邮箱密码登录
    enableDeleteAccount: true,
  },
  // ...
};
选项类型默认值描述
enablebooleantrue启用/禁用身份验证
enableGoogleLoginbooleantrue启用 Google OAuth 登录
enableCredentialLoginbooleanfalse启用邮箱密码登录
enableDeleteAccountbooleantrue允许用户删除账户

环境变量

生成一个随机密钥并添加到环境变量文件中:

openssl rand -base64 32
.env
BETTER_AUTH_SECRET=your_generated_secret

Google OAuth(可选)

如果启用了 Google 登录,需要配置 Google OAuth:

  1. 进入到 Google Cloud Console
  2. 创建新项目
  3. 导航到 APIs & Services > Credentials
  4. 点击 Create Credentials > OAuth client ID
  5. 如果需要,配置 OAuth 同意屏幕
  6. 选择 Web application 作为应用程序类型
  7. 将 http://localhost:3000 和 https://your-domain.com 添加到 Authorized JavaScript origins
  8. 将 http://localhost:3000/api/auth/callback/google 和 https://your-domain.com/api/auth/callback/google 添加到 Authorized redirect URIs
  9. 将 Client ID 和 Client Secret 添加到环境变量文件中:
.env
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

如果您正在设置环境,现在可以回到环境配置文档并继续。本文档的其余部分可以稍后阅读。

环境配置

设置环境变量


身份验证系统架构

TanStarter 中的身份验证系统包含以下组件:

auth.ts
client.ts
types.ts

身份验证路由

TanStarter 提供以下身份验证路由:

路由描述
/auth/login登录页面
/auth/register注册页面
/auth/forgot-password密码重置请求
/auth/reset-password密码重置表单
/auth/error错误页面

参考资料

  • Better Auth 文档
  • TanStack Start Auth 指南
  • Google OAuth 设置

下一步

现在您了解了 TanStarter 中身份验证的工作原理,您可能想要探索这些相关功能:

电子邮件

配置电子邮件服务

支付

配置 Stripe 支付

数据库

配置数据库

部署

部署到 Cloudflare Workers

数据库

了解如何为 TanStarter 项目配置 Cloudflare D1 数据库

邮件

学习如何使用 Resend 和 React Email 模板设置和使用邮件功能

目录

设置
网站配置
环境变量
Google OAuth(可选)
身份验证系统架构
身份验证路由
参考资料
下一步