Accessing Google Calendar API with a token in React

[artooras]

I have been searching the web for days trying to find an example of how to properly access Google Calendar API in my React application. Here are a few notes on my setup:

• I authenticate with Google via Firebase Authentication Google Sign-in successfully (with scope: 'https://www.googleapis.com/auth/calendar') and save the resulting access token in my App.js component.
• I then pass the token to my Calendar.js component as a prop, where I want to use it in order to access the Google Calendar API.
• Even though there are plenty of examples of how to inject a script to download gapi from https://apis.google.com/js/api.js, but I don't want to do this due to various CORS warnings I get as a result.
• Instead, I would prefer to include Google APIs as a module. Is googleapis what I need?

So, in my Calendar.js I know how to get the events from Google Calendar API (because I have previously done it with script injection as mentioned above):

    CALENDAR.events.list({
          'calendarId': 'primary',
          'timeMin': timeMin.toISOString(),
          'timeMax': timeMax.toISOString(),
          'singleEvents': true
        })
        .then(response => {
          let events = []
          response.result.items.forEach(event => {
            events.push({
              title: event.summary,
              start: new Date(event.start.dateTime),
              end: new Date(event.end.dateTime)
            })
          })
          this.setState({events})
        })

but how do I use googleapis to get to the point where I am authenticated with the token that I have (this.props.token) and have a CALENDAR object that I can make a request to?

I would really appreciate some guidance on this.

[ajaaym]

@artooras All api has parameter auth which can be any of this string|OAuth2Client|JWT|Compute|UserRefreshClient. what kind of token you will have in this.props.token?

[artooras]

Hi @ajaaym. I was referring to the Google OAuth token. In my App.js I get the token like this:

      const provider = new firebase.auth.GoogleAuthProvider()
      provider.addScope('https://www.googleapis.com/auth/calendar')

      firebase.auth().signInWithPopup(provider)
        .then(result => {
          result &&
            this.setState({
              user: result.user,
              token: result.credential.accessToken
            })
        }).catch(error => {
          ...
        })

and then I pass it as a prop to my Calendar.js component.

[ajaaym]

can you try below?

  const {google} = require('googleapis');
  const oAuth2Client = new google.auth.OAuth2();
  oAuth2Client.setCredentials({access_token:"Token received from firebase"});
  google.options({auth:oAuth2Client});

[artooras]

Strangely enough, as soon as I add import {google} from 'googleapis' in my Calendar.js, I get an error:

TypeError: can't convert undefined to object

I will note that I am importing this library in my client-sidd React code. Can this be the issue? Is this library perhaps intended only for server-side Node.js implementations?

[ajaaym]

Looks like it needs fs module link here which is not available on client side.

[sduskis]

See googleapis/google-cloud-node#531 for more details

[fhinkel]

Greetings, we're closing this. Looks like the issue got resolved. Please let us know if the issue needs to be reopened.