SvelteKitError: Not found: /signin/google when using SvelteKit 5

[mikeh2]

Environment

System:
OS: macOS 15.3.1
CPU: (14) arm64 Apple M4 Pro
Memory: 316.67 MB / 48.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 23.6.0 - ~/.nvm/versions/node/v23.6.0/bin/node
npm: 11.2.0 - ~/.nvm/versions/node/v23.6.0/bin/npm
Browsers:
Brave Browser: 132.1.74.51
Chrome: 134.0.6998.166
Safari: 18.3
npmPackages:
@auth/core: ^0.38.0 => 0.38.0
@auth/sveltekit: ^1.8.0 => 1.8.0

svelte@^5.0.0
@sveltejs/kit@next
@auth/sveltekit@1.8.0
@auth/core@0.38.0
Dev server using lvh.me over HTTPS
No manual /signin/google route defined

Reproduction URL

https://github.com/rahulserver/gAuthDemoAppSveltekit

Describe the issue

After upgrading to SvelteKit 5 (svelte@^5.0.0, @sveltejs/kit@next) and using @auth/sveltekit@^1.8.0, the Auth.js handler fails to register its internal routes.

Calling signIn('google') results in:

SvelteKitError: Not found: /signin/google
❗️The same code works in SvelteKit 4 with @auth/sveltekit@0.3.14

How to reproduce

https://github.com/rahulserver/gAuthDemoAppSveltekit
(SvelteKit 4 + Auth.js 0.3.x — working)

upgrade:
package.json:

"devDependencies": {
		"@sveltejs/adapter-auto": "latest",
		"@sveltejs/kit": "^2.16.0",
		"svelte": "^5.25.3",
		"vite": "^6.0.0"
	},
	"type": "module",
	"dependencies": {
		"@auth/core": "^0.38.0",
		"@auth/sveltekit": "^1.8.0"
	}

import { SvelteKitAuth } from "@auth/sveltekit"
import {AUTH_SECRET, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET} from "$env/static/private"
import Google from "@auth/core/providers/google";
// export const handle = SvelteKitAuth({ providers: [Google({ clientId: GOOGLE_CLIENT_ID, clientSecret: GOOGLE_CLIENT_SECRET })] });

export const { handle } = SvelteKitAuth({
  providers: [
    Google({
      clientId: GOOGLE_CLIENT_ID,
      clientSecret: GOOGLE_CLIENT_SECRET
    }),
  ],
  secret: AUTH_SECRET,
  trustHost: true,
});

Expected behavior

signIn('google') should redirect to /api/auth/signin/google and initiate OAuth flow.

[yikuansun]

Same here. Interestingly enough, I'm still on Svelte 4 and didn't ever upgrade my dependencies (as far as I can recall)... will have to look into when the bug started appearing for me

[leon]

The button is generating a /signin/${providerId} but the actual default is /auth/signin/${providerId}

if I go to /auth/signin I get shown a list of all providers.
so it's routed correctly.

There must be something wrong with the button or settings?

[yikuansun]

Yeah. For now, we can replace the buttons with links to /auth/signin and /auth/signout, but they will take the user to signin/signout pages instead of immediately updating the auth.

[Octogonapus]

This seems to be related to #12775. I was able to roll back to 1.7.4.

[ruckc]

Ran into this. Wasn't very fun to troubleshoot.

[yikuansun]

You can make a custom button for signin:

<!-- button to sign in with Google -->

<script>
    import { onMount } from "svelte";

    let callbackUrl = "/";
    let action = "/auth/signin/google";
    onMount(() => {
        // called when component loads
        callbackUrl = window.location.origin;
        action = window.location.origin + "/auth/signin/google";
    });

    export let customText = "";
</script>

<form action={action} method="POST">
    <input type="hidden" name="csrfToken" />
    <input type="hidden" name="callbackUrl" value={callbackUrl} />
    <button type="submit">
        {#if customText}
            {customText}
        {:else}
            Sign in with Google
        {/if}
    </button>
</form>

<style>
    button {
        padding: 5px 10px;
    }
</style>

I am copying the form from the source code of /auth/signin. This way I can ensure the correct callback and action URLs, and even have a custom UI too! Also addresses the annoying issue in #6451, since we are using location.origin to ensure the correct protocol.

Edit: here I do the same thing with signOut:

<!-- button to sign out -->

<script>
    import { onMount } from "svelte";

    let action = "/auth/signout";
    onMount(() => {
        // called when component loads
        action = window.location.origin + "/auth/signout";
    });

    export let customText = "Sign Out";
</script>

<form action={action} method="POST">
    <input type="hidden" name="csrfToken"/>
    <button id="submitButton" type="submit">
        {customText}
    </button>
</form>

<style>
    button {
        padding: 5px 10px;
    }
</style>