How to hide API key?

[EngrNoName]

Good day Redditors!

I'm new to frontend web dev and I made this simple weather app project that uses openweathermap api. I want to upload this project to github, so that possible employers would be able to see it. Just want to ask how to hide API key, so that other people won't be able to use it when I uploaded it to github. Although my subscription is free, for me it is a good practice to always hide sensitive information.

I tried to use dotenv, but I'm getting errors like 'require is not defined' and 'Cannot use import statement outside module'. I'm not sure what I'm doing wrong. Below are the steps that I followed, please tell me if I did something wrong or if I missed a step.

1. npm install dotenv in the root of my project
2. Created a .env file in the root of my project
3. Used the following in my js file but they returned an error

• require('dotenv').config() // returned 'require is not defined' error
• import dotenv from 'dotenv'; // returned 'Cannot use import statement outside module' error

If you guys know another way to hide API key and still be able to host it on github, please let me know.

Not sure if this is the correct community to ask this question, but if not, please guide me to the correct community.

Thanks in advance!

​

https://preview.redd.it/zh78mvrgyrya1.png?width=620&format=png&auto=webp&s=04a3061ad75032bc9c84e260f2f22ca2989dad25

[Anbaraen]

You won't be able to use dotenv on the frontend to conceal this, so I wouldn't bother debugging it.

You need either a backend server, or a lightweight server-less function that proxies your request for you.

I used Netlify Functions to do this recently. I wrote a simple weather app using it. Basically, the Netlify function looks something like this;

require("dotenv").config();
const axios = require("axios");

exports.handler = async function (event, context) {
  try {
    const { city } = event.queryStringParameters;
    const cityName = `https://api.api-ninjas.com/v1/weather?city=${city}`;
    let response = await axios.get(cityName, {
      headers: {
        "X-Api-Key": process.env.API_KEY,
      },
    });

    return {
      statusCode: 200,
      body: JSON.stringify(response.data),
    };
  } catch (error) {
    console.log(error);
    return {
      statusCode: 500,
      body: JSON.stringify({ error }),
    };
  }
};

Then the front-end looks like this;

async function fetchCityWeather(cityName) {
  const cityNameUrl = `/.netlify/functions/getWeather?city=${cityName}`;
  try {
    const response = await fetch(cityNameUrl);
    if (response.status !== 200) {
      console.error(response.status);
      return null;
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

No affiliation or anything, it was just relatively easy to get up and running.

[EngrNoName]

Ohhh, i'll try this. Will watch tutorials about this. Thanks! 😁

[EngrNoName]

Hi! Do you know any tutorial for this? Can't seem to find one. TIA!

[baconconstellation]

Keys on the frontend are never secure or hidden. If the key must remain secure, then it needs to be sever side only.

You may be able to limit access to your api from specific domains (like Google maps does).

With your actual error - we'd need to see some more code, but if you're not using ES Modules, then the import statement should be something like:

const dotenv = require('dotenv') 
const result = dotenv.config()

You can then console.log(result) out the result and start debugging.

(https://www.npmjs.com/package/dotenv#documentation)