# 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

```svelte title="src/routes/+layout.svelte"
<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

```svelte title="src/lib/Account.svelte"
<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.