Build your seller page
After you create an app, you will build out the page that allows Whop Companies to interact with your app
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.
- 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
:
Parameter | Description |
---|---|
companyId | The ID of the company |
experienceId | The ID of the experience |
- 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>
);
}
- 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.
- Add two imports to the top of your page
import { headers } from "next/headers";
import { validateToken } from "@whop-apps/sdk";
- Use the
validateToken
function from the Whop SDK to obtain the user’s ID
export default async function SellerPage() {
const { userId } = await validateToken({ headers });
}
You should always call validateToken
on every page you define. Even if
you do not care about the user’s ID, you should validate it to ensure the user
is not malicious.
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.
- Update the Whop SDK imports
import { validateToken, hasAccess, authorizedUserOn } from "@whop-apps/sdk";
- 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 IDheaders
: The headers of the request - this allows the SDK to get information about the user.
As we are checking a company ID, we need to use the authorizedUserOn
function. This prefixes the company ID with authorized-
. If you are not
using company ID, you can pass the ID directly to to
const access = await hasAccess({
to: authorizedUserOn(params.companyId),
headers,
});
- 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
- 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";
- 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 } },
});
- 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>;
}
- 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
Was this page helpful?