SDK

SDK Svelte

@authon/svelte — Stores e componentes Svelte para autenticação com o Authon. Funciona com SvelteKit.

Instalação

bash

npm install @authon/svelte @authon/js

Inicialização

Chame initAuthon() no seu layout raiz para configurar o contexto Svelte para toda a árvore de componentes.

+layout.svelte

<script lang="ts">
  import { initAuthon } from "@authon/svelte";

  // Call in your root layout — sets Svelte context for the component tree
  const authon = initAuthon(import.meta.env.VITE_AUTHON_KEY);
</script>

<slot />

Stores Reativos

Use getAuthon() em qualquer componente filho para acessar os stores reativos configurados por initAuthon().

+page.svelte

<script lang="ts">
  import { getAuthon } from "@authon/svelte";

  // Destructure reactive stores from context
  const { user, isSignedIn, isLoading, signOut, openSignIn } = getAuthon();
</script>

{#if $isLoading}
  <p>Loading...</p>
{:else if $isSignedIn}
  <p>Welcome, {$user?.displayName}!</p>
  <button on:click={signOut}>Sign out</button>
{:else}
  <button on:click={openSignIn}>Sign in</button>
{/if}

Referência da API de Store

typescript

import { getAuthon } from "@authon/svelte";

const {
  user,        // Readable<AuthonUser | null>
  isSignedIn,  // Readable<boolean>
  isLoading,   // Readable<boolean>
  signOut,     // () => Promise<void>
  openSignIn,  // () => Promise<void>
  openSignUp,  // () => Promise<void>
  getToken,    // () => string | null
  client,      // Authon — raw JS client instance
} = getAuthon();

Componentes Embutidos

SignIn.svelte e SignUp.svelte renderizam o modal do Authon inline. Importe-os diretamente pelo caminho do arquivo .svelte.

+page.svelte

<script lang="ts">
  import SignIn from "@authon/svelte/SignIn.svelte";
</script>

<!-- Props: publishableKey (required), apiUrl, theme, locale -->
<!-- Event: on:signIn → { user: AuthonUser } -->
<SignIn
  publishableKey={import.meta.env.VITE_AUTHON_KEY}
  theme="auto"
  on:signIn={(e) => console.log("Signed in:", e.detail.user)}
/>

+page.svelte

<script lang="ts">
  import SignUp from "@authon/svelte/SignUp.svelte";
</script>

<!-- Props: publishableKey (required), apiUrl, theme, locale -->
<!-- Event: on:signUp → { user: AuthonUser } -->
<SignUp
  publishableKey={import.meta.env.VITE_AUTHON_KEY}
  theme="dark"
  on:signUp={(e) => console.log("Signed up:", e.detail.user)}
/>

Botões Sociais

Renderize botões de provedor OAuth em qualquer elemento container usando renderSocialButtons().

+page.svelte

<script lang="ts">
  import { getAuthon, renderSocialButtons } from "@authon/svelte";
  import { onMount } from "svelte";

  const { client } = getAuthon();
  let container: HTMLElement;

  onMount(() => {
    return renderSocialButtons({
      client,
      container,
      compact: true,
      onSuccess: () => (window.location.href = "/dashboard"),
      onError: (err) => console.error(err),
    });
  });
</script>

<div bind:this={container}></div>

Store Independente

Use createAuthonStore() diretamente quando precisar de um store do Authon fora do contexto de um componente Svelte.

src/lib/authon.ts

import { createAuthonStore } from "@authon/svelte";

// Use outside of Svelte component context (e.g. in a plain .ts module)
export const authon = createAuthonStore(import.meta.env.VITE_AUTHON_KEY);