⚡ AuthCheck Component

Show and hide content for the authenticated user

AuthCheck Component

+page.svelte 
<script lang="ts">
    import { user } from "$lib/firebase";
</script>
  
{#if $user}
  <slot />
{:else}
    <p class="text-error">
        You must be signed in to view this page.
        <a class="btn btn-primary" href="/login">Sign in</a>
    </p>
{/if}

Svelte 5 Version

<script lang="ts">
  import { user } from "$lib/firebase";
  interface Props {
    children?: import('svelte').Snippet;
  }

  let { children }: Props = $props();
</script>
  
  {#if $user}
    {@render children?.()}
  {:else}
      <p class="text-error my-10">
          You must be signed in to view this page.
          <a class="btn btn-primary" href="/login">Sign in</a>
      </p>
  {/if}

Questions? Let's chat

Open Discord