OAuth Setup

Klubbil supports social login through OAuth providers like Google and GitHub. This guide will walk you through setting up these integrations.

GitHub OAuth Setup

Step 1: Create a GitHub OAuth App

1. Go to GitHub Developer Settings
2. Click New OAuth App
3. Fill in the application details:
   • Application name: Klubbil (or your preferred name)
   • Homepage URL: https://yourdomain.com (your Klubbil instance URL)
   • Authorization callback URL: https://yourdomain.com/api/auth/callback/github
4. Click Register application

Step 2: Get Client Credentials

After creating the OAuth app:

1. Copy the Client ID from the app page
2. Click Generate a new client secret and copy the Client Secret
3. Keep these credentials secure - you'll need them for your environment variables

Step 3: Configure Environment Variables

Add the GitHub credentials to your .env file:

GITHUB_CLIENT_ID=your_github_client_id_here
GITHUB_CLIENT_SECRET=your_github_client_secret_here

Step 4: Restart Your Application

After adding the environment variables, restart your Klubbil instance to apply the changes.

Google OAuth Setup

Step 1: Create a Google Cloud Project

1. Go to the Google Cloud Console
2. Create a new project or select an existing one
3. Enable the Google+ API for your project

Step 2: Configure OAuth Consent Screen

1. Navigate to APIs & Services → OAuth consent screen
2. Configure the consent screen with your application details:
   • Application name: Klubbil
   • User support email: Your email address
   • Developer contact information: Your email address
3. Add your domain to Authorized domains
4. Save and continue

Step 3: Create OAuth 2.0 Credentials

1. Go to APIs & Services → Credentials
2. Click Create Credentials → OAuth 2.0 Client IDs
3. Select Web application as the application type
4. Configure the settings:
   • Name: Klubbil Web Client
   • Authorized JavaScript origins: https://yourdomain.com
   • Authorized redirect URIs: https://yourdomain.com/api/auth/callback/google
5. Click Create

Step 4: Get Client Credentials

After creating the OAuth client:

1. Copy the Client ID
2. Copy the Client Secret
3. Keep these credentials secure

Step 5: Configure Environment Variables

Add the Google credentials to your .env file:

GOOGLE_CLIENT_ID=your_google_client_id_here
GOOGLE_CLIENT_SECRET=your_google_client_secret_here

Step 6: Restart Your Application

Restart your Klubbil instance to apply the changes.

Testing OAuth Integration

After configuring the OAuth providers:

1. Navigate to the login page
2. You should see "Sign in with Google" and "Sign in with GitHub" buttons
3. Click on either button to test the OAuth flow
4. Complete the authorization process
5. You should be redirected back to Klubbil and logged in

Troubleshooting

Common Issues

"OAuth provider not configured" error

• Ensure environment variables are set correctly
• Restart your application after adding environment variables
• Check that variable names match exactly: GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, etc.

"Invalid redirect URI" error

• Verify the callback URL in your OAuth app settings matches your domain
• For GitHub: https://yourdomain.com/api/auth/callback/github
• For Google: https://yourdomain.com/api/auth/callback/google

OAuth flow starts but fails to complete

• Check your client secret is correct and hasn't expired
• Ensure your OAuth app is not in development mode (for production use)
• Verify your domain is authorized in the OAuth app settings

Development vs Production

For development:

• Use http://localhost:3000 as your domain
• Callback URLs should be http://localhost:3000/api/auth/callback/[provider]

For production:

• Use your actual domain https://yourdomain.com
• Ensure HTTPS is enabled
• Update callback URLs to use HTTPS

Security Considerations

• Keep your OAuth client secrets secure and never commit them to version control
• Use different OAuth apps for development and production environments
• Regularly rotate client secrets for enhanced security
• Monitor OAuth app usage in provider dashboards for suspicious activity