useNeroConnect

The primary entry point for user authentication. useNeroConnect supports multiple login methods including OAuth providers, email OTP, phone OTP, and custom JWT.

Usage

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

function LoginPage() {
  const {
    connect,
    handleCallback,
    loginWithEmail,
    verifyEmailLogin,
    loginWithPhone,
    verifyPhoneLogin,
    loginWithCustomJwt,
    isConnecting,
    error,
  } = useNeroConnect();

  if (isConnecting) return <div>Authenticating...</div>;

  return (
    <div>
      <button onClick={() => connect("google")}>Login with Google</button>
      <button onClick={() => connect("discord")}>Login with Discord</button>
      <button onClick={() => connect("github")}>Login with GitHub</button>
      {error && <p>{error.message}</p>}
    </div>
  );
}

Return Value

Property	Type	Description
`connect`	`(provider: string, redirectUri?: string) => Promise<void>`	Initiates OAuth flow for a provider
`handleCallback`	`(provider: string, code: string, state: string, redirectUri?: string) => Promise<void>`	Processes the OAuth redirect callback
`loginWithEmail`	`(email: string, type?: string) => Promise<void>`	Starts email OTP or magic link flow
`verifyEmailLogin`	`(email: string, code: string) => Promise<void>`	Completes email verification
`loginWithPhone`	`(phoneNumber: string) => Promise<void>`	Initiates SMS OTP delivery
`verifyPhoneLogin`	`(phoneNumber: string, code: string) => Promise<void>`	Completes phone verification
`loginWithCustomJwt`	`(options: CustomLoginOptions) => Promise<void>`	Authenticates with an external JWT
`isConnecting`	`boolean`	`true` during active authentication
`error`	`Error \| null`	Contains the last authentication error

function OAuthButtons() {
  const { connect, isConnecting, error } = useNeroConnect();

  return (
    <div>
      <button onClick={() => connect("google")} disabled={isConnecting}>
        Google
      </button>
      <button onClick={() => connect("apple")} disabled={isConnecting}>
        Apple
      </button>
      <button onClick={() => connect("github")} disabled={isConnecting}>
        GitHub
      </button>
      <button onClick={() => connect("discord")} disabled={isConnecting}>
        Discord
      </button>
      {error && <p>{error.message}</p>}
    </div>
  );
}

Email OTP Example

function EmailLogin() {
  const { loginWithEmail, verifyEmailLogin, isConnecting, error } = useNeroConnect();
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const [otpSent, setOtpSent] = useState(false);

  const handleSend = async () => {
    await loginWithEmail(email);
    setOtpSent(true);
  };

  const handleVerify = async () => {
    await verifyEmailLogin(email, code);
  };

  if (!otpSent) {
    return (
      <div>
        <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
        <button onClick={handleSend} disabled={isConnecting}>Send Code</button>
      </div>
    );
  }

  return (
    <div>
      <input value={code} onChange={(e) => setCode(e.target.value)} placeholder="Code" />
      <button onClick={handleVerify} disabled={isConnecting}>Verify</button>
      {error && <p>{error.message}</p>}
    </div>
  );
}

Custom JWT Example

function CustomAuth() {
  const { loginWithCustomJwt, isConnecting } = useNeroConnect();

  const handleLogin = async (token: string) => {
    await loginWithCustomJwt({
      verifierId: "your-verifier-id",
      idToken: token,
    });
  };

  return (
    <button onClick={() => handleLogin(myToken)} disabled={isConnecting}>
      Login with SSO
    </button>
  );
}

Architecture Pattern

The hook follows the standard SDK hook pattern:

Context Access: Retrieves the initialized SDK via useNeroMpcAuthContext()
State Tracking: Uses useState for isConnecting and error
Memoization: Implements useCallback for all returned functions
Error Handling: Normalizes errors via try/catch/finally blocks

SDK Initialization Guard

All hook methods verify SDK initialization before executing:

if (!sdk) throw new Error('SDK not initialized');

This ensures the hook is only used within a valid NeroMpcAuthProvider context.

Error Handling

Errors follow a four-step propagation pattern:

Caught within the hook's useCallback
Normalized to a standard Error object
Stored in the hook's error state for UI rendering
Re-thrown to allow component-level handling

useNeroConnect

On this page