---
title: "@vonvon-kit/solid"
description: "SolidJS-Kontext-Provider, signalbasierte Auth-Primitive undHeadless-Komponenten auf Basis von @vonvon-kit/core."
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/solid

## Zustand

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

Paketstatus: **Aktuelles Paket**. SolidJS-Kontext-Provider,signalbasierte Primitive und Headless-Komponenten sind implementiert. Einechter IdP-Round-Trip auf Produktionsinfrastruktur steht noch manuell aus.

## Anbieter-Einrichtung

Umschließen Sie Ihre App mit `VonvonProvider`. Es erstellt einen`VonvonClient`, ruft beim Mounten `client.load()` auf, um dieaktuelle Sitzung abzurufen, und bereinigt über `onCleanup`.

```tsx
import { VonvonProvider } from '@vonvon-kit/solid'

export function App() {
  return (
<VonvonProvider
  mode="oidc"
  issuer="https://vonvon.id"
  clientId="client_abc123"
  redirectUri="https://app.example.com/auth/callback"
>
  <Routes />
</VonvonProvider>
  )
}
```

## Auth-Primitive

Jedes Primitive gibt reaktive `Accessor<T>`-Getter-Funktionen zurück.Rufen Sie sie in JSX oder `createEffect` auf, um Änderungen zuverfolgen.

```tsx
import { createAuth, createUser, createOrganization, createSession } from '@vonvon-kit/solid'
import { Show } from 'solid-js'

function Profile() {
  const auth = createAuth()
  // auth.isLoaded()  -- Accessor<boolean>
  // auth.isSignedIn() -- Accessor<boolean>
  // auth.userId()    -- Accessor<string | null>
  // auth.getToken()  -- () => Promise<Result<string, VonvonError>>
  // auth.signOut()   -- (options?) => Promise<Result<null, VonvonError>>

  return (
<Show when={auth.isLoaded()} fallback={<p>Loading...</p>}>
  <Show when={auth.isSignedIn()} fallback={<p>Not signed in</p>}>
    <p>Signed in as {auth.userId()}</p>
    <button onClick={() => void auth.signOut()}>Sign out</button>
  </Show>
</Show>
  )
}
```

## createOrganization und createSession

```tsx
const org = createOrganization()
// org() is CreateOrganizationReturn
if (org().isSignedIn) {
  console.log(org().organization?.name, org().membership?.role)
  const activated = await org().setActive('org_new_id')
  if (!activated.ok) throw new Error(activated.error.message)
}

const session = createSession()
if (session().isSignedIn) {
  const token = await session().getToken()
  if (!token.ok) throw new Error(token.error.message)
  // use token.value for backend requests
}
```

## Headless-Komponenten

```tsx
import { SignInButton, SignOutButton, Protect } from '@vonvon-kit/solid'

// Navigates to /sign-in by default
<SignInButton signInUrl="/auth/sign-in" redirectUrl="/dashboard">
  Log in
</SignInButton>

// Signs out all sessions; pass sessionId to target one
<SignOutButton redirectUrl="/home">Log out</SignOutButton>

// Role and permission gate
<Protect role="admin" fallback={<p>Admins only</p>}>
  <Settings />
</Protect>

<Protect permission="org:member:write" fallback={null}>
  <InviteForm />
</Protect>
```

## Exportierte API

| Exportieren | Art | Zweck |
| --- | --- | --- |
| `VonvonProvider` | Komponente | Erstellt VonvonClient, ruft load() beim Mounten auf, bereinigt über onCleanup |
| `createAuth` | Primitiv | isLoaded, isSignedIn, userId, sessionId, session, getToken, signOut alsAccessors |
| `createUser` | Primitiv | Accessor, der eine Discriminated Union über isLoaded / isSignedIn / userkapselt |
| `createOrganization` | Primitiv | Accessor, der Organisation, Mitgliedschaft und setActive für die aktiveOrganisation zurückgibt |
| `createSession` | Primitiv | Accessor, der Sitzung und getToken für die aktive Sitzung zurückgibt |
| `SignInButton` | Komponente | Headless-Button, der beim Klicken zur Anmelde-URL navigiert |
| `SignOutButton` | Komponente | Headless-Button, der beim Klicken signOut aufruft |
| `Protect` | Komponente | Rollen- und Berechtigungsgate mit Fallback-Prop |

## Token-Speicher

- Der Vonvon Worker speichert eine opake Refresh-Anmeldeinformation in einem `HttpOnly`-Cookie. Sie ist kein JWT; das SDK liest sie weder aus JavaScript noch speichert es sie in `localStorage`.
- `getToken()` gibt ein kurzlebiges JWT (60 s) zurück, das `TokenManager` in `@vonvon-kit/core` ausschließlich im Arbeitsspeicher zwischenspeichert.

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