OAuth 提供商配置

NEXTDEVKIT 为社交身份验证提供了一个简单且可扩展的OAuth提供商配置系统。OAuth提供商配置位于 src/config/oauth-provider.ts。

🔧 OAuth 提供商结构

OAuth提供商系统支持具有一致图标和命名的多个身份验证提供商：

src/config/oauth-provider.ts

export const oAuthProviders = {
  google: {
    name: "Google",
    icon: Google,
  },
  github: {
    name: "GitHub",
    icon: GitHub,
  },
} as const satisfies Record<
  string,
  {
    name: string;
    icon: JSXElementConstructor<React.SVGProps<SVGSVGElement>>;
  }
>;

export type OAuthProvider = keyof typeof oAuthProviders;

📋 OAuth 提供商类型

OAuthProvider 配置

属性	类型	描述
`name`	`string`	OAuth提供商的显示名称
`icon`	`JSXElementConstructor<React.SVGProps<SVGSVGElement>>`	React图标组件

支持的提供商

NEXTDEVKIT 目前支持以下OAuth提供商：

提供商	键	描述
Google	`google`	Google OAuth 2.0 身份验证
GitHub	`github`	GitHub OAuth 2.0 身份验证

🎨 图标集成

OAuth提供商使用图标系统中的自定义SVG图标：

import GitHub from "@/components/icons/social-media/github";
import Google from "@/components/icons/social-media/google";

// 图标是接受SVG属性的React组件
<GitHub className="h-5 w-5" />
<Google className="h-5 w-5" />

🔧 添加新的OAuth提供商

步骤 1：添加提供商图标

在 src/components/icons/social-media/ 中创建图标组件：

src/components/icons/social-media/discord.tsx

export default function Discord(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      {/* Discord SVG路径 */}
    </svg>
  );
}

步骤 2：添加到OAuth提供商配置

src/config/oauth-provider.ts

import GitHub from "@/components/icons/social-media/github";
import Google from "@/components/icons/social-media/google";
import Discord from "@/components/icons/social-media/discord";

export const oAuthProviders = {
  google: {
    name: "Google",
    icon: Google,
  },
  github: {
    name: "GitHub",
    icon: GitHub,
  },
  discord: {
    name: "Discord",
    icon: Discord,
  },
} as const satisfies Record<
  string,
  {
    name: string;
    icon: JSXElementConstructor<React.SVGProps<SVGSVGElement>>;
  }
>;

步骤 3：配置环境变量

# .env
DISCORD_CLIENT_ID=your_discord_client_id
DISCORD_CLIENT_SECRET=your_discord_client_secret

步骤 4：更新Better Auth配置

src/lib/auth.ts

// Better Auth 配置
socialProviders: {
  google: {
    clientId: process.env.GOOGLE_CLIENT_ID as string,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    scope: ["email", "profile"],
  },
  github: {
    clientId: process.env.GITHUB_CLIENT_ID as string,
    clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
  },
  discord: {
    clientId: process.env.DISCORD_CLIENT_ID as string,
    clientSecret: process.env.DISCORD_CLIENT_SECRET as string,
  },
},

On this page