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.

1. 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:

2. 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>;
}

3. 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.

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 ensure the user’s access token is valid

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

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.

1. Update the Whop SDK imports

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

2. 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 });

3. 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.

1. 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";

2. 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", {});

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 (user.isErr) {
  console.log(user.error.message);
  return <p>Could not fetch information about the user</p>;
}

4. 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