Skip to content
Log in Sign up

Google Sign-In (OAuth) Authentication – how to configure?

Set up Google Sign-In so visitors can register and log in to your Vehica site with their Google account — from creating the OAuth client in the Google API Console to pasting the client ID and secret into the Vehica Panel.

2 minute read

You can let your visitors log in and register with their Google account, like this:

Vehica login form headed "Log in to your account" with Continue with Google and Facebook buttons above the email and password fields; an arrow points at the Google button.

Below is the full configuration, step by step.

Create a project in the Google API Console

  1. 1 Open the Google API Console

    Go to https://console.developers.google.com/ and sign in with the Google account that should own the app.

  2. 2 Create a new project

    If this is your first Google API key, Google asks you to create a New Project before anything else.

    Google APIs "New Project" form with the project name Vehica typed in and the CREATE button at the bottom.
  3. 3 Create credentials

    In the console, click Create Credentials and choose OAuth client ID.

    Credentials page in the Google API Console with the CREATE CREDENTIALS menu open, showing API key, OAuth client ID, Service account and Help me choose.

Configure the OAuth consent screen

If the project does not have a product name yet, Google will not create the client ID until you click Configure Consent Screen.

Create OAuth client ID page with a warning that a product name must be set on the consent screen first, and a CONFIGURE CONSENT SCREEN button on the right.
Already have a consent screen?
If this project is already configured, skip this section and go straight to Create the OAuth client ID.
  1. 1 Select the External user type

    Choose External so any Google account can use the app, then click Create.

    OAuth consent screen page with User Type set to External and a CREATE button below it.
  2. 2 Add an app name and support email

    Fill in App name and User support email.

    Edit app registration, step 1 App information, with the App name and User support email fields filled in (values blurred) and an App logo upload below.
  3. 3 Add the authorized domain and contact information

    Add your authorized domain and developer contact information, then click Save and Continue.

    App domain section with empty home page, privacy policy and terms links, one authorized domain added, and a developer contact email address, with SAVE AND CONTINUE at the bottom.
  4. 4 Skip the scopes step

    Nothing to change here — click Save and Continue.

    Scopes step of the app registration with empty non-sensitive, sensitive and restricted scope tables and SAVE AND CONTINUE at the bottom.
  5. 5 Skip the test users step

    Again, just click Save and Continue.

    Test users step with no users added, a warning that users can be added but not removed, and SAVE AND CONTINUE at the bottom.
  6. 6 Return to the dashboard

    On the summary step, click Back to Dashboard.

    Summary of the app registration showing the authorized domain and contact email address, empty Scopes and Test users tables, and a BACK TO DASHBOARD button.

Create the OAuth client ID

  1. 1 Create the credentials

    Back at https://console.developers.google.com/, click Create Credentials and choose OAuth client ID.

    Credentials page in the Google API Console with the CREATE CREDENTIALS menu open and OAuth client ID in the list.
  2. 2 Select Web application

    Pick Web application as the application type.

    Create OAuth client ID page with the Application type dropdown open and Web application at the top of the list.
  3. 3 Copy the callback URL from Vehica

    This is the most important part of the configuration. Your callback URL is in Vehica Panel > User Panel, under Google Sign-In — copy the OAuth Redirect URI shown there.

    WordPress admin with the Vehica panel open on User Panel; the Google Sign-In section shows the OAuth Redirect URI field marked 1, with Enable Google Auth, Client ID and Client Secret on the right.
  4. 4 Paste it into Authorized redirect URIs

    Add the copied URL under Authorized redirect URIs.

    Create OAuth client ID form with Application type Web application and the name Vehica; the Authorized redirect URIs box is highlighted with a URL ending in /social-auth/google/ marked 2, above the CREATE button.
Check these before you click Create
The URL goes into Authorized redirect URIs, not into Authorized JavaScript origins. And copy the Google link from the Vehica Panel, not the Facebook one — it looks like https://domain.com/social-auth/google/.
Close-up of the Authorized redirect URIs section marked 1, with the URL ending in /social-auth/google/ marked 2 and the CREATE button marked 3.
When both are right, click Create.

Add the keys to the Vehica Panel

  1. 1 Copy your client ID and client secret

    Google shows both as soon as the client is created.

    "OAuth client created" dialog with Your Client ID marked 1 and Your Client Secret marked 2, both blurred, each with a copy icon.
  2. 2 Paste them into the Vehica Panel

    Put them in the Client ID and Client Secret fields of the Google Sign-In section.

    Google Sign-In section of the Vehica Panel with the Client ID field marked 1, the Client Secret field marked 2, and a SAVE ALL CHANGES button below.
  3. 3 Tick Enable Google Auth

    Make sure the Enable Google Auth checkbox is ticked, then click Save all changes.

    Google Sign-In section of the Vehica Panel with the Enable Google Auth checkbox ticked and an arrow pointing at SAVE ALL CHANGES.

Done. Your users can now sign in with their Google account this way:

Vehica login form with a Google button next to a Facebook button under "Continue with", above the email and password fields.

Ask the people who build Vehica

We answer by email from support@tangiblewp.com. With Premium Support, we also fix your site when something breaks.

Send us a message What Premium Support covers 

We can also run your site for you, or build a new one.

Was this guide helpful?