Webflow Logic flow Bad Request 400 - Make.com - Hide Webhook and API

Hi, I’m going a little nuts as I can’t figure out what I’m doing wrong in my flow, but I keep getting the same 400 status code when running a test. Could someone please take a look at it? Much appreciated…

I have the beginning of this flow set up so I won’t have to expose my webhook / API’s anymore.







What happens when you call your Make webhook directly from a tool like Postman?

The first step in situations like this is to verify that the call works with the parameters and auth provided, and returns the data your want.

Hey Michael, this has been a very weird problem. Apparently Logic kept thinking my “perspectief” field was from another page and form. But after some going back and forth, making a new field for it multiple times en disconnecting/reconnecting it got it right. I did copy this form so perhaps something went wrong there, even though I checked everything twice.

Now I’m only left with a Status 400 for the Response in Make. Do you know of any solution for that? It says the validation failed:


Forget this! I figured it out. My body didn’t need to contain “Specification”: {} in it. All solved now :slightly_smiling_face: Thanks for the tip about Postman, will use that in the future when things go wrong.

Looks like you solved your problem :+1: but regardless, this is an odd setup. Going from Logic to Make.

I see your trigger is a form submission, why not go directly to Make and skip using Logic?

I thought I figured out that this was the only way to completely hide my Webhook from the client-side (and also authenticate it, but I don’t see a way to authenticate the credentials filled in Logic in Make…), which is something I would like to do so nobody can make unwanted calls to my Make scenario. I also had this idea of adding another HTTP request action after the trigger with method GET and then map the received content to their appropriate divs on the page, but I see no way how I can retrieve the body of that HTTP request in the Designer via custom code.

The basic functionality I’m looking after is:

  1. send form submission to Make scenario
  2. do all kinds of stuff in Make scenario (like an OpenAI call for create a completion based on form inputs and do some math to update user credits)
  3. send response back to the page and assign response contents to divs / input fields (without the need of a page refresh)

I want to hide it all (webhooks, api urls) from the client-side and add authentication where needed to make it even more secure.

Gotcha.

So you have 2 asks:

  1. Authentication
  2. Hiding the Webhook URL

Authentication

Unfortunately no authentication is available from either (Logic, or Make). There are workarounds, but they are a bit involved.

If you really need authentication, you’ll need to layer that on yourself.

For example, here’s a tutorial of mine adding authentication with Make and AWS Lambda (serverless functions):

Hiding the Webhook URL

If your only goal is to hide the Webhook URL, just use the Webflow Make Module, it is a Webhook:

Using this module your Webhook URL is not exposed.

Why?

This module registers that Webhook URL on Webflows backend servers (not client side).

You submit a Webflow form as you normally would, that form is submitted to Webflows backend, Webflow see’s that it is attached to a Webhook URL, and sends the request to it.

Costs

But that comes with a cost.

  • Now if Webflow forms are broken (just search this form, has been happening a lot) than so is this.

  • You will be charged for your form submission. You only get so many.

Alternate Approach

To break free from that constraint you create a Make Webhook (directly using that module, not the Webflow module) and in either Javascript or the forms action add that URL.

But it’s not hidden.

To help combat that you filter all requests that don’t match a pattern and ignore them.

When doing this, you avoid getting charged for Make “operations”, it’s essentially free, only allowing those requests that you want.

You also block 99% of the automated attempts against this endpoint.

This is Make’s Data Structures feature. Here’s a tutorial:


So you have some options to weigh but your problems are solvable in a more straightforward way (versus using 2 automation services).

Good luck!

Hey Chris, thanks! Great tutorials! I didn’t know that setting up a filter between the first (trigger) module and the second don’t charge operations, that’s awesome. I believe that it is possible to have some sort of authentication set up between Logic and Make though, at least for the sending (POST) part:

I set up credentials in my ‘Make HTTP request’ action in Logic, added these in a Header called ‘x-api-token’ and set up a filter in Make that checks the API key.

However, I decided to dip my toes into DevLink for my application and try to run everything server side.

Man, how did you do it? I’ve spent hours trying a lot of different variations and I always get error 400 and the POST doesn’t connect with Make.com. Weird enough, if you put the Webhook URL straight into the form work immediately, but with Logic I don’t know what else I am doing wrong. Can you share details of how you setup the Logic HTTP Post Request Form? Thanks a lot.

Hey Fernando,

Sorry, but this has been a while, and I don’t really have the time right now to dive into it again.

I don’t know what you’re trying to build, but honestly, these are all workarounds (imo) and you’ll probably keep running into annoying limitations.

I’ve started using the Wized platform/configurator from Finsweet, which has a ton of flexibility. Might want to check it out on Youtube. Lots of tutorials out there.

Good luck for now :facepunch: :heart_hands: