Tutorials

1. Protect a Next.js app end-to-end~10 min

The full journey: create a PoC, wire the SDK into a Next.js app, then walk through the gate yourself as an evaluator so you know exactly what your client will see.

1. Sign up

   Go to /signup and enter your email. POCX sends a 6-digit code — no password to invent, none to leak. Enter the code and you land in the dashboard.

2. Create the PoC

   Click New PoC in the dashboard and fill in the fields. Each one does real work:

   • Name — shown on the hosted gate and substituted into the terms as {{POC_NAME}}.
   • Owner entity + registration number — your company, named as the IP owner throughout the Terms of Access.
   • Client entity — the organisation evaluating the PoC; bound by the terms alongside the individual signer.
   • Purpose — narrows what evaluators are allowed to use the PoC for (“solely for the purpose of …”).
   • Brand color — the accent color of the hosted gate, so the login page looks like yours, not ours.

3. Copy the three env vars

   Open Dashboard → your PoC → Overview and copy the credentials into .env.local in your app:

   .env.localCopy

   POCX_URL=https://pocx-production.up.railway.app
   POCX_PROJECT_KEY=pocx_pk_…
   POCX_SECRET=pocx_sk_…   # server-side only — never expose to the browser

4. Download the SDK

   One dependency-free TypeScript file, straight into your project:

   terminalCopy

   curl -o lib/pocx.ts https://pocx-production.up.railway.app/sdk/pocx.ts

5. Wire the gate

   Create proxy.ts at the project root (Next.js 16). On Next.js 15 and earlier, name the file middleware.ts and export middleware instead of proxy:

   proxy.tsCopy

   import { createPocxGate } from "./lib/pocx";
   
   const gate = createPocxGate();
   
   export const proxy = gate.nextProxy();
   export const config = {
     matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
   };

6. Set the protected app URL

   In Dashboard → your PoC → Settings, set Protected app URL to where your app runs (e.g. its deployment URL). The gate only ever redirects evaluators back to this registered URL — it’s what makes the return leg of the flow safe.

7. Invite yourself as an evaluator

   Go to Dashboard → your PoC → Evaluators and add your own email. Only allowlisted emails ever receive a login code — everyone else gets a polite dead end. The Free plan includes 3 evaluator seats per PoC; Pro removes the cap.

8. Test the full flow

   Open your app in a private/incognito window. You should be 307-redirected to the gate at https://pocx-production.up.railway.app/gate/<slug>. Enter your email, type the 6-digit code from your inbox, read and e-sign the Terms of Access, and land back in your app with a live session. Then check Dashboard → your PoC → Sessions and Signatures — you’ll see your own session and your signed terms record, exactly as you’ll later see your evaluators’.

2. Protect an Express app~5 min

Same PoC, same three env vars, same single SDK file — Express just mounts it as middleware instead of a proxy.

1. Reuse steps 1–4 above

   Create the PoC, copy POCX_URL, POCX_PROJECT_KEY and POCX_SECRET into your server’s environment, and curl the SDK into lib/pocx.ts.

2. Mount the middleware before your routes

   Everything registered after the gate is protected:

   server.tsCopy

   import express from "express";
   import { createPocxGate } from "./lib/pocx";
   
   const app = express();
   const gate = createPocxGate();
   
   app.use(gate.expressMiddleware());
   
   // …your routes below are now protected

3. Plain-JavaScript project?

   The SDK ships as TypeScript. If your Express app isn’t on TS yet, run it with a TS-aware runner like tsx (or bundle with esbuild) — no config beyond npx tsx server.ts.

4. Set the protected app URL and test

   As with Next.js: set Protected app URL in Settings, invite yourself in Evaluators, and walk the gate in a private window.

3. Let a coding agent do it~2 min

The fastest integration is not doing it yourself. POCX publishes agent-executable instructions at /llms.txt.

1. Paste one prompt

   Open Claude Code, Codex or Cursor inside your app’s repo and paste:

   Add POCX protection to this app. Follow the instructions at https://pocx-production.up.railway.app/llms.txt exactly.

   Copy

2. What the agent will do

   It reads the instructions, adds the three env vars (asking you for the values from your PoC’s Overview tab), downloads lib/pocx.ts, and wires the right entry point for your stack — proxy.ts on Next.js 16, middleware.ts on older Next.js, expressMiddleware() on Express.

3. Verify its work

   Open the app in a private window and confirm you’re redirected to https://pocx-production.up.railway.app/gate/<slug>. Complete the OTP + terms flow with an invited email, then check Sessions for your live session. If the redirect doesn’t fire, check the env vars loaded and that the middleware file is at the project root.

4. Customize your Terms of Access~5 min

Every PoC starts with the standard protective template — including the “no reuse without engagement” clause. You can keep it, tune it, or replace it entirely.

1. Open the Terms tab

   Dashboard → your PoC → Terms. Two modes: Template (the standard terms with your PoC’s details substituted in) or Custom (your own legal text, verbatim).

2. Use placeholders anywhere

   Both modes resolve the same placeholders, auto-filled from your PoC’s fields:

   {{POC_NAME}}{{OWNER_ENTITY}}{{OWNER_REG_NO}}{{CLIENT_ENTITY}}{{PURPOSE}}{{SUPPORT_EMAIL}}{{TERMS_VERSION}}

3. Check the live preview

   The Terms tab renders the fully resolved text as evaluators will see it — what’s previewed is byte-for-byte what gets signed, hashed and put in the PDF.

4. Understand version bumps

   Editing the text under the same version applies only to future signers. Bumping the version forces every evaluator to re-accept before their next request goes through. Tick the optional “revoke all live sessions now” checkbox when the change is material and you want re-acceptance immediately, not at next revalidation.

5. Know where signed copies live

   Every acceptance is recorded in Dashboard → your PoC → Signatures (with timestamp, IP, user agent and the SHA-256 hash of the exact text), and a signed PDF certificate is emailed to the signer.

5. Invite, remove and revoke~5 min

Access control day-to-day: who can log in, who’s logged in right now, and the levers you pull when either needs to change.

1. Add evaluators

   Dashboard → your PoC → Evaluators → add their email. Only these addresses ever receive a login code. Free includes 3 seats per PoC; Pro (US$39/mo) is unlimited.

2. Disable a seat

   Disabling an evaluator blocks their next login — they can no longer request a code. Their current session (if any) keeps running until it expires or you revoke it.

3. Revoke sessions

   Dashboard → your PoC → Sessions lists every live session with a per-session Revoke and a Revoke all. The SDK revalidates with POCX every minute, so a revocation bites in the protected app within ~60 seconds.

4. Pause the whole PoC

   Settings → Pause blocks new logins and live session validation in one switch — the demo is dark until you unpause. Session TTL, idle timeout and OTP expiry are configurable in the same tab.

5. Rotate the secret

   When a contractor with env-file access leaves, Settings → Rotate secret issues a new POCX_SECRET; exchanges signed with the old one stop working immediately. Update your app’s environment and redeploy.

6. Archive when it's over

   Settings → Archive retires the PoC once the evaluation ends. Records — signatures included — stay on file.

6. Your evidence trail (Pro)~5 min

If a client ever ships something suspiciously familiar, what you want is a record. POCX keeps one from day one on every plan; the Pro plan unlocks the view.

1. What the audit log captures

   Every OTP request and denial, every login, every terms signature, every revocation — each with actor, timestamp and context. Add logEvents: true to createPocxGate() and in-app page_view events stream in too, showing which screens each evaluator actually opened.

2. Filter and export

   Dashboard → your PoC → Audit filters by evaluator and event type, and exports the lot as CSV for your records — or your lawyer’s.

3. How the pieces fit together

   The signature record proves who agreed (OTP-verified email) and to what (the SHA-256 hash pins the exact text; the signed PDF is human-readable proof of the same string). The audit log proves what they did after agreeing. If you ever need to demonstrate what was agreed and accessed, the three line up on their own.

4. Recording starts before you upgrade

   Events are recorded from day one on all plans — upgrading to Pro later unlocks the full history, not just events after the upgrade.