@andco/sdk-vue

@andco/sdk-vue

Vue 3 bindings for Andco OAuth, reactive session state, typed resource access, and hosted Intent presentation.

Developer preview: APIs may change before 1.0.

Install

pnpm add @andco/sdk @andco/sdk-vue @andco/bank-sdk

Use an existing Vue 3.5 or newer application. Register a public OAuth client, replace the client ID below, and serve the exact registered callback with your app. Mount the provider around components that use the SDK; the callback must load the same configuration.

Connect accounts

<script setup lang="ts">
import { Bank } from "@andco/bank-sdk";
import { AndcoButton, AndcoProvider } from "@andco/sdk-vue";

const clientOptions = {
  clientId: "your-public-client-id",
  redirectTo: "https://app.example.com/auth/callback",
};
const accounts = new Bank().accounts.authorization({
  actions: ["read"], subject: { type: "profile" },
});
</script>

<template>
  <AndcoProvider :client-options="clientOptions">
    <AndcoButton :authorization="{ scopes: ['openid', 'email'], authorizations: [accounts] }" />
  </AndcoProvider>
</template>

Read accounts after consent

Render this component inside AndcoProvider, next to the sign-in button:

<script setup lang="ts">
import { Bank } from "@andco/bank-sdk";
import { useAndcoAuthed } from "@andco/sdk-vue";

const andco = useAndcoAuthed();
async function loadAccounts() {
  if (!andco.value) return;
  const { data: page, error } = await new Bank(andco.value).client.http.GET("/accounts");
  if (error) throw error;
  console.log(page["data"]);
}
</script>

<template>
  <button type="button" :disabled="!andco" @click="loadAccounts().catch(console.error)">Read accounts</button>
</template>

To read balances too, add read_balance to the account authorization. Transfer and deposit operations require their own permissions; the Bank quickstart shows both.

Capabilities

• useAndco exposes live instance properties; useAndcoAuthed returns a computed authenticated client.
• useAndcoSession and useAndcoUser expose session and identity state. undefined means loading; null means signed out.
• AndcoButton emits authorization lifecycle events; AndcoIntentButton presents an Intent and emits its fetched outcome.
• Bind Bank to the authenticated client to read accounts or create banking Intents.

Register the callback URL exactly. The provider shares one instance with its subtree; Vue owns the hosted iframe lifecycle.

Learn more

• Integration guide
• API reference
• Runnable example

Method contracts, options, and lifecycle details are documented in the exported JSDoc and API reference.