Skip to main content

Google provider setup for Users & Permissions

The present page explains how to setup the Google provider for the Users & Permissions feature.

Prerequisites

You have the Users & Permissions providers documentation.

Google configuration​

Note

Google accepts the localhost urls.
The use of ngrok is not needed.

  1. Visit the Google Developer Console at https://console.developers.google.com/
  2. Click on the Select a project dropdown in the top menu
  3. Then click NEW PROJECT button
  4. Fill the Project name input and create

Wait a few seconds while the application is created.

  1. On the project dropdown, select your new project
  2. Click on Go to APIs overview under the APIs card
  3. Then click on the Credentials link in the left menu
  4. Click on OAuth consent screen button
  5. Choose External and click on create
  6. Fill the Application name and save
  7. Then click on Create credentials button
  8. Choose OAuth client ID option
  9. Fill the information:
    • Name: Strapi Auth
    • Authorized redirect URIs: http://localhost:1337/api/connect/google/callback
  10. Click on OAuth 2.0 Client IDs name of the client you just created
  11. You should see your Application ID and secret, save them for later

Strapi configuration​

  1. Visit the User & Permissions provider settings page at http://localhost:1337/admin/settings/users-permissions/providers
  2. Click on the Google provider
  3. Fill the information (replace with your own client ID and secret):
    • Enable: ON
    • Client ID: 226437944084-o2mojv5i4lfnng9q8kq3jkf5v03avemk.apps.googleusercontent.com
    • Client Secret: aiTbMoiuJQflSBy6uQrfgsni
    • The redirect URL to your front-end app: http://localhost:3000/connect/google/redirect

Your configuration is done. Launch the backend and the react login example application, go to http://localhost:3000 and try to connect to the provider you configured.