Forum Academy Marketplace Showcase Pricing Features

Creating An App On Zapier

Hi all,

I’m trying to figure out how I can create an oAuth integration with Zapier, so that we can release AnnounceFly as an app on the Zapier library (or at least have it as a private app to start).

The best use case is that it allows users of other tools (like ProductBoard, Asana, Trello etc) to use our Zapier app to import all their tasks/data into AnnounceFly.

However, I am stuck at this screen and can’t figure out where I find the oAuth setup in Bubble, any help?

4 Likes

Hey @help have you had any luck creating your own Zapier app?

1 Like

Not yet!

Have you considered the workaround by using webhooks intsead oauth authentication?

Hi @help - I wasn’t able to do oAuth either, but was able to make it work with API Key Auth:

2 Likes

Thanks a lot! I’ll take a look at that method and see if it will work for us :slight_smile:

1 Like

Hey @richardsonjj36 @help would you mind sharing a few steps on how you were able to implement the API Auth?

1 Like

Hi @jcalvarezjr - yeah here is how I set mine up: https://share.getcloudapp.com/L1ukNnbQ

5 Likes

Hi, still havent got round to doing it yet! We have used the Webhook system before but not created a Zapier app.

@richardsonjj36 a little late, but I wanted to say thank you for the video guide! :pray:

You definitely went above and beyond to provide help! Happy to say it worked and now I’m moving to finalizing the Triggers. A little tricky but I need to dedicate solid time to debugging the problem.

Have you added Triggers to your Zapier App since the video tutorial?

2 Likes

You’re welcome!

I haven’t implemented a trigger yet… We just have an action for now. Will let you know if we do!

1 Like

how can i send a msg from discord to my bubble app?

1 Like

You should probably create a new thread to get this answered :slight_smile:

1 Like

Hey,

Reviving this thread as I’d be very cool to have Zapier’s OAuth v2 flow figured out for the community :slight_smile:

While some of the setup seems straightforward…

I’m stuck at “Add OAuth v2 Endpoint Configuration”.

Authorization URL
Looks like it should link to a page where users can input their credentials to log in and get redirected to the Zapier redirect URL, right? What is this code we should return? And is the state we need to return as well the very same state that gets passed first by Zapier in the URL parameters upon landing on the Bubble page?

image

Access Token Request
Then after that I’m not too sure what I’m doing (and obviously it doesn’t work). It looks like I should have an endpoint that returns a token

Can anyone provides details on the required steps to complete the setup?

1 Like

I’m looking for exactly the same information. Thank you so much for preparing and posting this.

I figured something out, not with OAuth 2 (I’ll keep trying), but with Session OAuth, which seems good enough since it allows to offer the Zapier app in a self-service manner like OAuth 2.

From a user standpoint the difference with Session OAuth is that the authorization screen is hosted by Zapier.

From a technical standpoint, Zapier stores your user’s Bubble email and Bubble password in order to refresh the Bubble authentication token when needed. So if the user changes their password in the Bubble app, it will break the Bubble <> Zapier connexion.

Anyway, here’s how I did it with Session OAuth (as you will see, the OAuth part is only half the battle).

It’s a bit tedious, so I’ve tried to structure the whole thing and provide a lot of screenshots rather than doing a lot of writing. Hopefully what I don’t cover in details is very obvious.

AUTHENTICATION

1.1 - Collect user credentials

After you’ve created your Zapier app here and selected Session OAuth for the authentication method, you’ll need to collect the user’s email and password (of their Bubble app account).

1.2 - Create your token endpoint in Bubble and configure the call in Zapier

The endpoint should be able to run without authentication (since at this point they are not logged in yet)

In Zapier you really only need those two fields, you can remove all the rest that they add by default.

1.3 - Create a test endpoint (e.g., “me”) in Bubble and configure the test call in Zapier

This endpoint should NOT be able to run without authentication (the very purpose of this endpoint is to verify that the authentication works).

I’m “returning some data from the API” just for test purposes, but that isn’t mandatory. This is the way to go though when you call a workflow endpoint later with your Zapier triggers/actions.

image

In Zapier, you ONLY need to specify the token as a header parameter, you can remove the email/password that Zapier adds by default. The token is retrieved with the following expression (This is because the token we get from Bubble is nested in the “response” object):

{{bundle.authData.reponse.token}}


Nb: do not forget to add "Bearer ".

You can now test your authentication :tada:

Everytime a call returns a 401 error (token expired), Zapier will do a call to the token endpoint again to get a new token (hence the need to save the username and password in Zapier).

2 - TRIGGERS

Let’s add a trigger for when there’s a new record in our database (for a specific custom data type) using the Data API.

2.1 - Expose your Data API in Bubble

2.2 - Settings

Define whatever you want. No trick here.

2.3 - Input designer

You can skip that, we don’t need the user to specify anything.

2.4 - Configure the API call

This one is a tad tricky and we’ll need to switch to Code Mode for 2 reasons:

  • To specify that the results provided by the Data API are nested under “response” and “results”;
  • To parse the “_id” provided by Bubble and change that to “id” expected by Zapier (I had to ask a developer on how to do that ^^).

That’s it, test that everything works well and define your output fields.

3 - ACTIONS

That’s the easiest part :slight_smile:

3.1 - Add privacy rules in Bubble

While we were fine with no privacy rules for reading data, you’ll need privacy rules in place in order to allow users to create data! If you skip this step you’ll get an “unauthorized” error.

Nb: in case you want to use the Workflow API, you can refer to 1.3 to see how to return data.

3.2 - Settings

Specify whatever you like here

3.3 - Input designer

Define the record info. Beware that the name of the key should exactly match the field name of your Bubble database.

3.4 - Configure your API call

You’ll need the Authorization parameter in the header again.

And the input values in the body:

That’s it, there’s no need to parse anything. You can test and define your output fields :tada:

You’re ready to roll, grab your invite url in the sharing section :sunglasses:

10 Likes

THANK YOU SO SO SO SO SO SO SO SO MUCH FOR THIS Lucien. It was exactly the information I needed to set it up on my side. You’re a star and words can’t express how grateful I am for you taking the time to share this.

The only part that didn’t work for me is replacing the Authorization code with bearer in the Trigger or Action steps… I ended up leaving what Zapier suggested and it works for me. Not sure why, but if someone is reading this and has the same issue, here is the set up that worked.

Step 1.3 - on the Bubble side just create the endpoint /me and don’t return any data (leave the workflow empty) - on the Zapier side, follow the instructions above

Step 2.4 - I left the set-up suggested by Zapier

Step 3.4 - Didn’t work when I only left the Authorization set up, so I used the same code as step 2.4 and it worked.

Thanks again Lucien :smiley: :clap:

1 Like

My pleasure!

I guess your step 2.4 works like this because your data type doesn’t have any privacy rule. If it had, the call would fail since there’s no token in the header to authenticate the user. Just beware :slight_smile:

As for OAuth 2, I don’t think it’s possible at all. If I understand correctly, Bubble will only issue an access token when there’s a login/signup step in the workflow, and for that we need the user’s credentials (email/pwd). Therefore, we cannot obtain the access token in the workflow triggered by our POST request from Zapier to Bubble unless we first communicate the user’s credentials to Zapier in the URL parameters upon redirecting the user to the Zapier website, which wouldn’t be secure.

I’m now trying to understand how to use REST hook instead of polling for triggers. That would likely save a lot of app capacity, and would make the triggers instant instead of delayed.

To be continued… :sweat_smile:

1 Like

YES… that was exactly it. I hadn’t set up the privacy on that step. Thank you! And looking forward to the next chapter :wink:

I finally got the OAuth 2 approach working :muscle:

Here is the required setup (turns out, it’s somewhat simpler than Session OAuth):

STEP 1

Nothing required, you can leave this empty.

STEP 2

Copy this redirect URI provided by Zapier:

Create a third-party integration in your Bubble app.

  • Paste the redirect URI provided by Zapier
  • Define which page Bubble should use to authenticate the user if logged out

Your login page can be extremely simple, it just needs a login flow, nothing more (Bubble will handle the redirection since you provided the URI in the settings).

STEP 3

Paste your Client ID and Client Secret issued by Bubble at Step 2.

STEP 4

Fill out Bubble’s authorization URL (that one isn’t documented in Bubble’s reference at this time, it was provided to me by the support team).

https://your-app-url/api/1.1/oauth/authorize

Fill out Bubble’s access token request URL (this endpoint isn’t documented in Bubble’s reference either).

https://your-app-url/api/1.1/oauth/access_token

STEP 5

Set up your test with the following Authorization param in the Header, using a POST method:

Bearer {{bundle.authData.access_token}}

image

Note that your endpoint should NOT be able to run without authentication (that’s the point of the test).

You can return whatever data you want:

That’s it :tada:

9 Likes