Name: KavachOS
Author: KavachOS

@kavachos/svelte provides reactive Svelte stores and a SvelteKit hooks integration. It works with Svelte 4+, SvelteKit, and plain Vite setups.

Installation

pnpm add @kavachos/svelte

Setup

Create a client instance and export the stores from a shared module:

src/lib/kavach.ts

import { createKavachClient } from '@kavachos/svelte'; 

export const {
  session,
  user,
  signIn,
  signOut,
  signUp,
  agents,
} = createKavachClient({ 
  basePath: '/api/kavach', 
});

SvelteKit setup

In SvelteKit, expose the session on the server side via hooks.server.ts so the initial page load is never unauthenticated:

src/hooks.server.ts

import { createKavachHooks } from '@kavachos/svelte/sveltekit'; 

export const { handle } = createKavachHooks({ 
  basePath: '/api/kavach', 
});

Access the session in +layout.server.ts:

src/routes/+layout.server.ts

import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals }) => {
  return { session: locals.session }; // populated by the hook
};

Session store

src/routes/+page.svelte

<script lang="ts">
  import { session } from '$lib/kavach';
</script>

{#if $session.isLoading}
  <p>Loading...</p>
{:else if $session.data}
  <p>Signed in as {$session.data.user.email}</p>
{:else}
  <a href="/sign-in">Sign in</a>
{/if}

src/routes/sign-in/+page.svelte

<script lang="ts">
  import { signIn } from '$lib/kavach';

  let email = '';
  let password = '';
  let error = '';

  async function handleSubmit() {
    const result = await signIn({ email, password });
    if (!result.success) {
      error = result.error.message;
    }
  }
</script>

import { signUp } from '$lib/kavach';

const result = await signUp({ email, password, name });

Sign out

import { signOut } from '$lib/kavach';

await signOut();

createAgentStore

Manage agent identities in reactive Svelte stores:

<script lang="ts">
  import { createAgentStore } from '@kavachos/svelte';

  const { agents, createAgent, revokeAgent, isLoading } = createAgentStore({
    basePath: '/api/kavach',
  });

  async function addAgent() {
    await createAgent({ name: 'My assistant', permissions: ['read:data'] });
  }
</script>

{#each $agents as agent}
  <div>{agent.name} <button on:click={() => revokeAgent(agent.id)}>Revoke</button></div>
{/each}

Client configuration reference

Prop

Type

Svelte