bknd-client-setup

Configure the Bknd TypeScript SDK with host URL and localStorage token persistence.

1|Updated Jan 23, 2026
One-click install
npx skills add https://github.com/cameronapak/melos --skill bknd-client-setup
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: bknd-client-setup
Source: https://github.com/cameronapak/melos/tree/main/.agents/skills/bknd-client-setup
Command: npx skills add https://github.com/cameronapak/melos --skill bknd-client-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams struggle to bootstrap and configure the Bknd TypeScript SDK consistently across frameworks, leading to boilerplate, fragmented auth flows, and integration gaps.

Core Features & Use Cases

  • Standalone API client setup with token persistence in localStorage for persistent sessions.
  • React integration via BkndBrowserApp and useApp for seamless, stateful access to data and auth.
  • Framework adapters (Vite, Next.js, standalone) and TypeScript type registration to enable end-to-end development.

Quick Start

Install the bknd package, create a singleton Api instance with host and storage, and wrap your app with BkndProvider to access the API in components.

Frequently Asked Questions about bknd-client-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I initialize the Bknd SDK in a React frontend application?

To initialize the Bknd SDK in React, install the bknd package, create a singleton Api instance with your host URL and localStorage, then wrap your app with BkndProvider to access the API in components. This enables seamless stateful access to data and auth.

What's the best way to configure authentication token persistence in a TypeScript frontend client?

Configuring authentication token persistence in a TypeScript frontend client requires setting up a singleton Api instance with localStorage-based storage. The Bknd SDK handles token persistence automatically, maintaining persistent user sessions across page reloads without manual token management.

Can I use the Bknd SDK with Next.js and Vite framework adapters?

Yes, the Bknd SDK supports framework adapters for Next.js, Vite, and standalone usage. These adapters enable proper TypeScript type registration across client and server environments, ensuring end-to-end type safety and correct integration within your chosen framework.

Why do I need an onAuthStateChange handler when setting up frontend API authentication?

An onAuthStateChange handler is required to respond to authentication state transitions within the Bknd SDK. It allows your frontend application to reactively update UI components and manage user session changes when the API detects login, logout, or token expiration events.

Does standalone API usage work without React integration in frontend applications?

Yes, standalone API usage works independently of React integration. You can create a singleton Api instance configured with a host URL and storage to interact with Bknd endpoints directly, which is useful for vanilla TypeScript projects or frameworks without React bindings.

How does BkndBrowserApp and useApp work for React state management?

BkndBrowserApp and useApp provide React integration by exposing the configured Bknd API instance within the component tree. Wrapping your application with BkndProvider allows components to consume data and authentication states seamlessly via the useApp hook.