# JavaScript sin framework

> El SDK en una página sin framework, con módulos ES.


```bash
npm install @andco/sdk
```

## La instancia

```js title="src/andco.js"
import { createAndcoInstanceForBrowser } from "@andco/sdk/browser";

export const andco = createAndcoInstanceForBrowser({
  clientId: "tu-client-id",
  redirectTo: new URL("/", location.origin).href,
  initialScopes: ["openid", "email", "profile"],
});
```

## Reaccionar a la sesión

```js title="src/main.js"
import { andco } from "./andco.js";

const status = document.querySelector("#status");

andco.auth.onChange((session) => {
  status.textContent = session ? session.user.email : "Sin sesión";
});
```

`onChange` devuelve la función para dejar de observar, y al suscribirse dispara la carga inicial. No hace falta llamar a nada más para arrancar.

Si necesitas el valor una sola vez:

```js
const { data: session } = await andco.auth.getSession();
```

## Ingresar y salir

```js
document.querySelector("#sign-in").addEventListener("click", async () => {
  const { data: session, error } = await andco.auth.signIn();
  if (error) return showError(error);
  if (!session) return; // closed the window
});

document.querySelector("#sign-out").addEventListener("click", () => andco.auth.signOut());
```

La ventana emergente debe abrirse durante un gesto de la persona. Llamar a `signIn` desde un `setTimeout` o después de un `await` largo hace que el navegador la bloquee.

Si la bloquea igual, cae a redirección:

```js
const { error } = await andco.auth.signIn();
if (error?.code === "popup_blocked") {
  await andco.auth.signIn({ presentation: "redirect" });
}
```

## El botón hospedado

Sin framework, el controlador es lo que conecta el iframe.

```js title="src/button.js"
import { AndcoButtonController } from "@andco/sdk/browser";
import { andco } from "./andco.js";

const iframe = document.querySelector("#andco-button");
const controller = new AndcoButtonController({
  client: andco,
  authorization: { scopes: ["openid", "email", "profile"] },
  onComplete: () => console.log("done"),
  onError: (error) => showError(error),
});

controller.subscribe((snapshot) => {
  iframe.src = snapshot.iframeURL;
  iframe.hidden = !snapshot.ready;
});

const disconnect = controller.connect(iframe);
```

El iframe es tuyo: tú decides dónde va y cómo se ve su caja. El controlador se encarga del protocolo, de la ventana emergente y del intercambio del código.

Si tu página no tiene un paso de build, `@andco/sdk-script` hace esto mismo con una etiqueta: ver [Script tag](/docs/guides/script-tag).

## Llamar a la API

```js
const { data, error } = await andco.rest.http.GET("/accounts");
if (error) return showError(error);
render(data);
```

## Fallos del callback

```js
const { error } = await andco.session.ready;
if (error) showError(error);
```