Framework Guides
Framework Guides
Add Refport referral tracking to your app with Next.js, TanStack Start, Express, or a React SPA.
Use these guides when you already know your framework and want implementation details. If you are planning the full integration path first, start with Getting Started.
Refport tracks a three-event funnel for every referred visitor:
| Event | When | Who calls it |
|---|---|---|
| Click | Visitor lands on your site via a referral link | Browser SDK (automatic) |
| Lead | Visitor creates an account | Your server |
| Sale | Lead makes a purchase | Your server or Stripe webhook |
SDK overview
| Package | Where it runs | Purpose |
|---|---|---|
refport-js | Browser | Reads refp_id from URL, stores in cookie |
@refport/react | Browser (React) | Click tracking plus Provider/hooks for portal data |
refport | Server (Node.js) | track.lead(), track.sale(), cookie helpers |
@refport/better-auth | Server | Automatic lead tracking via Better Auth plugin |
If you use Better Auth, lead tracking is automatic - the
@refport/better-auth plugin intercepts
every sign-up and calls track.lead() for you with no extra code.
Choose your framework
Next.js App Router
Server Actions, Route Handlers, and the App Router
TanStack Start
Server functions, API routes, and SSR with Vinxi
Express.js
REST API routes and middleware patterns
React SPA (Vite)
Client-only React app with a separate backend