Getting Started with Monaiq in React

The Scenario

You've built a React app — maybe a dashboard, a design tool, or a productivity suite. It has a free tier with basic functionality and a Pro tier with premium features. The code works, users are signing up, and now you need to actually gate those Pro features based on who's paying.

In the .NET world, you have dependency injection and server-side checks. In React, you need something different: hooks that integrate with your component tree, a context provider that makes licensing available everywhere, and client-side assertion evaluation that doesn't add a loading spinner to every protected component.

That's exactly what Monaiq's React SDK provides. Let's set it up.

Install the SDK

The React SDK is published on npm as @sidub-inc/licensing-client. It has a peer dependency on React 18+ — nothing else.

npm install @sidub-inc/licensing-client

That's it for dependencies. The SDK is TypeScript-first with full type definitions included — no separate @types package needed. If you're using JavaScript, the types are still there for editor IntelliSense.

Configure the Provider

Monaiq's React integration uses a context provider pattern — the same approach as React Router, Redux, or any other library that shares state across your component tree. Wrap your app (or the section that needs licensing) in a LicensingProvider:

import { LicensingProvider } from '@sidub-inc/licensing-client';

function App() {
  return (
    <LicensingProvider config={{
      licenseServiceUri: 'https://api.monaiq.com/licensing',
      encodedCredential: process.env.REACT_APP_LICENSE_KEY
    }}>
      <YourApp />
    </LicensingProvider>
  );
}

The encodedCredential is a SIDUB_LIC_... string you get from the Monaiq dashboard when you create a license. It encodes your license ID, API key, and the public key used for cryptographic signature validation — all in one string. No separate key management.

The provider creates a LicensingClient instance and makes it available to every component below via React context. The client is memoized — it only recreates when your config actually changes.

Check Authorization

Now the useful part. In any component inside the provider, use the useLicenseAuthorization hook to fetch and track the user's license authorization:

import { useLicenseAuthorization } from '@sidub-inc/licensing-client';

function LicenseStatus() {
  const {
    authorization,
    loading,
    error,
    signatureValidated,
    fetchAuthorization
  } = useLicenseAuthorization();

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

  if (loading) return <div>Checking license...</div>;
  if (error) return <div>License error: {error.message}</div>;
  if (!authorization) return <div>No license loaded</div>;

  return (
    <div>
      License active
      {signatureValidated && <span> ✓ Cryptographically verified</span>}
    </div>
  );
}

The hook gives you everything you need: the authorization data, loading state, error state, and whether the signature was cryptographically validated. That last part matters — it means the authorization hasn't been tampered with since the server issued it. The validation happens in the browser using the Web Crypto API, matching the same security model as the .NET SDK.

Gate Features

Checking authorization is useful, but the real power is gating features. The SDK provides useAssertion — a hook that evaluates a license assertion against the current authorization and returns a simple boolean.

import {
  useLicenseAuthorization,
  useAssertion,
  ServiceAccessAssertion,
  ServiceAccessLevel
} from '@sidub-inc/licensing-client';

function PremiumDashboard() {
  const { authorization } = useLicenseAuthorization();

  const hasAnalytics = useAssertion(
    ServiceAccessAssertion.create('advanced-analytics', ServiceAccessLevel.Allowed),
    authorization
  );

  const hasPdfExport = useAssertion(
    ServiceAccessAssertion.create('pdf-export', ServiceAccessLevel.Allowed),
    authorization
  );

  return (
    <div>
      {hasAnalytics ? <AnalyticsPanel /> : <UpgradeCard feature="Analytics" />}
      {hasPdfExport ? <ExportButton /> : <UpgradeCard feature="PDF Export" />}
    </div>
  );
}

ServiceAccessAssertion.create() creates a typed assertion object. The useAssertion hook evaluates it against the authorization — entirely locally, with no network call. It returns true or false. The result is memoized and only re-evaluates when the authorization or assertion changes.

This is the same assertion pattern used in the .NET SDK — ServiceAccessAssertion checks for boolean access, while RateLimitAssertion handles metered features. Same concepts, React-native API.

Track Usage

If your product includes consumption-based features — API calls, file exports, AI generations — you need to report usage back to Monaiq. The client's performOperation method handles this:

import { useLicensingContext } from '@sidub-inc/licensing-client';

function ExportButton() {
  const client = useLicensingContext();

  const handleExport = async () => {
    // Report the operation to Monaiq
    await client.performOperation({
      featureKey: 'pdf-export',
      quantity: 1
    });

    // Then perform the actual export
    await generatePdfExport();
  };

  return <button onClick={handleExport}>Export PDF</button>;
}

The useLicensingContext hook gives you direct access to the LicensingClient instance for imperative operations. Consumption data flows to your Monaiq dashboard in real time — you can see exactly which features are being used and by whom.

Next Steps

That covers the essentials: install, configure, authorize, gate, and track. You've gone from a React app with no licensing to one that enforces entitlements and reports usage — with about 30 lines of code.

From here, you can explore:

• Rate limiting — use RateLimitAssertion for time-windowed feature limits
• Feature introspection — use useLicenseFeature to check if a feature exists in the authorization
• Standalone client — use useLicensing for non-context scenarios (e.g., utility scripts, Node.js backends)
• Product setup — define your products, offerings, and features in the Monaiq dashboard or via the MCP server

The React SDK uses the same Monaiq backend as the .NET SDK. If you're already using Monaiq for a server-side application, your products, offerings, and licenses work with the React client out of the box — no reconfiguration.

Check out the React SDK landing page for a full feature overview, or dive into the documentation for the complete API reference.