android 403 for <script src="https://accounts.google.com/gsi/client" async defer></script>

Question

When running my angular (ionic framework) app locally, via a browser all works well but when running via android studio or packaged and pushed into the mobile phone I get a 403.

This is on this line on the index.html: <script src="https://accounts.google.com/gsi/client" async defer></script>

I am trying to integrate/implement "Sign In With Google" button as per this page: https://developers.google.com/identity/gsi/web/guides/client-library

Any pointers?

Thanks in advance!

Answer 1

I have run into the same issue in REACT..

the solution to my problem was to add /* global google */ above the google.accounts.id .

/* global google */ by putting this line above our code, it will automatically refer to the script inside the index.html file.

React.js example

import './App.css';
import { React, useEffect } from 'react'
import jwt_decode from 'jwt-decode'

function App() {

  function handleCallbackResponse(response) {
    var userObject = jwt_decode(response.credential);
    console.log(userObject);
  }
  useEffect(() => {

    /* global google */  <-- Add this line before calling google.accounts.id

    google.accounts.id.initialize({
     client_id: "Your Client ID here",
     callback: handleCallbackResponse
    })

    google.accounts.id.renderButton(
     document.getElementById("signInDiv"),
      { theme: "outline", size: "large" }
    );

    return () => {
    }
  }, [])


  return (
   <div className="App">
   <div id="signInDiv"></div>
   </div>
  );
}

export default App;