using pages option in sveltekit leads to too many redirects

[ziedHamdi]

Environment

System: OS: Windows 10 10.0.19045 CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz Memory: 13.84 GB / 31.90 GB Binaries: Node: 18.16.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.37) Internet Explorer: 11.0.19041.1566

Reproduction URL

https://github.com/ziedHamdi/authsvelte

Describe the issue

When I attempt to create an implementation of the signin page in sveltekit, I get a 'too many redirects' error (and a looping url with callbackUrl repeating itself)

How to reproduce

The code is in the repository, you must edit the .env file by adding a secret :

hooks.server.js //this one works, I just added the pages option to redirect to my page

import { SvelteKitAuth } from "@auth/sveltekit"
import GitHub from "@auth/core/providers/github"
import { GITHUB_ID, GITHUB_SECRET } from "$env/static/private"
import { env } from '$env/dynamic/private'

export const handle = SvelteKitAuth({
  secret:env.AUTH_SECRET,
  providers: [GitHub({ clientId: GITHUB_ID, clientSecret: GITHUB_SECRET })],
  pages: {
    signIn: '/auth/signin',
  }

})

src/routes/auth/signin/+page.svelte

<script>
    import { signIn, getSession, csrfToken } from "@auth/sveltekit/client";

    export let data;
</script>

<div>
        {#each data.providers as provider, index(provider.name)}
            <div key={provider.name}>
                <button on:click={() => signIn(provider.id)}>
                    Sign in with {provider.name}
                </button>
            </div>
            {/each}
</div>

src/routes/auth/signin/+page.server.js //putting the providers manually

import Google from "@auth/core/providers/google";

export async function load(event) {
    const providers = [Google]
    return {providers:JSON.parse(JSON.stringify(providers))}
}

This sends me to a page with this url http://localhost:5173/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A5173%2Fauthorized%2Fcv%2F647a29e46ba81ab341e4bf4a http://localhost:5173/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A5173%2Fauthorized%2Fcv%2F647a29e46ba81ab341e4bf4a

And it complains of too many redirects

Expected behavior

Just display the page with the providers

[ziedHamdi]

For those who will struggle with this, I migrated to Lucia, Everything works as expected after a day and half of work (for email and google logins). You can expect such a delay for your migration.

[benquan]

I have the same problem, trying to create a custom verifyRequest:

pages: {
  verifyRequest: '/auth/verify-request', // (used for check email message)
}

I have a simple +page.svelte and it results in too many redirects

[benquan]

The only workaround I found was not to use /auth path, rather to use your own path for example:

pages: {
  verifyRequest: '/myAuth/verify-request', // (used for check email message)
}

[Arinautic]

Getting something similar in my project. Pages object is as follows:

pages: { signIn: '/login', signOut: '/auth/signout', error: '/login', }

Upon logging in with credentials or logging out, it shows "Too many redirects", but after a few seconds this error disappears and the page works as normal. Not sure why it's doing this on Svelte specifically. Even if I disable the redirect on Login, and go to the protected URL manually, it does the same thing. Logging out also shows the same. It's odd that the code works fine though, it authenticates and logs out, just that it's bad UX having "Too many redirects" pop up in the user's face anytime they log in or out.