@djuno/web3auth-ui

Overview

@djuno/web3auth-ui makes it easy to drop in a wallet authentication UI for your dApp. It handles network selection, wallet connection, authentication, token management, and state handling — all in one provider with zero config UI.

Installation & Setup

1. Install the package

npm install @djuno/web3auth-ui

2. Import the CSS

import '@djuno/web3auth-ui/dist/style.css';

3. Wrap your app with `Web3authUiProvider`

import { Web3authUiProvider, WalletInfoButton, } from '@djuno/web3auth-ui';

function App() { 
  return ( 
    <Web3authUiProvider clientConfigs={{ accessKey: import.meta.env.VITE_WEB3AUTH_ACCESS_KEY }} >
      <div className="w-[100dvw] h-[100dvh] flex justify-center items-center flex-col gap-4"> 
        <WalletInfoButton handleGoProfile={() => (window.location.href = '/setting')} /> 
        <span className="text-2xl"> Welcome to{' '} <h1 className="text-2xl font-bold inline-block">Djuno Web3Auth</h1> UI 👋 </span>
     </div> 
    </Web3authUiProvider>
  );
}

Components

🔹 `Web3authUiProvider`

Wraps your app and manages Web3 connection state. It uses @djuno/web3auth-hook under the hood.

Props:
- clientConfigs: Same as in @djuno/web3auth-hook

🔹 `WalletInfoButton`

A ready-to-use connect/disconnect button that:

Triggers wallet connection + network selection
Handles Web3 signature-based authentication
Displays wallet info when connected
Accepts a handleGoProfile callback for navigation

<WalletInfoButton />

Hook

`useWeb3authUi()`

It gives you access to all Web3 UI states and actions.

Returned values:

Key	Type	Description
`token`	`string \| null`	JWT token from the authentication
`connected`	`boolean`	Whether the user is connected and authenticated
`connecting`	`boolean`	Whether the connection process is ongoing
`selectedNetwork`	`Network \| null`	Selected network object
`publicKey`	`string \| null`	Raw connected public key
`transformed_publicKey`	`string \| null`
`connect()`	`() => Promise<void>`	Triggers connect + auth flow
`disconnect()`	`() => void`	Clears session
`profile`	`any`	Fetched user profile
`loading`	`Record<string, boolean>`	Loading states from `@djuno/web3auth-hook`