1

Obtain Google OAuth Credentials

  • Let’s get the redirect url first from Hanko console, as you’ll need it in a moment. To do so, sign in to Hanko and select your project. Navigate to ‘Settings’ in the left sidebar and then to ‘Identity Providers’. Copy the ‘Redirect URL’ from here.

    Hanko Callback URL
  • Navigate to Google cloud console and click on ‘Select a project’ at the top left.

    Google settings option
  • Select ‘New Project’ from the top right of modal.

    Google settings option
  • Provide a ‘Project name’, if you want the project to be part of an organization, assign it using the ‘Location’ input and hit ‘Create’

    Google settings option
  • Now type ‘OAuth’ in the searchbar and choose ‘OAuth consent screen’ from results.

    Google settings option
  • Select ‘User Type’ depending on your requirements and click ‘Create’

    Google settings option
  • Next provide ‘App Information’, ‘App logo (optional)’, and ‘App Domain’. You do not need to add an Authorised domain at this point. An entry will be added automatically once you set up your credentials. Scroll down and click ‘Save and continue’.

    Google settings option
  • On the ‘Scopes’ view, click ‘Add or remove scopes’ and select the ./auth/userinfo.email scope. Click ‘Update’, then ‘Save and continue’.

    Google settings option
  • (Optional, only available for an External project user type): On the ‘Test users’ view, click ‘Add users’ to set up test users as long as your project is unpublished. Click ‘Save and continue’. Now, review your data in the ‘Summary view’, then click ‘Back to dashboard’.

    Google settings option
  • Click ‘Credentials’ in the left sidebar, then click ‘Create credentials’ and select ‘OAuth client ID’

    Google settings option
  • On the ‘Create OAuth client’ ID view, select ‘Web application’ as application type.

    Google settings option
  • Now add your ‘App name’ and under ‘Authorized redirect URIs’ click Add URI and add your the Hanko redirect URL that you obtained in the start. Then click ‘Create’.

    Google settings option
  • The Google console will display information about the OAuth client, copy and save both ‘Client ID’ and the ‘Client secret’, you will need these in the next step.

    Google settings option
2

Configure Google OAuth Credentials with Hanko

  • Head back to Identity providers in Hanko and under ‘Identity provider settings’ configure the following:

    Hanko Callback URL
    • Error Redirect URL: This URL, on your frontend, is where the Hanko API redirects if an error occurs during third-party sign-in. With hanko-elements web components, it should link to the page embedding the web component to process errors correctly.

    • Allowed Redirect URL: A URL on your frontend that the Hanko API can redirect to after a successful third-party authentication. Using hanko-elements web components? Make it the URL of the embedding page.

      Supports wildcard matching through globbing:

      • https://*.example.com matches https://foo.example.com and https://bar.example.com.
      • https://foo.example.com/* matches URLs like https://foo.example.com/page1 and https://foo.example.com/page2.
      • Use ** to act as a super-wildcard/match-all.
  • In the ‘Providers’ section, select Google and enable its toggle switch.

  • Input the earlier noted ‘Client ID’ and ‘Client Secret’, then click ‘Save’.

    Hanko Callback URL
3

Implement Google Login in Your Frontend Application

Whether you choose to use the pre-designed UI from the @teamhanko/hanko-elements package or opt for a custom UI with the @teamhanko/hanko-frontend-sdk will determine your approach to frontend integration.

  • Hanko Elements

  • Hanko Frontend SDK

  • Integrate the <hanko-auth> component from hanko-elements based on our frontend guides. If everything is good, the component will display a button for signing in with ‘Google’ in login view.

    Make sure to configure the page the web component is embedded on as your error redirect URL as well as an allowed redirect URL.

    Post successful Google authentication, the backend sets a session cookie and errors during authentication are displayed within the component accordingly.