Hiding api key

[sha298]

Select Topic Area

Question

Body

Hi,
I have coded a website and want to publish it on github. I have confusion how can I keep the API key hided. Can anyone please help..

[airtower-luna]

If you mean GitHub Pages, you can't. It's only for static sites (nothing that runs on the server), so everything you publish there is available to clients.

If you just want to show your code to the world, make sure to load the API key from a separate file, and don't commit that file (and add it to .gitignore). Then add a note in the documentation where people need to place their own API key to try the code.

[tshenolo]

You can store and retrieve your API key from an environment variable. ie. Set your API key in an environment variable on the machine hosting your website then write your code in such a way that it reads the API key from the environment variable.

[heisenberg3376]

does a .env file work?

[Shriansh2002]

1. Store your API key locally: Create a file (e.g., .env) in your project directory and add your API key as a value to a variable. For example: API_KEY=your-api-key.

2. Add .env to your .gitignore file: Open the .gitignore file (if it doesn't exist, create one) and add .env to it. This step ensures that the .env file is not included when pushing your code to GitHub.

3. Use environment variables in your code: Modify your website's code to access the API key from the environment variable instead of hardcoding it. Depending on the programming language you're using, there are different ways to access environment variables. For example, in JavaScript, you can use process.env.API_KEY to access the value.

4. Set environment variables on GitHub: Go to your GitHub repository and navigate to the "Settings" tab. Scroll down to the "Secrets" section and click on "New repository secret". Enter the name (e.g., API_KEY) and the corresponding value for your API key. Save the secret.

5. Update your deployment process: If you're using GitHub Actions or another deployment method, modify your workflow to retrieve the API key from the repository secret you just created and set it as an environment variable during the deployment process. This way, your API key will be securely passed to your deployed application without being exposed.

[danielpim3ntel]

Please make a tutorial.

[chrismferguson]

youre the best!

[Nix7amcm]

I came across this tutorial later that I found very helpful also:
https://youtu.be/FcwfjMebjTU?si=JgPVYVN006vBBsEH

[aswinrajeev]

@Shriansh2002 If someone inspects the network traffic, they would see the API key in the request, right? I mean, AFAIK GitHub Pages does not support server-side logic and hence the API Key should be there when the API is triggered from the browser.

Edit: This is clearly mentioned in the video @Nix7amcm shared as well. If you have to use an API protected through an API Key, DO NOT call it from the front-end. Use a backend server (or something like a serverless function) for this.

[Shriansh2002]

Yes, you are right @aswinrajeev, the calls for the API should not be on the frontend client side.

You can use things like implementing server-side logic (as a separate server or serverless function) to handle API calls using the hidden key.

You can use serverless functions, and cloud providers like AWS, GCP offer API Gateway services that you can integrate.

[AlbinXXX]

To ensure the security of your API key when publishing your website on GitHub, follow these steps:

1. Create a .env file: This file will serve as a container for storing sensitive information. Place it in the root directory of your project.
2. Add the API key to the .env file: Open the .env file and define an environment variable to store your API key in the following format:

API_KEY=your_api_key_here
Replace 'your_api_key_here' with your actual API key.

3.Create a .env.example file: This file will act as a reference template for others working on your project. It should include a list of required environment variables without their values. For instance:

API_KEY=
This will indicate that the API_KEY environment variable needs to be set but should not contain the actual key.

Protect the .env file: To prevent the .env file from being committed to the GitHub repository, add it to the .gitignore file. This ensures that the file remains local and secure on your machine.

Commit and push your changes: Remember to include the updated .gitignore file and any other modifications in your commit, then push your code to GitHub.
Hope this helps!
By following these steps, you can keep your API key hidden from unauthorized access while providing the necessary information to collaborators through the .env.example file.

[wayne-wang-1119]

create a .env file. put your keys there. use some libraries (example: python-dotenv has load_dotenv) to automatically load in the params. Then use something like os.get to pick it up. then you can hideyour .env by adding .env in your .gitignore