40+社交平台一键接入：Better Auth社交登录实战指南
项目地址: https://gitcode.com/GitHub_Trending/be/better-auth 你是否还在为集成多个社交登录而头疼？配置繁琐、兼容性问题、代码重复...这些问题耗费开发者大量时间。本文将带你使用Better Auth轻松实现40+社交平台登录集成，从环境配置到代码实现，全程不超过10分钟，让你专注业务逻辑而非认证流程。
为什么选择Better Auth社交登录
Better Auth作为TypeScript生态中最全面的认证框架，其社交登录模块具有三大核心优势：
- 极致简化的配置：一行代码即可启用一个社交平台，无需手动处理OAuth流程
- 跨框架兼容性：支持Next.js、Nuxt、SvelteKit等主流框架，完整列表
- 企业级安全特性：自动处理token验证、CSRF防护和会话管理，符合OAuth 2.0最佳实践
支持的社交平台与集成状态
Better Auth通过核心模块+插件系统支持40+社交平台，以下是部分常用平台：
| 平台类别 | 支持平台 | 集成文档 |
|---|---|---|
| 代码托管 | GitHub、GitLab、Bitbucket | GitHub集成 |
| 社交网络 | Facebook、Twitter、LinkedIn | Twitter集成 |
| 企业服务 | Microsoft 365、Google Workspace | Google集成 |
| 开发者工具 | Discord、Slack、Notion | Discord集成 |
完整平台列表可查看源码目录中的provider实现
快速开始：5分钟集成GitHub登录
环境准备
- 安装Better Auth核心包
npm install better-auth
# 或使用pnpm
pnpm add better-auth
- 创建认证配置文件
在项目根目录创建auth.ts文件：
import { betterAuth } from "better-auth";
export const auth = betterAuth({
database: new Database("./sqlite.db"),
socialProviders: {
github: {
clientId: process.env.GITHUB_CLIENT_ID as string,
clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
},
},
});
配置GitHub OAuth应用
- 访问GitHub Developer Settings创建新OAuth应用
- 回调URL设置为：
http://localhost:3000/api/auth/callback/github - 获取Client ID和Client Secret，添加到
.env文件：
GITHUB_CLIENT_ID=your_client_id
GITHUB_CLIENT_SECRET=your_client_secret
BETTER_AUTH_SECRET=your_generated_secret
BETTER_AUTH_URL=http://localhost:3000
安全密钥生成工具：generate-secret组件
实现登录组件
在React项目中创建社交登录按钮：
import { authClient } from "@/lib/auth-client";
export function GithubLoginButton() {
const handleLogin = async () => {
const result = await authClient.signIn.social({
provider: "github",
callbackUrl: "/dashboard",
});
if (result.error) {
console.error("Login failed:", result.error);
}
};
return (
<button onClick={handleLogin} className="btn">
<svg className="github-icon" />
Continue with GitHub
</button>
);
}
高级配置：自定义社交登录流程
多平台统一登录接口
通过统一的API处理不同平台的登录请求：
import { authClient } from "@/lib/auth-client";
type SocialProvider = "github" | "google" | "facebook" | "twitter";
export async function socialLogin(provider: SocialProvider) {
try {
return await authClient.signIn.social({
provider,
callbackUrl: "/auth/verify",
// 自定义参数
options: {
scopes: provider === "google" ? ["email", "profile", "calendar"] : undefined
}
});
} catch (error) {
console.error(`Login with ${provider} failed:`, error);
throw error;
}
}
处理登录回调与用户数据
创建回调处理路由：
import { auth } from "@/lib/auth";
import { toNextJsHandler } from "better-auth/next-js";
export const { POST, GET } = toNextJsHandler(auth, {
async onSocialLogin(user, account) {
// 登录成功后的自定义逻辑
console.log(`User ${user.id} logged in with ${account.provider}`);
// 可以在这里同步用户数据到你的数据库
await db.user.update({
where: { id: user.id },
data: { lastLogin: new Date() }
});
}
});
框架集成示例
Next.js应用集成
完整示例可参考demo/nextjs目录，核心代码：
import { authClient } from "@/lib/auth-client";
import { useSession } from "better-auth/react";
export default function Home() {
const { session, isLoading } = useSession();
if (isLoading) return <div>Loading...</div>;
return (
<div>
{session ? (
<div>Welcome, {session.user?.email}</div>
) : (
<div>
<button onClick={() => authClient.signIn.social({ provider: "github" })}>
Login with GitHub
</button>
<button onClick={() => authClient.signIn.social({ provider: "google" })}>
Login with Google
</button>
</div>
)}
</div>
);
}
Expo移动应用集成
对于React Native应用，使用expo-auth-session：
import * as AuthSession from 'expo-auth-session';
import { authClient } from '@/lib/auth-client';
export function SocialLoginButton() {
const handleGoogleLogin = async () => {
const result = await authClient.signIn.social({
provider: 'google',
callbackUrl: AuthSession.makeRedirectUri({ useProxy: true }),
});
if (result.url) {
const response = await AuthSession.startAsync({ authUrl: result.url });
// 处理认证结果
}
};
return <Button title="Login with Google" onPress={handleGoogleLogin} />;
}
常见问题与解决方案
Q: 如何添加自定义社交平台？
A: 通过自定义provider实现：
import { createSocialProvider } from "better-auth/sso";
export const gitlabProvider = createSocialProvider({
id: "gitlab",
name: "GitLab",
authorization: {
url: "https://gitlab.com/oauth/authorize",
params: { scope: "read_user" }
},
token: { url: "https://gitlab.com/oauth/token" },
userinfo: { url: "https://gitlab.com/api/v4/user" },
profile: (profile) => ({
id: profile.id.toString(),
name: profile.name,
email: profile.email,
})
});
然后在配置中添加：
socialProviders: {
gitlab: gitlabProvider({
clientId: process.env.GITLAB_CLIENT_ID,
clientSecret: process.env.GITLAB_CLIENT_SECRET,
})
}
Q: 如何处理社交账号关联现有用户？
A: 使用账户链接功能：
export async function linkSocialAccount(provider: string) {
const session = await auth.getSession();
if (!session) throw new Error("Not authenticated");
return authClient.linkAccount({
provider,
sessionId: session.sessionId,
callbackUrl: "/account/linked"
});
}
安全最佳实践
- 始终验证重定向URL
socialProviders: {
github: {
clientId: process.env.GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET,
// 限制允许的回调URL
allowedCallbackUrls: [
"https://yourdomain.com/api/auth/callback/github",
"https://staging.yourdomain.com/api/auth/callback/github"
]
}
}
- 实施速率限制
import { rateLimitPlugin } from "better-auth/plugins/rate-limit";
export const auth = betterAuth({
plugins: [
rateLimitPlugin({
socialLogin: {
windowMs: 60 * 1000, // 1分钟
max: 5 // 最多5次尝试
}
})
]
});
总结与后续学习
通过本文你已经掌握了Better Auth社交登录的核心用法，关键收获：
- 5分钟内完成单一社交平台集成
- 统一API处理多平台登录逻辑
- 跨框架适配的实现方式
- 安全最佳实践与性能优化
深入学习建议：
社交登录只是Better Auth功能的一部分，该框架还提供邮件密码登录、MFA、Passkey等完整认证解决方案，欢迎探索项目源码了解更多。
本文档最后更新于2025年9月，适配Better Auth v1.3+版本
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
