Google OAuth

Creating a custom Google OAuth application

Step-by-step instructions below follow Google's documentation on setting up OAuth 2.0 for a web application.

Build the consent screen

1. Create or select a project on the Google Cloud Platform Console.
2. Navigate to the project's OAuth consent screen.
3. Select whether your application is an internal or external app.
4. Fill out the application name and support email.
5. Add additional scopes required by your application, saving the full scope URI for later.
   • Possible scope URIs .
6. Ensure that the email and profile scopes are still selected.
7. Under Authorized domains, add ngrok.com and your application homepage domain.
8. Add links to your application homepage and privacy policy. The final consent screen should resemble:
9. Save the application.
   • Applications that require verification cannot complete the consent screen and are not supported by ngrok.

Create credentials for ngrok

1. Navigate to Credentials for your project.
2. Select "Create credentials" from the top menu and select "OAuth Client ID".
3. Choose "Web application" from the list of application types.
4. Name your secret, then set "Authorized Redirect URIs" to https://idp.ngrok.com/oauth2/callback. The final credentials form should resemble:
5. Securely store the client ID and secret from the final screen:

Update your ngrok endpoint traffic policy

1. Access the ngrok Dashboard Endpoints page and locate an existing endpoint you'd like to add this to or create a new one.
2. In your traffic policy, add the following configuration:

YAML

---
on_http_request:
  - actions:
      - type: oauth
        config:
          provider: google
          client_id: "{your app's oauth client id}"
          client_secret: "{your app's oauth client secret}"
          scopes:
            - https://www.googleapis.com/auth/userinfo.profile
            - https://www.googleapis.com/auth/userinfo.email

JSON

{
  "on_http_request": [
    {
      "actions": [
        {
          "type": "oauth",
          "config": {
            "provider": "google",
            "client_id": "{your app's oauth client id}",
            "client_secret": "{your app's oauth client secret}",
            "scopes": [
              "https://www.googleapis.com/auth/userinfo.profile",
              "https://www.googleapis.com/auth/userinfo.email"
            ]
          }
        }
      ]
    }
  ]
}

3. Click Save to validate and update your traffic policy.

Configure access control

Optionally, configure access control to your service by only allowing specific users or domains. For example:

YAML

# Only allow access to me@example.com. Add this after your OAuth Action.
---
on_http_request:
  - expressions:
      - "!(actions.ngrok.oauth.identity.email in ['me@example.com'])"
    actions:
      - type: deny

JSON

// Only allow access to me@example.com. Add this after your OAuth Action.
{
  "on_http_request": [
    {
      "expressions": [
        "!(actions.ngrok.oauth.identity.email in ['me@example.com'])"
      ],
      "actions": [
        {
          "type": "deny"
        }
      ]
    }
  ]
}

Additional application setup information

• Google OAuth 2.0 Web Server (prerequisite steps)
• GCP Help: Setting up OAuth 2.0
• Google OAuth 2.0 workflow