@nocodebackend/account-react

NoCodeBackend Account React

The official, pre-built Account experience for a customer application's NoCodeBackend end users. It is not for NoCodeBackend dashboard/Clerk users.

It includes:

• Profile name and primary email display
• Password update and Better Auth active-session management
• Per-device and all-other-device sign-out
• Full sign-out
• Live Billing visibility based on monetization status
• Customer-facing plan benefits configured alongside each table limit
• Provider-aware recurring-plan switching (Stripe or Razorpay), hosted one-time purchases, purchase history, cancellation, and a Stripe Customer Portal link when the selected provider supports it

Install

npm install @nocodebackend/account-react@latest

Next.js gateway

Create app/api/ncb/account/[...path]/route.ts:

import { createNcbAccountProxy } from "@nocodebackend/account-react/next";

const proxy = createNcbAccountProxy({
  instance: process.env.NCB_INSTANCE!,
  secretKey: process.env.NCB_SECRET_KEY!,
  appUrl: process.env.NCB_APP_URL,
  authApiUrl: process.env.NCB_AUTH_API_URL,
});

type Context = { params: Promise<{ path: string[] }> };

async function handle(request: Request, context: Context) {
  return proxy(request, (await context.params).path);
}

export const GET = handle;
export const POST = handle;

NCB_INSTANCE and NCB_SECRET_KEY must remain server-only. The proxy derives the end user from the Better Auth cookie; callers cannot choose a database, user ID, or payment-provider customer ID.

The gateway is compatible with Next.js App Router, including Next.js 16. It returns a standard Response and deliberately forwards only API-safe response headers; do not replace it with a middleware rewrite or a browser-side proxy.

Render

"use client";

import { NCBAccount } from "@nocodebackend/account-react";

export function AccountButton() {
  return <NCBAccount />;
}

Place AccountButton in the authenticated app shell. The trigger is hidden when the visitor is signed out. Billing is not based on plan count: it follows the live monetization status event and disappears immediately when disabled. Recurring plans can be switched in place. A confirmed one-time purchase becomes the end user's current access tier immediately (and its configured limits are applied), while also appearing in Billing Purchases. Any earlier recurring provider plan is scheduled not to renew. Selecting a purchase opens a secure in-app payment receipt. This is a receipt, not automatically a provider tax invoice. Past one-time purchases appear only in Purchases; every non-current plan card remains selectable so a user can switch back at any time.

Provider webhooks (one-time owner setup)

This is configured once on NoCodeBackend's payment platform, not in every customer application. After deploying the NCB server routes:

• Stripe Connect: create a Connect webhook destination for https://app.nocodebackend.com/api/user-billing/webhook, select checkout.session.completed, customer.subscription.created, customer.subscription.updated, and customer.subscription.deleted, then save its signing secret as STRIPE_CONNECT_WEBHOOK_SECRET on the NCB server.
• Razorpay: create a webhook for https://app.nocodebackend.com/api/razorpay/webhook, select all Subscription events plus payment_link.paid, then save its webhook secret as RAZORPAY_WEBHOOK_SECRET on the NCB server.

Use matching live or test credentials across each provider, the NCB server, and the connected account. Webhooks are the source of truth for granting paid access; do not mark a user paid from a browser redirect.

Publishing

Run npm run build before publishing. The package intentionally has no NCB credentials and can be safely installed in customer applications.