In March I published a tutorial on how to handle form submissions in Gatsby and using Airtable as your backend. I was pretty convinced that by hidi...
For further actions, you may consider blocking this person and/or reporting abuse
Pretty cool. A general note, though, storing an API key in your code is generally bad practice because it's likely to end up in your repo, which even if private doesn't guarantee someone won't eventually be able to see it. A common way to get around that is to read the API key from a file stored in a separate area on the server or in a database. Environment variables would be used to change where you pull that from as the code moves through your environments.
Your solution is obfuscating, not securing. The endpoint / method where you store the API key is still in your repo and your code, and would still be accessible, just more steps to do so.
I've seen the whole reply between you and Lawrence and decided to reply here.
There is a good chance that I might be doing something wrong, after all, I am self-taught and the gap between what I know and what I don't know is pretty colossal. Also, this second part came out because someone informed me that my first part wasn't hiding the API key and could be seen in the requests.
I agree that if you are using a public repository everyone can see your code - remember that you can create private repositories for free on github.
The server-side functions are run on netlify are aws functions - you can read more about it on the official server-side functions documentation. So the code run there will be server-side.
Obviously, you could just use environmental variables to hide the airtable url like what I am doing with the api keys. These environmental variables are being set on netlify domain account and this is the only place where you put your api keys.
I agree that anyone could easily send a request following the server-side endpoint but I did try to do that with postman and the api key didn't get leaked by netlify. Am I wrong to think that the api key are indeed hidden?
Netlify also allows you to choose a context which could prevent people to use the endpoint and submit forms but I didn't touch that here.
With the increase use of JAMStack and serverless am I wrong to think that this might be an effective way to use airtable (or any other API) to power up a static site like Gatsby?
I apologise if I made any mistake, mostly I write about my journey and discoveries and thought it could be helpful to others to tackle issues that I have faced myself.
I think Freddy was refusing to accept the part about you using server-side functions. If your keys are transmitted from the server to the API, then the client-side will not see them. Using an environment variable is a fine solution for keeping your keys out of your repo. As an FYI, it wasn't that long ago that a bunch of private repos on github got accessed by malicious users, so I wouldn't ever rely on any repo always having true privacy.
Who are you responding to? I can't speak to how Netlify environment variables work, but if it's in response to what I wrote, no, you're wrong. You don't put it anywhere in your application. You store it in a separate area on the server that only root and your web app have access to.
The comments hierarchy clearly shows who I'm talking to :) So does my answer.
Alrighty, so what's your response? In no way have I proposed obfuscation nor would the key end up in a repo.
Sorry, I was under the impression it was the OP that didn't know how the comments work, I should have known it was you, considering you didn't understand the article to begin with.
If you store the key in a seperate location, that be a database or a file, then the key is still accessible. This entire post is specific towards static websites, SPAs and similiar, where the entire site is running directly in the clients browser.
For your solution to work, you still need a publicly accessible endpoint where the API key can be retrieved from. That be example.com/myapi.key or example.com/fetchKeyFromDBReturnJSON. If your static, client-run website can fetch the key, then so can anyone else.
You're confusing the entire approach with a regular dynamic website that's run on a traditional server that handles backend processing. That's not the case with Netlify, it's entire approach is based on static content, with the exception of the extra feature, AWS Lambda functions, which the OP is turning to.
I'm curious as to why you are responding to an article that's talking about a service you don't know anything about? Your comment is referring to "standard practices" when running in "traditional environments". Netlify is neither.
Easy big-timer. I know you got this new account to flex on people, but you picked the wrong guy. Using any sort of method to transmit a key client-side is absurd. Speaking of not reading articles, you clearly missed the whole section titled "Creating a server-side function for airtable" explaining how OP is using server-side code. This is where you avoid storing your API keys directly within your code and what I was responding to. OP was clearly able to deduce that in his response.
I have no intention of flexing; wanna-be-devs that provide faulthy information to the public on the other hand, is a problem.
I guess you missed the entire article title. "Hide your API Keys with Netlify Functions"
Meaning, your method won't work. As Netlify is based on static content, where everything is run, executed and loaded in the clients browser. IF you where to get your solution to work; then you would need a public endpoint where the key can be retrieved, and as I've said multiple times, and as you are now repeating, is absurd.
"Creating a server-side function for airtable", the op is using server side code, yes, on Netlify. Not just any random server.
The entire article is based on Netlify, running backend code with netlify, to achieve the goal of hiding your API key. The OP is writing everything that needs to be written, and you're comment is not only adding confusion to those who don't know better (Including yourself), it's also taken entirely out of context and has absolutely no relevance to the written article.
I get that you're the kind of person that refuse to admit that you're wrong, and simply invent context and meaning to whatever bullshit you spit out.
But for future reference, it's a huge benefit to everyone reading articles such as these if people who actually knew what they where talking about commented on the "wrong-doings".
You have yet to explain how hiding a key server-side is wrong or incorrect. You say that its impossible to have server-side code with Netlify (which may be because I have not used it), but that is not what OP said.
Get over yourself; you're just looking for a problem and you picked the least appropriate comment to do so. There's no doubt that someone who was thinking about storing their API keys in a code repo as OP proposed that will benefit from the explanation of how that is a poor choice. That is 100% platform independent.
Cool that you know so much about Netlify though. I bet that's super useful.
Dude, get over yourself; you're just looking to add confusion. There is no doubt that the OP wrote this article specifically to avoid storing the API key in the code, considering that would reveal it to the world, being static and all :)
The facts are that there is only one person flexing; and that's you, from your very first comment where you add irrelevant context to every reply you have made since.
The server-side element doesn't even have anything to do with Netlify. It's airtable. I mean, I don't see how you aren't getting this (maybe just bad troll?)
"So this fetch request will just call the netlify function and pass the form fields into the server-side function and that server-side function is the one calling the Airtable API."
Stop the try-hard act. You'll never learn anything with that attitude.
LOL! Now you're truly showing how incompetent you are.
Airtable is only relevant as that's the API he is trying to communicate with from Netlify. And he is trying to make calls to Airtable from Netlify without revealing the API token, considering Netlify sites are run on a CDN and requires the site to be static.
Airtable is his chosen third-party API, it has no relevance to his problem or the article in question; it could be any API. I guess your next advice is fetch the API client key directly from the API right?
Idiot. You are the one that needs to listen, the one with a lot to learn. After all, I'm the one with experience here, you're just the troll throwing out random comments with no context :)
Thank you for the comment yeah I agree with you. With Netlify you don’t need to store the environment variables in your repo, all you need to do is add them to your deploy tab and Netlify will get them for you so no need to add them on your repo 😄
"I like to put all the things related to Netlify inside a folder called .netlify. Inside that .netlify folder I just created another folder called functions."
I am unable to get git to recognize the ".netlify" folder, so it will never push to to netlify. Any thoughts here?
Check gitignore documentation in regards to the folder being ignored by git, but as a general rule anything with
.in front of it is considered hidden in most OS environments. In other words, you wouldn't want to put anything in a folder like that unless you truly wanted it hidden from everything except the local environment its stored in (generally speaking).Thanks for replying. Maybe I am just misunderstanding how creating this locally, then NOT pushing it to the repo will result in this working somehow.
Hello I think you might have misunderstand - or I haven't explained myself well on the post. You will need to push .netlify folder to your repo. All your api keys should be environmental variables which will be set on netlify website.
That way netlify will get your keys server side when running your server-side function. If you can't make netlify discover that folder make sure that this folder is located in the root of your project and in netlify functions tab you wrote the full path './netlify/functions'
Hope this helps
'./netlify/functions' instead of '.netlify/functions'
This seems to have been the issue. thanks!
Good article!
Is there a way to take this to the next level, where the cloud function is used to authenticate the client app with the API, and then they can request/response DIRECTLY?
With this method, and all the examples i can find, every API request has to go through the Netlfiy Function, and the response has to go back the same way... Surely there is a way around this...???
Yes, every API call must contain the API KEY. But still.
Anyone?
i can't get to use fetch in the functions