4
18 Comments

Hide Airtable API key from front-end

I have a simple front-end with a e-mail submit form. I want to collect the e-mails in an Airtable. I don't want the Airtable API key to be exposed in the front-end. I don't want to set up a separate backend just for this. What are my options?

  1. 3

    Pretty sure you need to do it through a server of some sort.

    Free, you could use a vercel function, or a lambda (should fall under free tier).

    You could use cloudflare workers.

    This service might work: https://nocodeapi.com/

    Wondering if there's a microsaas opportunity in there somewhere.

    Out of curiosity, what airtable plan are you on?

    How many forms do you expect to process per month?

    1. 2

      I'm on the Plus plan on Airtable. This was just to quickly whip together a pre-launch page for my product. The pre-launch page has just a description of the product and a "E-mail me when it's ready" form with just an input and submit button.

      So just needed something super simple to integrate with. Just posting the emails to Airtable seemed like the easiest possible solution.

      As a quick and dirty solution for now I went with a product analytics tool I've used for other products (Woopra). It has function for identifying the visitor (woopra.push()).

      The volume of requests right now for me is hard to predict. I was just looking for a quick way to achieve the setup I wanted. Spent a good 30 minutes searching.

      Yeah, the "hide API keys" could potentially be a MicroSaaS opportunity.

      1. 2

        Was just thinking, you might be able to do this with an airtable automation, using a "webhook trigger".

        If your front end makes a POST to the webhook URL provided by the airtable automation webhook trigger, and the body is JSON, you can then do a "create record" action and map the fields in the JSON body to your columns in your airtable.

        The webhook url has the baseId, but does not contain the apikey. I'm not sure how sensitive the baseId is.

        1. 1

          That sounds like it could work!

  2. 1

    Not sure if you found a solution to this issue, but KOR Connect acts as a secure middleware that focuses on your use case exactly. It's easy to use and provides a proxy with attestation layer as well as other security out of the box. Plus it's free, here is blog of it being use and some info https://dev.to/korconnect/quickest-way-to-secure-api-keys-on-the-frontend-1jcp

    Hope it helps!

  3. 1

    I think I found the solution now:
    https://formspark.io/

    1. 1

      Hey @MarkusPint how exactly did formspark solve your problem? I'm running into exactly the same issue ha!

      1. 2

        I wish I remembered lol. But i'm pretty sure it was:

        Formspark -> Zapier -> Airtable

        So I didn't need to expose my Airtable keys any more.

        1. 1

          @MarkusPint ok awesome I'll check that out

    2. 1

      That goes into Airtable? Or are you dropping the Airtable thing?

      1. 1

        It goes into Airtable through a Zapier integration yeah.

  4. 1

    Does Airtable allow you to whitelist IP addresses? This would be the normal way to secure access when the API key is in the front end files.

    1. 1

      This is also bad advice. How can you expect to white list IP addresses when you're collecting forms from unknown users?

      A WAF with an IP filter may be a solution if you have a known user base or an internal app, but that doesn't appear to be the case here.

      1. 1

        Not really bad advice. The app sits on a server with an IP address. The server's IP is added to the whitelist on Airtable so even if anyone else gets my API key, Airtable won't respond.

        1. 1

          If he has a server his front end is being served from then his API keys would never be on the client in the first place. Env vars should be enough and yes a whitelist on Airtables side would work.

          I'm assuming since he's concerned with his keys being exposed on the client that he does not have a back end. In this case a whitelist is not enough as you can't whitelist all the IP addresses of your users.

  5. 1

    Where are you hosting your site? Look into environment variables to store your key. Your host should have some documentation on it.

    1. 1

      This is bad advice. Even if you use environment variables your API keys will still be exposed when used on the front end.

      1. 1

        I'm not familiar with Airtable's API. I've been using firebase quite a bit recently where that would be acceptable and assumed it would be comparable for Airtable. So, if the API doesn't work similar to firebase, then scrap that advice!

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 47 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 27 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments How I Launched FrontendEase 13 comments