# Setting Up Social Login 🔐

## Google & GitHub Authentication

### 1. Google Cloud Console Setup

a. Visit the [Google Cloud Console](https://console.cloud.google.com/)

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](https://console.cloud.google.com/) 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](https://github.com/settings/developers) 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

2. Copy the Client ID and Client Secret.

2. 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