Clarification on Fetch with Credentials

[rpf3]

The documentation on the fetch APIs says:

A special version of fetch is available in load functions for invoking endpoints directly during server-side rendering, without making an HTTP call, while preserving credentials.

Similarly, the load function documentation says:

it can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request

I am using a package that handles authentication in the browser and stores the JWT in memory. Until now when I have been making async HTTP requests I manually set the Authorization header and verify the token in my endpoints. What I am trying to figure out is how to set the same Authorization header when requesting a page route itself so that it will be inherited by the load function.

As a follow-up, I also cannot find any documentation around how to pass through credentials to a page endpoint instead of manually writing a script with context="module".

[benlau6]

According to the fetch documentation:

A special version of fetch is available in load functions for invoking endpoints directly during server-side rendering, without making an HTTP call, while preserving credentials. (To make credentialled fetches in server-side code outside load, you must explicitly pass cookie and/or authorization headers.)

Your Authorization header from load function was passed to page endpoint, but then the page endpoint is "server-side code outside load", so you must explicitly pass cookie and/or authorization headers

export async function GET(event) {
  const cookie = event.request.headers.get("cookie") || ""
  const response = await fetch('http://api/protected', {credentials:'include', headers: {cookie}})
  ...

[benlau6]

Can you provide a minimal reproducible example?

[rpf3]

https://github.com/rpf3/fetch-credentials-demo

Generated a SvelteKit skeleton project above.

You can see index.svelte has a prop name that should get its value from the page endpoint index.ts.

There is also an onMount function that is making a manual fetch API call and setting the Authorization header using the client bearer token. I'm trying to figure out if there is a way to configure the page endpoint to also use this header. I was hoping there would be some kind of client-side hook.

[benlau6]

Given the flow from your project, I don't think there is any way to configure the page endpoint to also use this header because it will always be fetched at the very first. You cannot manually pass a Authorization header to it.

[rpf3]

Sorry but I think I'm still confused by this line in the docs:

it can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request

I think I'm missing how one would set the authorization header for the page request in the first place in order for it to be available in the fetch of the load function.

[Nisthar]

@rpf3 i get what you are saying. I have the same question. I usually get the authorization header inside the hooks.server.ts file (using native fetch because there's no special fetch in hooks). The header doesn't persist on its own. i have to pass the value via locals to the load function, etc. idk if using svelte's fetch automatically persist the headers or not.