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 fromhanko-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 fromhanko-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. -
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: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.