nextauthjs / nextauthjs/next-auth
using pages option in sveltekit leads to too many redirects
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28.4k
- Forks
- 4k
- PR merge metrics
- No merged PRs in 30d
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the redirect loop after setting AUTH_SECRET, starting with hooks.server.js and the auth/signin +page.svelte and +page.server.js files shown in the report. Trace the callbackUrl as the sign-in page loads and confirm that the completed behavior displays the provider page without repeated redirects.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- node.js, typescript
- Domain
- authentication, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100