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.