Login with Google using Ionic framework gives 404 on callback - angularjs

Question

I am trying to implement login with Google in an Ionic browser based app. These are the commands I ran to install and create my app:
ionic start tracker sidemenu
cd tracker
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
ionic platform add browser
When I click my login button, the Google auth comes up ok. However when the callback is called I get a 404:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/callback?code=xxxxxx
This OAuth 2 Ionic example gave this code:
var clientId = 'xxxxxx-3rpu226qm-xxxxx.apps.googleusercontent.com';
var scope = 'profile email';
var ref = window.open('https://accounts.google.com/o/oauth2/auth?client_id=' + clientId +
'&redirect_uri=http://localhost:8100/callback&scope=https://www.googleapis.com/auth/urlshortener&approval_prompt=force&response_type=code&access_type=offline',
'_blank', 'location=no');
ref.addEventListener('loadstart', function (event) {
console.log('listener event.url: ' + event.url);
if ((event.url).startsWith("http://localhost:8100/callback")) {
var requestToken = (event.url).split("code=")[1];
console.log('request token from google: ' + requestToken);
ref.close();
}
});
Why isn't the eventListener catching the callback?

Answer 1

Its a known issue of the cordova-plugin-inappbrowser that loadstart and loaderror events are not being fired in the browser.
Source: https://github.com/apache/cordova-plugin-inappbrowser#browser-quirks-1
You might want to look at an other javascript library like hello.js for the browser case (https://adodson.com/hello.js/#hellojs). Or implement it yourself. Here you can find an example for how to do it for google oath2 yourself: https://developers.google.com/identity/protocols/OAuth2UserAgent