Add Google Login

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.

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

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.

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.

For a custom UI, initialize third party sign-in using @teamhanko/hanko-frontend-sdk.

Create Hanko client instance and call thirdParty.auth with google as the provider.

import { Hanko } from "@teamhanko/hanko-frontend-sdk";

const hanko = new Hanko("<your_hanko_api_url>");

async function signInWithGoogle() {
try {
    await hanko.thirdParty.auth("google", "<your_redirect_url>");
} catch (error) {
    // handle error
}
}

On successful authentication, the API redirects you to the given redirect URL. The URL query includes a one time token that must be exchanged for a JWT. Use the token.validate method on your client to validate the token:
```
import { Hanko } from "@teamhanko/hanko-frontend-sdk";

const hanko = new Hanko("<your_hanko_api_url>");

async function onLoad() {
try {
    await hanko.token.validate();
} catch (error) {
    // handle error
}

// you should now have a JWT cookie set
}
```
On success, the API issues a JWT which is then set by the SDK as a cookie (hanko). All other SDK methods can now use the cookie to make authenticated requests to the API.

Getting Started

Guides

Resources

Community & Support

Add Google Login