Skip to main content

​
1. Wrap your app

<!-- +layout.svelte -->
<script lang="ts">
  import { SunbreakProvider } from '@tdfc/sunbreak-svelte';
  import type { Proof } from '@tdfc/sunbreak-svelte';
  import { PUBLIC_SUNBREAK_CLIENT_ID, PUBLIC_SUNBREAK_BASE } from '$env/static/public';

  let { children } = $props();

  let wallet = $state<string | undefined>();
  let proof = $state<Proof | null>(null);
</script>

<SunbreakProvider
  clientId={PUBLIC_SUNBREAK_CLIENT_ID}
  baseUrl={PUBLIC_SUNBREAK_BASE}
  wallet={wallet || undefined}
  {proof}
>
  {@render children()}
</SunbreakProvider>
Notes
  • wallet should be the currently connected wallet address (or undefined when disconnected).
  • Prove wallet ownership by passing a proof object (SIWE, EIP-191, or Ed25519).
  • Once the wallet and proof are available, the SDK handles /auth/register, /auth/refresh, and /api/session automatically.
See the EVM and Solana examples for complete working code.

​
2. Gate access

Once the provider has a wallet and proof, allowed populates automatically. You do not need to call session() yourself. 
<script lang="ts">
  import { useSunbreak } from '@tdfc/sunbreak-svelte';

  const ctx = useSunbreak();
</script>

{#if ctx.error}
  <p>Something went wrong: {ctx.error}</p>
{:else if ctx.allowed === true}
  <p>Access granted.</p>
{:else if ctx.allowed === false}
  <p>Access denied.</p>
{:else}
  <p>Checking access...</p>
{/if}
Do not destructure useSunbreak(). Destructuring captures values once and loses Svelte reactivity. Always access properties directly on the returned object.
<!-- WRONG: loses reactivity -->
<script>
  const { authenticated } = useSunbreak();
</script>

<!-- CORRECT: stays reactive -->
<script>
  const ctx = useSunbreak();
</script>
{#if ctx.authenticated} ... {/if}