Oviato SDK

What is @oviato/sdk?

Framework-agnostic JavaScript SDK for Oviato authentication and wallet operations

@oviato/sdk is Oviato's framework-agnostic core SDK that provides WebAuthn-based passkey authentication and multi-chain wallet functionality for any JavaScript framework or vanilla JavaScript.

Why @oviato/sdk?

@oviato/sdk is designed for maximum flexibility:

Framework Agnostic: Works with React, Vue, Svelte, Angular, vanilla JS, or any framework
Zero Dependencies: Lightweight core with no framework requirements
Tiny Bundle: ~7.7 KB gzipped
CDN Ready: Drop-in <script> tag support for quick prototyping
Full Control: Build custom UIs without opinionated components
TypeScript Native: Complete type safety

When to Use @oviato/sdk

Choose @oviato/sdk if you're building with:

✅ Vue.js
✅ Svelte
✅ Angular
✅ Vanilla JavaScript
✅ Any non-React framework
✅ Custom React implementation (without pre-built components)

For React/Next.js with hooks and components, use @oviato/connect instead.

Key Features

Simple Initialization

import { initialize } from "@oviato/sdk";

await initialize({
  appId: "your-app-id",
  network: "bitcoinmainnet",
});

Smart Authentication

Auto-detects whether users are new or returning:

import { authenticate } from "@oviato/sdk";

const result = await authenticate({ username: "alice" });

if (result.status === "success") {
  console.log("Connected:", result.data.address);
}

Wallet Operations

Full wallet functionality:

import { signMessage, sendTransfer, switchNetwork } from "@oviato/sdk";

// Sign a message
await signMessage("Hello Oviato!");

// Send transfer
await sendTransfer({
  to: "bc1q...",
  amount: 10000,
  fee: 1000,
});

// Switch network
await switchNetwork("ethmainnet");

Session Management

Simple session APIs:

import { getSession, isAuthenticated, clearSession } from "@oviato/sdk";

const session = getSession(); // Get current session
const isAuth = isAuthenticated(); // Check auth status
clearSession(); // Logout

State Management

Built-in Zustand store for state management:

import { oviStore } from "@oviato/sdk";

// Subscribe to state changes
const unsubscribe = oviStore.subscribe((state) => {
  console.log("Session:", state.session);
  console.log("Ready:", state.ready);
});

// Get current state
const state = oviStore.getState();

Package Architecture

@oviato/sdk follows a clean, modular architecture:

@oviato/sdk
├── Core Functions
│   ├── initialize()
│   ├── authenticate()
│   ├── login()
│   └── register()
├── Wallet Operations
│   ├── signMessage()
│   ├── sendTransfer()
│   ├── switchNetwork()
│   └── signPsbt()
├── Session Management
│   ├── getSession()
│   ├── setSession()
│   └── clearSession()
├── RPC Client
│   ├── rpc.getBalance()
│   ├── rpc.getTransactionHistory()
│   └── rpcRequest()
└── State Store
    └── oviStore (Zustand)

Installation Methods

NPM

npm install @oviato/sdk
# or
pnpm add @oviato/sdk
# or
yarn add @oviato/sdk

CDN

<script src="https://cdn.jsdelivr.net/npm/@oviato/sdk@latest/dist/oviato.min.js"></script>
<script>
  const { initialize, authenticate, getSession } = OviatoSDK;
</script>

Quick Comparison

Feature	@oviato/sdk	@oviato/connect
Best For	Any framework	React/Next.js
Framework	Agnostic	React only
Hooks	❌ No	✅ Yes
UI Components	❌ No	✅ Yes
Bundle Size	~7.7 KB	~14 KB
CDN Support	✅ Yes	❌ No
TypeScript	✅ Full support	✅ Full support

What's Included?

Authentication Methods

authenticate() - Smart authentication (auto-detects login vs register)
login() - Explicit login for returning users
register() - Create new account with passkey

Wallet Operations

signMessage() - Sign arbitrary messages
sendTransfer() - Send cryptocurrency
signPsbt() - Sign Bitcoin PSBTs
switchNetwork() - Change blockchain network

Session Management

getSession() - Get current user session
setSession() - Update session (advanced)
clearSession() - Logout user
isAuthenticated() - Check authentication status

RPC Client

rpc.getBalance() - Get wallet balance
rpc.getTransactionHistory() - Get transaction history
rpc.resolveUsername() - Resolve OVI.ID usernames
rpcRequest() - Custom RPC calls

Utilities

resolveOviId() - Resolve usernames to addresses
getConfig() - Get SDK configuration
isInitialized() - Check initialization status

Framework Integration Examples

Vanilla JavaScript

import { initialize, authenticate, getSession } from "@oviato/sdk";

await initialize({ appId: "your-app-id" });

document.getElementById("connect").onclick = async () => {
  const result = await authenticate();
  if (result.status === "success") {
    const session = getSession();
    document.getElementById("address").textContent = session.address;
  }
};

Vue 3

<script setup>
import { ref, onMounted } from "vue";
import { oviStore, initialize, authenticate } from "@oviato/sdk";

const session = ref(null);

onMounted(async () => {
  await initialize({ appId: "your-app-id" });

  oviStore.subscribe((state) => {
    session.value = state.session;
  });
});

const connect = async () => {
  await authenticate();
};
</script>

<template>
  <div>
    <button v-if="!session" @click="connect">Connect</button>
    <div v-else>Connected: {{ session.address }}</div>
  </div>
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { oviStore, initialize, authenticate } from '@oviato/sdk';

let session = null;

onMount(async () => {
  await initialize({ appId: 'your-app-id' });

  oviStore.subscribe((state) => {
    session = state.session;
  });
});

const connect = async () => {
  await authenticate();
};
</script>

{#if session}
  <p>Connected: {session.address}</p>
{:else}
  <button on:click={connect}>Connect</button>
{/if}

Supported Networks

Bitcoin (mainnet, testnet)
Ethereum (mainnet, sepolia). soon

Error Handling

All async methods return a BridgeResponse object:

const result = await login();

if (result.status === "success") {
  console.log("User:", result.data);
} else {
  console.error("Error:", result.message);
}

TypeScript Support

Full TypeScript definitions included:

import type {
  UserSession,
  OviatoConfig,
  BridgeResponse,
  LoginOptions,
  RegisterOptions,
  AuthenticateOptions,
} from "@oviato/sdk";

const session: UserSession | null = getSession();

Next Steps

Installation & Setup - Get started with @oviato/sdk
Authentication Guide - Learn about authentication
Wallet Operations - Explore wallet functionality

Signing Transactions

Send transactions and sign PSBTs using @oviato/connect

Installation & Setup

Install and configure @oviato/sdk in your JavaScript project

What is @oviato/sdk?

On this page