Quickstart

Installation

npm

npm install @avalabs/avacloud-waas-react

pnpm

pnpm add @avalabs/avacloud-waas-react

yarn

yarn add @avalabs/avacloud-waas-react

Using the AvaCloud Organization ID

Once subscribed you will receive an orgId, which will be used to:

1. Fetch the organization configuration from the AvaCloud API

2. Map to the appropriate wallet service organization ID

3. Use the mapped ID for wallet operations

Initialize and import AvaCloud WaaS into your React app

The AvaCloudWalletProvider is the entry point and should wrap your app or anywhere you plan on using the AvaCloudWallet hooks & components. It requires an AvaCloud organization ID (orgId).

React App

import { AvaCloudWalletProvider } from '@avalabs/avacloud-waas-react';

function App() {
  return (
    <AvaCloudWalletProvider 
      orgId="your-avacloud-org-id" // Required AvaCloud org ID
      chainId={43113} // Avalanche Fuji Testnet
    >
      <YourApp />
    </AvaCloudWalletProvider>
  );
}

NextJS

'use client';

import { AvaCloudWalletProvider } from '@avalabs/avacloud-waas-react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <AvaCloudWalletProvider 
      orgId="your-avacloud-org-id" // Required
      chainId={43113} // Avalanche Fuji Testnet
    >
      {children}
    </AvaCloudWalletProvider>
  );
}

Properties

Prop	Type	Description
orgId	string	Required AvaCloud organization ID
authServiceUrl	string	(Optional) URL of the AvaCloud authentication service. Defaults to AvaCloud's production auth service
chainId	number	(Optional) EVM chain ID to use (defaults to Avalanche Fuji Testnet - 43113)
darkMode	boolean	(Optional) Whether to use dark mode for UI components
onAuthSuccess	(user: Auth0User) => void	(Optional) Callback called when authentication is successful
onAuthError	(error: Error) => void	(Optional) Callback called when authentication fails
onWalletUpdate	(wallet: WalletInfo) => void	(Optional) Callback called when wallet information is updated