Protected Routes / has(), protect(), and <Protect>

[evdama]

How would one use has(), protect(), and <Protect> with clerk-sveltekit?

It's not yet implemented if I'm correct?

Here's a link to Clerks Blog post about it: https://clerk.com/blog/introducing-authorization

[dustypomerleau]

I struggled with this as well. At the moment, my workaround for a <Protect>-like experience is something like:

<script lang="ts">
    import ClerkLoaded from "clerk-sveltekit/client/ClerkLoaded.svelte";
    import SignedIn from "clerk-sveltekit/client/SignedIn.svelte";
</script>

<ClerkLoaded let:clerk>
    <SignedIn>
        {#if clerk?.session?.checkAuthorization({ permission: "my:custom:permission" })}
            <slot />
        {:else}
            <div>
                You don't have permission to view the content for the selected organization.
            </div>
        {/if}
    </SignedIn>
</ClerkLoaded>

[hbcondo]

Hi, just wanted to follow-up and check the status of this request. We would also greatly benefit from implementing this in clerk-sveltekit.

[wobsoriano]

Once this PR gets merged, you'll be able to protect your routes/components like this:

In your server routes:

export const load = (event) => {
  const { has } = event.locals.auth

  if (!has({ permission: 'org:widgets:create' })) {
    // ...
  }

  // ...
}

and in your components:

<script>
  import Protect from 'clerk-sveltekit/client/Protect.svelte'
</script>

<nav>
  <a href="/">Home</a>
  <a href="/widgets">Widgets</a>
  <Protect role="org:admin">
    <a href="/admin">Admin Panel</a>
  </Protect>
</nav>