htmlreactjsgoogle-identity

How to migrate to new google identity service sign in?


I have an app where I need to migrate to the new google identity service sign in methods. For several days I am stuck on this issue and I have no idea how to do it, the documentation that google provides seems really confusing for me, so I came here to ask for the help.

My current sign in consists of several parts:

  1. The html file:

    <html lang="en" class="clicking">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title><%= title %></title>
        <link rel="stylesheet" href="/css/app<%= version %>.css?"/>
        <link rel="icon" type="image/x-icon" href="/assets/favicon.ico"/>
        <% include partials/_hotjar.ejs %>
        <% include partials/_googleAnalytics.ejs %>
    </head>
    <body id="account">
    <% include partials/_googleTagManagerNoScript.ejs %>
    
    <% include partials/header.ejs %>
    
    <div id="application"></div>
    
    <% include partials/footer.ejs %>
    <script src="//apis.google.com/js/client.js"></script>
    <script type="application/javascript">
        window.ENVIRONMENT = '<%= process.env.NODE_ENV %>';
    </script>
    <script type="text/javascript" src="/js/app<%= version %>.js"></script>
    <script type="application/javascript">
        APP.init();
    </script>
    </body>
    </html>
    

I guess here I need to include the new script file that google provides?

  1. The app.jsx file:

        gapi.load('auth2', () => gapi.auth2.init({
            client_id: Config.googlePlus.clientId,
        }));
    

What do I need to update here, as you can see I am using the gapi method, but what would be the new one, I do not get from the library.

  1. The login component:

    let auth2 = gapi.auth2.getAuthInstance(); auth2.grantOfflineAccess({redirect_uri: 'postmessage'})

What would be the replacement from the new method?

If you can help me with this, I would gladly appreciate it, thanks in advance!


Solution

  • The process has three steps

    Step 1: Load script

    Include this script https://accounts.google.com/gsi/client

    Step 2: Initiate a client

    When user clicks the Sign in with google button you have to initiate the client using

    const client = window.google.accounts.oauth2.initTokenClient(params);
    

    Here the params are

    {
        client_id: <your_client_id>,
        callback: <success_callback_function>,
        scope: <your_auth_scopes>,
        error_callback: <error_callback_function>,
    }
    

    Step 3: Request token using the client

    After the client is loaded request for access token

    client.requestAccessToken();
    

    All together

    const handleSuccessResponse = (response) => {
      console.log(response.access_token)
    }
    
    const handleErrorResponse = (response) => {
      console.log(response)
    }
    
    const signInWithGoogle = () => {
      // create params
      const params = {
        client_id: <your_client_id>,
        callback: handleSuccessResponse,
        scope: <your_auth_scopes>,
        error_callback: handleErrorResponse,
      }
      
      // create client
      const client = window.google.accounts.oauth2.initTokenClient(params);
      
      // Request token
      client.requestAccessToken();
    }