OAuth Provider Configuration

NEXTDEVKIT provides a simple and extensible OAuth provider configuration system for social authentication. The OAuth provider configuration is located in src/config/oauth-provider.ts.

🔧 OAuth Provider Structure

The OAuth provider system supports multiple authentication providers with consistent icons and naming:

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 Provider Types

OAuthProvider Configuration

Property	Type	Description
`name`	`string`	Display name for the OAuth provider
`icon`	`JSXElementConstructor<React.SVGProps<SVGSVGElement>>`	React icon component

Supported Providers

NEXTDEVKIT currently supports the following OAuth providers:

Provider	Key	Description
Google	`google`	Google OAuth 2.0 authentication
GitHub	`github`	GitHub OAuth 2.0 authentication

🎨 Icon Integration

OAuth providers use custom SVG icons from the icon system:

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

// Icons are React components that accept SVG props
<GitHub className="h-5 w-5" />
<Google className="h-5 w-5" />

🔧 Adding New OAuth Providers

Step 1: Add Provider Icon

Create an icon component in src/components/icons/social-media/:

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 path */}
    </svg>
  );
}

Step 2: Add to OAuth Provider Configuration

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>>;
  }
>;

Step 3: Configure Environment Variables

# .env
DISCORD_CLIENT_ID=your_discord_client_id
DISCORD_CLIENT_SECRET=your_discord_client_secret

Step 4: Update Better Auth Configuration

src/lib/auth.ts

// Better Auth configuration
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