Google Redirect URI

[FunMiles]

I have used Google and Facebook logins in some other application, using the APIs provided by these giants.
I find this SvelteKit Auth project interesting and am trying to integrate it in a new application.
I copied login.svelte, appAuth.ts and the [...auth].ts files from the app demo.
When trying to open the login interface with Google, I get an error:

Error 400: redirect_uri_mismatch

You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy.

If you're the app developer, register the redirect URI in the Google Cloud Console.

I note that in my previous apps, a separate window is created and then I get a code from Google, that I then send to a back4app server. The server handles the actual login verification.
The login uses GoogleAuth and responseType="code" as a parameter to obtain the code on the client side that will be sent to the server.

In SvelteKit Auth, the same window where the web page was running is being used, so I presume the redirect URI comes into play here, but I am ignorant on how to make this all work. 😊

I would appreciate some guidance. Thanks in advance.

[FunMiles]

I have investigated more and have probably some part of the resolution but some of what I found confuses me more....

• The page with the error gives me that the redirect_uri was "https://localhost/api/auth/callback/google", so I added that address to the authorized redirect URI
• The URI has 'https' which my development is not doing... so that fails.
• @vhscom has put a sample code that uses (for github) ?redirect=/account/profile. When I do something similar, it seems to have no impact on the redirect_uri passed to Google.

The redirect page in the application from @vhscom does not seem to grab anything from the redirect URL arguments. Is that argument a redirect that the previous redirect (to api/auth/callback/google) will call?

I guess right now, my next step is to have the redirect to be to "http://localhost" and not the SSL enabled one.

[vhscom]

Haven't tried Google but I hope you found the example I left in #72 helpful. Perhaps you would be so kind as to leave us with one of your own when you're finished. Good luck!

[FunMiles]

It is in that example that I found the redirect. I will probably create an example and more importantly, talk about the little details I faced here in the README, such as what redirect URI to tell Google to accept, how to address the 'http' and finally, how I am retrieving the final profile (which I haven't gotten yet. See edited comment two boxes below).

[FunMiles]

Hurrah!

I added protocol: 'http' to the configuration of the SvelteKitAuth constructor allows me to get the redirect URI to not use https.

I also discovered that indeed the ?redirect=/account/profile is the redirect done by the SvelteKit Auth code.

I think that I am close to a fully useful login sequence. If anybody has some comments or further guidance, I'd appreciate it.

[FunMiles]

I have a final redirect to my account/profile page but the session has no user.
What am I missing?

PS:

• On the server side, the callback does get the Google user information correctly.
• SSR does have the user identity correctly. On the browser, nothing is available.

PPS:
I read the following blog: https://blog.andrasbacsai.com/ssr-authentication-guide-for-sveltekit and found out how I can obtain the session information on the client side using load:

<script lang="ts" context="module">
    export async function load({ fetch, session }) {
        return {
            props: {
                session
            }
        };
    }
</script>
<script>
   export let session; /// The session prop is obtained from the `load` and contains the authentication data if any.
   console.log('User data:', session.user);
<script>
// Rendering HTML below

Here is a strange discovery: This is probably a detail in how sveltekit deals with the app/store variables. Once the above code was in use, the store variable containing the session suddenly had the value of the session both on the server and on the browser side. Might be worth exploring.