Using Google Calendar in React-app Front-end

Question

I know this question is not exactly related to existing code but I want to be able to integrate Google Calendar API in my React project. I am wondering is it possible to be able to integrate this Google Calendar without backend directly in the React Application? For example I want to be able to give people opportunity to book meetings from the website. When they book a meeting I want to be able to see it in my calendar in Google Account. Is this possible or they have to login with their accounts and book it in my calendar or how it is working? I found google documentation about this:

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

But I am not sure if that what I want is possible. I also registered my API key and get my Client ID:

const CALENDAR_ID ="XXXXXXXXXXXXXXXX.apps.googleusercontent.com";
const API_KEY = "XXXXXXXXXXXXXXXXX";
let url = `https://www.googleapis.com/calendar/v3/calendars/${CALENDAR_ID}/events?key=${API_KEY}`;

But when I try to perform call in POSTMAN I get:

{
    "error": {
        "code": 401,
        "message": "Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.",
        "errors": [
            {
                "message": "Login Required.",
                "domain": "global",
                "reason": "required",
                "location": "Authorization",
                "locationType": "header"
            }
        ],
        "status": "UNAUTHENTICATED"
    }
}

So maybe I am doing it wrong. So anyone to have done something like this and can help me? I would really appreciate it, thanks!

Answer 1

Your API key or client-id will allow your app to ask for consent from the user in order to get the access token and be able to use the requested API. In your case, since you want to add people (invitees) to your calendar, it is really you who should be asked for consent.

You can see that the only way to allow your app to make requests to the Calendar API on your behalf is for the app to have access to your access or refresh tokens, which would be insecure to bake into the front end.