CODEWITHSUNDEEP
axiosgoogle-apigoogle-oauthcapacitor
Joshua Reinier
Joshua Reinier

Reputation: 11

Error 403 when requesting Google APIs in Capacitor

I am working on transferring a Web App into an iOS format using Capacitor. I am using axios to make requests to Google APIs, and my requests return an Error 403 on the iOS version despite working perfectly in the browser.

Here is the flow from authentication to making the first API call (I'm using capacitor-google-auth for the iOS OAuth, then passing the access token I get from that to Axios to use as the header for HTTP requests).

I used these resources so far: https://github.com/CodetrixStudio/CapacitorGoogleAuth, https://developers.google.com/calendar/api/v3/reference/calendarList/list

My plugin settings for GoogleAuth in "capacitor.config.json" (I've also added the URL scheme of the REVERSED_CLIENT_ID to my info.plist file, as the docs for CapacitorGoogleAuth describe):

"plugins": {
    "GoogleAuth": {
      "scopes": [
        "https://www.googleapis.com/auth/calendar"
      ],
      "clientId": <<my iOS Client ID>>
    }
  }

When starting the app with "index.js," get an access token (works):

import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'
const axios = require('axios')

const token = await GoogleAuth.signIn()
const response = await axios
  .request({
    method: 'GET',
    url: 'https://www.googleapis.com/calendar/v3/users/me/calendarList',
    headers: {
      Authorization: `Bearer ${token.authentication.accessToken}`
    },
    params: {
      key: <<My API Key>>
    }
  })
  .catch(err => console.log(err))
console.log(response)

At this point, it throws this error:

{
  "message": "Request failed with status code 403",
  "name": "AxiosError",
  "config": {
    "transitional": {
      "silentJSONParsing": true,
      "forcedJSONParsing": true,
      "clarifyTimeoutError": false
    },
    "transformRequest": [null],
    "transformResponse": [null],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "env": { "FormData": null },
    "headers": {
      "Accept": "application/json, text/plain, */*",
      "Authorization": "Bearer <<My access token>>"
    },
    "method": "get",
    "url": "https://www.googleapis.com/calendar/v3/users/me/calendarList",
    "params": { "key": <<My Api key>> }
  },
  "code": "ERR_BAD_REQUEST",
  "status": 403
}

Why is this happening with iOS? Is there an issue with the credentials in some way? Do Google APIs not allow HTTP requests from Capacitor apps? Any help would be appreciated as I'm quite stumped. This code works perfectly outside of the iOS environment.

Upvotes: 0

Views: 636

Answers (1)

Joshua Reinier
Joshua Reinier

Reputation: 11

So after reviewing this a bit, I learned that Capacitor apps have HTTP restrictions. Changing my request client to use the Capacitor community HTTP module works.

https://capacitorjs.com/docs/apis/http

Upvotes: 1

Related Questions