@djuno/web3auth-hook

Overview

The @djuno/web3auth-hook package simplifies integration with the @djuno/web3auth-sdk by providing a Web3authProvider and useWeb3Auth hook. It manages:

API client setup
Network and profile fetching
Authentication handshake and verification
Avatar upload and retrieval
Loading states per method

Use this hook when you want to handle Web3Auth flows (e.g., wallet signature verification) in a React-friendly way.

Usage

1. Install the package

npm install @djuno/web3auth-hook

2. Wrap your app with `Web3authProvider`

import { Web3authProvider } from '@djuno/web3auth-hook';

const App = () => { 
   return ( 
     <Web3authProvider clientConfigs={{ 
          accessKey: 'YOUR_ACCESS_KEY', // Required 
          endpointUrl: 'https://web3auth.djuno.cloud', // Optional
        }}
     >
       <YourApp />
     </Web3authProvider>
   );
 };

3. Use the `useWeb3Auth` hook

import { useWeb3Auth } from '@djuno/web3auth-hook';

const Example = () => { 
  const { 
     getNetworks,
     handshake,
     verify,
     getProfile,
     updateProfile,
     getProfileAvatar,
     saveProfileAvatar,
     setAccessKey,
     networks,
     profile,
     profileAvatar,
     loading
    } = useWeb3Auth();

  // Example usage 
  const handleAuth = async () => {
     const networks = await getNetworks();
     const signature = await handshake(networks[0].Id, '0xPUBLIC_KEY'); 
     const token = await verify(networks[0].Id,'0xPUBLIC_KEY',signature);
     await getProfile(token);
   };

 return <button onClick={handleAuth}>Authenticate</button>;
};

API

Provider

`<Web3authProvider clientConfigs={...}>`

Wraps your app and provides the @djuno/web3auth-sdk client to the hook.

clientConfigs: ClientConfigs — passed to the Client constructor.

Hook

`useWeb3Auth()`

Returns the following:

Property	Type	Description
`client`	`Client`	The internal SDK client instance.
`loading`	`Record<string, boolean>`	Loading state per method.
`getNetworks()`	`() => Promise<Network[]>`	Fetch available networks.
`networks`	`Network[]`	Cached networks from `getNetworks`.
`handshake(networkId, publicKey)`	`() => Promise<string>`	Starts the handshake and returns a challenge/signature.
`verify(networkId, publicKey, signature)`	`() => Promise<string>`	Verifies the signature and returns a JWT token.
`getProfile(token)`	`() => Promise<void>`	Fetches and stores the user profile.
`profile`	`any`	Cached profile object.
`updateProfile(token, data)`	`() => Promise<any>`	Updates profile data.
`getProfileAvatar(token)`	`() => Promise<void>`	Fetches avatar as a blob URL.
`profileAvatar`	`string \| null`	Cached avatar blob URL.
`saveProfileAvatar(token, formData)`	`() => Promise<any>`	Saves profile avatar.
`setAccessKey(newKey)`	`() => Promise<void>`	Updates the API key dynamically.

API Reference

@djuno/web3auth-sdk

@djuno/web3auth-ui

Overview

Usage

1. Install the package

2. Wrap your app with Web3authProvider

3. Use the useWeb3Auth hook

API