Implementing Google One Tap sign-in using angular 9 and expressJS

Nowadays, most of the users wants to login to a website with One-Click rather than typing their email and password. Specially, if you are logging in to your google account which provides an easy to use One-Click sign-in or sign-up mechanism. In the following tutorial, I will explain in details how to implement Google One Tap sign in process using angular and Expressjs .

1 - Get client ID

First, go to https://console.developers.google.com/.click on Credentials on the right side of the page, and the credentials page will open. On the top of credential page, click on CREATE CREDENTIALS and a dropdown menu will open then click on OAuth Client ID, the second item from menu. the complete details is available on its official documentation.

2 — Load the One Tap client Library

Second, add following code to “index.html” of angular to load the one tab library.

<script src="https://accounts.google.com/gsi/client" async defer></script>

3-Display One Tap Iframe

Third, you need to show the sign in button on your website homepage. the sign in form page looks like this.

display iframe

You can add following code into app.component.html, but it is better to create new component. I assume your component name is ‘one-tap“.

Open one-tap.component.html and paste following code:

<div id="g_id_onload"
data-client_id="xxxxxxxxxxx.apps.googleusercontent.com"
data-cancel_on_tap_outside="false"
data-callback="authenticationResponse">
</div>

the above code will display the iframe on the top right corner of your page.

Explanation:

• By default, if the user click outside of iframe, the iframe will close. to prevent this action I added data_cancel_on_tap_outside="false" . the iframe only close if the user click on X icon on the top right corner of iframe.
• once the user click on Continue as Name the google will authenticate the user and send response back to the client. For this purpose, I need to handle the response.

To handle the response, I have used Ajax to call my ExpressJS routes to check the user or create new users.

• create a new file by name of custom-javascript.js inside assets folder.
• Paste following code inside custom-javascript.js file.

var handleCredentialResponse = function (response) {
  $.ajax({
    type: 'POST',
    url: '/api/v2.4/one-tap-login',
    headers: {
      'X-Requested-With': 'XMLHttpRequest'
    },
    contentType: 'application/JSON; charset=utf-8',
    success: function(result) {
      if (!result) {
        return ;
      }
      
      if (result.accessToken) {
        localStorage.setItem("accessToken", result.accessToken);
        localStorage.setItem("refreshToken", result.refreshToken);
        
      }
      location.reload();
    },
    processData: false,
    data: JSON.stringify({credential: response.credential})
  });
}

Now I need to check if the token is present in the local storage or not. Of course, what you need to check whether the token is expired or not. I am just saying as an example.

If the token is present then do not load the one-tap component. For example,

<span *ngIf="!token">
<app-one-tap-login></app-one-tap-login>
</span>

To Wrap up

I have tried to explain everything on this tutorial. I hope you find it useful. Here is the Github repository of full project.

Github Repo: https://github.com/nimatullah/angular-one-tap-signin