How to properly authenticate and use GoogleCalendar-API using oAuth2 in Vue CLI environment - vue.js

Question

I'm trying to integrate Google-Calendar-API in my Vue-CLI-based Webapp. I have decided to use the node.js version of GoogleAPI as learned from this site: https://developers.google.com/calendar/quickstart/nodejs#troubleshooting. However, I got:
TypeError: Expected input to be a Function or Object, got
undefined
This is for my personal project written in Vue-Cli, Vue Router, Vuetify.js, and additionally authenticated through Firebase (login via Google account). After a user logs in through Firebase UI (via Google account), they will get access to the dashboard page where they shall be able to access their calendar via Google's oAuth2 API system (stuck). I have initially tried using the browser-based javascript API but failed (and personally preferred node.js version later).
Dashboard.vue
<script>
import { config } from "#/../hidden/config.js";
const {google} = require('googleapis');
// If modifying these scopes, delete token.json.
// The file token.json stores the user's access and refresh tokens, and is
// created automatically when the authorization flow completes for the first
// time.
const TOKEN_PATH = '#/assets/token.json';
export default {
data() {
return {
oAuth2Client: null,
SCOPES: ['https://www.googleapis.com/auth/calendar.readonly'],
client_secret: "",
client_id: "",
redirect_uris: ""
};
},
methods: {
/**
* Create an OAuth2 client with the given credentials, and then execute the
* given callback function.
* #param {Object} credentials The authorization client credentials.
* #param {function} callback The callback to call with the authorized client.
*/
authorize: () => {
const self = this;
self.oAuth2Client = new google.auth.OAuth2(
client_id, client_secret, redirect_uris[0]);
self.getAccessToken(self.oAuth2Client);
self.oAuth2Client.setCredentials();
self.listEvents(oAuth2Client);
},
/**
* Get and store new token after prompting for user authorization, and then
* execute the given callback with the authorized OAuth2 client.
* #param {google.auth.OAuth2} oAuth2Client The OAuth2 client to get token for.
* #param {getEventsCallback} callback The callback for the authorized client.
*/
getAccessToken: () => {
const self = this;
const authUrl = self.oAuth2Client.generateAuthUrl({
access_type: 'offline',
scope: SCOPES,
});
console.log('Authorize this app by visiting this url:', authUrl);
self.oAuth2Client.getToken(code, (err, token) => {
if (err) return console.error('Error retrieving access token', err);
self.oAuth2Client.setCredentials(token);
// self.listEvents();
});
}
/**
* Lists the next 10 events on the user's primary calendar.
* #param {google.auth.OAuth2} auth An authorized OAuth2 client.
*/
/*
listEvents: () => {
const self = this;
const auth = self.oAuth2Client;
const calendar = google.calendar({version: 'v3', auth});
calendar.events.list({
calendarId: 'primary',
timeMin: (new Date()).toISOString(),
maxResults: 10,
singleEvents: true,
orderBy: 'startTime',
}, (err, res) => {
if (err) return console.log('The API returned an error: ' + err);
const events = res.data.items;
if (events.length) {
console.log('Upcoming 10 events:');
events.map((event, i) => {
const start = event.start.dateTime || event.start.date;
console.log(`${start} - ${event.summary}`);
});
} else {
console.log('No upcoming events found.');
}
});
}
*/
},
created: function() {
const {credentials} = require("#/credentials.json");
this.client_secret = credentials.installed.client_secret;
this.client_id = credentials.installed.client_id;
this.redirect_uris = credentials.installed.redirect_uris;
//this.authorize();
}
};
</script>
I expect to be able to connect to the Google Calendar API and start working on actually manipulating the calendar event info for my purpose. However, I'm getting the error:
TypeError: Expected input to be a Function or Object, got
undefined
.
I have tried looking for people with similar problems online, however I didn't find any video guides or written guides for Vue-cli projects that use Google APIs.
I do confess that I have modified my code a little bit from the referenced sample from the website to avoid using fs and readline npm packages. However, the error message was same in those cases too.