Skip to main content

Migrating mm-react-tools v4 → v5

v5 makes two changes that touch application code:

  1. Credentials come from a credential store. Your app reads them with getCredential(purpose) or the useCredential(purpose) hook instead of an access token and refs. The store is filled the same way whether the app signed in itself or a MachineMetrics host supplied the credential, so an embedded app needs no further update when hosts begin supplying credentials directly.
  2. Sign-in uses PKCE and no client secret. A browser app is a public client. MMProvider no longer accepts a clientSecret, and the secret leaves your config.

Most apps change the few lines that read accessToken, jwtRef, or natsCredsRef, and delete one config key.

1. Remove the client secret

Remove clientSecret from wherever your app configures MMProvider, typically public/default.json and the provider props. TypeScript callers get a compile error until they do; JavaScript callers that still pass it get a console.error and the value is ignored.

<MMProvider
clientId={config.clientId}
- clientSecret={config.clientSecret}
releaseStage={config.releaseStage}
scope="reporting"
>

Sign-in itself is unchanged from the user's point of view. login() sends an S256 code challenge and the token exchange sends the verifier. This works on plain http://localhost origins in local development as well as on https.

2. useMMAuth() — what changed

v4v5Notes
accessTokengetCredential('api')The API bearer.
jwtRef.currentgetCredential('graphql')The GraphQL JWT.
natsCredsRef.currentgetCredential('nats')NATS credentials.
isAuthenticatedisAuthenticatedSame name; now means a usable API credential is present.
request, login, logout, urls, clientIdunchanged
grantedScopeSpace-delimited scopes actually granted, when known.
getCredential(purpose)'api' | 'graphql' | 'nats'. Read per use; never cache the result.

For a value that re-renders your component when the credential changes (a refresh, or a host supplying a new credential), use the hook:

import { useCredential } from '@machinemetrics/mm-react-tools';

const graphqlJwt = useCredential('graphql'); // null until established

Before / after

// v4
const { accessToken, jwtRef, natsCredsRef } = useMMAuth();
fetch(url, { headers: { Authorization: `Bearer ${accessToken}` } });
const gql = jwtRef.current;
const nats = natsCredsRef.current;

// v5
const { getCredential } = useMMAuth();
fetch(url, { headers: { Authorization: `Bearer ${getCredential('api')}` } });
const gql = getCredential('graphql');
const nats = getCredential('nats');

If you use the provided request() helper and the library's Apollo client, they need no change. Both read the store internally.

3. Removed

These threw on call for several versions and are now gone:

RemovedUse instead
useMMEmbeddedApp()useMMAppParams(), useMMAppCommands(), useMMAppContext()
useMMAppTools()useMMAppParams() + useMMAppCommands()
context.colorModeuseMMAppParams().colorMode
context.isFullScreenuseMMAppParams().isFullScreen

4. No longer needed

  • mm-app-manifest.json. Hosts no longer fetch it. Whether your app can be embedded is decided by the runtime handshake, and its display name comes from your registered OAuth client. You can delete the file; a stale one is harmless.

5. Behavior changes that need no code

  • Embedded apps do not reuse a cached token on boot. When your app loads inside a MachineMetrics host, it takes the credential the host supplies rather than one left in storage by an earlier standalone session.
  • Host-supplied credentials. When a host provides credentials to an embedded app, v5 accepts them. Your app keeps calling getCredential(...) and useCredential(...) and does not change.