"Request is missing required authentication credential" when sending a request to Google Calendar

user_17768050 0
Viewed 281

I'm developing a react calendar app where a user can see their events retrieved from a Google calendar or add their own ones through the app. I am using @react-oauth/google to sign in and get credentials.

Here I can get a clientId and credential. How can I use them to add/retrieve events to/from a Google Calendar? Should I add credentials to a request object somehow? (NOTE: instead of "" in CLIENT_ID and API_KEY I inserted some valid values that I got here https://console.cloud.google.com/. Authorized JavaScript origins are http://localhost:3000 and http://localhost)

error: {code: 401, data: Array(1), message: 'Request is missing required authentication credent…ogle.com/identity/sign-in/web/devconsole-project.'}

import React from "react";
import { GoogleOAuthProvider, GoogleLogin } from "@react-oauth/google";

const GoogleCalendar = () => {
  var gapi = window.gapi;
  var CLIENT_ID =
    "";
  var DISCOVERY_DOCS = [
    "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest",
  ];
  var SCOPES = "https://www.googleapis.com/auth/calendar.events";
  var API_KEY = "";

  const AddEvent = (credentialResponse) => {
    var event = {
      summary: "Google I/O 2015",
      location: "800 Howard St., San Francisco, CA 94103",
      description: "A chance to hear more about Google's developer products.",
      start: {
        dateTime: "2022-05-21T09:00:00-07:00",
        timeZone: "America/Los_Angeles",
      },
      end: {
        dateTime: "2022-05-21T17:00:00-07:00",
        timeZone: "America/Los_Angeles",
      },
      recurrence: ["RRULE:FREQ=DAILY;COUNT=2"],
      attendees: [
        { email: "lpage@example.com" },
        { email: "sbrin@example.com" },
      ],
      reminders: {
        useDefault: false,
        overrides: [
          { method: "email", minutes: 24 * 60 },
          { method: "popup", minutes: 10 },
        ],
      },
    };

    gapi.client.load("calendar", "v3", () => console.log("bam!"));

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

    request.execute((event) => {
      console.log(event);
      window.open(event.htmlLink);
    });
  };

  return (
    <>
      <GoogleOAuthProvider clientId={CLIENT_ID}>
        <GoogleLogin
          onSuccess={(credentialResponse) => {
            console.log(credentialResponse);
            AddEvent(credentialResponse);
          }}
          onError={() => {
            console.log("Login Failed");
          }}
        />
      </GoogleOAuthProvider>
    </>
  );
};

export default GoogleCalendar;

react-google-login google-calendar-api reactjs calendar
2 Answers

In order to add the events, the client should be loaded and signed in before calling add events. What you did is correct but you have to wait for the response of client load then you can call add events:

gapi.client.setApiKey('YOUR_API_KEY');
gapi.client
  .load('https://content.googleapis.com/discovery/v1/apis/calendar/v3/rest')
  .then((res) => {
    var request = gapi.client.calendar.events.insert({
      calendarId: 'primary',
      resource: event,
    });

    request.execute((event) => {
      console.log(event);
      window.open(event.htmlLink);
    });
  });
user_114985680

you need your access_token to authorize to google APIs, you can get it from using Authorization flows from @react-oauth/google by using useGoogleLogin

user_180403540
Related