Getting Started

Follow step-by-step instructions to create a developer account on HubSpot and generate access tokens.

We'll cover the following

Create a developer account

Before making calls to the API, we need to set up a developer account on HubSpot to retrieve our API keys. Let's follow the steps below to create an account:

  1. Navigate to the HubSpot developer portal and click the "Create a developer account" button.

  2. Click “Create App Developer account.”

  3. Enter your name and email address, then click “Next.”

  4. Provide your job role by selecting the one that defines it best or “Other.” Click “Next” to move to the next step.

  5. Enter a username for your developer account, then click “Next.”

  6. You’ll receive a verification code at the email address you entered in step 3. Enter the verification code, then click “Verify email.”

  7. Set a strong password for your account, then click “Create Account” to finish account creation.

We can close the pop-up that appears on the dashboard by clicking “Skip this, I’ll explore on my own.” With that, we’ve successfully created an app developer account!

Create an application

Now that we have our developer account, we need to create an application to retrieve our client ID and secret. We also need to configure OAuth settings. Let’s follow the steps below:

  1. From your developer account home page, click “Create an app.”

  2. Close the pop-up by clicking “Skip for now.”

  3. Go to the “Auth” tab to configure OAuth settings.

  4. Copy your “Client ID” and “Client secret” and store them somewhere safe.

  5. Scroll down to the “Redirect URL” section, and enter the following URL:

Press + to interact
{{EDUCATIVE_LIVE_VM_URL}}

  1. Scroll down to the “Scopes” section and select the content, hubdb, and cms.performance.read scopes.

  2. Click “Save changes.”

Create an app test account

To be able to test our newly created application, we must create an app test account. Let’s follow the steps below:

  1. Go to the “Testing” tab from the app developer account home page.

  2. Click “Create app testing account.”

  3. Click “Create” to create the account.

Request an authorization code

With our application and app test account set up, we can request an authorization code from HubSpot. Let’s follow these steps to do so:

  1. Click “Edit” on the widget below and provide your client ID against the CLIENT_ID field.

  2. Run the application below, then click the link at the end of the widget to open the application in a new browser tab.

  3. Click the hyperlink displayed on the application. It will redirect you to HubSpot.

  4. Select the app test account from the list and click “Choose Account.”

  5. Grant the application the required permissions.

  6. You’ll be redirected to the React application. Copy the authorization code displayed on the application. We can also find this token as a query parameter in the URL, identified by the code key.

  7. Store the authorization code somewhere safe.

Note: Provide your CLIENT_ID below before running the code.

p {
  font-size: 20px;
  padding: 30px 0px 10px 0px;
}

.box {
  background-color: rgb(235, 235, 235);
  /* background-color: rgb(158, 91, 91); */
  border-radius: 5px;
  width: 500px;
  padding: 10px 50px 10px 50px;
  margin: auto;
}

button {
  margin-left: 48%;
  margin-top: 20px;
  background-color: rgb(235, 235, 235); 
}
Request an authorization code

Request an access token

Now that we have an authorization code, we can request an access token from HubSpot. Let’s follow these steps to do so:

  1. Click “Edit” on the widget below. Provide the authorization code and client secret against the AUTH_CODE and CLIENT_SECRET fields.

  2. Click the “Run” button to run the code and make a token request.

  3. If all goes well, your access and refresh tokens will be generated and extracted. Click “Save” to save both tokens throughout the course.

Important: Access tokens expire after thirty minutes have passed since they were first requested. If you end up with an expired token, go to this lesson to exchange the refresh token for a new access token.

Press + to interact
import fetch from "node-fetch";
const endpointUrl = new URL("https://api.hubapi.com/oauth/v1/token");
const headerParameters = {
  "Content-Type": "application/x-www-form-urlencoded",
};
// Defining the new description to be set
const queryParameters = new URLSearchParams({
  grant_type: "authorization_code",
  client_id: "{{CLIENT_ID}}",
  client_secret: "{{CLIENT_SECRET}}",
  redirect_uri: "{{EDUCATIVE_LIVE_VM_URL}}",
  code: "{{AUTH_CODE}}",
});
const options = {
  method: "POST",
  headers: headerParameters,
};
async function getAccessToken() {
  try {
    endpointUrl.search = queryParameters;
    const response = await fetch(endpointUrl, options);
    printResponse(response);
  } catch (error) {
    printError(error);
  }
}
getAccessToken();