Web Apps

OAuth is a protocol that acts like a digital key, allowing authorized access to certain parts of your web application. It acts as a doorman, checking if the user has the right credentials (proof of purchase) before letting them in.

​

When to use OAuth

You should use OAuth if you have a website and want to allow users who have purchased your product on the Whop to access your site.

​

Whop OAuth Examples

​

Adding a webapp to your product

Before we start, you should add a webapp experience to your product. You can do this by going to your product and clicking the Webapp option. From here you can add the name and the Callback URL. We will cover the steps to create one below.

​

OAuth Flow

Here is the flow for how OAuth works:

1. The user purchases your product
2. Your user clicks on a link to your application from the Whop Hub.
3. Your user is redirected to your application with a code in the URL.
4. Your application requests an authorization token from the Whop API by exchanging the code from the URL.
5. The Whop API returns an authorization token.
6. Your application uses the authorization token to request data about the authenticated user.

​

Receiving a code

When your user tries to access your application from the Whop Hub, this is where they will be redirected.

https://your-site.xyz/callback/whop?code=xxxxxxxx

​

Creating your callback

This is where your users will be redirected when they try to access your application from the Whop Hub. It will contain a URL parameter called code.

export default function Callback() {
  const params = new URLSearchParams(window.location.search)
  const code = params.get('code')
}

​

Requesting an authorization token

Once you have received the code from the URL, you can use it to request an authorization token.

Here is the response, you will need the access_token to make requests to the API.

You will need to pass the redirect_uri value as part of the payload. This is the same URL as the Callback URL you set when creating your webapp.

import axios from 'axios';

const getAuthToken = async (code, clientId, clientSecret, redirect_uri) => {
    try {
        const response = await axios.post('https://api.whop.com/v5/oauth/token', {
            code,
            client_id: clientId,
            client_secret: clientSecret,
            redirect_uri: redirect_uri
        });
        return response.data;
    } catch (error) {
        throw error;
    }
};

export default getAuthToken;

​

Fetching the user

Now that you have the authorization token, you can use it to fetch data about the user. To see more details about this endpoint, click here.

import axios from "axios";

const checkAccess = async (accessToken) => {
  try {
    const response = await axios.get(`https://api.whop.com/v5/me`, {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    });
    return response.data;
  } catch (error) {
    throw error;
  }
};

export default checkAccess;

​

Error Codes