useNeroUser

This page covers the useNeroProfile and useNeroMFA hooks, which provide access to user profile data, device management, multi-factor authentication, and account security settings.

useNeroProfile

State Properties

Property	Type	Description
`profile`	`UserProfile \| null`	Current user profile object
`isLoading`	`boolean`	`true` during profile operations
`error`	`Error \| null`	Error state for profile-related failures

Profile Management Methods

Method	Parameters	Return Type	Purpose
`getProfile()`	--	`Promise<{ profile: UserProfile }>`	Fetches and caches user profile
`updateProfile()`	`data: { displayName?, profilePicture? }`	`Promise<{ profile: Partial<UserProfile> }>`	Updates profile metadata
`deleteAccount()`	`confirmation: string, password?: string`	`Promise<{ message: string }>`	Permanently deletes account
`getActivity()`	`params?: { page?, limit?, action?, from?, to? }`	`Promise<{ activities: ActivityEntry[], pagination }>`	Retrieves paginated audit logs
`exportData()`	`format?, includeWallet?`	`Promise<Record<string, unknown>>`	Exports user data for GDPR/portability

Device Management Methods

Method	Parameters	Purpose
`getDevices()`	--	Returns array of `TrustedDevice` objects
`trustDevice()`	`deviceId: string, deviceName?: string`	Marks a device as trusted
`removeDevice()`	`deviceId: string`	Revokes trust and session for a device

Usage

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

function Profile() {
  const { profile, getProfile, updateProfile, isLoading, error } = useNeroProfile();

  useEffect(() => {
    getProfile();
  }, []);

  if (isLoading) return <div>Loading...</div>;
  if (!profile) return <div>Not logged in</div>;

  return (
    <div>
      <p>Name: {profile.displayName}</p>
      <button onClick={() => updateProfile({ displayName: "New Name" })}>
        Update Name
      </button>
    </div>
  );
}

Device Management Example

function DeviceManager() {
  const { getDevices, removeDevice } = useNeroProfile();
  const [devices, setDevices] = useState([]);

  useEffect(() => {
    getDevices().then(setDevices);
  }, []);

  return (
    <ul>
      {devices.map((device) => (
        <li key={device.id}>
          {device.name}
          <button onClick={() => removeDevice(device.id)}>Remove</button>
        </li>
      ))}
    </ul>
  );
}

useNeroMFA

Manages multi-factor authentication configuration, supporting TOTP (authenticator apps) and WebAuthn (passkeys/biometrics).

State Properties

Property	Type	Description
`status`	`MFAStatus \| null`	Active MFA methods and policy
`isLoading`	`boolean`	`true` during MFA operations
`error`	`Error \| null`	Last encountered error

TOTP Methods

Method	Parameters	Purpose
`initiateTOTPSetup()`	--	Initiates TOTP enrollment, returns shared secret
`verifyTOTPSetup()`	`code: string`	Verifies TOTP code to finalize setup
`disableTOTP()`	--	Removes TOTP authentication method

WebAuthn Methods

Method	Parameters	Purpose
`initiateWebAuthnSetup()`	--	Starts WebAuthn enrollment
`verifyWebAuthnSetup()`	`credential`	Confirms WebAuthn credential
`disableWebAuthn()`	--	Removes WebAuthn method

Status and Verification

Method	Parameters	Purpose
`getMFAStatus()`	--	Retrieves current MFA configuration
`verifyMFA()`	`method: string, code: string`	Verifies MFA challenge response

TOTP Setup Sequence

TOTP enrollment requires two steps:

Call initiateTOTPSetup() to obtain the shared secret and QR code
Call verifyTOTPSetup() with the generated code to confirm

function TOTPSetup() {
  const { initiateTOTPSetup, verifyTOTPSetup, isLoading } = useNeroMFA();
  const [secret, setSecret] = useState(null);
  const [code, setCode] = useState("");

  const handleSetup = async () => {
    const result = await initiateTOTPSetup();
    setSecret(result);
  };

  const handleVerify = async () => {
    await verifyTOTPSetup(code);
  };

  if (!secret) {
    return <button onClick={handleSetup} disabled={isLoading}>Enable TOTP</button>;
  }

  return (
    <div>
      <p>Scan the QR code with your authenticator app</p>
      <input value={code} onChange={(e) => setCode(e.target.value)} placeholder="Enter code" />
      <button onClick={handleVerify} disabled={isLoading}>Verify</button>
    </div>
  );
}

useNeroUser

On this page