Google OAuth Setup Guide

Step-by-step instructions to configure Google Sign-in / Authentication

1

Create a Project in Google Cloud

  1. Go to the Google Cloud Console.
  2. Click the project drop-down menu in the top left corner (next to the Google Cloud logo) and click "New Project".
  3. Enter a Project name (e.g., "WinWallGame OAuth").
  4. Click "Create" and wait a few moments for Google to provision your project.
  5. Make sure to select the newly created project from the drop-down menu.
2

Configure OAuth Consent Screen

Before creating credentials, you must define how your app presents itself to users.

  1. In the left sidebar menu, navigate to APIs & Services > OAuth consent screen.
  2. Choose "External" User Type (unless you only want Google Workspace internal users), then click "Create".
  3. Fill in the required App information:
    • App name: The name users will see when they sign in.
    • User support email: Your support email address.
  4. Scroll to the bottom and fill in the Developer contact information, then click "Save and Continue".
  5. On the Scopes and Test users pages, simply scroll down and click "Save and Continue".
  6. Click "Back to Dashboard" when finished.
Publishing Status: Your app remains in "Testing" mode. If you want any user to log in, click the "Publish App" button under the "Publishing status" section.
3

Create OAuth Client ID Credentials

This is where you generate the keys that your application will use to communicate with Google.

  1. From the left sidebar, click on "Credentials".
  2. Click the "+ CREATE CREDENTIALS" button at the top and select "OAuth client ID".
  3. Under Application type, choose "Web application".
  4. Give your Web client a name (e.g., "Web Client 1").
  5. Under Authorized redirect URIs, click "ADD URI". This is extremely important!
  6. Add your callback URL exactly as follows:
    • http://127.0.0.1:8000/auth/google/callback (for local testing)
    • https://yourdomain.com/auth/google/callback (for production)
  7. Click "Create".
4

Get Your Client ID and Secret

A modal will pop up displaying your Client ID and Client Secret.

  1. Copy the Client ID. It ends in .apps.googleusercontent.com.
  2. Copy the Client Secret. Keep this secret!

(If you accidentally close the popup, you can always click the download icon next to your newly created Client ID on the Credentials page.)

5

Add to Your Environment (.env)

Now integrate these credentials into your application backend.

Map to your .env file

Open your .env file. Add or update the following Google API keys with the values from Google Cloud:

# Google OAuth Configuration GOOGLE_CLIENT_ID=your_client_id_here.apps.googleusercontent.com GOOGLE_CLIENT_SECRET=your_client_secret_here GOOGLE_REDIRECT_URI=https://yourdomain.com/auth/google/callback
Redirect URI Note: Ensure the GOOGLE_REDIRECT_URI in your .env matches exactly the Authorized redirect URI you entered in Google Cloud Console. Even a missing trailing slash will cause a "uri_mismatch" error.
Don't forget to run php artisan config:clear to apply your new environment variables!
×