OAuth Provider Setup Guide

Overview

This guide walks you through setting up OAuth providers for social authentication in UltraViolet Pro. Each provider requires creating an OAuth application and configuring the credentials in your Laravel application.

Google OAuth Setup

1. Create Google OAuth App

1. Go to Google Cloud Console: console.cloud.google.com

2. Create a new project or select existing one

3. Enable Google+ API:

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

4. Create OAuth 2.0 credentials:

   • Go to "APIs & Services" → "Credentials"
   • Click "Create Credentials" → "OAuth 2.0 Client IDs"
   • Choose "Web application"
   • Add authorized redirect URIs:
     • http://localhost:8000/auth/google/callback (development)
     • https://yourdomain.com/auth/google/callback (production)

2. Configure Environment

Add to your .env file:

GOOGLE_CLIENT_ID=your_google_client_id_here
GOOGLE_CLIENT_SECRET=your_google_client_secret_here
GOOGLE_REDIRECT_URI=http://localhost:8000/auth/google/callback

3. Test Google OAuth

Visit /login and click the Google button to test.

GitHub OAuth Setup

1. Create GitHub OAuth App

1. Go to GitHub Settings: github.com/settings/developers

2. Click "New OAuth App"

3. Fill in application details:

   • Application name: Your app name
   • Homepage URL: http://localhost:8000 (development)
   • Authorization callback URL: http://localhost:8000/auth/github/callback

4. Click "Register application"

5. Copy Client ID and Client Secret

2. Configure Environment

Add to your .env file:

GITHUB_CLIENT_ID=your_github_client_id_here
GITHUB_CLIENT_SECRET=your_github_client_secret_here
GITHUB_REDIRECT_URI=http://localhost:8000/auth/github/callback

3. Test GitHub OAuth

Visit /login and click the GitHub button to test.

Facebook OAuth Setup

1. Create Facebook App

1. Go to Facebook Developers: developers.facebook.com

2. Click "Create App"

3. Choose "Consumer" app type

4. Fill in app details:

   • App Name: Your app name
   • App Contact Email: Your email
   • App Purpose: Choose appropriate purpose

5. Add Facebook Login product:

   • Go to "Products" → "Facebook Login" → "Set Up"
   • Choose "Web" platform
   • Add site URL: http://localhost:8000

6. Configure OAuth settings:

   • Go to "Facebook Login" → "Settings"
   • Add Valid OAuth Redirect URIs:
     • http://localhost:8000/auth/facebook/callback
     • https://yourdomain.com/auth/facebook/callback

2. Configure Environment

Add to your .env file:

FACEBOOK_CLIENT_ID=your_facebook_app_id_here
FACEBOOK_CLIENT_SECRET=your_facebook_app_secret_here
FACEBOOK_REDIRECT_URI=http://localhost:8000/auth/facebook/callback

3. Test Facebook OAuth

Visit /login and click the Facebook button to test.

Twitter OAuth Setup

1. Create Twitter App

1. Go to Twitter Developer Portal: developer.twitter.com

2. Apply for developer account (if needed)

3. Create a new app:

   • Go to "Projects & Apps" → "Create App"
   • Fill in app details
   • Choose "Web App, Automated App or Bot"

4. Configure OAuth 2.0 settings:

   • Go to "App settings" → "Authentication settings"
   • Enable OAuth 2.0
   • Add callback URLs:
     • http://localhost:8000/auth/twitter/callback
     • https://yourdomain.com/auth/twitter/callback

5. Generate keys and secrets:

   • Go to "Keys and tokens"
   • Copy API Key and API Secret Key

2. Configure Environment

Add to your .env file:

TWITTER_CLIENT_ID=your_twitter_api_key_here
TWITTER_CLIENT_SECRET=your_twitter_api_secret_here
TWITTER_REDIRECT_URI=http://localhost:8000/auth/twitter/callback

3. Test Twitter OAuth

Visit /login and click the Twitter button to test.

LinkedIn OAuth Setup

1. Create LinkedIn App

1. Go to LinkedIn Developers: developer.linkedin.com

2. Create a new app:

   • Click "Create App"
   • Fill in app details
   • Choose "Web application"

3. Configure OAuth 2.0 settings:

   • Go to "Auth" tab
   • Add redirect URLs:
     • http://localhost:8000/auth/linkedin/callback
     • https://yourdomain.com/auth/linkedin/callback

4. Request permissions:

   • Go to "Products" tab
   • Request "Sign In with LinkedIn using OpenID Connect"
   • Request "Share on LinkedIn" (optional)

5. Copy Client ID and Client Secret

2. Configure Environment

Add to your .env file:

LINKEDIN_CLIENT_ID=your_linkedin_client_id_here
LINKEDIN_CLIENT_SECRET=your_linkedin_client_secret_here
LINKEDIN_REDIRECT_URI=http://localhost:8000/auth/linkedin/callback

3. Test LinkedIn OAuth

Visit /login and click the LinkedIn button to test.

Discord OAuth Setup

1. Create Discord Application

1. Go to Discord Developer Portal: discord.com/developers/applications

2. Create a new application:

   • Click "New Application"
   • Fill in application name
   • Click "Create"

3. Configure OAuth2 settings:

   • Go to "OAuth2" → "General"
   • Add redirects:
     • http://localhost:8000/auth/discord/callback
     • https://yourdomain.com/auth/discord/callback

4. Copy Client ID and Client Secret

2. Configure Environment

Add to your .env file:

DISCORD_CLIENT_ID=your_discord_client_id_here
DISCORD_CLIENT_SECRET=your_discord_client_secret_here
DISCORD_REDIRECT_URI=http://localhost:8000/auth/discord/callback

3. Test Discord OAuth

Visit /login and click the Discord button to test.

Production Configuration

1. Update Redirect URIs

For production, update all OAuth apps with your production domain:

https://yourdomain.com/auth/google/callback
https://yourdomain.com/auth/github/callback
https://yourdomain.com/auth/facebook/callback
https://yourdomain.com/auth/twitter/callback
https://yourdomain.com/auth/linkedin/callback
https://yourdomain.com/auth/discord/callback

2. Update Environment Variables

# Production OAuth settings
GOOGLE_REDIRECT_URI=https://yourdomain.com/auth/google/callback
GITHUB_REDIRECT_URI=https://yourdomain.com/auth/github/callback
FACEBOOK_REDIRECT_URI=https://yourdomain.com/auth/facebook/callback
TWITTER_REDIRECT_URI=https://yourdomain.com/auth/twitter/callback
LINKEDIN_REDIRECT_URI=https://yourdomain.com/auth/linkedin/callback
DISCORD_REDIRECT_URI=https://yourdomain.com/auth/discord/callback

3. Security Considerations

• Use HTTPS in production
• Keep secrets secure - never commit to version control
• Use environment variables for all sensitive data
• Regularly rotate secrets
• Monitor OAuth usage for suspicious activity

Troubleshooting

Common Issues

1. "Invalid redirect URI" Error

Problem: OAuth provider rejects the redirect URI

Solution:

• Check that redirect URIs match exactly (including protocol, domain, path)
• Ensure no trailing slashes
• Verify the URI is added to the OAuth app settings

2. "Client ID not found" Error

Problem: OAuth provider can't find the client ID

Solution:

• Verify client ID is correct
• Check that the OAuth app is active
• Ensure you're using the right environment (dev/prod)

3. "Invalid client secret" Error

Problem: Client secret is incorrect

Solution:

• Double-check the client secret
• Ensure no extra spaces or characters
• Regenerate the secret if needed

4. "Access denied" Error

Problem: User denied permission or app not approved

Solution:

• Check OAuth app status
• Verify required permissions are requested
• For some providers, app needs to be reviewed for production

Debug Steps

1. Check Laravel logs:

   tail -f storage/logs/laravel.log

2. Verify environment variables:

   php artisan tinker
   >>> config('services.google.client_id')

3. Test OAuth URLs manually:

   curl "http://localhost:8000/auth/google"

4. Check OAuth app settings:

   • Verify redirect URIs
   • Check app status
   • Verify required permissions

Testing Checklist

• [ ] OAuth app created successfully
• [ ] Redirect URIs configured correctly
• [ ] Environment variables set
• [ ] Client ID and secret are correct
• [ ] OAuth app is active/enabled
• [ ] Required permissions are granted
• [ ] HTTPS is used in production
• [ ] No trailing slashes in URIs

Advanced Configuration

Custom Scopes

Modify the SocialiteController to request specific scopes:

public function redirect($provider)
{
    $this->validateProvider($provider);

    return Socialite::driver($provider)
        ->scopes(['email', 'profile', 'openid'])
        ->redirect();
}

Custom User Data

Modify user creation to include additional data:

private function createUserFromSocial($socialUser, $provider)
{
    return User::create([
        'name' => $socialUser->getName(),
        'email' => $socialUser->getEmail(),
        'email_verified_at' => now(),
        'password' => Hash::make(Str::random(24)),
        'provider' => $provider,
        'provider_id' => $socialUser->getId(),
        'avatar' => $socialUser->getAvatar(),
        'timezone' => $socialUser->offsetGet('timezone'),
        'locale' => $socialUser->offsetGet('locale'),
    ]);
}

Error Handling

Add custom error handling for OAuth failures:

public function callback($provider)
{
    try {
        $socialUser = Socialite::driver($provider)->user();
    } catch (\Laravel\Socialite\Two\InvalidStateException $e) {
        return redirect()->route('login')
            ->with('error', 'OAuth state mismatch. Please try again.');
    } catch (\Exception $e) {
        Log::error('OAuth error: ' . $e->getMessage());
        return redirect()->route('login')
            ->with('error', 'Unable to login with ' . ucfirst($provider) . '. Please try again.');
    }

    // ... rest of the method
}

Ready to configure OAuth? Start with Google OAuth setup and work your way through each provider! 🔐