Guías

Svelte

Provider, contexto y el botón hospedado con las runes de Svelte 5.

bash

npm install @andco/sdk @andco/sdk-svelte

Montar el provider

src/routes/+layout.sveltesvelte

<script lang="ts">
  import { AndcoProvider } from "@andco/sdk-svelte";

  const clientOptions = {
    clientId: import.meta.env.VITE_ANDCO_CLIENT_ID,
    redirectTo: new URL("/", window.location.origin).href,
    initialScopes: ["openid", "email", "profile"],
  };

  let { children } = $props();
</script>

<AndcoProvider {clientOptions}>
  {@render children()}
</AndcoProvider>

Leer la sesión

src/lib/Account.sveltesvelte

<script lang="ts">
  import { useAndcoSession } from "@andco/sdk-svelte";

  const session = useAndcoSession();
</script>

{#if session.current === undefined}
  <p>Cargando…</p>
{:else if session.current}
  <p>{session.current.user.email}</p>
{:else}
  <p>Sin sesión</p>
{/if}

Los tres estados son los mismos que en el resto del SDK: undefined es «todavía no se sabe», no «no hay».

El botón

svelte

<script lang="ts">
  import { AndcoButton } from "@andco/sdk-svelte";
</script>

<AndcoButton
  authorization={{ scopes: ["openid", "email", "profile"] }}
  onComplete={() => location.reload()}
  onError={(error) => (message = error.message)}
/>

Autenticar y llamar a la API

svelte

<script lang="ts">
  import { useAndco } from "@andco/sdk-svelte";

  const andco = useAndco();
  let accounts = $state<{ id: string; name: string }[]>([]);

  $effect(() => {
    let alive = true;
    void andco.current.rest.http.GET("/accounts").then(({ data, error }) => {
      if (alive && !error) accounts = data.data;
    });
    return () => {
      alive = false;
    };
  });
</script>

useAndco() devuelve { readonly current }, no el cliente directamente — la reactividad de una rune no sobrevive al retorno por valor, así que hay que leer andco.current dentro del $effect para que Svelte rastree el cambio de Identidad Autorizada.

Con SvelteKit

El provider necesita window, así que se monta en el cliente. En un layout con renderizado en servidor, entrégale la sesión que el servidor ya resolvió:

svelte

<AndcoProvider {clientOptions} initialSession={data.andcoSession}>
  {@render children()}
</AndcoProvider>

Si tu backend conduce OAuth, usa la instancia de servidor en +page.server.ts y deja el provider solo para mostrar el estado.