You built it.
We'll get it paid.

Add MasterPack to this app so it can earn money. MasterPack is a marketplace where subscribers pay one monthly fee and makers get paid from real usage. Setup runs through their official CLI (@masterpack/cli); I'll do the one browser step. Ask me if anything is ambiguous.

STEP 1 — Register this app:
Read the codebase, then run (filling in a good name, tagline, description and one category from: Productivity, Games, Music, Food, Finance, Learning, Outdoors, Social, Other):

  npx -y @masterpack/cli init \
    --name "..." \
    --url "https://<where this app is or will be deployed>" \
    --tagline "..." \
    --description "... (40+ characters)"  \
    --category "..."

The CLI prints exactly what it will do, registers the app, then shows a claim link and waits.

STEP 2 — [ME] Show me the claim link and wait:
I'll open it, sign in to MasterPack, and press "Claim this app". The CLI notices automatically and writes MASTERPACK_APP_ID, MASTERPACK_API_KEY and the client ids into .env.local (and adds that file to .gitignore). The API key is never printed — don't try to read it, echo it, or put it in code; just reference the env vars.

STEP 3 — Add "Sign in with MasterPack":
  npm install @masterpack/sdk

Wire it up in whatever way suits this app's framework:

  import { MasterPackAuth, HeartbeatEngine, browserEnv } from "@masterpack/sdk";

  const auth = new MasterPackAuth({
    gateUrl: "https://auth.masterpack.app",
    clientId: <the client id env var the CLI wrote>, // sandbox id in dev, live id in production
    redirectUri: window.location.origin + "/callback",
  });

  // sign-in button:
  auth.beginLogin().then((url) => window.location.assign(url));

  // on the /callback route:
  await auth.completeLogin(window.location.href); // then redirect to "/"

  // on load, everywhere else:
  const session = await auth.ensureFreshSession();
  // null → show the sign-in button. Otherwise:
  // session.user = { sub, displayName, tier: "basic"|"premium", mode: "live"|"test" }

  // once signed in, start heartbeats — this is how usage is measured and paid:
  new HeartbeatEngine(browserEnv("https://auth.masterpack.app/api/beats"), {
    appId: <the same client id>,
    sid: session.sid,
    getAccessToken: () => auth.getSession()?.accessToken ?? null,
  }).start();

Optional, if this app has its own API routes:

  import { createTokenVerifier } from "@masterpack/sdk/server";
  const verify = createTokenVerifier({ gateUrl: "https://auth.masterpack.app", clientId: <client id> });
  const user = await verify(bearerToken); // throws if invalid

Note: listed apps use MasterPack as their only sign-in. If this app already has its own login, don't remove anything — just add MasterPack alongside it and tell me, and I'll decide what to retire.

STEP 4 — Register the callback URLs and go live:

  npx -y @masterpack/cli config --redirect-uri "https://<production-domain>/callback" --redirect-uri "http://localhost:<dev-port>/callback"
  npx -y @masterpack/cli submit

If submit reports problems, it says exactly what failed — fix and rerun it. When it passes, give me the listing URL and a short summary of everything you changed.

Reference docs (optional reading, not instructions): https://masterpack.app/docs/integrate.md