Best practices to react on a redirect by transparent AAA proxy and reload page

[helge79]

We use SvelteKit with adapter-static for a SPA that communicates with a backend behind an AAA proxy. The proxy performs the authentication and enriches the HTTP headers to the backend with the user's authorization data. If the user is not logged in, the proxy redirects them to a HTML login page. Of course, it also does this for fetch-requests instead of simply sending an HTTP 401 or 403. Unfortunately, it is not in our responsibility to change this.

What do we want to achieve?

If we determine that the user should log in because, for example, the AAA session has expired, we reload the site so that the redirect from the AAA proxy takes effect and the user sees the login page.

What is the problem now?

The calls to the backend in the +page.ts follow the redirect, then there is a CORS error (login page is running on a different host). Performing the fetch with mode: no-cors is not an option, but disallowing redirects is, as we do not expect a redirect by the API and a redirect can only occur if triggered by the AAA proxy. So we now set redirect: manual and evaluate the opaque response and make a window.location.reload(). It basically looks like this:

export const load: PageLoad = (async ({ fetch }) => {
  const res = await fetch(`${base}/api/foobar`, {
    redirect: 'manual',
    headers: {
      'Accept': 'application/json',
    }
  });

  if (browser && res.status === 0 && res.type === 'opaqueredirect') {
    // reload
    window.location.reload();
  } else if (!res.ok) {
    throw error(res.status);
  }

  const content = await res.json() as Content;

  return { content };
});

However, this only works for resources already known to the SPA. If you click on a route where SvelteKit needs to load components, this call is redirected to the Login Page by the AAA proxy. This triggers a CORS error and the unexpected error is handled by our error component (i.e. +error.svelte). This is a rather rare case, but will occur more frequently after deployment (or with deactivated caches)

My questions:

1. Although it works, it feels wrong to call window.location.reload() in +page.ts and proceed as nothing unusual happened. What would be a better practice here? Introduce a customized App.Error and handle the reload in +error.svelte? Return an error in PageData to page component and handle it there?
2. Is there any chance we can catch the redirect when Svelte loads components? We would have to set redirect: manual there as well. So is there any kind of a fetch hook that can be applied for loading resources when building a SPA?

I am grateful for all hints and ideas.

[khromov]

Discussed further here: https://discord.com/channels/457912077277855764/1210197015980539944/1210197015980539944