How to get access to user's google calendar from React Native (expo)? - react-native

Question

I use Expo, and I want to add access to my app to users which have a Google account. Then I need to get info about Google calendars of the user which login into my app.
I implement login function using: Expo.Google.logInAsync(options) (https://docs.expo.io/versions/latest/sdk/google). My scope look like this:
scopes: ['https://www.googleapis.com/auth/userinfo.email',
'https://www.googleapis.com/auth/userinfo.profile',
'https://www.googleapis.com/auth/calendar.readonly']
When someone tries to login into my app, it asks about permission to see calendars list. In response I get:
Object {
"accessToken": "a",
"idToken": "b",
"refreshToken": "c",
"serverAuthCode": "d",
"type": "success",
"user": Object {
"email": "e",
"familyName": "f",
"givenName": "g",
"id": "h",
"name": "i",
"photoUrl": "j",
},
}
I received data about the user, but I don't have any data about its calendars.
I tried to get data about calendars (https://developers.google.com/calendar/v3/reference/calendarList) with this function:
getUsersCalendarList = async (accessToken) => {
let calendarsList = await fetch('https://www.googleapis.com/calenda/v3/users/me/calendarList', {
headers: { Authorization: `Bearer ${accessToken}`},
});
return calendarsList;
}
In response I got:
Response {
"_bodyBlob": Blob {
"_data": Object {
"blobId": "67b8b161-690f-4ff6-9cee-1dce12840ebd",
"offset": 0,
"size": 994,
},
},
"_bodyInit": Blob {
"_data": Object {
"blobId": "67b8b161-690f-4ff6-9cee-1dce12840ebd",
"offset": 0,
"size": 994,
},
},
"headers": Headers {
"map": Object {
"alt-svc": Array [
"quic=\":443\"; ma=2592000; v=\"44,43,39,35\"",
],
"cache-control": Array [
"public, max-age=0",
],
"content-type": Array [
"application/json; charset=UTF-8",
],
"date": Array [
"Thu, 17 Jan 2019 11:30:32 GMT",
],
"expires": Array [
"Thu, 17 Jan 2019 11:30:32 GMT",
],
"server": Array [
"GSE",
],
"vary": Array [
"X-Origin",
],
"x-content-type-options": Array [
"nosniff",
],
"x-frame-options": Array [
"SAMEORIGIN",
],
"x-xss-protection": Array [
"1; mode=block",
],
},
},
"ok": false,
"status": 403,
"statusText": undefined,
"type": "default",
"url": "https://www.googleapis.com/calendar/v3/users/me/calendarList",
}
How can I get a list of user's google calendars in Expo?

Answer 1

I find the solution here: React-Native JSON fetch from URL. One needs to use json() function on returned object.
The getUsersCalendarList schulde look like this:
getUsersCalendarList = async (accessToken) => {
let calendarsList = await fetch('https://www.googleapis.com/calenda/v3/users/me/calendarList', {
headers: { Authorization: `Bearer ${accessToken}`},
});
return calendarsList.json();
}

Answer 2

You can also add the access token as a parameter on the request.
https://www.googleapis.com/calenda/v3/users/me/calendarList?access_token={token}
I am not a react dev so not exactly sure how to fix your header. It looks ok.