OnlyFans API Auth Example - Next.js + Prisma

A simple dashboard example demonstrating how to use @onlyfansapi/auth with Next.js and Prisma to manage OnlyFans accounts.

Features

• 🔐 Connect OnlyFans accounts using @onlyfansapi/auth
• 💾 Store account data in PostgreSQL via Prisma
• 📊 Simple dashboard to view and manage accounts
• 🎨 Modern, responsive UI with Tailwind CSS
• 🔑 Secure API key handling (server-side only)

Prerequisites

• Node.js 18+ or Bun
• PostgreSQL database
• OnlyFans API key from onlyfansapi.com

Getting Started

1. Clone and install dependencies

git clone <this-repo>
cd auth-example-nextjs-prisma
bun install
# or
npm install

2. Set up environment variables

Create a .env file in the root directory:

# Database connection string (required)
DATABASE_URL="postgresql://user:password@localhost:5432/mydb?sslmode=verify-full"

# OnlyFans API Key (get it from https://app.onlyfansapi.com/api-keys)
# This stays server-side and is never exposed to the client
OFAPI_API_KEY="ofapi_..."

3. Set up the database

Push the schema to your database:

bun run db:push
# or
npm run db:push

4. Run the development server

bun dev
# or
npm run dev

Open http://localhost:3000 to view the dashboard.

How It Works

Authentication Flow

1. User clicks "Add Account" → Modal prompts for a display name
2. Backend creates client session → POST /api/client-session calls the OnlyFans API to create a temporary client session token
3. Auth popup opens → startOnlyFansAuthentication() uses the token to open a secure authentication popup
4. Account saved → On success, account details are saved to the database

This flow ensures your API key stays secure on the server and is never exposed to the client.

Project Structure

├── app/
│   ├── api/
│   │   ├── accounts/
│   │   │   ├── route.ts          # GET/POST accounts
│   │   │   └── [id]/route.ts     # DELETE account
│   │   └── client-session/
│   │       └── route.ts          # Create client session token
│   ├── generated/prisma/         # Generated Prisma client
│   ├── globals.css               # Global styles
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Dashboard page
├── lib/
│   └── prisma.ts                 # Prisma client instance
├── prisma/
│   └── schema.prisma             # Database schema
└── ...

API Routes

Method	Endpoint	Description
GET	/api/accounts	List all accounts
POST	/api/accounts	Add a new account
DELETE	/api/accounts/[id]	Delete an account
POST	/api/client-session	Create a client session token

Available Scripts

Script	Description
bun dev	Start development server
bun run build	Build for production
bun run db:push	Push schema to database
bun run db:studio	Open Prisma Studio

Tech Stack

• Next.js 16 - React framework
• Prisma 7 - Database ORM with driver adapters
• Tailwind CSS 4 - Styling
• @onlyfansapi/auth - OnlyFans authentication

Database Schema

model Account {
  id          String   @id @default(cuid())
  accountId   String   @unique  // OnlyFans account ID
  username    String             // OnlyFans username
  displayName String             // User-entered display name (shown in dashboard)
  name        String?            // OnlyFans profile name
  avatar      String?            // Avatar URL
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

Security Notes

• The OFAPI_API_KEY is only used server-side and never sent to the browser
• Client session tokens are temporary and scoped to a single authentication attempt
• No authentication is implemented for this dashboard (it's an example repo)

License

MIT