Integrating Harvest Oauth2 with Appsmith

1. Create a Developer Application in Harvest

   To be able to pull data from Harvest using their API, we must register a new developer application in Harvest. Go to id.getharvest.com and log in with your harvest credentials; next, you will see in the main menu an item called "Developers", by clicking there, you will see the following screen: 

   

   Here, you will click "Create new OAuth Application" and Harvest will ask you for a Name and a Redirect URL; for the name, it can be anything you want, and for the Redirect URL, make sure to type the Appsmith redirect for Authentication which is https://app.appsmith.com/api/v1/datasources/authorize. By clicking "Save" you will receive the Client ID and Client Token. Make sure to keep this tab open because you will need these values in the next steps.

   

   And that's all we need for now on the Harvest side, let's go back to Appsmith to configure the OAuth2 authentication. 

2. Register a New Datasource in Appsmith

   Go ahead and log in to Appsmith and either create a new App or open the App you want to integrate Harvest, and on the left side menu you will see the Datasources section, click the "+" icon or "Add new Datasource" and select "Authenticated API" 

   

   Give the datasource the name you wish, and now in the datasource URL, let's enter Harvest API's base URL, which is `https://api.harvestapp.com/v2/` and in the Authentication Type, select "OAuth 2.0", this will sleeve a new set of configurations to define. 

   

   All the information I'm about to provide is based on Harvest's API documentation, which you can find here. 

   
   • Grant Type: You have to select "Authorization Code"
   • Add Access Token To: select "Request Header"
   • Header Prefix: Appsmith will automatically fill it with "Bearer" leave it like that.
   • Access Token URL: Based on Harvest's docs it should be https://id.getharvest.com/api/v2/oauth2/token
   • Client ID: Paste the Client ID that Harvest generated in the first step. 
   • Client Secret: Paste the Client secret that Harvest generated in the first step. 
   • Scope(s): Since when we created the OAuth2 app in Harvest we requested access just to Harvest, you have to type harvest:all. If you for whatever reason selected also Forecast permissions, make sure to define the right permission scope based on their documentation here.
   • Client Authentication: Select "Send client credentials in body". 

   And that should be able to make it work. You can add additional headers if you want to send them for whatever reason back to Harvest, but, just with these settings the auth will work. Now, scroll down and you will see a button that says "Save and Authorize" 

   

   Now you have successfully integrated Harvest AOuth2 integration within Appsmith 🎉🎊. Something extremely great about Appsmith is that it will manage the token refreshing by reissuing a new token when it expires, you don't have to worry about it. That is awesome!

3. Use the newly created Datasource

   Now that we have OAuth2 successfully integrated inside Appsmith, you can go ahead and create a new Query, using the left menu "+" icon next to the Queries section and then selecting the "Harvest OAuth2 query" option. 

   

   Now Appsmith will present a very familiar query builder UI for you to define your request, and it will pre-populate the base URL based on the one we defined in the datasource. We can reference Harvest's API docs for the endpoints available to us here, for example, let's use the "/users/me" endpoint to request for the current authenticated user's data. Also, it's important to define a meaningful name for this query, in this case, I'm gonna call it "GET_User" 

   

   Now, the API correctly authenticates, automatically injects the token on the requests and pulls information with no problems whatsoever! So, let's bind this information into the UI. 

   

   In this example, I want to show my Harvest user's profile picture, so I drag and drop an image widget inside the page canvas and in its properties, in the Default Image field, use the curly brackets to bind data, and use the name we gave the Query, so for this example, we will use {{GET_User.data.avatar_url}} and that's it! you won't have to worry about re-authenticating, getting a new fresh token, or anything like that, Appsmith got you covered! 

Conclusion

Additional Resources

• Harvest Developer Documentation
• Appsmith OAuth2 Documentation