Unable to access API key using process.env and Heroku

JavaScript
1

Greetings. My problem is somewhat complicated and I’m not sure where to start. I am a frontend developer with very little backend knowledge and I am trying to make a simple API call to an API that requires a key. I have the key, and I have stored it in a .env file as MY_API_KEY=[insert key here]. I’m trying to send it as part of the request header from the front end on a button click using process.env.MY_API_KEY. Furthermore, my server is hosted on Heroku using a clone of CORS-Anywhere so that I can get past the CORS error. I have logged into Heroku and added the API key in config vars, and it still doesn’t work. Every time I attempt the GET request, it says “You are not subscribed to this API” and process.env.MY_API_KEY logs as undefined to the console.

I don’t really understand why it’s not working or how I should untangle this. I have tried building my own server and not using heroku but that doesn’t seem to work either as I don’t seem to understand how to connect the front and back end successfully. Any help would be appreciated.

Edit: FYI I am using HTML, CSS, Vanilla JS and I have node installed. I am using dotenv 10.0.0 in my package.json in devDependencies. Here’s a simple snippet of my front-end API call code for reference:

const getData = async () => {
    fetch('https://my-heroku-server-app-name.herokuapp.com/https://wft-geo-db.p.rapidapi.com/v1/locale/timezones/America__Los_Angeles/dateTime', {
	method: 'GET',
	headers: {
		'x-rapidapi-host': 'host-name-entered-here',
		'x-rapidapi-key': process.env.MY_API_KEY
	}
})
.then(res => res.json()
).then(data => console.log(data))
.catch(err => {
    console.log('ERROR FROM GETDATA:');
	console.error(err);
});
}

getData() is triggered on a button click. This above code is in a frontend js file.

2

Is your backend making a request to the API?

If so it is the one that needs the key set in the header. The frontend code should just hit your own API and then it will do the request to the third party API and send back the response.

If the code you added is frontend code then you are sending the key with the request and it is not secure. It doesn’t matter that you save the key in an env file if you transmit it over the wire in the client code.

You really shouldn’t need the CORS server, just the cors npm package and then use it with express (app.use(cors())).

1 Like
3

My front end is initiating the API call. So this is what I’m struggling with: How do I get my front end to interact with the backend and make the server send the request? This is so confusing to me for some reason.
Like do you have a simple mock code example of how someone accomplishes something like this? (btw I am doing some Googling right now so pardon my basic question)

4

You set up the backend server with ExpressJS (or pure Node if you like) and do the fetch on the backend (using node-fetch, or axios, or now with the built-in fetch in Node). Then send it (the JSON or whatever) back to the client.

1 Like
5

Ok, thanks for the explanation. But if I want the fetch from the backend to be triggered by a front-end button click or something similar, how does one accomplish that? Thanks for your help.

6

I would suggest you go through the freeCodeCamp backend section if you haven’t to learn more.

You make a fetch to your own API and it does the third party API fetch and sends the data back.

Your own backend

const express = require('express');
const app = express();

const axios = require('axios');
const cors = require('cors')
app.use(cors());

// do the header stuff here as well I didn't add it
app.get('/api/users', async (req, res) => {
  await axios("https://thirdPartyAPI.com/api/someEndPoint")
    .then(data => {
      res.json(data.data)
    })
})

app.listen(3000, () => {
  console.log('Server is listening on port 3000')
})

Client code (let’s imagin the backend is running on Replit and is named api-example):

async function getData() {
  const response = await fetch("https://api-example.lasjorg.repl.co/api/users");
  const json = await response.json();
  // use the JSON
}
1 Like
7

Lasjorg, you have been so helpful. I think this finally makes sense to me. Thank you so much.

8

Happy to help.

And don’t worry, it is confusing at first. But simple backends are really not all that hard to learn. It’s just now you have to learn yet another thing and your head is already full of stuff (HTML/CSS/JS/Frameworks/whatHaveYou). It can be total information overload.

Full-stack is hard and most devs are not all that “full” truth be told. Being equally great at all the things that go into “full-stack” is very hard.

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.