Skip to main content

Quick Start Guide: Integrate Keyban SDK into a React Application

This guide shows you how to create a simple React wallet application from scratch using Vite and the Keyban SDK. You'll learn how to set up the project, install the SDK, and write the basic code to let users log in, generate a wallet, and display their wallet address on the Polygon Amoy testnet.

Prerequisites​

Before starting, make sure you have installed:

  • Node.js (version 18 or later)
  • npm (Node Package Manager)

Step 1: Create a New React Application​

First, create a new React project using Vite. This command sets up a simple React application with TypeScript.

npm create vite@latest my-wallet-app -- --template react-ts

Step 2: Install the Keyban SDK​

Navigate into your new project directory and install the Keyban React SDK.

cd my-wallet-app
npm install @keyban/sdk-react

Step 3: Integrate the Keyban SDK​

Replace the content of src/App.tsx with the following code to integrate the Keyban SDK.

This code sets up the KeybanProvider and includes a component to display the wallet address.

import {
  KeybanProvider,
  Network,
  useKeybanAccount,
  useKeybanAuth,
  type ClientShareProvider,
} from "@keyban/sdk-react";
import { Suspense } from "react";

// Simple localStorage implementation for the client share provider
class LocalStorageClientShareProvider implements ClientShareProvider {
  async get(key: string): Promise<string | null> {
    return window.localStorage.getItem(key);
  }

  async set(key: string, clientShare: string): Promise<void> {
    window.localStorage.setItem(key, clientShare);
  }
}

const clientShareProvider = new LocalStorageClientShareProvider();

function WalletInfo() {
  const { user, signIn, signOut } = useKeybanAuth();
  const [account, accountError] = useKeybanAccount();

  if (accountError) {
    // Handle account loading errors
    return <p>Error loading account: {accountError.message}</p>;
  }

  if (!user) {
    return <button onClick={() => signIn({ type: "social-google" })}>Login with Google</button>;
  }

  return (
    <div>
      <p>Welcome, {user.name}!</p>
      <p>Wallet Address: {account.address}</p>
      <button onClick={() => signOut()}>Logout</button>
    </div>
  );
}

function App() {
  return (
    <KeybanProvider
      appId="YOUR_APP_ID" // Replace with your Keyban App ID
      network={Network.StellarTestnet}
      clientShareProvider={clientShareProvider}
    >
      <h1>My Keyban Wallet</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <WalletInfo />
      </Suspense>
    </KeybanProvider>
  );
}

export default App;

Understanding the ClientShareProvider​

The clientShareProvider is a crucial part of the Keyban SDK's security model. It is responsible for storing the user's "client share," which is a part of the cryptographic key.

For this quick-start guide, we use the browser's localStorage for simplicity. However, for production applications, it is recommended to implement a ClientShareProvider that stores the client share in a secure, persistent location, such as your own backend.

For more details, please refer to the full ClientShareProvider documentation.

A Note on appId​

You need to replace "YOUR_APP_ID" with the actual App ID for your application. You can create a new application and retrieve its App ID from the Keyban Admin Portal. When creating the application, make sure to configure it as a loyalty application.

Step 4: Run the Application​

Start the development server to see your application in action.

npm run dev

Open your browser and navigate to http://localhost:5173. You should see your new wallet application. You can log in, and your wallet address will be displayed.

Conclusion​

Congratulations! You've created a React wallet application using the Keyban SDK in just two simple steps.

Next Steps​

For further support, feel free to join our Discord community.