Setting Up Social Login 🔐

Google & GitHub Authentication

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:

1. First, 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

2. Click Register Application

3. Copy the Client ID and Client Secret.

4. Add 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