SvelteKit - Redirect after Form Submit

I have a problem with redirecting after submitting form in SvelteKit.

I have some routes that needs authentication, before rendering it I'm checking if user is authenticated.

routes│  ├──+page.svelte│  ├── login│  │  ├──+page.server.ts│  │  └──+page.svelte│  └── movies│  ├──+page.server.ts│  ├──+page.svelte│  └── [id]│  ├──+page.server.ts│  ├──+page.svelte│  └──+page.ts

For example, when user vistits /movies route, in my +page.server.ts I'm checking if user is authenticated, by lookup in cookies. If cookies haven't auth_token I'm redirecting him to /login route with some info about desired redirecting route after succesful login.

So in that scenario, user will be redirected to /login?redirectTo=%2Fmovies

For that part, everything works great.

The idea is that, if he authenticate it should redirect him again to /movies route.

I wrote some logic in routes/login/+page.server.ts to gather value of redirectTo query param but after submitting form I can't see it.

/routes/login/+page.server.ts

import { redirect } from '@sveltejs/kit';    export const actions = {        login: async ({request, cookies, url}) => {            console.log("url", url)            console.log('request', request)            const formData = await request.formData();            const data = { email: formData.get('email'), password: formData.get('password')}                const response = await fetch("http://localhost:4000/v1/tokens/authentication", {                    method: 'POST',                    headers: {'Content-Type': 'application/json'                    },                    body: JSON.stringify(data),                    credentials: 'include'                })                if (!response.ok) {                    return {success: false};                }                const cookie = response.headers.get('set-cookie');                if (cookie !== null) {                const parts = cookie.split(';');                const token = parts[0].split('=')[1];                const expires = parts.find(p => p.trim().startsWith('Expires'))?.split('=')[1];                cookies.set('auth_token', token, {                    path: '/',                    httpOnly: true,                    sameSite: 'lax',                    expires: expires ? new Date(expires) : undefined                });                console.log(url.searchParams)                const redirectTo = url.searchParams.get('redirectTo') || '/'                console.log("redirectTo", redirectTo)                redirect(303, redirectTo);                return {                    success: true,                }            } return {                success: false,            }        }}

/routes/login/+page.svelte

<script lang="ts">  import { enhance } from "$app/forms";</script><h1>Login</h1><form method="POST" action="?/login" use:enhance><label>Email<input name="email" type="email" required /></label><label>password<input name="password" type="password" required /></label><button>Log in</button></form>

The output of console.log("url", url) is missing that URL with redirectTo value.

url URL {  href: 'http://localhost:5173/login?/login',  origin: 'http://localhost:5173',  protocol: 'http:',  username: '',  password: '',  host: 'localhost:5173',  hostname: 'localhost',  port: '5173',  pathname: '/login',  search: '?/login',  searchParams: URLSearchParams { '/login' => '' },  hash: ''}

What Am I doing wrong? I followed logic from docs.

Solution

I managed to solve this problem.I've used use:enhanced on Login form, to pass search param redirectTo from URL into action.

+page.svelte for login route

<script lang="ts">  import { enhance } from "$app/forms";  import { page } from "$app/stores";  let currentUrl = $page.url.href;  const url: URL = new URL(currentUrl);  const redirectTo: string = url.searchParams.get("redirectTo") ?? "";</script><h1>Login</h1><h1>{currentUrl}</h1><h2>{redirectTo}</h2><form  method="POST"  action="?/login"  use:enhance={({ formData }) => {    formData.append("redirectTo", redirectTo);  }}><label>Email<input name="email" type="email" required /></label><label>password<input name="password" type="password" required /></label><button>Log in</button></form>

+page.server.ts for login route actions

    import { redirect } from '@sveltejs/kit';    export const actions = {        login: async ({request, cookies, url}) => {            const formData = await request.formData();            const data = { email: formData.get('email'), password: formData.get('password'), redirectTo: formData.get("redirectTo")}            console.log("data", data)                const response = await fetch("http://localhost:4000/v1/tokens/authentication", {                    method: 'POST',                    headers: {'Content-Type': 'application/json'                    },                    body: JSON.stringify({email: data.email, password: data.password}),                    credentials: 'include'                })                if (!response.ok) {                    console.log('err', response)                    return {success: false};                }                const cookie = response.headers.get('set-cookie');                if (cookie !== null) {                const parts = cookie.split(';');                const token = parts[0].split('=')[1];                const expires = parts.find(p => p.trim().startsWith('Expires'))?.split('=')[1];                cookies.set('auth_token', token, {                    path: '/',                    httpOnly: true,                    sameSite: 'lax',                    expires: expires ? new Date(expires) : undefined                });                console.log(url.searchParams)                const redirectTo = data.redirectTo != null ? data.redirectTo.toString() : "/"                console.log("redirectTo", redirectTo)                redirect(303, redirectTo);               } return {                success: false,            }        },        register: async (event) => {            console.log('elo')        }    }