0
326
VistasGoogle Auth OAuth 2.0 SvelteKit wierd behavior
I am using Google Auth OAuth 2.0 One Tap Sign and Sveltekit, and I got some really weird behavior, I followed this doc https://developers.google.com/identity/gsi/web/guides/overview with javascript
onMount(async () => {
const handleCredentialResponse = async (response) => {
console.log('Encoded JWT ID token: ' + response.credential);
};
google.accounts.id.initialize({
client_id: clientId,
callback: handleCredentialResponse,
});
google.accounts.id.renderButton(
document.getElementById('buttonDiv'),
{ theme: 'outline', size: 'large' } // customization attributes
);
google.accounts.id.prompt();
});Sometimes it works everything goes well,
Sometimes I got
- Uncaught (in promise) ReferenceError: google is not defined And some mobile / mobile browsers I get
- [GSI_LOGGER]: The given origin is not allowed for the given client ID. but works on laptop
Hope someone can understand and help.
Do we have any way to check logs for investigation?
1 Respuestas
Responde la pregunta0
I got your code to successfully run without modification: https://google-signin-kit.vercel.app/ (This app is in "dev" mode so signin may only succeed with my Google account. If you clone my repo and set your Google client id, signin will work for you.)
I would check how my code is different from your code outside onMount(). For example, how did you include the Google javascript? I describe one major change below.
You also need to check your Google app settings. [GSI_LOGGER]: The given origin is not allowed... is fixed by adding the HTTPS app domain to your Google app "Authorized JavaScript origins." Non-HTTPS domains are not allowed. For example, these domains would not work:
- https://google-signin-kit-leftium.vercel.app/ (Not added as Authorized JavaScript origin)
- http://google-signin-kit.vercel.app/ (Not HTTPS, if Vercel did not automatically redirect to HTTPS)
- Of course, raw IP addresses will not work, either.
localhostis a special exception, but not easy (impossible?) to access from mobile.
ReferenceError: google is not defined (sometimes) happens because onMount() runs before the Google script is loaded.
- To get a consistent reproduction, USB debug/inspect Android Chrome and set "disable caching" and throttling to "Slow 3G." (I could not reproduce on desktop Chrome).
- Fixed by removing
defer asyncwhen including Google's script:<script src="https://accounts.google.com/gsi/client"></script> - It should also be possible to call a function after the script is loaded, but I got inconsistent results in SvelteKit. For some reason Kit doesn't always call the load function. Possibly a bug?
- Ideally, the Google script should be
imported, but I couldn't find a version of the Google script that was built for importing. You may be able to construct a library that you can import? Importing would compile the Google script code into your app, tree-shaking the unused portions. Thus saving a network request and bandwidth. - Another workaround is to have your
onMountfunction check for thegooglevariable. Ifgoogleis still undefined, call your function again after a certain timeout.