SDKs / Client

Svelte

Svelte 5 Themeable Playground

@identra/svelte

Drop-in Svelte 5 components and headless hooks (runes), built on the core client.

Install

pnpm add @identra/svelte @identra/js

Wrap your app

html

<script>
  import { IdentraProvider, SignedIn, SignedOut, SignIn, UserButton } from "@identra/svelte";
</script>

<IdentraProvider baseUrl="http://localhost:8080" applicationId={PUBLIC_APP_ID}>
  <SignedOut>
    <SignIn />
  </SignedOut>
  <SignedIn>
    <UserButton />
  </SignedIn>
</IdentraProvider>

Headless (runes)

`useIdentra()` returns a store whose `.state` is a rune — read it directly in markup.

html

<script>
  import { useIdentra } from "@identra/svelte";
  const identra = useIdentra();
</script>

{#if identra.state.isSignedIn}
  <p>Signed in as {identra.state.user.primary_email}</p>
{/if}

Drop-in components

SignInSignUpUserButtonManageAccountSessionListSignedInSignedOutProtectVerifyEmailMagicLinkResetPasswordAcceptInvitation

Try these in the playground

API

IdentraProvideruseIdentra()