Provider Setup

NeroMpcAuthProvider is the root React context provider that integrates the core NeroMpcSDK with your component tree. It manages SDK instantiation, synchronizes SDK events into React state, and exposes authentication and wallet state through context.

Basic Setup

import { NeroMpcAuthProvider } from "@nerochain/mpc-sdk/react";

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

Props Interface

Initialization Lifecycle

When the component mounts, a useEffect creates the SDK instance. The dependency array includes config.backendUrl, config.chainId, and autoConnect, meaning SDK recreation occurs if these values change at runtime.

The autoConnect flag controls automatic session restoration:

• true (default): sdk.initialize() is called to attempt loading persisted session data
• false: The SDK instance is created but not initialized, requiring manual initialization by consumers

Event Synchronization

A second useEffect registers listeners on the SDK's event bus after the instance becomes available. Event listeners pull the latest NeroSDKState snapshot into React state, triggering re-renders when authentication or connection status changes.

All listeners are properly cleaned up in the effect's cleanup function.

Context Value Shape

The NeroMpcAuthContextValue exposed to descendants:

NeroSDKState Default Values

Accessing the SDK Instance

For advanced use cases, access the underlying SDK through the context hook:

import { useNeroMpcAuthContext } from "@nerochain/mpc-sdk/react";

function Advanced() {
  const { sdk, state, isLoading, error } = useNeroMpcAuthContext();

  if (isLoading) return <div>Initializing...</div>;
  if (error) return <div>Error: {error.message}</div>;

  const provider = sdk?.getProvider();
}

The useNeroMpcAuthContext() hook throws an error if called outside a NeroMpcAuthProvider:

useNeroMpcAuthContext must be used within a NeroMpcAuthProvider

Component Tree Structure

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

<NeroMpcAuthProvider config={config} uiConfig={uiConfig} themeMode="dark">
  {/* ThemeProvider wraps everything */}
  {/* NeroMpcAuthContext.Provider is inside ThemeProvider */}
  <YourApp />
</NeroMpcAuthProvider>

Key Behavioral Points

• Config reactivity: Changing backendUrl, chainId, or autoConnect at runtime destroys the old SDK and creates a new one
• Error isolation: SDK instances are available in context even when initialization fails; the error field captures the failure
• Memoization: Context value is wrapped in useMemo and only recomputes when sdk, state, isLoading, or error changes