---
title: "@vonvon-kit/svelte"
description: "Svelte-5-reaktive Stores und SvelteKit-Server-Hook für Client- undSSR-Authentifizierung."
locale: "de"
---

> Documentation Index
> Fetch the relevant documentation index at: https://vonvon.id/de/sdks/llms.txt
> Use this file to discover all available pages before exploring further.

# @vonvon-kit/svelte

## Zustand

Registry-Status: UNPUBLISHED. Installieren Sie dieses SDK nur aus einem Checkout des Repository-Quellcodes; verwenden Sie keine externe Paket-Registry.

Paketstatus: **Aktuelles Paket**. Svelte-5-Stores,SvelteKit-Server-Hook und Hilfsprogramme sind implementiert. Ein echterIdP-Round-Trip auf Produktionsinfrastruktur steht noch manuell aus.

## Client-Einrichtung

Erstellen Sie Stores im Root-Layout mit `createVonvonStores` und`setVonvonContext`. Stores verwenden `VonvonClient.subscribe`, was denSvelte-Store-Subscriber-Vertrag erfüllt.

```svelte
<!-- +layout.svelte -->
<script lang="ts">
  import { setContext, onMount } from 'svelte'
  import { VonvonClient, createVonvonStores, setVonvonContext } from '@vonvon-kit/svelte'

  // Core auth endpoints must be served on this application's exact origin.
  const client = new VonvonClient({ mode: 'same-origin' })
  const stores = createVonvonStores(client)
  setVonvonContext(setContext, stores)

  onMount(() => {
const ac = new AbortController()
void client.load({ signal: ac.signal })
return () => ac.abort()
  })
</script>
<slot />
```

## Auth-Status lesen

```svelte
<!-- Any child component -->
<script lang="ts">
  import { getContext } from 'svelte'
  import { getVonvonContext } from '@vonvon-kit/svelte'

  const { auth, user } = getVonvonContext(getContext)
  // $auth: { isLoaded, isSignedIn, userId, sessionId, session }
  // $user: discriminated union on isLoaded / isSignedIn / user
</script>

{#if !$auth.isLoaded}
  <p>Loading...</p>
{:else if $auth.isSignedIn}
  <p>Hello, {$user.isSignedIn ? $user.user.fullName : ''}</p>
{:else}
  <p>Not signed in</p>
{/if}
```

## Anmeldung und Abmeldung

```svelte
<script lang="ts">
  import { getContext } from 'svelte'
  import { getVonvonContext, buildSignInUrl, executeSignOut } from '@vonvon-kit/svelte'

  const { client } = getVonvonContext(getContext)

  function handleSignIn() {
window.location.assign(buildSignInUrl('/sign-in', window.location.href))
  }

  async function handleSignOut() {
await executeSignOut(client, { redirectUrl: '/' })
  }
</script>
```

## Rollen- und Berechtigungswächter

```svelte
<script lang="ts">
  import { getContext } from 'svelte'
  import { getVonvonContext, isAllowed } from '@vonvon-kit/svelte'

  const { state } = getVonvonContext(getContext)
</script>

{#if isAllowed($state, { role: 'admin' })}
  <AdminPanel />
{/if}

{#if isAllowed($state, { permission: 'org:member:write' })}
  <EditButton />
{/if}
```

## SvelteKit-Server-Hook

```ts
// src/hooks.server.ts
import { handleVonvon } from '@vonvon-kit/svelte/server'

export const handle = handleVonvon({
  jwtKey: JSON.parse(process.env.VONVON_JWKS_PUBLIC_KEY!),
  issuer: 'https://vonvon.id',
  sessionTokenExchange: { endpoint: '/v1/sessions/token' },
  protectedRoutes: ['/dashboard', '/account'],
  signInUrl: '/sign-in',
})
```

## Auth in Load-Funktionen lesen

```ts
// +page.server.ts
import { redirect } from '@sveltejs/kit'
import { getVonvonAuth } from '@vonvon-kit/svelte/server'
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async ({ locals }) => {
  const auth = getVonvonAuth(locals)
  if (!auth.userId) throw redirect(303, '/sign-in')
  return { userId: auth.userId, orgId: auth.orgId }
}
```

## App.Locals-Typisierung

```ts
// src/app.d.ts
import type { AuthResult } from '@vonvon-kit/svelte/server'

declare global {
  namespace App {
interface Locals {
  vonvonAuth: AuthResult
}
  }
}
export {}
```

## Exportierte API

| Exportieren | Art | Modul |
| --- | --- | --- |
| `VonvonClient, createVonvonStores, setVonvonContext, getVonvonContext` | Client-Einrichtung | `@vonvon-kit/svelte` |
| `buildSignInUrl, executeSignOut, isAllowed` | Hilfsprogramme | `@vonvon-kit/svelte` |
| `handleVonvon, getVonvonAuth` | Server-Hook | `@vonvon-kit/svelte/server` |

Source: https://vonvon.id/de/sdks/svelte/index.mdx