Migrating from Google Sign-In with my Create Calendar Event Javascript Method

I have a method which has been working for the last decade and it still works with my Client ID as is stated in the migration notice. The problem started when using a newly generated Client ID for a new client.

We got this response from Google

You have created a new client application that uses libraries for user authentication or authorization that are deprecated. New clients must use the new libraries instead. See the Migration Guide for more information.

Here is my existing methods that work with the old Client ID:

      var CLIENT_ID = 'XXX';

      var SCOPES = ["https://www.googleapis.com/auth/calendar"];

      /**
       * Check if current user has authorized this application.
       */
      function checkAuth() {


        gapi.auth.authorize(
          {
            'client_id': CLIENT_ID,
            'scope': SCOPES.join(' '),
            'immediate': false
          }, handleAuthResult);
      }

      /**
       * Handle response from authorization server.
       *
       * @param {Object} authResult Authorization result.
       */
      function handleAuthResult(authResult) {

        var authorizeDiv = document.getElementById('authorize-div');
        if (authResult && !authResult.error) {
          // Hide auth UI, then load client library.
          authorizeDiv.style.display = 'none';
          loadCalendarApi();

        } else {

          // Show auth UI, allowing the user to initiate authorization by
          // clicking authorize button.
          authorizeDiv.style.display = 'inline';
        }
      }

      /**
       * Initiate auth flow in response to user clicking authorize button.
       *
       * @param {Event} event Button click event.
       */
      function handleAuthClick(event) {
        gapi.auth.authorize(
          {client_id: CLIENT_ID, scope: SCOPES, immediate: false},
          handleAuthResult);
        return false;
      }

      /**
       * Load Google Calendar client library. List upcoming events
       * once client library is loaded.
       */
      function loadCalendarApi() {
        gapi.client.load('calendar', 'v3', addEvent);
      }

      /**
       * Print the summary and start datetime/date of the next ten events in
       * the authorized user's calendar. If no events are found an
       * appropriate message is printed.
       */
       
       function addEvent() {

      var startTime = $('input[id^=Field10]').val();
      var endTime = $('input[id^=Field11]').val();
      var calendar = $('#q8 input').val();
    var title = $('#q12 input').val();
    var desc = $('#q13 textarea').val();

var arrcal = calendar.split("/");
if (arrcal[0] < 2)
{arrcal[0] = "0"+arrcal[0];}
if (arrcal[1] < 2)
{arrcal[1] = "0"+arrcal[1];}

var formDate = arrcal[2]+"-"+arrcal[0]+"-"+arrcal[1];
var start = formDate+'T'+startTime+':00-07:00';
var end = formDate+'T'+endTime+':00-07:00';

console.log(start + end + title + desc );

var event = {
  'summary': title,
  'location': 'Phone',
  'description': desc,
  'start': {
    'dateTime': start,
    'timeZone': 'America/Los_Angeles'
  },
  'end': {
    'dateTime':  end,
    'timeZone': 'America/Los_Angeles'
  },
  'reminders': {
    'useDefault': false,
    'overrides': [
      {'method': 'email', 'minutes': 24 * 60},
      {'method': 'popup', 'minutes': 10}
    ]
  }
};

var request = gapi.client.calendar.events.insert({
  'calendarId': 'primary',
  'resource': event
});

request.execute(function(event) {
var strevent = event.htmlLink;
if (strevent.indexOf("google.com") >= 0)
{
  appendPre('Event Created');
} else 
{appendPre('Failed to create event');}
});

And my original HTML

  <button id="start" class="createEventButton" onclick="checkAuth()" type="button">
  Create Event
  </button>
    <div id="authorize-div" style="display: none">
      <span>Authorize access</span>
      <!--Button for the user to click to initiate auth sequence -->
      <button id="authorize-button" onclick="handleAuthClick(event)" type="button">
        Authorize
      </button>

I have added the new HTML recommended from the migration document with a call to my original method handleAuthResult since I don’t know what the handleCredentialReponse method is supposed to look like and how it links over to my create event method.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-callback="handleAuthResult">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

However my original code continues to use the old gpi.client libraries and so even after successfully logging in with the new auth button, my method return a 401 unauthorized.

I can clearly see that it says to stop using the old gpi.client when using this method but it provides no information on how to write the new handleCredentialResponse method shown in the new HTML callback or what to replace all my gpi. calls with.

There actually is not one piece of JS examples on this guide. I tried visiting the Javscript API page and I don’t see the word calendar anywhere. I am looking for information on how to create calendar events using the newly created Google client IDs or how to modify my existing methods to work.

Thanks in advance!