Social Providers

Add "Sign in with Google" or "Sign in with GitHub" buttons by configuring OAuth credentials - no code changes to the sign-in forms required.

This page is part of the Authentication documentation.

OAuth social providers let users authenticate with existing accounts from Google, GitHub, and other identity providers. The kit includes Google OAuth pre-configured - add your credentials to enable it. Adding additional providers requires creating a plugin file and registering the provider with Better Auth. The sign-in forms automatically display buttons for configured providers.

OAuth social providers are third-party identity providers (Google, GitHub, Microsoft, etc.) that handle authentication and return user identity to your app via the OAuth 2.0 protocol.

Enabled Providers

Control which OAuth providers appear on sign-in forms:

NEXT_PUBLIC_AUTH_OAUTH_PROVIDERS=google,github

Google OAuth Setup

1. Create OAuth Credentials

1. Go to Google Cloud Console
2. Create a new OAuth 2.0 Client ID
3. Set the authorized redirect URI (see Redirect URL section below)
4. Copy the Client ID and Client Secret

2. Add Environment Variables

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

The kit automatically enables Google OAuth when these credentials are present.

Adding New OAuth Providers

To add a provider like GitHub:

1. Create Provider Plugin

Create a file in packages/better-auth/src/plugins/:

import { socialProviders } from 'better-auth/social-providers';
import * as z from 'zod';
export function createGithubProviderPlugin() {
  const githubClientId = z
    .string()
    .min(1)
    .optional()
    .parse(process.env.GITHUB_CLIENT_ID);
  const githubClientSecret = z
    .string()
    .min(1)
    .optional()
    .parse(process.env.GITHUB_CLIENT_SECRET);
  if (!githubClientId || !githubClientSecret) {
    return [] as never;
  }
  return [
    socialProviders.github({
      clientId: githubClientId,
      clientSecret: githubClientSecret,
    }),
  ];
}

2. Register in Plugin Index

Add to packages/better-auth/src/plugins/social-providers.ts:

import { createGithubProviderPlugin } from './github-provider';
export const createSocialProviderPlugin = () => {
  const googleSocialProviderPlugin = createGoogleProviderPlugin();
  const githubSocialProviderPlugin = createGithubProviderPlugin();
  return [
    ...googleSocialProviderPlugin,
    ...githubSocialProviderPlugin,
  ];
};

3. Add Environment Variables

GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret
NEXT_PUBLIC_AUTH_OAUTH_PROVIDERS=google,github

Redirect URL

Configure this redirect URL in your OAuth provider's dashboard:

https://<your-site-url>/api/auth/callback/<provider-name>

Examples:

• Google: https://myapp.com/api/auth/callback/google
• GitHub: https://myapp.com/api/auth/callback/github
• Development: http://localhost:3000/api/auth/callback/google

See the Better Auth social providers documentation for provider-specific configuration.

Common Pitfalls

• Mismatched redirect URLs: The redirect URL in your OAuth provider dashboard must exactly match your NEXT_PUBLIC_SITE_URL. http://localhost:3000 is different from http://127.0.0.1:3000.
• Missing environment variables: The provider silently disables itself if credentials are missing. Check your .env.local file.
• Forgetting to add provider to NEXT_PUBLIC_AUTH_OAUTH_PROVIDERS: The plugin loads, but the button won't appear on sign-in forms.
• Production credentials in development: Create separate OAuth apps for development and production with different redirect URLs.
• Not verifying the OAuth app: Some providers (Google) require app verification for production use with more than 100 users.

Next: Multi-Factor Authentication Configuration →