Skip to main content

​
Wallet Integration

This guide covers connecting wallets and authenticating users with the Privacy Boost React SDK.

​
Basic Authentication

import { useAuth } from '@testinprod-io/privacy-boost-react';

function LoginButton() {
  const { isAuthenticated, authenticateWithWalletAdapter, logout } = useAuth();

  if (isAuthenticated) {
    return <button onClick={logout}>Logout</button>;
  }

  return (
    <button onClick={() => authenticateWithWalletAdapter()}>
      Connect Wallet
    </button>
  );
}

​
useAuth Return Value

PropertyTypeDescription
isConnectedbooleanWhether a wallet is connected
isAuthenticatedbooleanWhether the user is fully authenticated
isWalletAvailablebooleanWhether a wallet provider exists
addressstring | nullConnected wallet address
privacyAddressstring | nullUser’s privacy address
authenticate(adapter, options?) => PromiseAuthenticate with a wallet adapter
authenticateWithWalletAdapter(options?) => PromiseAuthenticate with browser wallet
logout() => PromiseFull sign-out
clearSession() => PromiseClear auth token, keep keys

​
Injected Wallet (MetaMask, etc.)

const { authenticateWithWalletAdapter } = useAuth();

const result = await authenticateWithWalletAdapter();
console.log('Privacy address:', result.privacyAddress);

​
Custom Wallet Adapter

function WalletConnect() {
  const { authenticate } = useAuth();

  const handleConnect = async () => {
    const adapter = {
      getAddress: async () => walletClient.account.address,
      signMessage: async ({ message }) => walletClient.signMessage({ message }),
    };

    const result = await authenticate(adapter);
    console.log('Authenticated:', result.privacyAddress);
  };

  return <button onClick={handleConnect}>Connect</button>;
}

​
Complete Example

import { useAuth } from '@testinprod-io/privacy-boost-react';

function ConnectWallet() {
  const {
    isAuthenticated,
    isWalletAvailable,
    address,
    authenticateWithWalletAdapter,
    logout,
  } = useAuth();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleConnect = async () => {
    setLoading(true);
    setError(null);
    try {
      await authenticateWithWalletAdapter();
    } catch (err: any) {
      if (err.code !== 'SIGNATURE_REJECTED') {
        setError(err.message);
      }
    } finally {
      setLoading(false);
    }
  };

  if (!isWalletAvailable) {
    return <p>Please install a wallet extension</p>;
  }

  if (isAuthenticated) {
    return (
      <div>
        <p>Connected: {address?.slice(0, 6)}...{address?.slice(-4)}</p>
        <button onClick={logout}>Disconnect</button>
      </div>
    );
  }

  return (
    <div>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button onClick={handleConnect} disabled={loading}>
        {loading ? 'Connecting...' : 'Connect Wallet'}
      </button>
    </div>
  );
}

​
Error Handling

try {
  await authenticateWithWalletAdapter();
} catch (error: any) {
  switch (error.code) {
    case 'SIGNATURE_REJECTED':
      return;
    case 'WALLET_NOT_FOUND':
      setError('No wallet detected');
      break;
    default:
      setError(error.message);
  }
}

​
Best Practices

​
1. Check Wallet Availability

Always check isWalletAvailable before showing the connect button.

​
2. Handle Signature Rejection Silently

When users cancel the wallet signature, don’t show an error.

​
3. Show Connection State

Display the connected wallet address so users can verify which account is active.

​
Next Steps