> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kavachos.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Svelte

> Add KavachOS auth to Svelte and SvelteKit apps via createKavachClient and createKavachHooks. Session state is reactive and server-populated on first page load.

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

## Installation

```bash theme={"system"}
pnpm add @kavachos/svelte
```

## Setup

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

```typescript title="src/lib/kavach.ts" theme={"system"}
import { createKavachClient } from '@kavachos/svelte'; // [!code highlight]

export const {
  session,
  user,
  signIn,
  signOut,
  signUp,
  agents,
} = createKavachClient({ // [!code highlight]
  basePath: '/api/kavach', // [!code highlight]
}); // [!code highlight]
```

### SvelteKit setup

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

```typescript title="src/hooks.server.ts" theme={"system"}
import { createKavachHooks } from '@kavachos/svelte/sveltekit'; // [!code highlight]

export const { handle } = createKavachHooks({ // [!code highlight]
  basePath: '/api/kavach', // [!code highlight]
}); // [!code highlight]
```

Access the session in `+layout.server.ts`:

```typescript title="src/routes/+layout.server.ts" theme={"system"}
import type { LayoutServerLoad } from './$types';

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

## Session store

```svelte title="src/routes/+page.svelte" theme={"system"}
<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}
```

## Sign in / sign up / sign out

```svelte title="src/routes/sign-in/+page.svelte" theme={"system"}
<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>
```

```typescript title="Sign up" theme={"system"}
import { signUp } from '$lib/kavach';

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

```typescript title="Sign out" theme={"system"}
import { signOut } from '$lib/kavach';

await signOut();
```

## createAgentStore

Manage agent identities in reactive Svelte stores:

```svelte theme={"system"}
<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

<ParamField path="basePath" type="string" default="'/api/kavach'">Base path where your KavachOS handler is mounted.</ParamField>
<ParamField path="fetchOptions" type="RequestInit">Options passed to every internal fetch call.</ParamField>