So it is true that modern browsers just recently blocked pop up authentication?

Using redirect from Cloud does not work in our system. It says canceled for the status when you reach the redirect page and sends you right back without asking to authenticate.

Under the response tab it always fails to load the response data so we can not see why they sent us back without authorizing us first.

We do have the redirect URL allowed in the console

Here is the payload from the canceled request

you wont be able to open the authentication via a popup as far as I can tell. You should just open the authentication in a new tab instead of a new window.

I am not sure we have a choice in how the authentication site opens. We are creating the following object and then requesting a code and somehow the browser just visits the authentication site, which then kicks us back to our redirect URL.

codeClient = google.accounts.oauth2.initCodeClient({
  client_id: CLIENT_ID,
  scope: 'https://www.googleapis.com/auth/calendar.events',
  ux_mode: 'redirect',
  redirect_uri: 'https://app.laserfiche.com/forms/HfDuh',
});

codeClient.requestCode();

It could be a content security policy on the LF side, or because the redirect is not "user initiated" meaning it didn't happen from a button click.

Is there an error in the dev console when you initiate the client?

The console remains completely empty. The only error is in the network tab showing a status of (canceled) with a red X

Ok, well it very likely could be the CSP then. This doc page talks about this header (#5), try adding the googleapis domain as shown in the docs and try again.

This is for Laserfiche Cloud. Is there a way to change headers in Cloud? If so I would just change the Cross Origin Opener Policy to be same-origin-allow-popups as the Google Documentation recommends in order to allow pop up auth.

https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid?utm_source=chatgpt.com

What is your full code? I just did the following and it redirects to google's auth page just fine

 

$(() => {
  $.getScript('https://apis.google.com/js/api.js', function() {
      $.getScript('https://accounts.google.com/gsi/client', function() {
        const codeClient = google.accounts.oauth2.initCodeClient({
          client_id: '12345',
          scope: 'https://www.googleapis.com/auth/calendar.events',
          ux_mode: 'redirect',
          redirect_uri: 'https://app.laserfiche.com/forms/HfDuh',
        });
        console.log(codeClient);
        codeClient.requestCode();
      });
  });
});

Below is my full code block in a custom html activity. Credentials are removed.

Am I missing an error somewhere in the network tab? I just see the red X and the (canceled) status. If I mouse over the red X or try to click on it I don't get anything.

The commented out tokenClient variable references were the pop up method, the codeClient variable references are the new redirect method.

<div>
  <button id="authorizeBtn">Authorize</button>
  <button id="createEventBtn">Create Event</button>
</div>
    <label>Subject: <input type="text" id="evtSubject"></label><br>
    <label>Date (YYYY-MM-DD): <input type="date" id="evtDate"></label><br>
    <label>Start Time (HH:MM): <input type="time" id="evtStartTime"></label><br>
    <label>End Time (HH:MM): <input type="time" id="evtEndTime"></label><br>
  
<script>
(async function() {
  // === CONFIGURATION ===
  const CLIENT_ID = 'X';
  const API_KEY = 'Y';
  const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest';
  const SCOPES = 'https://www.googleapis.com/auth/calendar.events';

  let codeClient;
  let tokenClient;
  let gapiInited = false;
  let gisInited = false;

  // === LOAD THE GOOGLE API CLIENT ===
  function loadGapi() {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'https://apis.google.com/js/api.js';
      script.onload = resolve;
      script.onerror = reject;
      document.body.appendChild(script);
    });
  }

  // === LOAD THE GOOGLE IDENTITY SERVICES LIBRARY ===
  function loadGIS() {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'https://accounts.google.com/gsi/client';
      script.onload = resolve;
      script.onerror = reject;
      document.body.appendChild(script);
    });
  }

  // === INIT GOOGLE API CLIENT ===
  async function initGapiClient() {
    await gapi.client.init({
      apiKey: API_KEY,
      discoveryDocs: [DISCOVERY_DOC],
    });
    gapiInited = true;
    maybeEnableButtons();
  }

  // === INIT GOOGLE IDENTITY TOKEN CLIENT ===
  function initGisClient() {
/*
    tokenClient = google.accounts.oauth2.initTokenClient({
      client_id: CLIENT_ID,
      scope: SCOPES,
      callback: (tokenResponse) => {
          console.log('test');
        if (tokenResponse.access_token) {
          document.getElementById('createEventBtn').disabled = false;
       console.log('create event enabled');
        }else{
       console.log('create event NOT enabled');

        }
      },
    });
*/
codeClient = google.accounts.oauth2.initCodeClient({
  client_id: CLIENT_ID,
  scope: 'https://www.googleapis.com/auth/calendar.events',
  ux_mode: 'redirect',
  redirect_uri: 'https://app.laserfiche.com/forms/HfDuh',
});
    gisInited = true;
    maybeEnableButtons();
  }

  function maybeEnableButtons() {
    if (gapiInited && gisInited) {
      document.getElementById('authorizeBtn').disabled = false;
    }
  }

  // === AUTHORIZE BUTTON HANDLER ===
  document.getElementById('authorizeBtn').onclick = () => {
    //tokenClient.requestAccessToken({ prompt: 'consent'});
    codeClient.requestCode();
  };

  // === CREATE EVENT FUNCTION ===
  async function createCalendarEvent(subject, dateStr, startTimeStr, endTimeStr) {
    const startDateTime = new Date(`${dateStr}T${startTimeStr}:00`);
    const endDateTime = new Date(`${dateStr}T${endTimeStr}:00`);
    
    const event = {
      summary: subject,
      start: { dateTime: startDateTime.toISOString() },
      end: { dateTime: endDateTime.toISOString() },
    };

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

    const response = await request;
    console.log('Event created:', response.result);
    alert('Event created successfully!');
  }

  document.getElementById('createEventBtn').onclick = async () => {
    await createCalendarEvent('Test Event', '2025-10-28', '14:00', '15:00');
  };

  // === LOAD LIBRARIES IN ORDER ===
  await loadGapi();
  await new Promise((resolve) => gapi.load('client', resolve));
  await initGapiClient();

  await loadGIS();
  initGisClient();

})();
</script>

Is that AI generated code? I couldn't get that code to work, but I got the code from the docs to work fine

https://developers.google.com/workspace/calendar/api/quickstart/js

Their official code works for you? I moved away from it to use a chatGPT version when I started getting the following error. I reviewed their code to make sure there is no append function on the variable CLIENT_ID which is set as a constant to begin with. It should just be holding a string of characters. Because this error was completely illogical and the chatGPT version worked I switched.

That error doesn’t happen when you preview the form. It happens in the designer because it keeps reinstantiating the code so it tries to redecorate the variable

For me I only see the error in the console after choosing to preview, but before I authenticate. I can click authenticate and the window pops up allowing me to choose my account, but it still displays this message in the console after I finish trying to authenticate and it does not show the add calendar button.

I was able to get a list of events from my calendar. It did throw errors and i'm not entirely sure why. It does seem to be instantiating twice erroring on the CLIENT_ID variable you mentioned too as well as the CORP error. But as you can see below, I was able to get it to work.

NOTE: I made the custom buttons type="button" because it was otherwise submitting the form

<p>Google Calendar API Quickstart</p>

<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize_button" type="button" onclick="handleAuthClick()">Authorize</button>
<button id="signout_button" type="button" onclick="handleSignoutClick()">Sign Out</button>

<pre id="content" style="white-space: pre-wrap;"></pre>

<script type="text/javascript">
  /* exported gapiLoaded */
  /* exported gisLoaded */
  /* exported handleAuthClick */
  /* exported handleSignoutClick */

  // TODO(developer): Set to client ID and API key from the Developer Console
  const CLIENT_ID = 'CODE';
  const API_KEY = 'KEY;

  // Discovery doc URL for APIs used by the quickstart
  const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest';

  // Authorization scopes required by the API; multiple scopes can be
  // included, separated by spaces.
  const SCOPES = 'https://www.googleapis.com/auth/calendar.readonly';

  let tokenClient;
  let gapiInited = false;
  let gisInited = false;

  document.getElementById('authorize_button').style.visibility = 'hidden';
  document.getElementById('signout_button').style.visibility = 'hidden';

  /**
   * Callback after api.js is loaded.
   */
  function gapiLoaded() {
    gapi.load('client', initializeGapiClient);
  }

  /**
   * Callback after the API client is loaded. Loads the
   * discovery doc to initialize the API.
   */
  async function initializeGapiClient() {
    await gapi.client.init({
      apiKey: API_KEY,
      ux_mode: 'redirect',

      discoveryDocs: [DISCOVERY_DOC],
    });
    gapiInited = true;
    maybeEnableButtons();
  }

  /**
   * Callback after Google Identity Services are loaded.
   */
  function gisLoaded() {
    tokenClient = google.accounts.oauth2.initTokenClient({
      client_id: CLIENT_ID,
      scope: SCOPES,
      ux_mode: 'redirect',
      callback: '', // defined later
    });
    gisInited = true;
    maybeEnableButtons();
  }

  /**
   * Enables user interaction after all libraries are loaded.
   */
  function maybeEnableButtons() {
    if (gapiInited && gisInited) {
      document.getElementById('authorize_button').style.visibility = 'visible';
    }
  }

  /**
   *  Sign in the user upon button click.
   */
  function handleAuthClick() {
    tokenClient.callback = async (resp) => {
      if (resp.error !== undefined) {
        throw (resp);
      }
      document.getElementById('signout_button').style.visibility = 'visible';
      document.getElementById('authorize_button').innerText = 'Refresh';
      await listUpcomingEvents();
    };

    if (gapi.client.getToken() === null) {
      // Prompt the user to select a Google Account and ask for consent to share their data
      // when establishing a new session.
      tokenClient.requestAccessToken({ prompt: 'consent' });
    } else {
      // Skip display of account chooser and consent dialog for an existing session.
      tokenClient.requestAccessToken({ prompt: '' });
    }
  }

  /**
   *  Sign out the user upon button click.
   */
  function handleSignoutClick() {
    const token = gapi.client.getToken();
    if (token !== null) {
      google.accounts.oauth2.revoke(token.access_token);
      gapi.client.setToken('');
      document.getElementById('content').innerText = '';
      document.getElementById('authorize_button').innerText = 'Authorize';
      document.getElementById('signout_button').style.visibility = 'hidden';
    }
  }

  /**
   * 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.
   */
  async function listUpcomingEvents() {
    let response;
    try {
      const request = {
        'calendarId': 'primary',
        'timeMin': (new Date()).toISOString(),
        'showDeleted': false,
        'singleEvents': true,
        'maxResults': 10,
        'orderBy': 'startTime',
      };
      response = await gapi.client.calendar.events.list(request);
    } catch (err) {
      document.getElementById('content').innerText = err.message;
      return;
    }

    const events = response.result.items;
    if (!events || events.length == 0) {
      document.getElementById('content').innerText = 'No events found.';
      return;
    }
    // Flatten to string to display
    const output = events.reduce(
      (str, event) => `${str}${event.summary} (${event.start.dateTime || event.start.date})\n`,
      'Events:\n');
    document.getElementById('content').innerText = output;
  }
</script>
<script async="" defer="" src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
<script async="" defer="" src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>

I just tried your exact code, but with my creds. It is actually re-throwing the error about CLIENT_ID each time I click Authorize. The popup comes up as it always has for me, I choose to continue with my account and it closes without error, but notice how no sign out button shows up and nothing is listed in the content box with no failures in the console.

Check your buttons, I forgot I made a change there they're type="button" otherwise they are actually submitting the form. its hard to tell but the form is refreshing when you click authorize.