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.
This guide covers the process when a user tries to access your webapp from the Whop Hub. If you want to add in a Login With Whop button to your site, follow this guide.

​
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

Next.js

Whop OAuth in your Next.js app.

Electron

Whop OAuth in your Electron desktop app.

​
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. Webapp video

​
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.
Once you have received the token, we advise you to store it in cookies or the session so it can be accessed when needed.
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

CodeResponse BodyDescription
400The provided authorization grant is invalid, expired, revoked, does not match the redirection URI used in the authorization request, or was issued to another client.Check the code
401Your access token is invalid. Please make sure you are passing an access token, and that it is correctly formatted.Your access token is invalid, try generating a new one
404Route {ROUTE} not foundCheck the URL