← Back to Documentation
Quick Setup Guide

Setting Up Social Login 🔐

Google & GitHub Authentication

Complete Google OAuth Setup Guide

Follow this comprehensive guide to implement Google authentication in your Next.js application. Well cover everything from setting up your Google Cloud Console to implementing the authentication flow.

1. Google Cloud Console Setup

a. Visit the Google Cloud Console

b. Create a new project or select an existing one

c. Enable the Google OAuth API:

  • Go to "APIs & Services" → "Library"
  • Search for "Google+ API" or "Google OAuth API"
  • Click Enable

2. Configure OAuth Consent Screen

a. Go to "APIs & Services" → "OAuth consent screen"

b. Choose "External" user type

c. Fill in required information:

  • App name
  • User support email
  • Developer contact email
  • Authorized domains

3. Create OAuth 2.0 Client ID

Configure the following URLs:

Authorized JavaScript origins: http://localhost:3000 https://your-production-domain.com Authorized redirect URIs: http://localhost:3000/api/auth/callback/google https://your-production-domain.com/api/auth/callback/google

Hey there! Let's get Google login working in just 3 simple steps:

1First, head over to the Google Cloud Console and create a new project.

Enable OAuth and grab these two important things:

  • Your Client ID
  • Your Client Secret

3️⃣ Add them to your .env file like this:

GOOGLE_CLIENT_ID=your_client_id_here
GOOGLE_CLIENT_SECRET=your_secret_here

🔥 Pro Tip: Make sure to add these URLs to your Google OAuth settings:

Authorized origin: http://localhost:3000
Redirect URI: http://localhost:3000/api/auth/callback/google

Set Up GitHub Authentication

Setting up GitHub login is super easy too:

Go to GitHub Developer Settings. GitHub Developer Settings and create a new OAuth app.

Click New OAuth App.

  • Set up
  • Homepage URL: http://localhost:3000

Authorization Callback URL:

http://localhost:3000/api/auth/callback/github
2Click Register Application
2Copy the Client ID and Client Secret.
2Add GitHub Credentials to .env.local.
GITHUB_CLIENT_ID=your-github-client-id GITHUB_CLIENT_SECRET=your-github-client-secret

💡 Quick Tip: For your GitHub OAuth settings:

Homepage URL: http://localhost:3000
Authorization callback URL: http://localhost:3000/api/user/auth/callback/github

Detailed GitHub OAuth Setup

1. GitHub OAuth App Creation

a. Go to GitHub Settings → Developer Settings → OAuth Apps

b. Click "New OAuth App"

c. Fill in the application details:

  • Application name: Your App Name
  • Homepage URL: http://localhost:3000
  • Application description (optional)
  • Authorization callback URL: http://localhost:3000/api/auth/callback/github

2. Security Configuration

After creating the OAuth app:

  • Generate a new client secret
  • Store both client ID and secret securely
  • Enable security features like IP allow list if needed

Environment Variables Setup

# .env.local NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=your-secret-key # Google credentials GOOGLE_CLIENT_ID=your-google-client-id GOOGLE_CLIENT_SECRET=your-google-client-secret # GitHub credentials GITHUB_CLIENT_ID=your-github-client-id GITHUB_CLIENT_SECRET=your-github-client-secret

😅 Running into issues?

  • • Double-check your callback URLs - they're usually the culprit!
  • • Make sure your .env variables are exactly as shown above
  • • Try using incognito mode if you're testing multiple accounts
  • • Still stuck? Drop us a message support@webd.one