Build your seller page

​

What you’ll learn

In this tutorial, you’ll learn how to do the following tasks:

• Create a page that is shown through the Whop iFrame
• Receive data from Whop using path parameters
• Authenticate a user
• Use the Whop API to pull a user’s roles

​

1. Create your seller page

We will start by building the seller page.

The seller page is a specific page URL your app defines. Every time a company views your app from within the Whop Dashboard, they will view the seller page within the iFrame.

1. Create a page to match this URL /seller/$companyId/$experienceId. To do this, create this file: /app/seller/[companyId]/[experienceId]/page.tsx

mkdir app/seller && mkdir "app/seller/[companyId]" && mkdir "app/seller/[companyId]/[experienceId]" && touch "app/seller/[companyId]/[experienceId]/page.tsx"

To know which company is viewing the page, Whop will pass the ID as a path parameter. These are defined in the URL on the app settings page, which we will do later.

These are all the options that you can use in the Seller Path, but for now, we will only use companyId and experienceId:

2. Add the following code to your file to read and display the company ID and experience ID

export default async function SellerPage({
  params,
}: {
  params: { companyId: string, experienceId: string, },
}) {
  const companyId = params.companyId;
  const experienceId = params.experienceId;
  return (
    <div>
      <p>The company ID is: {companyId}</p>
      <p>The experience ID is: {experienceId}</p>
    </div>
  );
}

3. Update the Seller Path in your app configuration to be /seller/$companyId/$experienceId

​

2. Authenticate the user

Once the user is viewing your page, we will want to make sure they are a valid Whop user with permission to view this company. Let’s begin.

1. Add two imports to the top of your page

import { headers } from "next/headers";
import { validateToken } from "@whop-apps/sdk";

2. Use the validateToken function from the Whop SDK to obtain the user’s ID

export default async function SellerPage() {
  const { userId } = await validateToken({ headers });
}

At this point, the user is authenticated and we have their Whop User ID

​

3. Make sure the user has access to this company

We now want to check to make sure this user is an authorized team member of the company they are browsing. To do this, we will use the hasAccess function from the Whop SDK.

1. Update the Whop SDK imports

import { validateToken, hasAccess, authorizedUserOn } from "@whop-apps/sdk";

2. Check if the user is an authorized user of the company

To check if the user should be able to access this page, we will use the hasAccess function. This function takes in an object with two properties:

• to: The resource the user is trying to access. In this case, it will be the company ID
• headers: The headers of the request - this allows the SDK to get information about the user.

const access = await hasAccess({
  to: authorizedUserOn(params.companyId),
  headers,
});

3. Handle the result

If the user is not authorized, access will be false. If the user is authorized, access will be true. Now, we are going to throw an error if the user is not authorized.

if (!access) {
  return <h1>You do not have access to view this company</h1>;
}

At this point, you have checked with the Whop SDK to ensure this user has access to view this page.

​

4. Display specific company info

Now that we can guarantee the user has access to view information about this company, let’s display some info

1. Update the Whop SDK imports

We can use the Whop API to get information about the current company. To do this, you will need to import the WhopAPI function.

import {
  validateToken,
  hasAccess,
  authorizedUserOn,
  WhopAPI,
} from "@whop-apps/sdk";

2. Fetch the company information

Now that we have imported the Whop API function, we can use it to fetch the company’s information. We are passing in the company ID we got from the path parameters.

const companyInformation = await WhopAPI.app().GET("/app/companies/{id}", {
  params: { path: { id: params.companyId } },
});

3. Handle potential errors

To make sure that we can retrieve the data we want from the result, we first need to check if the request was successful. If the request is not successful, we will display an error message.

if (companyInformation.isErr) {
  console.log(companyInformation.error.message);
  return <p>Could not fetch company information</p>;
}

4. Display the information

Now that we have the company information, we can parse it and display the information

const { title } = companyInformation.data;

return <h1>You are currently looking at my app from {title}</h1>;

Voila! Go reload your iFrame view and you should see the company title!

​

Next steps

• Build out your user page