Authentication

Whop apps render inside an iframe on whop.com. To figure out who is making a request to your app, Whop passes a short-lived JWT in the x-whop-user-token header on every same-origin request. You verify this token with the SDK to get a user ID, then check what that user is allowed to see.

Verify the iframe user token

Call verifyUserToken on each request. It reads the x-whop-user-token header, validates the JWT signature and expiry, and returns the user ID. Invalid tokens throw by default. Each SDK also has a non-throwing variant:

import { headers } from "next/headers";
import { whopsdk } from "../../../lib/whop-sdk";
export default async function MyServerRenderedPage() {
	const { userId } = await whopsdk.verifyUserToken(await headers());
    // ... the rest of your component / api route etc...
}

The token is only attached to requests hitting the window.location.origin of your iframe. Examples:

• Relative page navigations: <a href="/sub_page">...</a>
• Fetches without a domain: await fetch("/api/quizzes")

All of these resolve to your App.base_url domain.

Local setup

Whop ships a local reverse proxy that matches the production iframe + cookie behavior, so the code you write works identically on localhost and in production. See the dev proxy guide for setup.

Check access

Now that you know who’s making the request, check what they’re allowed to see. Use the checkAccess method to verify access to an Experience, Company, or Product.

import { whopsdk } from "../../../lib/whop-sdk";
const response = await whopsdk.users.checkAccess(
    "resource_id",
    { id: "user_xxxxxxxxxxxxx" }
);
// Response:
// {
//   "has_access": true,
//   "access_level": "customer"
// }

Resource IDs and access levels

The response’s access_level is one of:

Customer app (Experience View)

Customer apps should gate on the experienceId passed in path params. Return no_access or redirect if the viewer doesn’t have a valid membership.

import { headers } from "next/headers";
import { whopsdk } from "../../../lib/whop-sdk";
export default async function ExperiencePage({
    params,
}: {
    params: Promise<{ experienceId: string }>;
}) {
    const { experienceId } = await params;
    const { userId } = await whopsdk.verifyUserToken(await headers());
    const access = await whopsdk.users.checkAccess(
        experienceId,
        { id: userId }
    );
    if (!access.has_access) {
        return <div>Access denied</div>;
    }
    return <div>Welcome to the experience!</div>;
}

The same pattern works in an API route. Swap headers() for request.headers and return a 403 Response instead of JSX.

Dashboard app (Dashboard View)

Dashboard apps should gate on access_level === "admin" so only company team members can load the view.

import { headers } from "next/headers";
import { whopsdk } from "../../../lib/whop-sdk";
export default async function DashboardPage({
    params,
}: {
    params: Promise<{ companyId: string }>;
}) {
    const { companyId } = await params;
    const { userId } = await whopsdk.verifyUserToken(await headers());
    const access = await whopsdk.users.checkAccess(
        companyId,
        { id: userId }
    );
    if (access.access_level !== "admin") {
        return <div>Admin access required</div>;
    }
    return <div>Welcome to the dashboard!</div>;
}

Same pattern in an API route. Swap headers() for request.headers and return a 403 Response instead of JSX.

Next steps