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
    }),
  },
})

Lessons in this unit:

0:	Introduction
1:	Dynamic routing
2:	SSR in Astro
3:	API endpoints in Astro
4:	Prerendering a component in an SSR page
5:	▶︎ Set cookie and redirect
6:	Render different HTML based on HTTP method
7:	Decide to render a partial or not dynamically in Astro
8:	Fetching data from the network