How to unattach gapi- auth2.attachClickHandler on a condtion

Question

I am using the google auth for client (gapi) in my code and I have this onLoad event:

<script>
    function onLoad() {
        gapi.load('auth2', function () {
            auth2 = gapi.auth2.init();
            var additionalParams = {};
            auth2.attachClickHandler('signinButton', additionalParams, onSignIn, onSignInFailure);
            //auth2.attachClickHandler('btnGoRegister', additionalParams, onRegisterIn, onSignInFailure);
        });
    }
</script>

As you can see above, I am attaching a click handler for my Signin button which works fine. The other part is that for the Register button, I have to enable/disable the button and associated events on a condition which works fine for other auth (like FB).

The problem here is that once the attachClickHandler is invoked, then I am unable to in unattach it so that if my condition is not true, then the Google popup screen should not be invoked (currently if it is invoked once then it will always be shown irrespective of my condition).

Does anyone have any idea on how to achieve this?

Thanks

Answer 1

It looks like Google Sign-In API does not support a method for un-attaching the click handler. On the other hand they have a disconnect() & signOut() function, but I don't think it achieves what you want.

One solution is to add an additional button which handles the decision of loading the Google Auth API and preforms the click on signinButton. The signinButton can be hidden using css.

I don't have the api up & running but the code should look something like:

const GoogleSignInButton = 'signinButton';
const GoogleDecisionGateSignInButton = 'googleDecisionGateButton';

function onLoad() {
    document.getElementById(GoogleDecisionGateSignInButton).addEventListener("click", GoogleDecisionGateButton);
}

function GoogleDecisionGateButton() {
    if (ShouldUseGoogleSigninButton()) {
        LoadGoogleAuthApi();
        ClickGoogleAuthButton();
    }
}

function ShouldUseGoogleSigninButton() {
    return true; // Replace this with logic to decided if user should use Google API Auth button or not.
}

function LoadGoogleAuthApi() {
    gapi.load('auth2', function () {
        auth2 = gapi.auth2.init();
        var additionalParams = {};
        auth2.attachClickHandler(GoogleSignInButton, additionalParams, onSignIn, onSignInFailure);
        //auth2.attachClickHandler('btnGoRegister', additionalParams, onRegisterIn, onSignInFailure);
    });
}

function ClickGoogleAuthButton() {
    document.getElementById(GoogleSignInButton).click()
} 

HTML:

<button id="signinButton" type="button"></button>
<button id="googleDecisionGateButton" type="button"></button>

CSS:

#signinButton { display: none !important }