Google Sign-In for Websites Documentation Frustration and "gapi.auth2 has been initialized with different options." error

Question

I'm so frustrated by the google auth docs. They seem to be inconsistent.

It says here:

https://developers.google.com/identity/sign-in/web/reference#gapiauth2initparams

I can call

gapi.auth2.init(params)

In my case, I want to pass in the hosted_domain param to restrict who can sign in to this app. Under the parameters list it explicitly states that

"You must request the email scope when using the hosted_domain parameter alongside fetch_basic_profile: false."

Great so I come up with:

var apiKey = 'my_key';
var scopes = 'email name';
var GoogleAuth = gapi.auth2.init({
    apiKey: apiKey,
    fetch_basic_profile: false,
    scope: scopes,
    hosted_domain: "my_domain"
});
GoogleAuth.signIn()
    .then(function(response) {
            // Do stuff
        })
        .catch(function(err) {
          console.log(err);
        });

When I test this out I get an error in my console:

gapi.auth2 has been initialized with different options. Consider calling gapi.auth2.getAuthInstance() instead of gapi.auth2.init().

But the docs clearly state that I should send the params to the init() method.

So I go to the getAuthInstance() documentation:

https://developers.google.com/identity/sign-in/web/reference#gapiauth2getauthinstance

Where is explicitly states that

You must initialize the GoogleAuth object with gapi.auth2.init() before calling this method.

Um, that's exactly what I thought I did, so why the error telling me to go straight for the getAuthInstance()? This is making me molt.

So I give it a try:

var apiKey = 'my_key';
var scopes = 'email name';
var GoogleAuth = gapi.auth2.getAuthInstance({
    apiKey: apiKey,
    fetch_basic_profile: false,
    scope: scopes,
    hosted_domain: "my_domain"
});
GoogleAuth.signIn()
    .then(function(response) {
            // Do stuff
        })
        .catch(function(err) {
          console.log(err);
        });

And the result is not as expected. It essentially proceeds to ignore the hosted_domain allowing anybody to sign in and seems to retrieve the full profile rather than just the email and name. What am I missing here?

Thanks

Answer 1

I think you may be misunderstanding the note for the hosted_domain param. You don't need to set fetch_basic_profile to false but if you do, you need to add "email" to the scope param.

As far as I can tell, this is all you should need...

const apiKey = 'my_key';
gapi.load('auth2', () => {
  gapi.auth2.init({
    client_id: apiKey, // note "client_id", not "apiKey"
    hosted_domain: 'my_domain'
  }).then(auth2 => { // wait for initialisation
    if (!auth2.isSignedIn.get()) { // check if already signed in
      auth2.signIn().then(...)
    }
  })
})

---

As for your error...

gapi.auth2 has been initialized with different options. Consider calling gapi.auth2.getAuthInstance() instead of gapi.auth2.init().

Sounds like you may be calling gapi.auth2.init() in multiple places. There should only be one instance of this.