router guard and async

[Manborough]

Is there a particular way I need to use async functions within the wrap function?
I'm trying to check authorisation from my API roughly like this.

    '/login': Login,
    '/facility': wrap(
      Facility,
      {},
      async (detail) => {
        const result = await authQuery()
        return await result
      }
      ),
    '*': Login,
  }

but I'm finding the route loads before the results from the api return.

[dkchiem]

I also have this issue. I need to verify that the user is connected with the firebase API.

[BogdanDarius]

Hi!
You could specify in routes config a wrapper component:

let routes;
routes = new Map();
routes.set("/protected-route", MyWrapper);

And in MyWrapper you could do something like this:

{#await isAuthenticated()}
// Show progress
{:then value}
// Load component with Loadable or svelte:component
  <Loadable loader={AccessGrantedComponent} />
{:catch error}
 // Show error
{/await}

[Dan1ve]

I have the same issue, and I feel like the suggestion by @BogdanDarius isn't general-purpose enough to (easily) work on many pages (please correct me if I misunderstood something).
Simply passing an async function to wrap would be really nice!

[BogdanDarius]

I have the same issue, and I feel like the suggestion by @BogdanDarius isn't general-purpose enough to (easily) work on many pages (please correct me if I misunderstood something).
Simply passing an async function to wrap would be really nice!

Promise and lazy routing are on the roadmap.
I encountered same issue while I wanted to implement code splitting.

[Dan1ve]

That's great to hear @BogdanDarius , really looking forward to this!

[keenonsomething]

Encountering this issue with firebase authentication as well, would love to see this feature implemented.

[Dan1ve]

FWIW, I now call a redirectIfNotAuthenticated() method at the top of every <script> tag of protected routes. This method checks the authentication against the server and, if necessary, redirects to the login page (setting the current page as url argument for redirect back after login). Although not an ideal solution, this seems to work fine as a workaround.

[ItalyPaleAle]

I do the same as @Dan1ve in my own code.

If every single route requires authentication, I check it in a function that's called at the beginning of the page's execution, in the main.js file (outside of the Svelte app)

[ItalyPaleAle]

@Manborough support for async functions in route pre-conditions has been added to 3.0 (WIP branch) and will be released with version 3.0 soon 🚀