Auth error with Chrome extension: Invalid Cookie Policy

[yaraju]

When using google-sign-in on Chrome extension, loading the page directly like so:

chrome-extension://mylongid/my-element/demo.html

With the following tag in my custom element:

<google-signin client-id="myextensionclientId" scopes="https://www.googleapis.com/auth/userinfo.email" width="iconOnly" brand="short"></google-signin>

I get the following error::

Error:
Uncaught gapi.auth2.ExternallyVisibleError: Invalid cookiePolicy

tY  @   cb=gapi.loaded_0:120
_.hN    @   cb=gapi.loaded_0:133
AuthEngine.initAuth2    @   google-signin-aware.html.0.js:139
(anonymous function)    @   api.js?onload=https___apis_google_com_js_api_js_onload___callback___api_loaded:7
ga  @   api.js?onload=https___apis_google_com_js_api_js_onload___callback___api_loaded:1
v.(anonymous function).b    @   api.js?onload=https___apis_google_com_js_api_js_onload___callback___api_loaded:7
v.(anonymous function)  @   api.js?onload=https___apis_google_com_js_api_js_onload___callback___api_loaded:7
I.(anonymous function)  @   api.js?onload=https___apis_google_com_js_api_js_onload___callback___api_loaded:7
(anonymous function)    @   cb=gapi.loaded_0:1

[yaraju]

Subsequently a red icon with no "g" shows up. On Clicking the red button, I get the following error:

Uncaught TypeError: Cannot read property 'currentUser' of nullAuthEngine.signIn @ google-signin-aware.html.0.js:326Polymer.signIn @ google-signin-aware.html.0.js:493Polymer.signIn @ google-signin.html.0.js:407handler @ polymer.html.0.js:361decorated @ polymer.html.0.js:3119

[ebidel]

My suspicion is that this is an issue with the Google Signin API not working from chrome-extension:// origin. cc @Zoramite

[Scarygami]

Yes, gapi generally doesn't get along well with Chrome extensions, see for example: google/google-api-javascript-client#64

The preferred way for authentication inside of Chrome extensions is the Chrome Identity API which would probably be out-of-scope for this element.

[yaraju]

I suppose an alternative would be to somehow proxy these calls through the background script, so that the element just gets the status, or a Sign-in button to trigger auth flow on the background script

But this would probably fall within the scope of a separate set of extensions that work on Chrome Apps/Extensions, and not within the core GoogleWebComponents? Is there a more appropriate place where I can put in or track a request for such a set of components from the Polymer team? (Or would that be the Chrome team?)

[addyosmani]

I think the Chrome Identity API wouldn't be the best fit here - agree on it being out of scope. The element should focus on the 90% use-case. We could (potentially) document some of the workarounds needed if operating in an extensions world, but imo my take is we should avoid baking in workarounds here into the element itself.

[JeffPinkston]

I'm getting the exact same errors during build and onClick() when I run my Polymer project on my device using Cordova. Is that related? The code works as expected when I run locally on my desktop.

[atotic]

Could you use oauth2 the way it is intended for installed applications in this use case?

https://developers.google.com/identity/protocols/OAuth2InstalledApp

That would be a nice addition to google-signin, it is not an uncommon request, and we could hide the differences under the hood.

[srikanta72]

I am getting the same error.

<style> /* Put your CSS over here */

 </style>
 
<script src="https://apis.google.com/js/api.js"></script>
<script

src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script>
function start() {
// 2. Initialize the JavaScript client library.
gapi.client.init({
'apiKey': 'MY_API_KEY',
// clientId and scope are optional if auth is not required.
'clientId': 'MY_CLIENT_ID.apps.googleusercontent.com',
'scope': 'profile',
}).then(function() {
// 3. Initialize and make the API request.
return gapi.client.request({
'path': 'https://people.googleapis.com/v1/people/me?requestMask.includeField=person.names',
})
}).then(function(response) {
console.log(response.result);
}, function(reason) {
console.log('Error: ' + reason.result.error.message);
});
};
// 1. Load the JavaScript client library.
gapi.load('client', start);

    $(".signin-btn").on("click", function(){

alert("The paragraph was clicked.");
});

</script>

    <input type="button" class="sign-in-btn" value="Sign in with Google" />
</div>

[harleenarora]

how to solved this issue, on chrome extension.