Skip to content

Create OAuth 2.0 Credentials in Google Cloud Console

  1. Go to the Google Cloud Console
  2. If you don't have a project already, create a new one.
  3. Select APIs & Services
  4. Navigate to the Credentials Section

  5. Create OAuth 2.0 Client ID:

    • For Application type, select Web application
    • Provide a name for the OAuth client (e.g., Virtomat Realm).
    • Under Authorized JavaScript origins, add your Keycloak domain: https://auth.virtomat.dev
    • Under Authorized redirect URIs, add the following URI: https://auth.virtomat.dev/realms/virtomat/broker/google/endpoint

  6. Obtain Client ID and Secret

Note

Once you created the credentials, Google will provide you with a Client ID and Client Secret.
These are the keys you'll need to configure Google as an identity provider in Keycloak.

Configure Keycloak to Use Google as an Identity Provider

  1. Access Keycloak Admin Console https://auth.virtomat.dev/admin/
  2. Select the Realm virtomat
  3. Select Identity Providers on the left side menu
  4. Add Google as an Identity Provider (use Client ID and Secret obtained from Google Cloud Console)
  5. Before saving, scroll down to Advanced Settings and configure:
    • Scopes: openid profile email
    • Default sync mode: import
  6. Save the Configuration

Note

The profile scope is required to import user profile information including the picture from Google.
The default scope is only openid, which is insufficient for profile data import.
The import sync mode ensures user core data (name, email) is only set on first login, maintaining stability.

Configure Google Profile Picture Import

To enable importing and using the Google profile picture in your application, follow these steps:

Step 1: Create Picture Attribute in User Profile

  1. In Keycloak Admin Console, go to realm virtomat
  2. Navigate to Realm settings → User profile tab
  3. Click Create attribute
  4. Configure the attribute:
    • Attribute name: picture
    • Display name: Profile Picture
    • Required field: No (OFF)
  5. Click Create

Step 2: Create Identity Provider Mapper

  1. Navigate to Identity providers in the left menu
  2. Click on google
  3. Go to the Mappers tab
  4. Click Add mapper
  5. Configure the mapper:
    • Name: google-picture-importer
    • Sync mode override: force
    • Mapper type: Attribute Importer
    • Social Profile JSON Field Path: picture
    • User Attribute Name: picture
  6. Click Save

Note

The force sync mode for the picture mapper ensures the profile picture URL is updated on every login,
allowing users to see their latest Google profile picture even if they change it later.

Step 3: Create Client Mapper

  1. Navigate to Clients in the left menu
  2. Click on voyager client
  3. Go to the Client scopes tab
  4. Click on voyager-dedicated scope
  5. Go to the Mappers tab
  6. Click Configure a new mapper
  7. Select User Attribute as the mapper type
  8. Configure the mapper:
    • Name: picture
    • User Attribute: picture
    • Token Claim Name: picture
    • Claim JSON Type: String
    • Add to ID token: ON
    • Add to access token: ON
    • Add to userinfo: ON
  9. Click Save

Verify Configuration

  1. Open a private/incognito browser window
  2. Go to https://auth.virtomat.dev/realms/virtomat/account
  3. Log in using Google
  4. Check Personal info section to verify the Picture field contains your Google profile picture URL