Modal UI

The SDK includes a pre-built login modal that handles the entire authentication flow, including OAuth providers, email OTP, phone OTP, and post-login wallet display.

Quick Setup

import { NeroMpcAuthProvider } from "@nerochain/mpc-sdk/react";
import { LoginButton, LoginModal } from "@nerochain/mpc-sdk/modal";

function App() {
  return (
    <NeroMpcAuthProvider
      config={{
        backendUrl: "https://your-backend.example.com",
        chainId: 689,
      }}
    >
      <LoginButton />
    </NeroMpcAuthProvider>
  );
}

The modal requires NeroMpcAuthProvider as an ancestor. The provider manages SDK instantiation and event synchronization while the modal handles the authentication UI.

Components

LoginButton

A drop-in button that opens the login modal:

<LoginButton label="Connect Wallet" />

LoginModal

The modal dialog showing all authentication options. Use this when you want to control modal visibility yourself:

<LoginModal
  isOpen={showModal}
  onClose={() => setShowModal(false)}
/>

WalletDetailView

Post-login wallet information display showing the user's EOA address, smart wallet address, and account details:

<WalletDetailView />

The NeroMpcAuthProvider renders ThemeProvider as the outermost wrapper, ensuring all modal and UI components have access to theme context. Inside that sits NeroMpcAuthContext.Provider, allowing the modal to access both theme and authentication contexts simultaneously.

<NeroMpcAuthProvider config={config} uiConfig={uiConfig} themeMode="dark">
  {/* ThemeProvider -> NeroMpcAuthContext.Provider -> your components */}
  <LoginButton />
</NeroMpcAuthProvider>

Pass uiConfig to the provider to customize the modal appearance:

<NeroMpcAuthProvider
  config={{ backendUrl: "https://your-backend.example.com", chainId: 689 }}
  uiConfig={{
    primaryColor: "#6366f1",
    logo: "/your-logo.svg",
    appName: "My DApp",
  }}
  themeMode="dark"
>
  <LoginButton />
</NeroMpcAuthProvider>

See the Theming page for all customization options.

Headless Mode

For fully custom UI, use the headless SDK (@nerochain/mpc-sdk/no-modal) and build your own components with the React hooks:

import { useNeroConnect, useNeroWallet } from "@nerochain/mpc-sdk/react";

function CustomLogin() {
  const { connect, isConnecting, error } = useNeroConnect();
  const { wallet, generateWallet } = useNeroWallet();

  return (
    <div>
      <button onClick={() => connect("google")} disabled={isConnecting}>
        Login with Google
      </button>
      {wallet && <p>Address: {wallet.eoaAddress}</p>}
    </div>
  );
}

The hooks provide access to all authentication methods (connect, loginWithEmail, loginWithPhone, loginWithCustomJwt) and wallet operations (generateWallet, signMessage, signTypedData) documented in the individual hook pages.