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

    I think I found the solution now:

    1. 1

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

      1. 1

        It goes into Airtable through a Zapier integration yeah.

  3. 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.

  4. 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
My year-long passion project is live on Product Hunt! Coffee Chats is like if Calendly and Carrd had a baby. 28 comments Hello! Long-time lurker, just launched product! 22 comments Happy to receive feedback about my new landing page 14 comments Notion API Beta is Open. What are you going to build? 12 comments I am building the first side project in public - The Struggle of Idea 8 comments 14 eBook pre-orders in the last 48 hours! 5 comments