1

Obtain Google OAuth Credentials

  • To start out lets get the redirect url from the Hanko console, We will need this in a moment. To do so, sign in to the Hanko console and select your project. Navigate to ‘Settings’ in the left sidebar and then to ‘Social connections’. Copy the ‘Redirect URL’.

  • Let’s also double check that our allowed redirect URL is set to the same URL as our App. To do this, navigate to the ‘URLs’ tab in the left sidebar. Scroll down and make sure that Allowed redirect URLs includes your App URL + ’**’.

  • Navigate to Google cloud console, login 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.

  • Configure your Google Auth Platform, press on ‘Get started’ to set it up.

  • Name your app and select a user support Email.

  • Select ‘User Type’ depending on your requirements

  • Go to ‘Google Auth Platform’ > ‘Audience’ and publish your app.

  • Click ‘Clients’ in the left sidebar, then click ‘Create client’.

  • select ‘Web application’ as application type.

  • Choose a name and paste the previous Redirect URL (that you got from the hanko console), as an ‘Authorized redirect URI’.

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

2

Configure Google OAuth Credentials with Hanko

  • In the ‘Social connections’ section, select Google and enable its toggle switch.

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

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.

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