Auth

Authentication guards

Users should generally be authenticated in the root layout.

<!-- src/pages/_layout.svelte -->
<script>
  import { authenticate } from 'my-auth-service'
</script>

<!-- Wait with rendering the app till the user/guest is verified.
This prevents small UI glitches and premature authorization checks. -->
{#await authenticate()}
{:then}
  <slot />
{/await}

Authorization Guards

Guards should be implemented in the component or module which they protect.

<!-- src/pages/admin/_layout.svelte -->
<script>
  export let scoped
</script>

{#if scoped.user.isAdmin}
  <slot />
{/if}

Realtime guards

For realtime guards, simply replace {#await <promise>} with {#if <reactive condition>}

SSR / Static

If you use spank, spassr --ssr or our starter template's serverless SSR functions, you need to call $ready() to let tossr know that the page is ready to be rendered. Otherwise tossr would wait indefinitely for your page (eg. index.svelte) to load.

<!-- src/pages/_layout.svelte -->
<script>
  import { $ready } from '@roxi/routify'
  ...
</script>


{#if condition}
  <slot />
{:else}
  { $ready() }
{/if}