Sign in button fails to show up sometimes

[deb17]

Hi,
I am facing a peculiar problem with my website. I am using the plugin in a login modal (bootstrap-vue) alongside a custom login form. The google sign in button fails to show up only sometimes. Either some or all of the 'samesite' cookie messages in the console are missing, meaning I guess that the scripts did not run (properly). The sign in button then appears after one or more refreshes. What could be causing this?

Thanks.

[rmartide]

Hello,

Mmm, maybe in your case since you are using it in a modal you need to try using the loader plugin. This way the script will be loaded before the modal appears.

Now that I think about it I have to do some clarifications regarding the difference between using the loader plugin and the normal approach.

Try it and tell me how it goes.

[deb17]

Thanks for the reply.
How do I make the GoogleLogin button component use the loader plugin? Is it enough to just import and register the plugin in main.js?

[rmartide]

Yes, just import and Vue.use with the parameters that you want (at least the clientId).

I have to do some changes so if you use the loader plugin you don't need to add the clientId to the button parameters as well, I don't remember if it's enforced, I need to check it.

[deb17]

Your solution seems to have worked. Now the sign in button is appearing consistently, though the site is taking more time to load. I will close the issue after some more tests. Thanks a lot for your prompt support!

[deb17]

The problem is occurring even if I use the loader plugin. (The slow page load that I mentioned above was because of my link speed). To further test, I duplicated the sign in button outside the modal on my index page, but the problem was still occurring - the button was not rendering even outside the modal. Additionally, the cookie messages were not appearing in the (chrome) console like they do when everything is fine. On the network tab, the 'idpiframe.js' entry is missing (it is present when the button appears). Could it be a problem with the google server and not my app? Or else, why wouldn't the button show up in a typical use case?

[rmartide]

The button renders after the script loads since it's getting rendered by google. In the case of this component instead of the user adding the script url to the head the component does it automatically. But to be honest I don't know what could cause the button to disappear, it is just a div with an id, the styling and functionality is controlled by google.

Did you try with the normal button? Just to test if when the rendered button disappears the login functionality remains.

I wish I could be more helpful, one thing you can do is check if the script is loaded in the sources tab and also just in case check if there's a node in the head with the id auth2_script_id. Besides that I'm out of ideas

[deb17]

I checked that there is a script in the head tag with id auth2_script_id and there is the platform.js script loaded in the sources tab, even when the button does not appear. I am yet to test whether the login functionality remains when button does not render. Meanwhile, I noticed that this problem is happening only on chrome - I could not reproduce it even once on firefox.

[deb17]

I tried with the normal button, without google rendering it. The login works. I guess I will proceed with this and not use renderparams.

[rmartide]

I will try to use the component in a modal with bootstrap-vue to see if I can replicate it, the weirdest part is that it only happened to you in chrome, usually is the opposite; I'm quite intrigued.

[deb17]

As the login is working, I am not worried about the results I was getting.