open-index/open-npm huggingface dataset:
npm package: @refport/better-auth
Description: Better Auth plugin for Refport referral tracking
Latest version: 0.1.3

# @refport/better-auth

[Better Auth](https://www.better-auth.com/) plugin for [Refport](https://refport.co) referral tracking. Automatically tracks sign-up conversions as leads when users register through a referral link.

## Installation

```bash
npm install @refport/better-auth refport
```

## Server Setup

Add the plugin to your Better Auth server configuration:

```ts
import { betterAuth } from "better-auth";
import { refportPlugin } from "@refport/better-auth";
import { Refport } from "refport";

const refport = new Refport({ apiKey: process.env.REFPORT_API_KEY! });

export const auth = betterAuth({
  plugins: [
    refportPlugin({
      refport,
    }),
  ],
});
```

## Client Setup

Add the client plugin for type inference:

```ts
import { createAuthClient } from "better-auth/client";
import { refportPluginClient } from "@refport/better-auth/client";

export const authClient = createAuthClient({
  plugins: [refportPluginClient()],
});
```

## Options

| Option            | Type                           | Default      | Description                                 |
| ----------------- | ------------------------------ | ------------ | ------------------------------------------- |
| `refport`         | `Refport`                      | **required** | Refport SDK instance                        |
| `eventName`       | `string`                       | `"Sign Up"`  | Event name for the lead conversion          |
| `cookieName`      | `string`                       | `"refp_id"`  | Name of the cookie that stores the click ID |
| `customLeadTrack` | `(user, ctx) => Promise<void>` | —            | Override the default tracking logic         |

## How It Works

1. A visitor clicks a referral link and lands on your site
2. The `refport-js` browser SDK captures the `refp_id` URL parameter into a cookie
3. The visitor signs up using Better Auth
4. This plugin's `user.create.after` database hook fires:
   - Reads the `refp_id` cookie from the request
   - Calls `refport.track.lead()` with the user's details
   - Clears the cookie
5. The referral is now attributed in your Refport dashboard

Errors during tracking are logged but never block the sign-up flow.
npm package: @refport/react
Description: React SDK for [Refport](https://refport.co) — embed the referral portal and track referral clicks.
Latest version: 0.5.0

# @refport/react

React SDK for [Refport](https://refport.co) — embed the referral portal and track referral clicks.

Ships with a `"use client"` banner, compatible with Next.js App Router out of the box.

## Install

```bash
npm install @refport/react
```

## Embed Portal

```tsx
import { RefportEmbed } from "@refport/react";

function ReferralPage() {
  return (
    <RefportEmbed
      token="pub_..."
      theme="light"
      cssVars={{ "--accent": "#ff6600" }}
      onError={(err) => console.error(err.message)}
    />
  );
}
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `token` | `string` | Public embed token (required) |
| `theme` | `"light" \| "dark" \| "system"` | Color theme |
| `cssVars` | `Record<string, string>` | Custom CSS variables |
| `baseUrl` | `string` | API base URL (defaults to `https://app.refport.co`) |
| `onError` | `(error: { code: string; message: string }) => void` | Error callback |

All standard `<div>` props (except `children`) are also forwarded to the wrapper element.

## Click Tracking

### `useRefportTracking(options?)`

React hook that captures the `refp_id` URL parameter on mount and stores it in a cookie. Wraps the `refport-js` SDK.

```tsx
import { useRefportTracking } from "@refport/react";

function App() {
  const { tracked, clickId, source } = useRefportTracking();

  useEffect(() => {
    if (clickId) {
      console.log(`Tracking: ${clickId} (from ${source})`);
    }
  }, [clickId]);

  return <>{/* your app */}</>;
}
```

Returns a `RefportTrackingResult`:

```ts
{ tracked: boolean; clickId: string | null; source: "url" | "cookie" | null }
```

Accepts `RefportTrackingOptions` — see [refport-js](https://www.npmjs.com/package/refport-js) for the full options list.

### `<RefportTracker>`

Renderless component alternative to the hook. Fires `onTrack` when a click ID is detected.

```tsx
import { RefportTracker } from "@refport/react";

function App() {
  return (
    <>
      <RefportTracker onTrack={(result) => console.log(result.clickId)} />
      {/* your app */}
    </>
  );
}
```

| Prop | Type | Description |
|------|------|-------------|
| `options` | `RefportTrackingOptions` | Tracking configuration |
| `onTrack` | `(result: RefportTrackingResult) => void` | Called when a click ID is present |

### `getClickId(cookieName?)`

Reads the click ID from the cookie. Returns `string | null`. Re-exported from `refport-js`.

### `reset(options?)`

Deletes the tracking cookie. Re-exported from `refport-js`.

## License

MIT