sveltekit redirectTo component option not working

[kinglouie]

Environment

System:
OS: macOS 14.2.1
CPU: (10) arm64 Apple M2 Pro
Memory: 97.36 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.7.0 - /opt/homebrew/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 10.1.0 - /opt/homebrew/bin/npm
Browsers:
Chrome: 122.0.6261.69
Safari: 17.2.1

Reproduction URL

https://github.com/kinglouie/authjsrepro2/

Describe the issue

After the user logs in I want to redirect to the original requested url, to achieve this I want to leverage the options prop of the SignIn.svelte component as seen here in the repro.

This feature is unfortunately broken at the moment. The redirectTo url is successfully transmitted by the hidden form input but the sveltekit specific signIn action is buggy in this snippet:

next-auth/packages/frameworks-sveltekit/src/lib/actions.ts

Lines 22 to 28 in fbb8af5

	const {
	redirect: shouldRedirect = true,
	redirectTo,
	...rest
	} = options instanceof FormData ? Object.fromEntries(options) : options
	const callbackUrl = redirectTo?.toString() ?? headers.get("Referer") ?? "/"

the options obj does not contain the key redirectTo, instead the redirect url is in the callbackUrl and also in the redirect key.
Options looks like this when logging it in my repro:

{
  callbackUrl: '/test',
  redirect: '/test',
  email: '[email protected]',
  password: 'test'
}

How to reproduce

Run the repro repository and click the sign in button on the index page, notice how it does not redirect to the /test url
This should be an easy fix by correctly reading the callbackUrl from the options, my testing fix looks like this:

const callbackUrl = options.callbackUrl?.toString() ?? headers.get("Referer") ?? "/";

[onursoyer]

Is there any progress with this issue?

[onursoyer]

Just checking if there are any updates on this issue.

[kinglouie]

Unfortunately I think non of the core maintainers spent any significant time on the sveltekit integration.

I tried this lib 8 months ago and hit several roadblocks for which I raised issues. None of them have been addressed or even acknowledged.

[onursoyer]

Hi @kinglouie,

Did you end up finding a better approach or library that works more smoothly with SvelteKit? I'd love to hear if you have any recommendations for handling authentication or similar functionality in SvelteKit.

[NazgoooAtanasov]

Hi @kinglouie and @onursoyer

I have found a workaround that works for me.

In the submitButton slot (or any other avaialbe slot) of the SignIn component, a hidden input field with name redirectTo could be added.

Simple Example

<SignIn provider="YOUR_PROVIDER" signInPage="YOUR_PAGE">
  <div slot="submitButton">
    <input type="hidden" name="redirectTo" value="YOUR_LOCATION">
  </div>
</SignIn>

[iva2k]

The PR #12315 that claims to fix this issue and closed it does not work in practice.

Reviewing the '@auth/sveltekit' sources, relevant PRs and docs, I see contradicting and inconsistent information and implementation. "callbackUrl" is marked "deprecated", but there are recently merged PRs replacing redirectTo with callbackUrl. It's a mess in there.

However, couple workarounds in my code fix the problem:

I provide both "calbackUrl" and "redirectTo" options to '@auth/sveltekit/client' signIn function and SignIn component.

I then use hidden input field "redirectTo" inside slot="submitButton" for SignIn component - it ends up inside <button> element in page HTML, which is weird, but it works in latest Chromium. There are no other slots for OAuth2 providers to avoid being inside <button> element.

          <SignIn
            options={{
              redirect,
              redirectTo,
              callbackUrl: redirectTo
            }}
            provider={provider.id}
          >
            <div slot="submitButton" class="button">
              <span>
                Sign in with {provider.name}
              </span>
              <!-- Workaround: Until @auth/sveltekit is updated to match the latest Auth.js version -->
              {#if redirectTo}
                <input type="hidden" name="redirectTo" value={redirectTo} />
              {/if}
            </div>
          </SignIn>

With these workarounds redirect works properly.