google-load-libraries.js

function load_libaries(client_id, api_key, discovery) {
  
  let goog_ready = false;
  let gapi_ready = false;

  let pass;
  let fail;

  let ready = new Promise((res, rej) => {
    pass = res;
    fail = rej;
  });

  function _all_ready() {
    if (goog_ready && gapi_ready) {
      pass();
    }
  }

  function _gapi_setup() {
    gapi = window.gapi;
    gapi.load('client', async() => {
      await gapi.client.init({
        apiKey: api_key,
        discoveryDocs: [ discovery ],
      });
      gapi_ready = true;
      _all_ready();
    });
  }

  function _goog_ready() {
    google = window.google;

    google.accounts.id.initialize({
      client_id: client_id,
      auto_select: true,
      callback: on_response
    });
    
    goog_ready = true;
    _all_ready();
  }

  // GIS Library, loads itself onto the window as 'google'
  const googscr = document.createElement('script');
  googscr.type = 'text/javascript';
  googscr.src = 'https://accounts.google.com/gsi/client';
  googscr.defer = true;
  googscr.onload = _goog_ready;
  googscr.onerror = fail;
  document.getElementsByTagName('head')[0].appendChild(googscr);
  
  // GAPI Library, loads itself onto the window object as 'gapi'
  const gapiscr = document.createElement('script');
  gapiscr.type = 'text/javascript';
  gapiscr.src = 'https://apis.google.com/js/api.js';
  gapiscr.defer = true;
  gapiscr.onload = _gapi_setup;
  gapiscr.onerror = fail;
  document.getElementsByTagName('head')[0].appendChild(gapiscr);

  return ready;
}