SvelteKit Better Auth 模板

一个集成了 Better Auth 的 SvelteKit 模板，支持 OAuth 社交登录，包含多个登录提供商、路由保护和现代化 UI。

功能特性

多 OAuth 提供商 - 演示了 5 个提供商（GitHub、Google、Discord、Slack、Vercel）作为示例，可扩展支持 30+ 个提供商
动态提供商检测 - 根据环境变量自动显示已配置的提供商
路由保护 - 内置路由保护，支持自动重定向
现代技术栈 - Svelte 5 Runes、TypeScript、Vite
简洁 UI - 响应式设计，使用 CSS 变量和可复用组件

技术栈

SvelteKit 2.x
Svelte 5
Better Auth
TypeScript
Vite 7

项目结构

src/
├── lib/
│   ├── server/auth.ts        # Better Auth 服务端配置
│   ├── auth-client.ts        # 客户端认证工具（signIn、signOut）
│   └── components/           # 可复用 UI 组件
├── routes/
│   ├── +page.svelte          # 首页
│   ├── dashboard/            # 受保护的仪表盘页面
│   └── api/auth/[...all]/    # Better Auth API 路由
├── hooks.server.ts           # 认证中间件和路由保护
└── app.css                   # 全局样式（CSS 变量）

快速开始

1. 克隆并安装

git clone <repository-url>
cd sveltekit-better-auth-template
npm install

2. 配置环境变量

复制示例文件并填入你的凭据：

cp .env.example .env

3. 启动开发服务器

npm run dev

访问 http://localhost:5173 查看应用。

环境变量

必填

变量	说明
`BETTER_AUTH_SECRET`	加密密钥（至少 32 字符）。生成命令：`openssl rand -base64 32`

OAuth 提供商

配置一个或多个提供商。只有同时配置了 CLIENT_ID 和 CLIENT_SECRET 的提供商才会显示。

提供商	变量	说明
GitHub	`GITHUB_CLIENT_ID` `GITHUB_CLIENT_SECRET`	GitHub OAuth App 的凭据
Google	`GOOGLE_CLIENT_ID` `GOOGLE_CLIENT_SECRET`	Google Cloud Console 的凭据
Discord	`DISCORD_CLIENT_ID` `DISCORD_CLIENT_SECRET`	Discord Developer Portal 的凭据
Slack	`SLACK_CLIENT_ID` `SLACK_CLIENT_SECRET`	Slack API 的凭据
Vercel	`VERCEL_CLIENT_ID` `VERCEL_CLIENT_SECRET`	Vercel Integrations 的凭据

注意： Better Auth 支持 30+ 个 OAuth 提供商，包括 Apple、Microsoft、Twitter、LinkedIn 等。以上 5 个仅作为示例。详细集成指南请参考 Better Auth 文档。

回调地址

在各 OAuth 提供商的设置中配置回调地址：

http://localhost:5173/api/auth/callback/{provider}

将 {provider} 替换为：github、google、discord、slack 或 vercel。

生产环境请将 http://localhost:5173 替换为你的域名。

添加新提供商

在 .env 中添加环境变量：

NEWPROVIDER_CLIENT_ID=xxx
NEWPROVIDER_CLIENT_SECRET=xxx

在 src/lib/server/auth.ts 中添加提供商配置：

socialProviders: {
  // ...已有提供商
  newprovider: {
    clientId: env.NEWPROVIDER_CLIENT_ID as string,
    clientSecret: env.NEWPROVIDER_CLIENT_SECRET as string,
  }
}

在 src/routes/+page.server.ts 中添加提供商检测：

{
  id: 'newprovider',
  name: 'New Provider',
  enabled: !!(env.NEWPROVIDER_CLIENT_ID && env.NEWPROVIDER_CLIENT_SECRET)
}

在 src/lib/components/icons/NewProviderIcon.svelte 创建图标组件
在 src/lib/components/AuthProviderButton.svelte 中注册图标

部署

许可证

MIT

框架	Svelte
认证系统	Better Auth

框架	Svelte
认证系统	Better Auth