Beam Web SDK

The Beam Web SDK is a Typescript library that allows you to easily integrate Beam into your website, application or web-based game. It provides a simple API to authenticate your users on Beam, manage sessions and sign transactions, and access the Beam Player API.

Table of Contents

• Getting Started
  • Installation
  • Examples
• Documentation

Getting Started

Before you start, make sure you obtain an API key by requesting it through build@onbeam. More information can be found on the Beam API Docs.

Installation

To get started with the SDK, install it in your project using your favorite package manager:

# with npm
npm install -S @onbeam/sdk

# or with yarn
yarn add @onbeam/sdk

# or with pnpm
pnpm add @onbeam/sdk

Creating a client

Start by creating a new instance of the Beam client, and configuring it with the chains you want to use. We're using the Beam testnet chain in this example:

import { BeamConfiguration, ChainId } from '@onbeam/sdk';

const config = new BeamConfiguration({
  chains: [
    {
      id: ChainId.BEAM_TESTNET,
      publishableKey: 'your-beam-testnet-publishable-key'
    }
  ],
  debug: true, // Logs debug information to the console
});

const client = new BeamClient(config);

Make sure your API key matches the environment you are working on. For example, if you are working on a development environment, use the development API key.

Authenticating a user

If you're using wagmi, you can authenticate a user by providing the wagmi config with our EIP-6963 compatible wallet provider. First, provide the wagmi config with the injected connector. Then, create a new Beam client and connect the provider:

import { createConfig, http, WagmiProvider } from 'wagmi'
import { beamTestnet } from 'viem/chains';
import { injected } from 'wagmi/connectors';
import { BeamConfiguration } from '@onbeam/sdk';
import { useEffect } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// Create the wagmi config and provide the 'injected' connector
const wagmiConfig = createConfig({
  chains: [beamTestnet]
  connectors: [
    injected(),
  ],
  transports: {
    [beamTestnet.id]: http(),
  },
});

const queryClient = new QueryClient();

// ... using the `config` from the previous example
const beamClient = new BeamClient(config);

export default function App() {
  // Connect and announce the provider
  useEffect(() => {
    if (!beamClient) return;
    beamClient.connectProvider();
  }, []);

  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <YourApp />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Our wallet provider is EIP-6963 compatible and supports wagmi 2.x and above.

Examples

The repository includes two example apps that demonstrate how to use the Beam Web SDK:

SDK Example

The SDK example app demonstrates how to create and manage sessions for your players and is mainly suited for game developers that wish to integrate Beam into their games.

Wagmi Example

The Wagmi example app demonstrates how a 'Connect with Beam' wallet integration can be implemented in a web application. It is mainly suited for NFT marketplaces or web applications that require users to authenticate with a wallet and interact with the Beam chain.

Documentation

For more information and API references, check out our online documentation.