svelte-clerk-auth

Clerk Auth Library For SvelteKit

Clerk Auth Library for Sveltekit

A Svelte kit library implementing the Clerk js Auth.

Installation

1pnpm install svelte-clerk-auth

1npm install svelte-clerk-auth

Usage

1<script lang="ts">
2    import { initializeClerk, signIn, signOut, SignedIn, SignedOut, UserButton } from "svelte-clerk-auth";
3    import { onMount } from "svelte"
4
5    const clerkOptions = {}; // Refer from Clerk documentation
6    const optionalSignInProps = {}; // Refer from Clerk documentation
7    const optionalSignInProps = {}; // Refer from Clerk documentation
8    onMount(async () => await initializeClerk(clerkOptions))
9</script>
10
11<SignedIn>
12    <span>Shows only when SignedIn.</span>
13
14    <!--UserButton provides convinient way to show user profile-->
15    <UserButton />
16
17    <button on:click={_ => signOut(optionalSignOutOptions)}>Sign Out</button>
18</SignedIn>
19<SignedOut>
20    <span>Shows only when SignedOut</span>
21    <button on:click={_ => signIn(optionalSignInProps)}>Sign In</button>
22<SignedOut>

ClerkStore Object

1type ClerkStoreProps = {
2    loading: boolean; // Checks if clerk has loaded
3    user?: UserResource | null; // Shows UserResource only if user is logged in
4    session?: SessionResource | null; // Current Session for the user
5    userIsSignedIn: () => boolean; // Returns true if user is logged in
6};
7// For specifcs refer to Clerk Documentation

1<script lang="ts">
2    import { ClerkStore} from "svelte-clerk-auth";
3
4    $: console.log($ClerkStore);
5</script>

Info

Documentations of the project is ongoing.

Project is safe to use.

Raise any issues here and support this project's documentation and any other necessary improvements.

Care should be taken to only use SignedIn component where needed, since clerk-js is fully client side.

Only encapsulate code that truly needs user authentication.

For example in a Ecommerce Store, where you wish the products to be easily indexed by search engines, or better SEO for the overall website, but only authenticated users can place products in the Cart then do as follows:

In Procuct.svelte

1<script lang="ts">
2    import { signIn } from "svelte-clerk-auth";
3
4    let id = "78828dh-d88u8-kdj83";
5    let name = "Peanut Butter";
6    let imgSrc = "https://.../img.jpeg";
7    let price = 400;
8
9    function addProductToCart() {
10        // Add Product To Cart
11    }
12
13    function signInUser() {
14        signIn({ /* SignInProps */ });
15    }
16</script>
17
18<div class="card">
19    <img src={imgSrc} />
20    <span>{name}</span>
21    <span>{price}</span>
22    <SignedIn>
23        <button on:click="{addProuctToCart}">
24    </SignedIn>
25    <SignedOut>
26        <button on:click="{signInUser}">Login To Add Products</button>
27    </SignedOut>
28</div>