nextauthjs / nextauthjs/next-auth

using pages option in sveltekit leads to too many redirects

Open
#7,757 8 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.