Google Sign-In Intermittently works

Question

I've got a page that's using Google Sign-In. It's working fine most of the time; however once in a while instead of receiving a "240 pixel wide dark themed button" as defined in the code, I receive a small white button that just says "Sign In". When the page only loads the little white button, the sign in doesn't work properly. The code isn't dynamic so I don't know why sometimes it renders the white button instead of the blue button.

This is what I'm expecting:

Sometimes it comes up as just this:

My Bootstrap 4 + JS code is as follows:

<div class="container">
    <div class="row justify-content-center col-sm-10 col-md-8 col-lg-6 mx-auto">
        <div id="sign_in_button" class="g-signin2 my-5"></div>

        <div class="w-100 clearfix"></div>

        <div id="sign_out_canvas" class="d-none my-5">
            <button name="sign_out_button" id="sign_out_button" type="button" class="btn btn-light btn-sm">
                <i class="fas fa-sign-out-alt mx-1"></i>
                Sign out
            </button>
            <a href="javascript:void();" onclick="signOut();"></a>
        </div>
    </div>
</div>
</cfoutput>

<script>
    function renderButton() {
        gapi.signin2.render('sign_in_button', {
            'scope': 'profile email',
            'width': 240,
            'height': 50,
            'longtitle': true,
            'theme': 'dark',
            'onsuccess': onSuccess,
            'onfailure': onFailure
        });
    }

    function onSuccess(googleUser) {
        console.log('Google User logged in successfully.');

        $('div#sign_out_canvas').toggleClass('d-none');
        var profile = googleUser.getBasicProfile();

        $.ajax({
            url: '/model/security.cfc',
            method: 'POST',
            data: {
                method: 'signIn',
                'id': profile.getId(),
                'full_name': profile.getName(),
                'given_name': profile.getGivenName(),
                'family_name': profile.getFamilyName(),
                'image_url': profile.getImageUrl(),
                'email': profile.getEmail()
            }
        }).done(function(Data) {
            window.location.replace("/?Action=Home.Home");
        });
    }

    function onFailure(error) {
        console.log(error);
    }
</script>

Answer 1

What triggers renderButton()?

It appears it is not triggering every so often, which is why the default (non themed dark blue button) appears.

Because it doesn't trigger, your white button is what stays, and so what you need to work out is why doesn't that trigger? Is it a connectivity problem? Is there an error that strikes in some of your other code so that your script never triggers further down?

check your console when the error occurs and you will likely find out what is failing to trigger, and thus why renderButton doesn't.