npm install iron-session zod| Variable | Example | How to get it |
|---|---|---|
WHOP_CLIENT_ID | app_... | Whop dashboard → Developer → Apps → OAuth section. |
WHOP_CLIENT_SECRET | ... | Same OAuth section. Shown once on creation; regenerate if lost. |
WHOP_SANDBOX | true | Set manually. true in development; remove or set to false in production. |
SESSION_SECRET | ... | Generate with openssl rand -base64 32. 32+ chars. iron-session uses it to encrypt the cookie. |
NEXT_PUBLIC_APP_URL | http://localhost:3000 | Our app origin. Must match a registered redirect URI's protocol and domain exactly. |
import { z } from "zod";
const envSchema = z.object({
WHOP_CLIENT_ID: z.string().startsWith("app_"),
WHOP_CLIENT_SECRET: z.string().min(1),
WHOP_SANDBOX: z
.string()
.optional()
.transform((v) => v === "true"),
SESSION_SECRET: z.string().min(32),
NEXT_PUBLIC_APP_URL: z.string().url(),
});
type Env = z.infer<typeof envSchema>;
let cached: Env | null = null;
function parseAll(): Env {
if (cached) return cached;
cached = envSchema.parse({
WHOP_CLIENT_ID: process.env.WHOP_CLIENT_ID,
WHOP_CLIENT_SECRET: process.env.WHOP_CLIENT_SECRET,
WHOP_SANDBOX: process.env.WHOP_SANDBOX,
SESSION_SECRET: process.env.SESSION_SECRET,
NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
});
return cached;
}
export const env = new Proxy({} as Env, {
get(_target, prop: string) {
return parseAll()[prop as keyof Env];
},
});import { z } from "zod";
import { env } from "@/lib/env";
function getBaseUrl(): string {
return env.WHOP_SANDBOX
? "https://sandbox-api.whop.com"
: "https://api.whop.com";
}
const tokenResponseSchema = z.object({
access_token: z.string(),
refresh_token: z.string(),
id_token: z.string().optional(),
token_type: z.string(),
expires_in: z.number(),
});
const userInfoSchema = z.object({
sub: z.string(),
name: z.string().optional(),
preferred_username: z.string().optional(),
picture: z.string().url().optional(),
email: z.string().email().optional(),
email_verified: z.boolean().optional(),
});
export type WhopTokens = z.infer<typeof tokenResponseSchema>;
export type WhopUserInfo = z.infer<typeof userInfoSchema>;
export interface PkceState {
codeVerifier: string;
state: string;
nonce: string;
}
function base64url(bytes: Uint8Array): string {
return Buffer.from(bytes)
.toString("base64")
.replace(/\+/g, "-")
.replace(/\//g, "_")
.replace(/=+$/, "");
}
export function randomString(length: number): string {
return base64url(crypto.getRandomValues(new Uint8Array(length)));
}
export async function sha256Challenge(verifier: string): Promise<string> {
const data = new TextEncoder().encode(verifier);
const digest = await crypto.subtle.digest("SHA-256", data);
return base64url(new Uint8Array(digest));
}
export async function buildAuthorizeUrl(pkce: PkceState): Promise<string> {
const params = new URLSearchParams({
response_type: "code",
client_id: env.WHOP_CLIENT_ID,
redirect_uri: `${env.NEXT_PUBLIC_APP_URL}/api/auth/callback`,
scope: "openid profile email",
state: pkce.state,
nonce: pkce.nonce,
code_challenge: await sha256Challenge(pkce.codeVerifier),
code_challenge_method: "S256",
});
return `${getBaseUrl()}/oauth/authorize?${params.toString()}`;
}
export async function exchangeCodeForTokens(
code: string,
codeVerifier: string,
): Promise<WhopTokens> {
const response = await fetch(`${getBaseUrl()}/oauth/token`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
grant_type: "authorization_code",
code,
redirect_uri: `${env.NEXT_PUBLIC_APP_URL}/api/auth/callback`,
client_id: env.WHOP_CLIENT_ID,
client_secret: env.WHOP_CLIENT_SECRET,
code_verifier: codeVerifier,
}),
});
if (!response.ok) {
const err: unknown = await response.json().catch(() => ({}));
throw new Error(
`Token exchange failed (${response.status}): ${JSON.stringify(err)}`,
);
}
return tokenResponseSchema.parse(await response.json());
}
export async function fetchUserInfo(
accessToken: string,
): Promise<WhopUserInfo> {
const response = await fetch(`${getBaseUrl()}/oauth/userinfo`, {
headers: { Authorization: `Bearer ${accessToken}` },
});
if (!response.ok) {
throw new Error(`Userinfo failed (${response.status})`);
}
return userInfoSchema.parse(await response.json());
}
export async function revokeToken(refreshToken: string): Promise<void> {
await fetch(`${getBaseUrl()}/oauth/revoke`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
token: refreshToken,
client_id: env.WHOP_CLIENT_ID,
}),
});
}import { cookies } from "next/headers";
import { z } from "zod";
import type { PkceState } from "@/lib/whop-oauth";
const PKCE_COOKIE = "whop_pkce";
const pkceSchema = z.object({
codeVerifier: z.string(),
state: z.string(),
nonce: z.string(),
});
export async function setPkceCookie(pkce: PkceState): Promise<void> {
const store = await cookies();
store.set(PKCE_COOKIE, JSON.stringify(pkce), {
httpOnly: true,
secure: process.env.NODE_ENV === "production",
sameSite: "lax",
path: "/",
maxAge: 600,
});
}
export async function readPkceCookie(): Promise<PkceState | null> {
const store = await cookies();
const value = store.get(PKCE_COOKIE)?.value;
if (!value) return null;
try {
return pkceSchema.parse(JSON.parse(value));
} catch {
return null;
}
}
export async function clearPkceCookie(): Promise<void> {
const store = await cookies();
store.delete(PKCE_COOKIE);
}import {
getIronSession,
type IronSession,
type SessionOptions,
} from "iron-session";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { env } from "@/lib/env";
import type { WhopTokens, WhopUserInfo } from "@/lib/whop-oauth";
export interface SessionData {
user?: WhopUserInfo;
tokens?: WhopTokens;
tokensObtainedAt?: number;
}
export function sessionOptions(): SessionOptions {
return {
password: env.SESSION_SECRET,
cookieName: "whop_session",
cookieOptions: {
httpOnly: true,
secure: process.env.NODE_ENV === "production",
sameSite: "lax",
path: "/",
},
};
}
export async function getSession(): Promise<IronSession<SessionData>> {
const store = await cookies();
return getIronSession<SessionData>(store, sessionOptions());
}
export async function getCurrentUser(): Promise<WhopUserInfo | null> {
const session = await getSession();
return session.user ?? null;
}
export async function requireUser(): Promise<WhopUserInfo> {
const user = await getCurrentUser();
if (!user) redirect("/");
return user;
}import { NextResponse } from "next/server";
import {
buildAuthorizeUrl,
randomString,
type PkceState,
} from "@/lib/whop-oauth";
import { setPkceCookie } from "@/lib/pkce-cookie";
export async function GET(): Promise<NextResponse> {
const pkce: PkceState = {
codeVerifier: randomString(32),
state: randomString(16),
nonce: randomString(16),
};
await setPkceCookie(pkce);
const authorizeUrl = await buildAuthorizeUrl(pkce);
return NextResponse.redirect(authorizeUrl);
}<a href="/api/auth/login">Sign in with Whop</a>import { NextResponse, type NextRequest } from "next/server";
import { clearPkceCookie, readPkceCookie } from "@/lib/pkce-cookie";
import { exchangeCodeForTokens, fetchUserInfo } from "@/lib/whop-oauth";
import { getSession } from "@/lib/session";
import { env } from "@/lib/env";
function redirectTo(path: string): NextResponse {
return NextResponse.redirect(`${env.NEXT_PUBLIC_APP_URL}${path}`);
}
export async function GET(request: NextRequest): Promise<NextResponse> {
const url = new URL(request.url);
const code = url.searchParams.get("code");
const returnedState = url.searchParams.get("state");
const error = url.searchParams.get("error");
if (error) {
console.error(
"[oauth] callback error:",
error,
url.searchParams.get("error_description"),
);
return redirectTo(`/?error=${encodeURIComponent(error)}`);
}
if (!code || !returnedState) {
return redirectTo("/?error=missing_params");
}
const pkce = await readPkceCookie();
if (!pkce || pkce.state !== returnedState) {
return redirectTo("/?error=state_mismatch");
}
try {
const tokens = await exchangeCodeForTokens(code, pkce.codeVerifier);
const user = await fetchUserInfo(tokens.access_token);
const session = await getSession();
session.user = user;
session.tokens = tokens;
session.tokensObtainedAt = Date.now();
await session.save();
await clearPkceCookie();
return redirectTo("/dashboard");
} catch (err) {
console.error("[oauth] callback failed:", err);
return redirectTo("/?error=oauth_failed");
}
}import { NextResponse, type NextRequest } from "next/server";
import { getIronSession } from "iron-session";
import { sessionOptions, type SessionData } from "@/lib/session";
export async function proxy(request: NextRequest) {
const response = NextResponse.next();
const session = await getIronSession<SessionData>(
request,
response,
sessionOptions(),
);
if (!session.user) {
return NextResponse.redirect(new URL("/", request.url));
}
return response;
}
export const config = {
matcher: ["/dashboard/:path*"],
};import { requireUser } from "@/lib/session";
export default async function DashboardPage() {
const user = await requireUser();
return (
<main>
<h1>Welcome, {user.name ?? user.preferred_username ?? user.email}</h1>
<p>Whop user ID: {user.sub}</p>
</main>
);
}import { NextResponse } from "next/server";
import { getSession } from "@/lib/session";
import { revokeToken } from "@/lib/whop-oauth";
import { env } from "@/lib/env";
export async function POST(): Promise<NextResponse> {
const session = await getSession();
if (session.tokens?.refresh_token) {
try {
await revokeToken(session.tokens.refresh_token);
} catch (err) {
console.error("[oauth] revoke failed:", err);
}
}
session.destroy();
return NextResponse.redirect(`${env.NEXT_PUBLIC_APP_URL}/`, {
status: 303,
});
}<form action="/api/auth/logout" method="POST">
<button type="submit">Sign out</button>
</form>