Build your customer page
What you’ll learn
In this tutorial, you’ll learn how to do the following tasks:
- Use the Whop API to check more advanced permissions
- Build a page that is shown to all customers
- Use Frosted components to style your app
Prerequisites
To view the iFrame as a customer, you will need to own a membership to this app. To do this, make a free pricing option for your product and purchase a membership. Then open the app from your orders page.
1. Create your customer page
We will start by building the customer page.
The customer page is a specific page URL your app defines. Every time a Whop user purchases a membership that contains your app, they will view the customer page within the iFrame whenever viewing your app.
- Create a page to match this URL
/customer/$productId
. To do this, create this file:/app/customer/[productId]/page.tsx
mkdir app/customer && mkdir "app/customer/[productId]" && touch "app/customer/[productId]/page.tsx"
In order to know which product the user purchased, Whop will pass the ID as a path parameter.
These are all the options for the path parameters in the Consumer Path, but for now, we will only use productId
:
Parameter | Description |
---|---|
productId | The ID of the product the user purchased |
companyId | The ID of the company the user purchased the product from |
experienceId | The ID of the experience |
membershipId | The ID of the user’s membership |
planId | The ID of the plan the user purchased |
- Add the following code to your file to read and display the product ID
export default async function CustomerPage({
params,
}: {
params: { productId: string },
}) {
const productId = params.productId;
return <h1>The ID of the product the user is viewing is {productId}</h1>;
}
-
Update the Customer Path in your app configuration to be
/customer/$productId
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 ensure the user’s access token is valid
export default async function CustomerPage() {
const { userId } = await validateToken({ headers });
}
You should always call validateToken
on every page you define. This will
ensure the user is not being malicious.
At this point, the user is authenticated and we have their Whop User ID
3. Check if the user owns the product
We now want to check to make sure this user owns the correct product. To do this, we will use the hasAccess function from the SDK.
- Update the Whop SDK imports
import { validateToken, hasAccess } from "@whop-apps/sdk";
- Check if the user owns the product
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 product ID from the URL.headers
: The headers of the request - this allows the SDK to get information about the user.
const access = await hasAccess({ to: params.productId, headers });
- Handle the result
If the user does not own the product, access
will be false
. If the user does own the product, access
will be true
.
Now, we are going to throw an error if the user is not allowed to view this page.
if (!access) {
return (
<p>
You do not have access to view this page as you do not own the correct
product
</p>
);
}
Now we have confirmed the user has access to this product
4. Display specific company info
Now that we know the user is allowed to access the product, let’s display some information about them.
- Update the Whop SDK imports
We can use the Whop API to get information about the current user. To do this, you will need to import the WhopAPI
function.
import { validateToken, hasAccess, WhopAPI } from "@whop-apps/sdk";
- Fetch the user
Now that we have imported the WhopAPI function, we can use it to fetch information about the user.
const user = await WhopAPI.me({ headers }).GET("/me", {});
- 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 (user.isErr) {
console.log(user.error.message);
return <p>Could not fetch information about the user</p>;
}
- Display the information
Now that we have information about the user, we can display it on the page.
const { username, email } = user.data;
return <p>Hey {username}, welcome to your new Whop App!</p>;
Voila! Go reload your iFrame view and you should see the message!
Next steps
- Build out your checkout page
Was this page helpful?