How to use Supabase and hotglue to offer a native integration in your product
Tags: intergration, ipaas, supabase, hotglue
Published: 2022-03-02 15:48:51

One of the most common feature requests in the SaaS world is an integration with a platform that a customer already uses. For example. if you are working on an email marketing software, you most likely will be asked to integrate with Salesforce, HubSpot, Mailchimp, and so on.

Integrations are messy, and even more so, dealing with the data that comes out of those APIs can be even messier. Even with all the trouble that integrations can put you through, Supabase and hotglue can help you standup a native integration for your users in no time.

## What is Supabase?

Supabase is an open source Firebase alternative. It provides all the backend services you need to build a product, whether that is a database, auth, file store, or APIs for your database.

Supabase also offers a hosted platform which makes it very simple to get started without needing to manage any infrastructure.

## What is hotglue?

hotglue enables you to offer native, user-facing SaaS integrations to your customers in minutes without sacrificing control over the data.

The integrations feel native because hotglue is embeddable, cloud-based, and built on the Python ecosystem — enabling developers to support more data sources, manage data cleansing & transformation, and offer a self-serve experience to their users. With hotglue, any developer can build a data integration pipeline in minutes without months of development and maintenance.

## How to start creating your native integration

The first thing you need to do is figure out what integration you want to build. In this example, I am going to create a native Salesforce integration that pulls data from Salesforce and pushes the Salesforce data to Supabase. To build this integration, I am going to need a:

- A Supabase database to push to (Supabase has a free plan to start with)

- A Salesforce account with an OAuth app created

- A hotglue account (hotglue has a 14-day free trial)

### Collecting credentials

First and foremost, if you want to follow along with this Salesforce specific example, you can learn how to create your own OAuth app instantly [here](https://docs.hotglue.xyz/docs/sources-salesforce#get-your-salesforce-oauth-client-id-and-oauth-client-secret).

Once you’ve done that, you should keep the Salesforce OAuth app credentials handy as you will need those.

Next, you’re going to want to head to one of your projects in Supabase.

![Supabase home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a63iry9q0x0yejxs2xri.png)

On this page, you should go ahead and click on the Settings tab from the left hand side of your screen.

![Supabase settings page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrhc22jx2esychyiszrb.png)

Then within the Settings page, you are going to want to head to the Database tab under Project Settings.

![Supabase settings page, connection info](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xcv7l12lr8qrumlos6nk.png)

On the Database page, scroll down until you find the Connection info section. Note down the credentials, including the Host, Database name, Port, User, and Password.

![Supabase settings page, heading to table editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09xffxrukxw2oc6kc0az.png)

The last thing you will need is your Database schema. To find this, go ahead and click the Table Editor tab from the left-sided navigation bar.

![Supabase, table schema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcki90ahnuxcmjhenps5.png)

Whatever you see in that top-left bar is your Schema. Make sure to note that down!

### Configuring your integration in hotglue

Now it is time to switch over to hotglue and create the integration.

![hotglue home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3jr245q3iq19p5lrph6.png)

In hotglue, go ahead and head to the Sales flow in the upper left hand side of the screen. If you just made a hotglue account, there may be an additional flow called Invoices, as well as an additional tap inside of the Sales flow for HubSpot. You can ignore those for now.


![hotglue flow page, sources](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hen6ku7in36n7tnk3n72.png)

Once in the flow, go ahead and click on the Salesforce card. Now you can input the OAuth credentials you put aside earlier.

![hotglue flow page, source credentials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2k0i22hxityn0pxvmx4t.png)

Click the Save and Continue button, which will trigger a Salesforce OAuth screen to pop-up (if nothing comes up, you may have pop-ups blocked).

![hotglue, Salesforce OAuth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/336816c0ca03gmfqnyoa.png)

Log in with your Salesforce account here.

![hotglue, flow configuration panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kexocmzwhopvabc3l8c3.png)

Now that you have successfully linked Salesforce, go ahead and jump into the fieldmapping to configure what you want to pull into Supabase. You do this by click on the card again and heading to the Customize Field Map option.

![hotglue, field map editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y977g70xje31sqg6hlpr.png)

For this example, I am going to pull in Account, Contact, and Lead information.

![hotglue, field map editor with selected tables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izav7tlhhb2l5awcyfvo.png)

Once you have finished configuring the field mapping, go ahead and click Save.

![hotglue, flow targets page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kde0svxusqhkpievgy0.png)

Now you need to configure your target. In hotglue, you are going to make your target the PostgreSQL target.

![hotglue, target credentials page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5eljs2qn83h2t2kvrsj.png)

Now you should use the credentials you got from Supabase earlier and plug them into hotglue. Once you’ve done that, click Save & Continue.

![hotglue, jobs panel to start a job](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a88dzcx4bobua2nwo8ga.png)

Now, you are going to run a test job so that you can see the data you have in the account you connected populate your Supabase database. Head to the Jobs page and click the New job button in the top right hand corner. Now you can name your job and choose the source you want to run the job for! If you have already run the job and are retrying the job, you should click the “Reset source state” option.

>❗ If you ran a job in hotglue and saw that the export failed, check and see if you have a description in your Supabase table. Sometimes it can cause issues when syncing the data. If you do have a description, go ahead and remove it, then try again.

![hotglue, jobs panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgxoonvof5zy5enxqnj6.png)

Once the job completes, you should be able to see the data in Supabase! Let’s go check my database to see the data.

![Supabase, data loaded in](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rt0danvtiiuampch8v0f.png)

As you can see, the data has been populated in Supabase!

The end user’s experience

So now that you have set up your integration, and you see it working, you can see what it could look like for users of your product.

![demo application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gk3dzowmj9qt6q1acgek.png)

I’ve gone ahead and created small demo web-app to show what it could look like inside of your product! On this page, there is an open widget button. When I click it, it will open the hotglue widget.

![hotglue, connection widget flow page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bh2ykemr21lsu1fpmfes.png)

As you can see, the Sales flow we were working in earlier is here. I am going to click into it!

![hotglue, connection widget source page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08oky9x4q1fl9lh6dbj5.png)

Now, I can see that I can link my Salesforce account (and if you added any other sources in this flow, you would see them here as well). I’ll go ahead and click Salesforce.

![hotglue, connection widget Salesforce OAuth page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvbqh4as64ohu9n76nk0.png)

Now it is time to go ahead and log in to Salesforce! Once you put in your credentials, click Log In.

![hotglue, source successfully connected](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10bw5p5gjgi9cqnrz3jm.png)

Now Salesforce has been linked!

![hotglue, connection widget with Run Job](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4v8kof31q72i62zuhmx.png)

(Optional) If you want your user to run the job manually, you can have them click the three dots in the top right hand corner of the Salesforce card and run a job. Otherwise, it will follow the sync schedule configured in the hotglue admin panel!

Wrapping up

As you can see, using Supabase and hotglue together makes it really easy to get your native integration set up in a matter of minutes.

If you would like to check out the fastest growing open-source database company out there, you can head to Supabase’s site [here](https://supabase.com/).

If you would like to check out the easiest way to offer your users native integrations inside of your product, you can check out hotglue’s site [here](https://hotglue.xyz/).