Set custom cookie in the header and then redirect in Astro
New Course Coming Soon:
Get Really Good at Git
I had the need to set a cookie and then redirect in Astro.
For some reason (using a library that wanted me to set a cookie string directly) I couldn’t use the Astro.cookies.set()
API, which just works and you don’t need to worry about this.
Anyway I set the cookie using a response header using Astro.response.headers .append()
:
Astro.response.headers
.append('Set-Cookie',
pb.authStore.exportToCookie())
Using return Astro.redirect('/')
right after this didn’t work because the cookie was not attached to the redirect.
I used this instead:
return new Response(null, {
status: 302,
headers: {
Location: '/dashboard',
'Set-Cookie': pb.authStore.exportToCookie(),
},
})
This is exactly what the Astro.redirect() does:
…except we set the Set-Cookie
header too.
NOTE: for Safari compatibility on localhost (it doesn’t allow secure cookies on local), set the secure
option as this:
return new Response(null, {
status: 302,
headers: {
Location: '/dashboard',
'Set-Cookie': pb.authStore.exportToCookie({
secure: import.meta.env.DEV ? false : true
}),
},
})
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X