如何使用 Better Auth 为 Web 应用添加身份认证？

身份认证是几乎所有 Web 应用的核心组成部分。无论你是在构建 SaaS 产品、个人项目还是内部工具，用户登录功能基本上都是必需的。

但从零开始实现身份认证并不简单。你需要处理密码安全哈希、会话管理、OAuth 流程、令牌刷新，以及许多其他容易出错的环节。身份认证很重要，但它并不是让你的应用与众不同的功能。你可能更希望把时间花在其他地方。

这就是 Better Auth 的用武之地。

Better Auth 是一个现代化的、以 TypeScript 为核心的身份认证库，旨在简化 Web 应用中的身份认证实现。

它专注于灵活性、可移植性和对开发者友好的 API：

• 框架无关: 可以与 SvelteKit、Next.js、Nuxt、Express 等框架集成
• 内置社交登录提供商: 支持 Google、GitHub、Discord、Twitter 等常见 OAuth 提供商
• 简洁的 API: 针对常见的身份认证场景，尽可能减少配置
• 无平台绑定: 支持多种数据库，可部署到不同平台

在本指南中，我将带你完成 Better Auth 与 SvelteKit 的集成。完成后，你将拥有一个支持社交登录的身份认证系统。

与 SvelteKit 集成

1. 安装与配置

首先，创建一个新的 SvelteKit 项目（或使用现有项目）：

npx sv create my-app
cd my-app

安装 Better Auth：

npm install better-auth

接下来，设置环境变量。在项目根目录创建  .env  文件：

# Better Auth Secret Key
BETTER_AUTH_SECRET=your-better-auth-secret

# GitHub OAuth
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret

# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

要生成  BETTER_AUTH_SECRET ，在终端运行以下命令：

openssl rand -base64 32

获取 OAuth 凭证：

• GitHub: 前往 GitHub Developer Settings 创建一个新的 OAuth App
• Google: 前往 Google Cloud Console，创建项目并设置 OAuth 2.0 凭证

将回调 URL 设置为  http://localhost:5173/api/auth/callback/github （Google 则使用  /google ）。

2. 服务端配置

在服务端创建 auth 实例。在这里定义你的提供商和设置。

创建  src/lib/server/auth.ts ：

import { betterAuth } from 'better-auth';
import { env } from '$env/dynamic/private';

export const auth = betterAuth({
	secret: env.BETTER_AUTH_SECRET,
	socialProviders: {
		github: {
			clientId: env.GITHUB_CLIENT_ID as string,
			clientSecret: env.GITHUB_CLIENT_SECRET as string
		},
		google: {
			clientId: env.GOOGLE_CLIENT_ID as string,
			clientSecret: env.GOOGLE_CLIENT_SECRET as string
		}
	}
});

接下来创建 API 路由处理器。Better Auth 使用通配符路由来处理所有与认证相关的请求。

创建  src/routes/api/auth/[...all]/+server.ts ：

import { auth } from '$lib/server/auth';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ request }) => {
    return auth.handler(request);
};

export const POST: RequestHandler = async ({ request }) => {
    return auth.handler(request);
};

服务端配置完成。Better Auth 现在会自动处理  /api/auth/*  路由。

3. 客户端配置

创建用于 Svelte 组件的 auth 客户端。

创建  src/lib/auth-client.ts ：

import { createAuthClient } from 'better-auth/svelte';

export const authClient = createAuthClient();

客户端会自动检测你的认证端点。现在你可以在应用的任何地方使用  authClient  来触发登录和登出操作。

4. 社交登录实现

首先，创建  src/hooks.server.ts  来在每个请求中获取用户会话：

import { auth } from '$lib/server/auth';
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
    const session = await auth.api.getSession({
        headers: event.request.headers
    });

    event.locals.session = session;

    return resolve(event);
};

为  locals  添加类型定义。更新  src/app.d.ts ：

import type { auth } from '$lib/server/auth';

declare global {
	namespace App {
		interface Locals {
			session: typeof auth.$Infer.Session | null;
		}
	}
}

export {};

现在创建一个 layout server load 函数，将会话数据传递给所有页面。

创建  src/routes/+layout.server.ts ：

import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals }) => {
    return {
        session: locals.session
    };
};

构建登录页面。创建  src/routes/login/+page.svelte ：

<script lang="ts">
    import { authClient } from '$lib/auth-client';

    const signInWithGitHub = async () => {
        await authClient.signIn.social({
            provider: 'github',
            callbackURL: '/'
        });
    };
    
    const signInWithGoogle = async () => {
        await authClient.signIn.social({
            provider: 'google',
            callbackURL: '/'
        });
    };
</script>

<div class="login-container">
    <h1>Sign In</h1>
    <button onclick={signInWithGitHub}>Continue with GitHub</button>
    <button onclick={signInWithGoogle}>Continue with Google</button>
</div>

要显示用户信息和处理登出，更新你的 layout 组件。编辑  src/routes/+layout.svelte ：

<script lang="ts">
    import { authClient } from '$lib/auth-client';

    let { data, children } = $props();

    const signOut = async () => {
        await authClient.signOut();
    };
</script>

<header>
    {#if data.session}
        <p>Welcome, {data.session.user.name}!</p>
        <button onclick={signOut}>Sign Out</button>
    {:else}
        <a href="/login">Sign In</a>
    {/if}
</header>

<main>
    {@render children()}
</main>

这种方式对 SSR 友好。会话数据在页面加载时立即可用，不会出现未认证内容的闪烁。

5. 路由保护

要保护特定路由，更新  src/hooks.server.ts  在渲染页面前检查认证状态：

import { auth } from '$lib/server/auth';
import { redirect, type Handle } from '@sveltejs/kit';

const protectedRoutes = ['/dashboard', '/settings', '/profile'];

export const handle: Handle = async ({ event, resolve }) => {
    const session = await auth.api.getSession({
        headers: event.request.headers
    });

    event.locals.session = session;

    const isProtected = protectedRoutes.some((route) => event.route.id?.startsWith(route));

    if (isProtected && !session) {
        throw redirect(303, '/login');
    }

    return resolve(event);
};

现在任何以  /dashboard 、 /settings  或  /profile  开头的路由，都会将未认证用户重定向到登录页面。

6. 数据库（可选）

默认情况下，Better Auth 将会话存储在内存中。这对于开发环境没有问题，但在生产环境中你需要数据库来持久化用户数据，避免服务器重启后数据丢失。

Better Auth 支持多种数据库适配器，包括 Prisma、Drizzle 和 MongoDB。

以下是使用 Prisma 的示例：

import { betterAuth } from 'better-auth';
import { prismaAdapter } from 'better-auth/adapters/prisma';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export const auth = betterAuth({
  database: prismaAdapter(prisma, {
    provider: 'sqlite', // or mysql, postgresql
  }),
  socialProviders: {
    // ... your providers
  }
});

完整的数据库配置说明，请查看 Better Auth 数据库文档。

快速开始模板

如果你想快速上手，我创建了一个开箱即用的 SvelteKit + Better Auth 模板，所有配置都已完成：

• GitHub、Google、Discord、Slack 和 Vercel OAuth 已配置
• 支持 SSR 的会话管理
• 路由保护示例
• 环境变量模板

👉 部署到 EdgeOne Pages

总结

添加身份认证不必很复杂。使用 Better Auth 和 SvelteKit，你可以在一小时内搭建一个完整的社交登录系统。

本指南涵盖的内容：

• 在 SvelteKit 项目中配置 Better Auth
• 配置 Google 和 GitHub OAuth 提供商
• 构建登录/登出功能
• 使用 server hooks 保护路由
• 生产环境的数据库配置（可选）

如果你想更快地开始，可以直接使用模板一键部署。