How to call your APIs, Keys and Secrets from the FRONTEND and BROWSER

How to call your APIs, Keys and Secrets from the FRONTEND and BROWSER

In this video, I am showing you How to hide your APIs, Keys and Secrets from the FRONTEND and BROWSER using Proxy Server. I am going to use a frontend app which has the use of an API, a secret ID and a secret value and I am going to hide them so that none of these values can be accessed from the frontend or even the browser. Watch the full video to understand how the things are done.

========================================

METADATA:
How to hide your API Keys and Secrets from the FRONTEND and BROWSER using proxy server,How to hide your API Keys and Secrets from the FRONTEND and BROWSER,hide your api,hide api key javascript,hide api key react,code with ishraq,how to hide your api keys,how to hide your api key in javascript,hide api key,api keys,environment variables
How to hide your API Keys and Secrets from the FRONTEND and BROWSER using proxy server,How to hide your API Keys and Secrets from the FRONTEND and BROWSER,hide your api,hide api key javascript,hide api key react,code with ishraq,how to hide your api keys,how to hide your api key in javascript,hide api key,api keys,environment variables

[raizdesamauma]

Great explanation, thanks a lot! It would be nice if you also share with us how to use that in production, after deploying to vercel, for example. Maybe even using a serveless function approach.

[sageofspiritual]

Sir if we use like this api key does get show in network tab? please let me know

[felipe]

Hello Ishraq,

Good example!

I tried to do the same with just one single folder in react and it did hide the API key and the app works properly, but when I deploy it in Gh-pages it doesn’t work! What could I be missing?

I would appreciate it you could help me

Thanks 😊

[rythmrana]

guys, please dont be confused, what he did here was to show how you should only call apis which you have paid for in your backend and then share that data with your frontend, and not directly use those apis in the frontend

[harisvk]

Hi, guys I use dynamo DB graph ql query for the fetching data so in my scenario if I fetch the post from the post table along the data it return all the users personal information in response from the graphql query so I want stop this can any one can answer this

[wesley]

Hi! Thank you for the video. But my question is...how can I publicate my project after doing this? Can I publicate this in Github, and deploy it using Vercel. Will it still work?

[SylvinRodriguesiAI]

but anyone can use your API and hit it as many as time he wants as everything is visible in network tab

[robertbutcher]

Thanks for the video. I got my site to work locally with this video! I don't think I was too far off from what I originally had. I have a question though, how can I run the client and and server with "npm start"? I tried "npm start" and it just launches the front-end site, not the server. To get it to work, I have to run "npm start" in one terminal and "npm start-dev-server" in another terminal. How can I fix this?

[gauravparikh]

Can we do it with an angular APP with version 8

[abhi.ni]

Does the api key will show in "Headers" under the NETWORK tab in inspecting???

[kieuphongeg]

You should add proxy to package.json to hide server link url, at client just see '/recipes/${query}

[devgauravjatt]

😂 bad bro but loclhost api show in network tab 😅😅

[jak]

Hello, have a question, what if the user looks not in the source code but in Network -> Fetch/XHR ? He steel can see the secret key