Question

0

323

Views

Google 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(); 
});

the code from the doc.
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?

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-28T06:08:30.071Z

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.
localhost is 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 async when 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 onMount function check for the google variable. If google is still undefined, call your function again after a certain timeout.

0

323

Google Auth OAuth 2.0 SvelteKit wierd behavior

1 answers

0

Find remote jobs

Andres GPT