如何使用 BetterAuth 添加社交登录

社交身份验证已成为现代 Web 应用程序的标准配置,然而许多开发者仍在与过时的 Auth.js 文档或昂贵的 SaaS 解决方案作斗争。BetterAuth 是一个框架无关的 TypeScript 身份验证库,目前已发布 1.x 版本,它提供了一个既强大又易于实现的自托管替代方案。

什么是 BetterAuth?

BetterAuth 是一个 TypeScript 优先的身份验证库,运行在您自己的基础设施上。与 NextAuth(现在的 Auth.js)复杂的适配器模式不同,也不像 Clerk 等 SaaS 提供商将您锁定在其定价体系中,BetterAuth 通过其 socialProviders 配置提供了简洁的 API,内置支持 BetterAuth 的 OAuth2。

该库的优势在于其简洁性:在服务器端配置提供商,使用 createAuthClient 创建客户端,然后调用 authClient.signIn.social()。无需单独的注册端点,无需复杂的流程——只需能正常工作的身份验证。

设置 BetterAuth 社交登录

服务器配置

首先安装 BetterAuth 并配置您的身份验证服务器,实现 BetterAuth 的 Google 和 GitHub 登录:

// auth.ts
import { betterAuth } from "better-auth"
import { drizzleAdapter } from "better-auth/adapters/drizzle"
import { db } from "./db"

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "sqlite"
  }),
  socialProviders: {
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    },
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }
  }
})

此配置会自动处理 OAuth2 流程。BetterAuth 处理 OAuth 交换和会话创建,但您必须在每个提供商的控制台中配置正确的回调 URL。

客户端设置

创建您的身份验证客户端以在前端启用 BetterAuth 社交登录:

// auth-client.ts
import { createAuthClient } from "better-auth/client"

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_APP_URL // 您应用的基础 URL
})

在 Next.js 中实现社交登录

以下是如何使用简单的登录组件实现 Next.js 社交身份验证:

// components/login-button.tsx
import { authClient } from "@/lib/auth-client"

export function LoginButton() {
  const handleGoogleLogin = async () => {
    await authClient.signIn.social({
      provider: "google",
      callbackURL: "/dashboard"
    })
  }

  const handleGitHubLogin = async () => {
    await authClient.signIn.social({
      provider: "github",
      callbackURL: "/dashboard"
    })
  }

  return (
    <div className="flex gap-4">
      <button onClick={handleGoogleLogin}>
        使用 Google 登录
      </button>
      <button onClick={handleGitHubLogin}>
        使用 GitHub 登录
      </button>
    </div>
  )
}

signIn.social() 方法处理所有事务:重定向到提供商、处理回调以及建立会话。您可以选择性地为失败的身份验证指定 errorCallbackURL,或为首次用户指定 newUserCallbackURL。

使用 Generic OAuth 插件集成自定义 OAuth 提供商

对于内置提供商之外的其他提供商,BetterAuth 提供了 BetterAuth 的 Generic OAuth 插件。该插件支持与任何符合 OAuth 2.0 或 OIDC 标准的提供商集成:

// auth.ts with custom provider
import { betterAuth } from "better-auth"
import { genericOAuth } from "better-auth/plugins"

export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [{
        providerId: "custom-provider",
        discoveryUrl: "https://provider.com/.well-known/openid-configuration",
        clientId: process.env.CUSTOM_CLIENT_ID!,
        clientSecret: process.env.CUSTOM_CLIENT_SECRET!,
        scopes: ["openid", "email", "profile"]
      }]
    })
  ]
})

这种灵活性意味着您不局限于主流提供商——企业 SSO、区域性服务或内部 OAuth 服务器都能无缝集成。

会话管理和令牌处理

BetterAuth 开箱即提供响应式会话管理:

// components/user-profile.tsx
import { authClient } from "@/lib/auth-client"

export function UserProfile() {
  const { data: session, isPending } = authClient.useSession()

  if (isPending) return <div>加载中...</div>
  if (!session) return <div>未认证</div>

  return (
    <div>
      <p>欢迎,{session.user.name}</p>
      <button onClick={() => authClient.signOut()}>
        退出登录
      </button>
    </div>
  )
}

关于令牌的说明:刷新令牌的行为因提供商而异。例如,GitHub 默认不提供刷新令牌,而 Google 会提供。BetterAuth 透明地处理这些差异,但了解您的提供商的具体特性有助于调试边缘情况。

生产环境注意事项

部署 BetterAuth 社交身份验证时:

1. 环境变量:妥善保护您的 OAuth 凭据
2. 回调 URL:使用生产环境 URL 更新提供商配置
3. 数据库迁移:更新 BetterAuth 模式后运行常规数据库迁移(例如,使用 Drizzle 时通过 npx @better-auth/cli generate)
4. HTTPS:OAuth2 在生产环境中需要安全连接

账户关联——将多个社交账户连接到一个用户——是 BetterAuth 中正在发展的功能。该库能很好地处理基本情况,但复杂场景可能需要自定义逻辑。

结论

BetterAuth 为您的技术栈带来了现代化的、TypeScript 优先的身份验证,无需 Auth.js 的复杂性,也不需要 SaaS 提供商的成本。凭借对主流提供商的内置支持以及用于自定义集成的 Generic OAuth 插件,它几乎涵盖了您会遇到的所有 BetterAuth 的 OAuth2 场景。

统一的 signIn.social() API、响应式会话管理和框架无关的设计使 BetterAuth 成为希望控制其身份验证基础设施同时保持开发者生产力的团队的可靠选择。

常见问题

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.