@namoidhq/react

@namoidhq/react wraps @namoidhq/js in React components and hooks so you can drop NamoID sign-in into a React app without wiring the client yourself.

• Package: @namoidhq/react
• Peer deps: react >= 18, react-dom >= 18

Install

npm install @namoidhq/react @namoidhq/js

Provide the client

Wrap your app in NamoIDProvider. It accepts the same options as createNamoIDClient:

import { NamoIDProvider } from "@namoidhq/react";

export function App({ children }) {
  return (
    <NamoIDProvider
      publishableKey="namoid_auth_pk_live_…"
      // apiBaseUrl / hostedLoginBaseUrl / fetcher optional
    >
      {children}
    </NamoIDProvider>
  );
}

Hooks

• useNamoID() — returns the initialized NamoIDClient from context. Throws if used outside a NamoIDProvider.
• useAuthConfig() — returns { config, loading, error, reload }, auto-fetching your environment's auth config on mount with a manual reload().

import { useAuthConfig } from "@namoidhq/react";

function Methods() {
  const { config, loading } = useAuthConfig();
  if (loading) return <p>Loading…</p>;
  return <p>Methods: {config?.signin_methods.join(", ")}</p>;
}

Components

All take at least clientId and redirectUri.

• HostedLoginButton — a button that redirects to hosted login. Props are the HostedLoginUrlOptions plus mode ("signin" | "signup" | "waitlist"), children, className, style, disabled. Disabled until clientId and redirectUri are set; the default label depends on mode.
• SignIn — a card with a sign-in button; enabled when the environment has at least one sign-in method.
• SignUp — a card for registration; enabled when access mode isn't closed.
• Waitlist — an email-capture form; with an onSubmitEmail handler it submits locally, otherwise it renders a HostedLoginButton in waitlist mode.
• AuthCard — chooses between SignIn / SignUp / Waitlist based on a mode prop.

import { SignIn, SignUp, Waitlist, HostedLoginButton } from "@namoidhq/react";

<>
  <SignIn clientId="idpc_live_…" redirectUri="https://app.example/auth/callback" />
  <SignUp clientId="idpc_live_…" redirectUri="https://app.example/auth/callback" />
  <Waitlist clientId="idpc_live_…" redirectUri="https://app.example/auth/callback" />
  <HostedLoginButton clientId="idpc_live_…" redirectUri="https://app.example/auth/callback" mode="signin" />
</>

How it fits with your server

These components handle the front-channel redirect into hosted login. Your server still completes the OIDC code exchange — in Next.js, pair this with @namoidhq/nextjs or any conformant OIDC library such as Auth.js.