Introduction

Hubspot has been a trending CRM these years. There’s a humongous list of local digital agencies to big enterprises that have marked it’s as their preferable inbound marketing software. If you are reading this blog then it’s possible that you might be on that list or at least have heard about and now you are interested to know more.

So what is a Hubspot App?

We could have talked a lot about Hubspot but this blog is focusing on how to create a HubSpot app. But before that, we would like to give a small explanation of what it is. To put it simply an app allows you to integrate a 3rd party feature into Hubspot. You can install an app from the Hubspot marketplace. You can see an app in your contact details, deals, and many other places. Many of the popular products like Monday, Vimeo, and PandaDoc have their app to make life easier.

Let’s begin

Step 1 - Hubspot Developer Account

You can skip this step if you have created the account already. A developer account allows you to use additional and experimental features provided by Hubspot. You can create your developer account through this link. This is an essential requirement for creating the app.

Step 2 - Creating an app

1. Get into your developer account dashboard and go to Apps. There you will find this pretty button “Create app”. Don’t just stare, go click on it.

2. Next, you will be exposed to a page asking for some basic details about the app like its name, the logo, and description.

Step 3 - Auth settings

Once you have filled in the details click on the next tab “Auth” to proceed. There you will some interesting IDs and secrets required to create auth API.

Step 4 - Implementing OAuth connection

From this point onwards we will be using Node.js with Express.js and Axios for developing API’s but you can use any other language and framework which suits you. So we will start by setting up a basic express application.

Run the below commands in your terminal to install essential packages.

npm init -y
npm install express cors axios query-string dotenv

Create a file named app.js and paste the below code.

require('dotenv').config();
const express = require('express');
const cors = require('cors');
const axios = require('axios');
const queryString = require('query-string');
const app = express();

const PORT = process.env.PORT || 4000;

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());

app.listen(PORT, () => console.log(`listening at port ${PORT}`));

We will be creating an endpoint to authenticate our app and to do so we must understand the concept of redirect URL. In order to install the app user will be redirected to the authorization URL. The structure of the URL will be like this -

https://app.hubspot.com/oauth/authorize?client_id&scope=contacts%20automation&redirect_uri=PROVIDED_BY_YOU

Now if you focus on the query string you will find a parameter named “redirect_uri”. This is the live URL that will be called to authenticate the app. Usually, one will be redirected to the URL once the user has agreed to install the app. An example of redirect URL is -

https://www.example.com/?code=xxxx

On being redirected we will get a query parameter “code” which will be used to call the authentication API. So let’s create an endpoint that will act as redirect_uri.

app.get('/auth', (req, res) => {
    const code = req.query.code;
});

With this code, we will be hitting the HubSpot auth API to obtain access and refresh tokens.

POST https://api.hubapi.com/oauth/v1/token

As mentioned before we will be using axios to perform a POST request. Since these tokens are important so we would recommend storing these into a persistant storage such as database.

const API_OAUTH_TOKEN = 'https://api.hubapi.com/oauth/v1/token';
const payload = {
  grant_type: 'authorization_code',
  code: code,
  redirect_uri: 'YOUR_REDIRECT_URL',
  client_secret: 'SECRET_ID',
  client_id: 'CLIENT_ID',
};

axios
  .post(API_OAUTH_TOKEN, queryString.stringify(payload), {
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded',
    },
  })
  .then((response) => {
    console.log(response.data); // store it in db
    res.send({ status: 'success', message: 'authenticated' });
  })
  .catch((err) => console.log(err));

You can get client_secret and client_id from the previous step. Value for redirect_uri will be the live URL for this endpoint. On successful authentication you will get something as below in response:

{
  refresh_token: '********-****-****-****-************',
  access_token: '**************************************************',
  expires_in: 21600
}

For more details about authentication in Hubspot you check the below link: https://developers.hubspot.com/docs/api/working-with-oauth

So we are done creating redirect_uri and now we can put it on a test. But for testing, you will need to deploy the code as Hubspot needs a live URL. You can use Heroku or ngrok to get a live URL for your application.

Now you need to paste the URL for the endpoint created before in the Redirect URL found in the Auth tab of your app.

Step 5 - Testing installation

To test the installation of the application you can create a test account. Follow the link below to create one - https://legacydocs.hubspot.com/docs/faq/how-do-i-create-a-test-account

So you have a test account now and you are eager to install your app. Go back to the auth tab from the 3rd step and copy the Install URL.

Paste it on your browser and select your test account. You will have to accept the installation on the next step. Soon you will be redirected to the endpoint you just created. You should see your output in the terminal and you will find the access token. You use this token to fetch other details related to a user.

We have successfully created a HubSpot app. But how do I use it? Well for that we might need to create a use case and a very common use case is the CRM Cards. We will cover this in our next blog but till then you can read about them at the below link: https://developers.hubspot.com/docs/api/crm/extensions/custom-cards

Thanks for reading and if you like the post you can subscribe to our newsletter. We will notify you whenever we post something new.