What is @oviato/connect?

@oviato/connect is Oviato's React SDK that provides hooks, providers, and pre-built UI components for seamless integration of passkey authentication and wallet functionality in React and Next.js applications.

Why @oviato/connect?

@oviato/connect is designed specifically for React developers who want:

• React-First Architecture: Hooks, context providers, and React components
• SSR/Next.js Support: Full compatibility with Next.js App Router, Pages Router, and SSR
• Pre-built UI Components: Drop-in authentication buttons and modals
• Type Safety: Complete TypeScript support
• Zero Config: Works out of the box with sensible defaults

When to Use @oviato/connect

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

• ✅ React (Create React App, Vite)
• ✅ Next.js (App Router or Pages Router)
• ✅ Remix
• ✅ Any React-based framework

For non-React frameworks (Vue, Svelte, Angular, vanilla JS), use @oviato/sdk instead.

Key Features

React Hooks

Access authentication state and wallet operations through intuitive hooks:

import { useOviConnect } from "@oviato/connect/client";

function MyComponent() {
  const { session, isLoading, disconnect } = useOviConnect();

  if (isLoading) return <div>Loading...</div>;
  if (!session) return <div>Not connected</div>;

  return <div>Connected: {session.address}</div>;
}

Pre-built Components

Drop-in UI components for authentication:

import { ConnectButton } from "@oviato/connect/client";

<ConnectButton
  text="Connect Wallet"
  onSuccess={(data) => console.log("Connected:", data.address)}
/>;

Provider Pattern

Wrap your app with OviConnectProvider to manage authentication state:

import { OviConnectProvider } from "@oviato/connect/client";

<OviConnectProvider appId="your-app-id" network="bitcoinmainnet">
  <YourApp />
</OviConnectProvider>;

SSR Safe

Works seamlessly with server-side rendering:

• Proper hydration handling
• No flash of unauthenticated content
• Automatic session restoration

Built on @oviato/sdk

@oviato/connect is built on top of @oviato/sdk, giving you access to all core functionality while providing React-specific optimizations and patterns.

Package Structure

@oviato/connect provides two optimized entry points:

1. Core Entry (@oviato/connect)

Server-safe utilities and types (re-exports from @oviato/sdk):

import {
  // Core functions
  initialize,
  authenticate,
  login,
  register,
  signMessage,
  sendTransfer,
  switchNetwork,
  signPsbt,

  // Session management
  getSession,
  clearSession,
  isAuthenticated,

  // Types
  type UserSession,
  type OviatoConfig,
} from "@oviato/connect";

2. Client Entry (@oviato/connect/client)

React components and hooks (client-only with 'use client' directive):

import {
  // Provider
  OviConnectProvider,

  // Hooks
  useOviConnect,

  // Components
  ConnectButton,
  Connect,
  Button,
} from "@oviato/connect/client";

This separation enables optimal tree-shaking and SSR compatibility.

Quick Comparison

Architecture

@oviato/connect follows industry-standard React patterns:

@oviato/connect
├── Core Functions (from @oviato/sdk)
├── React Provider (OviConnectProvider)
│   └── Context Management
├── React Hooks (useOviConnect)
│   └── State Access
└── UI Components
    ├── ConnectButton
    ├── Connect
    └── Utility Components

What's Included?

Authentication

• Smart authentication (auto-detect login vs register)
• Passkey-based login
• User registration with biometrics

Wallet Operations

• Message signing
• Transaction sending
• PSBT signing (Bitcoin)
• Network switching

Session Management

• Automatic session restoration
• Secure session storage
• Session state management

RPC Client

• Balance queries
• Transaction history
• OVI.ID username resolution
• Custom RPC calls

Installation

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

Next Steps

• Installing @oviato/connect - Installation and setup
• Quick Start Guide - Get started in minutes