@grantry/react

Grantry for React: a provider that holds the session, hooks that read it, the prebuilt sign-in, sign-up, account and pricing components, and a server entry for checking access tokens and making checkouts.

npm install @grantry/react

Requires React 18 or 19. For a Next.js application install @grantry/nextjs instead; it re-exports everything here and adds auth() and a middleware.

Setup

Wrap the application in the provider with your publishable key (Grantry dashboard, API keys):

import { GrantryProvider } from '@grantry/react';

export function Root() {
  return (
    <GrantryProvider publishableKey={import.meta.env.VITE_GRANTRY_PUBLISHABLE_KEY}>
      <App />
    </GrantryProvider>
  );
}

Components and hooks

import { SignedIn, SignedOut, SignIn, UserButton, useAuth } from '@grantry/react';

function Header() {
  return (
    <>
      <SignedOut>
        <SignIn />
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
    </>
  );
}

function useApi() {
  const { getToken } = useAuth();
  return async (path: string) =>
    fetch(path, { headers: { authorization: `Bearer ${await getToken()}` } });
}

Also exported: SignUp, UserProfile, PricingTable, CheckoutButton, ProductCard, Protect, SignOutButton, the headless useSignInFlow and useSignUpFlow for your own markup, and useUser, useSession, useAccounts, useOAuth, useEntitlements, usePlans and useReverification. Every element carries a stable gr- class, and the appearance prop styles the same elements from JavaScript.

Selling

<PricingTable>, <ProductCard> and <CheckoutButton> sell through Grantry's hosted checkout: a press makes a checkout for the signed-in user (a signed-out buyer is sent to sign in first) and the browser leaves for the page on your application's checkout domain, coming back to successUrl (this page when left out) once it is paid. onSubscribed and onComplete run on the way back when no successUrl is given. <UserProfile>'s billing tab changes plans and replaces the card the same way. From your own code, useGrantry().redirectToCheckout({ items: [{ priceId }] }) does what the buttons do.

Since 0.2.0 this is the only checkout: the in-app checkout dialog and its card field are gone, with the appearance elements and localization keys only they used.

On your server

import { authenticateRequest } from '@grantry/react/server';

export async function handler(request: Request) {
  const auth = await authenticateRequest(request);
  if (!auth) return new Response('Unauthorized', { status: 401 });
  if (!auth.has({ feature: 'export' })) return new Response('Upgrade required', { status: 403 });
  return Response.json({ userId: auth.userId });
}

@grantry/react/server imports no React and nothing from the browser; it runs on Node 18.18+, Bun, Deno and edge runtimes. verifyToken checks the RS256 signature against Grantry's published keys (fetched once and cached), the issuer, the expiry, and that the token belongs to your application, read from GRANTRY_PUBLISHABLE_KEY (or publishableKey). With no key configured it throws no_audience rather than accept a token minted for another application. clockTolerance allows 30 seconds of clock disagreement by default.

verifyReverification spends a "Verify it's you" grant with your secret key (GRANTRY_SECRET_KEY) before a sensitive action.

createCheckoutSession({ userId, items, successUrl }) makes a hosted checkout for one of your users with the same secret key; redirect to the url it answers with. Take userId from a verified token or your own records, never from the request body, and never log the url: it carries the checkout's key.

Documentation

https://grantry.dev

License

MIT