Quickstart

Installation

npm install @avalabs/avacloud-waas-react

pnpm add @avalabs/avacloud-waas-react

yarn add @avalabs/avacloud-waas-react

Using the AvaCloud Organization ID

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

Fetch the organization configuration from the AvaCloud API
Map to the appropriate wallet service organization ID
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

If you need more help, explore our other articles or reach out to our support team via chat or email support@avacloud.io. All examples provided are for demonstration purposes only.

Learn More About AvaCloud | Download Case Studies | Schedule an AvaCloud Demo

Quickstart

Installation

Using the AvaCloud Organization ID

Initialize and import AvaCloud WaaS into your React app

Properties

On this page