Struggling to understand how to achieve this, even though it's extremely monplace across the web.

I have two modals, one is a "sign up" modal, the other is a "log in" modal. I need to be able to perform both actions via a user's Google account. I am successfully creating and logging in users via the Google API.

The trouble es with the fact that Google's drop-in button automatically signs the user in.

On the page I have:

<div class="g-signin2" data-onsuccess="googleSignUp"></div>

And later:

<div class="g-signin2" data-onsuccess="googleLogIn"></div>

Obviously these two buttons have different onsuccess functions, but both are being called when the user is logged in. I have somewhat alleviated the problem by only actually getting the Google script on a button click:

$('a#google-login').click(function() {
    $.getScript('.js');
})

But the behaviour of this whole setup is less than ideal. Is there a mon fix for this? It seems incredibly frustrating that Google automatically runs onsuccess functions if the user is logged in (eg without any user action). What's the point of having a button if it runs without user action?

So: I want to be able to log users in via Google, and also sign users up via Google, but only if the user actually clicks a button, in both cases.

Struggling to understand how to achieve this, even though it's extremely monplace across the web.

I have two modals, one is a "sign up" modal, the other is a "log in" modal. I need to be able to perform both actions via a user's Google account. I am successfully creating and logging in users via the Google API.

The trouble es with the fact that Google's drop-in button automatically signs the user in.

On the page I have:

<div class="g-signin2" data-onsuccess="googleSignUp"></div>

And later:

<div class="g-signin2" data-onsuccess="googleLogIn"></div>

Obviously these two buttons have different onsuccess functions, but both are being called when the user is logged in. I have somewhat alleviated the problem by only actually getting the Google script on a button click:

$('a#google-login').click(function() {
    $.getScript('https://apis.google./js/platform.js');
})

But the behaviour of this whole setup is less than ideal. Is there a mon fix for this? It seems incredibly frustrating that Google automatically runs onsuccess functions if the user is logged in (eg without any user action). What's the point of having a button if it runs without user action?

So: I want to be able to log users in via Google, and also sign users up via Google, but only if the user actually clicks a button, in both cases.

• javascript
• jquery
• google-api
• google-plus
• google-signin

2 Answers 2

You can achieve what you want by implementing Google Sign-In buttons with imperative approach. My remendation is to use the custom buttons. That way you will get more control over the API. Check out this doc:
https://developers.google./identity/sign-in/web/build-button

And this video might help as well.
https://www.youtube./watch?v=Oy5F9h5JqEU]

Here's a sample code
https://github./GoogleChrome/google-sign-in

As @agektmr said I used the custom button as described in here https://developers.google./identity/sign-in/web/build-button

After that you can create 2 buttons and used a different callback for each one.

This is the code that I had it working with within my react ponent so thats why I'm referencing auth2 from the window object, but you might not need that if your using vanilla JS, This also contains some ES6 so sorry if your not using ES6, you can just convert () => {} to function () { } and let to var

// This method is from the above cited article, I have just altered it slightly so 
// that you can input a success  callback as a parameter rather than hard coding just one
function attachElementToCallback(element, success) {         
  window.auth2.attachClickHandler(element, {}, success    
    , (error) => {
      var message = JSON.stringify(error, undefined, 2);
      alert(message)
    });
}

function initializeGoogleStuff() {
  window.gapi.load('auth2', () => {
    window.auth2 = window.gapi.auth2.init({
      prompt: "select_account",
    })

    let signInElement = window.document.getElementById("signInButton")
    if (signInElement) {
      attachElementToCallback(signInElement, handleLogin)
    }

    let signUpElement = window.document.getElementById("signUpButton")
    if (signUpElement) {
      attachElementToCallback(signUpElement, (response) => console.log(response))
    }

  })
}

for the html (this is just copied and pasted from the above article and duplicated, they have the CSS and further instructions if you want to make it ply with googles branding guidelines (which is a must if you want them to verify your app) https://developers.google./identity/branding-guidelines

<div id="signInButton" class="customGPlusSignIn">
  <span class="icon"></span>
  <span class="buttonText">Sign In</span>
</div>
<div id="signUpButton" class="customGPlusSignIn">
  <span class="icon"></span>
  <span class="buttonText">Sign Up</span>
</div>