The Openfort React SDK gives React developers a set of tools for managing authentication and embedded wallets without the boilerplate.
What is the Openfort React SDK?
The Openfort React SDK is a dedicated library for React applications that simplifies the integration of secure authentication and non-custodial embedded wallets. It provides high-level React hooks such as useWallet and useTransaction, and TypeScript types to handle complex on-chain interactions. Developers can choose between pre-built UI components from the Openfort Kit for a "plug-and-play" experience or a "headless" mode for total control over the interface. The SDK connects frontend development to blockchain infrastructure.
This release provides tools for managing authentication UI elements from the Openfort kit, along with React hooks and TypeScript types for embedded wallets.
This SDK is designed for React applications that need to handle user authentication and wallet interactions. It includes optional UI components, but can also be used in a headless mode without them. Additionally, it comes with Playground, a development toolkit that offers suggestions for methods, status updates, and response previews in a single interface.
Openfort in React Applications
Openfort provides building blocks for authentication and embedded wallets. The core kit handles user sessions, logins, and wallet integrations with blockchain networks.
With React being a common choice for frontend development, we've created this SDK to better support it. It includes UI components for elements like login forms and wallet connectors, which can be customized or omitted entirely for a headless setup. This flexibility allows developers to choose between pre-built UI or fully custom implementations.
The SDK also introduces React hooks, such as useWallet, useAuthSession, and useTransaction, for managing state, errors, and updates. These are typed with TypeScript to help catch issues early. For embedded wallets, the hooks simplify tasks like initialization, funding, and interactions, while following security practices.
This leads to cleaner code and faster development in React environments.
Limitations of Traditional Approaches
Integrating authentication and wallets in React has often involved combining various libraries, handling state manually (e.g., with Redux), or working with untyped APIs that risk errors at runtime. This can create inconsistencies and potential security issues, especially for sensitive tasks like wallet operations.
Embedded wallets require precise handling to protect private keys and session data. Without tailored tools, developers might build custom solutions, which can vary across projects.
The React SDK offers a consistent layer over the Openfort kit, aligned with React conventions like hooks and context. It supports async operations and includes testing features like mocking.
Compared to our existing JavaScript SDK, this version is optimized for React: it uses hooks for better state management, provides TypeScript types for improved reliability, and integrates more naturally with React's ecosystem. The JavaScript SDK remains a solid general-purpose option, but the React SDK reduces boilerplate and improves usability for React-specific workflows. It builds on lessons from tools like React Query and Wagmi, adapted for Openfort.
Start Using the React SDK Today
The Openfort React SDK is available now as a public package. You can install it via npm or yarn and start integrating it into your projects immediately. No major overhauls required – it's designed to complement your existing Openfort setup.
We've made the onboarding process straightforward and reversible, so you can experiment without risking your current workflows.
Add it to your project with one command:
_10npm install @openfort/react
This pulls in all the necessary dependencies, including UI components and hooks. These hooks include TypeScript types for props and returns, making your code more predictable.
Exploring with Playground
Playground is a toolkit for working with the React SDK and Openfort APIs. It provides an interface for method suggestions (e.g., recommending useTransaction after wallet connection), real-time status, and response views.
Accessible from the Openfort dashboard, it supports component previews and is useful for prototyping or troubleshooting. It's based on community feedback and can be used independently of the SDK.
Maximizing the SDK's Value
The React SDK helps create more maintainable code by reducing custom implementations and improving integration. It's compatible with other on-chain libraries and frameworks like Next.js.
For those using the JavaScript SDK, transitioning to the React version can simplify wallet management through hooks, especially in React apps. We plan to add features like UI theming and more specialized hooks based on ongoing feedback. Explore the documentation for detailed examples.
