Google Social Login

This guide will walk you through setting up Google authentication for your application. Google OAuth allows users to sign in using their Google accounts.

Prerequisites

  • A Google account
  • Access to the Google Cloud Console
  • Laravel Socialite package (already included in this application)

Step 1: Create a Google OAuth Application

  1. Go to the Google Cloud Console
  2. Select or create a project
  3. Navigate to APIs & Services → Credentials
  4. Click Create Credentials → OAuth client ID
  5. If prompted, configure the OAuth consent screen first:
    • Choose External user type (unless you have a Google Workspace account)
    • Fill in the required app information (app name, user support email, developer contact)
    • Add scopes: email, profile, openid
    • Add test users if your app is in testing mode
  6. For the OAuth client:
    • Application type: Web application
    • Name: Your application name
    • Authorized redirect URIs: http://localhost:8000/auth/google/callback (for local development) or https://yourdomain.com/auth/google/callback (for production)
  7. Click Create
  8. Copy the Client ID and Client Secret

Step 2: Configure Environment Variables

Add your Google OAuth credentials to your .env file:

GOOGLE_CLIENT_ID=your-client-id-here
GOOGLE_CLIENT_SECRET=your-client-secret-here
GOOGLE_REDIRECT_URI=http://localhost:8000/auth/google/callback

Note: For production, update GOOGLE_REDIRECT_URI to match your production domain.

Step 3: Verify Configuration

The configuration is already set up in config/services.php:

'google' => [
    'client_id'     => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect'      => env('GOOGLE_REDIRECT_URI'),
],

Make sure your .env values are correctly set and match the redirect URI you configured in Google Cloud Console.

Step 4: Routes

The routes are already configured in routes/web.php:

Route::get('/auth/google/redirect', [SocialAuthController::class, 'redirectToGoogle'])
    ->name('auth.google.redirect');

Route::get('/auth/google/callback', [SocialAuthController::class, 'handleGoogleCallback'])
    ->name('auth.google.callback');

Step 5: Using the Social Login Button

The social login button component is already included in the login and registration pages. To add it to other pages, use:

<x-blocks.auth.social-login provider="google" />

This will render a button that redirects users to Google's authentication page.

Common Issues

Redirect URI Mismatch

Error: "redirect_uri_mismatch"

Solution: Ensure the redirect URI in your Google Cloud Console exactly matches the one in your .env file, including the protocol (http/https) and trailing slashes.

Invalid Client

Error: "invalid_client"

Solution: Verify that your GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET are correct and haven't been regenerated.

OAuth Consent Screen Not Configured

Error: "access_denied" or consent screen errors

Solution: Make sure you've completed the OAuth consent screen configuration in Google Cloud Console, especially if your app is in testing mode (add test users).

Production Checklist

  • ✅ Update GOOGLE_REDIRECT_URI to your production domain
  • ✅ Add production redirect URI to Google Cloud Console
  • ✅ Verify OAuth consent screen is published (if going public)
  • ✅ Test the authentication flow on production
  • ✅ Ensure HTTPS is enabled (required for production OAuth)

Additional Resources