OAuth Providers

The starter kit comes with Google OAuth pre-configured, but you can easily add additional OAuth providers like Facebook, GitHub or any provider supported by Better Auth.

Google OAuth (Pre-configured)

Google OAuth is already set up in the starter kit. To enable it:

1. Create Google OAuth Credentials

1. Visit the Google Cloud Console
2. Create a new project or select an existing one
3. Navigate to APIs & Services > Credentials
4. Click Create Credentials > OAuth client ID
5. Configure the OAuth consent screen if you haven't already
6. Select Web application as the application type
7. Add authorized JavaScript origins:
   • http://localhost:3000 (for development)
   • https://yourdomain.com (for production)
8. Add authorized redirect URIs:
   • http://localhost:3000/api/auth/callback/google (for development)
   • https://yourdomain.com/api/auth/callback/google (for production)
9. Copy the Client ID and Client Secret

2. Configure Environment Variables

Add the credentials to your .env file:

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

3. Verify Configuration

The Google provider is already configured in lib/auth/index.ts:

socialProviders: {
  google: {
    prompt: "select_account",
    clientId: env.GOOGLE_CLIENT_ID ?? "",
    clientSecret: env.GOOGLE_CLIENT_SECRET ?? "",
    scope: ["email", "profile"],
  },
},

Adding Additional OAuth Providers

To add a new OAuth provider (e.g., Facebook, GitHub), follow these steps:

1. Get Provider Credentials

Create an application with your chosen OAuth provider and obtain the Client ID and Client Secret.

2. Add Environment Variables

Add the provider credentials to your .env file:

FACEBOOK_CLIENT_ID=your-facebook-client-id
FACEBOOK_CLIENT_SECRET=your-facebook-client-secret

3. Update Auth Configuration

Add the provider to lib/auth/index.ts:

import { betterAuth } from 'better-auth';

export const auth = betterAuth({
  // ... other config
  account: {
    accountLinking: {
      enabled: true,
      trustedProviders: ['google', 'facebook'] // Add new provider here
    }
  },
  socialProviders: {
    google: {
      // ... existing Google config
    },
    facebook: {
      clientId: env.FACEBOOK_CLIENT_ID ?? '',
      clientSecret: env.FACEBOOK_CLIENT_SECRET ?? ''
    }
  }
});

4. Update Environment Schema

Add the new variables to lib/env.ts:

server: {
  // ... existing variables
  FACEBOOK_CLIENT_ID: z.string().optional(),
  FACEBOOK_CLIENT_SECRET: z.string().optional(),
},

runtimeEnv: {
  // ... existing variables
  FACEBOOK_CLIENT_ID: process.env.FACEBOOK_CLIENT_ID,
  FACEBOOK_CLIENT_SECRET: process.env.FACEBOOK_CLIENT_SECRET,
},

5. Add Provider to UI (Optional)

If you want to display the provider in your authentication UI, add it to your sign-in component:

import { authClient } from '@/lib/auth/client';

export function SocialSignInButton({
  provider
}: {
  provider: 'google' | 'facebook';
}) {
  const handleSignIn = async () => {
    await authClient.signIn.social({
      provider,
      callbackURL: '/dashboard'
    });
  };

  return (
    <button onClick={handleSignIn}>
      Sign in with {provider === 'google' ? 'Google' : 'Facebook'}
    </button>
  );
}

Supported Providers

Better Auth supports many OAuth providers out of the box:

• Google
• Facebook
• GitHub
• Discord
• Apple
• Microsoft
• And many more...

For a complete list and provider-specific setup instructions, see the Better Auth documentation.

Account Linking

The starter kit has account linking enabled, which allows users to connect multiple OAuth providers to the same account. This is configured in the accountLinking section:

account: {
  accountLinking: {
    enabled: true,
    trustedProviders: ["google"], // Providers that can be linked
  },
},

When a user signs in with a new provider using the same email address, the accounts are automatically linked.