Open Weather Map API Key and Environment Variables

1

I’m trying to build a React weather app using Open Weather Map’s API. In concurrence with best practices, I want to store the API key in an environment variable (in a .env file). I also installed dotenv and called the environment variable:

import React from 'react';
//import logo from './logo.svg';
import './App.css';

require('dotenv').config();

class App extends React.Component {
  constructor(props) {
    super(props);

    this.openWeatherMapCall = this.openWeatherMapCall.bind(this);
  }

  openWeatherMapCall() {
    fetch(`https://cors-anywhere.herokuapp.com/https://api.openweathermap.org/data/2.5/forecast?id=5206379&APPID=${process.env.APP_ID}`)
      .then(res => res.json())
      .then(data => {console.log(data)});
  }

  render() {
    this.openWeatherMapCall();
    return (
      <code>
        {this.openWeatherMapCall()}
      </code>
    )
  }
}

export default App;

However, I’m getting a weird 401 error that says I’m using an invalid API key (I doubled-checked for misspellings and found nothing):

46%20PM
46%20PM2880×1800 395 KB

I went to the FAQ section on their site about 401s but didn’t really find anything that could help me.

Any ideas on what I’m doing wrong? FWIW, the .env is in the main branch of the project’s direction (not inside of the src folder).

Thanks-in-advance!

3

Nope. It’s undefined. And I found this thread on Stack Overflow and it said it’s undefined because " the Node.js execution environment does not know the newly added [APP_ID]."

So I tried the steps they suggested in the thread by exporting APP_ID from the .bash_profile but it’s still undefined. :frowning_face:

4

hi @Dusch4593
if your are using react with create react app then , you should prefixe your API key name in .env file with REACT_APP_{YOUR_API_KEY_NAME} , because create react app will ignore all env variables not staring with it

5

Just tried that, actually! I’m still getting undefined. I changed it to REACT_APP_API_KEY.

7

What’s the safe way to do it?

10

Oh ok, so I need to make a backend server that works with the API key separate from the frontend (like I did with the Goodreads clone)?

12

I’m gonna work on that next chance I get with the computer. Thanks, Randell!

13

So I began to work on the backend server but I’m running into a really confusing situation: I’m getting a successful fetch, but when I try to log the response, I’m getting this message on my terminal:

Missing required request header. Must specify one of: origin,x-requested-with

Again, according to my local server, the fetch is successful:

38%20PM
38%20PM2880×1800 186 KB

This is the route I made for making the call:

//Open Weather Map Route
backend.get("/", async (req, res) => {
	try {
		// Using node-fetch with Pittsburgh's city ID on Open Weather Map along with API Key (APP_ID)
		const response = await fetch(`https://cors-anywhere.herokuapp.com/https://api.openweathermap.org/data/2.5/forecast?id=5206379&APPID=${process.env.REACT_APP_API_KEY}`);

		// The API returns stuff we don't care about, so we may as well strip out
		// everything except the results:
		console.log(await response.text());
		return res.json({
            success: true,
        })
	} catch (err) {
		return res.status(500).json({
			success: false,
			message: err.message,
		})
	}
})

I looked online for an explanation of why I’m getting this message on my terminal (I’m getting it in Postman, too) but I can’t understand why?

15

Whether you intended it or not, you’ve answered my question by asking me why I was still using cors-anywhere.herokuapp.com :wink: Now I’m seeing the data logging to my terminal!

1 Like
16

So just to recap:

If I’m fetching data from the front-end, use cors-anywhere.herokuapp.com.

If I’m fetching from the backend (which seems to be the safest way), then use the regular api url to make the fetch.

Sounds right?