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