Monerium.com	Monerium.app	Monerium Dev Docs

⚠️ DEPRECATED: Monerium SDK React Provider

Note: This package is deprecated and incompatible with @monerium/sdk v4.0.0 and newer.

The Monerium SDK v4 delegates token management and API usage to your server (Node.js/server-side runtimes) rather than retaining state in the browser. Using a client-side React Provider to manage secrets is no longer recommended.

For a reference implementation of using the v4 SDK securely with modern React (Next.js Server Actions, HTTP-only cookies, and custom React Query hooks), please see the apps/customer demo application in our repository.

This package depends on the SDK, it's currently pinned to v3.5.

Installation

pnpm add @monerium/sdk-react-provider @tanstack/react-query

TanStack Query is an async state manager that handles requests, caching, and more.

Wrap App in Context Provider

Wrap your app in the QueryClientProvider React Context Provider and pass a new QueryClient instance to the client property

Inside the QueryClientProvider, wrap your app in the MoneriumProvider React Context Provider and pass the auth flow's clientId, redirectUri, and environment configuration.

import { createRoot } from 'react-dom/client';
import { MoneriumProvider } from '@monerium/sdk-react-provider';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

const queryClient = new QueryClient();

root.render(
  <QueryClientProvider client={queryClient}>
    <MoneriumProvider
      clientId="f99e629b-6dca-11ee-8aa6-5273f65ed05b"
      redirectUri="https://pntvgs.csb.app/"
      environment="sandbox"
      // You should store the refresh token in a secure way
      onRefreshTokenUpdate={(token) => setRefreshToken(token)}
      refreshToken={refreshToken}
    >
      <App />
    </MoneriumProvider>
  </QueryClientProvider>
);

Hooks

The following hooks are now available within your application:

Example

import { useAuth, useProfile } from '@monerium/sdk-react-provider';

export default function App() {
  const { authorize, isAuthorized } = useAuth();
  const { profile } = useProfile();

  return (
    <div className="App">
      {!isAuthorized && <button onClick={authorize}>Authorize</button>}
      {profile ? <h1>{profile?.email}</h1> : <h1>No profile</h1>}
    </div>
  );
}

Demo

https://pntvgs.csb.app/

Hook used to access the SDK: https://codesandbox.io/s/monerium-sdk-react-provider-pntvgs?file=/src/App.js

The application is wrapped with MoneriumProvider https://codesandbox.io/s/monerium-sdk-react-provider-pntvgs?file=/src/index.js

Development

Running unit tests

Run turbo --filter @monerium/sdk-react-provider test to execute the unit tests

Documentation

We use TypeDoc to generate the documentation.

There are a few caveats to keep in mind when documenting the code:

Use @group to group functions in the entry file. E.g. @group Hooks.
To specifically mark @param as optional, use square brackets, e.g. [param]. Useful for optional destructed parameters.

For optional destructed parameters, use inline typing to improve readability.

+ @param {Object} [param] - Optional parameter.
+ @param {MyQueryType} [param.query] - Description.
+
+ function useMyHook(
+   { query }:
+   { query?: MyQueryType } = {}
+ ) {}

Document output:

param?: Object
param?.query MyQueryType

Instead of:

- type UseMyHookParams = {
-   query?: MyQueryType
- }
- function useMyHook(params?: UseHookParams) {}

Document output:

params?: UseMyHookParams

This would require the viewer to navigate into the UseMyHookParams type to see the optional query property.

Installation​

Wrap App in Context Provider​

Hooks​

Example​

Demo​