Google Calendar API - Request had insufficient authentication scopes

Question

My app is displaying list of events from users gmail "primary" calendar (and creates/deletes events). App works fine with one of my gmail accounts, when I try to sign in with other gmail accounts I get an error when fetching events:

GET 403, and in response => Request had insufficient authentication scopes.

My code for loading calendar:

window.gapi.load("client:auth2", () => {
    console.log("Client loaded!!");

    window.gapi.client.init({
      apiKey: "MY_API_KEY",
      clientId:
        "MY_CLIENT_ID",
      discoveryDocs: [
        "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest",
      ],
      scope: "https://www.googleapis.com/auth/calendar.events",
    });

    window.gapi.client.load("calendar", "v3", () => {
      console.log("Calendar loaded!!");
      //   List events after calendar is loaded
      listUpcomingEvents("week");
    });
  });

And in my listUpcomingEvents() function I fetch events with pure js(no backend):

window.gapi.client.calendar.events
  .list({
    calendarId: "primary",
    timeMin: start.toISOString(),
    timeMax: end,
    showDeleted: false,
    singleEvents: true,
    maxResults: 100,
    orderBy: "startTime",
  })
  .then(function (response) {
    var events = response.result.items;
    console.log("Events:", events);
    // Set events
    setEvents([...events]);
    setEventsFilter(events_filter);
  });

I have tried setting scopes in my Google Cloud Platform (oauth consent screen), switched to other scopes or add more than scope but nothing works. I have even tried to make calendar public and bunch of other things i found on stackoverflow.

Answer 1

Request had insufficient authentication scopes.

Means that the user has authenticated with one scope but the method you are using requires another.

The method Events.list requires one of the following scopes

Now the code you have posted shows scope: "https://www.googleapis.com/auth/calendar.events", which is one of the scopes that should give you access to list events.

The issue is that when you ran that code the consent screen popped up and the user authorized your application. You then changed the scope to https://www.googleapis.com/auth/calendar.events and ran your code again. But the new consent screen didn't popup because the user is currently authenticated already.

You need to fore your app to request authorization of the user again, at that time the new scope will show up and if the user consents to it you will be able to use that method.

The easiest way to do this is to go to the users google account and revoke the access that was granted to your application. Google account

Or as your application is JavaScript you should be able to wait an hour and your access should expire and the user will be asked to consent again.