Add Google Login

• 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.

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

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

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

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

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

• 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’.

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

• (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’.

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

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

• 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’.

• 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.

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

  • 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’.

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