0

Problem:

I created a simple React app (using Javascript and Node) that uses the GitHub API to search for users and return information about them. I need to use a GitHub oauth key so that I can make authenticated API requests. However, I am having trouble giving my deployed app (using Heroku) the key without hard-coding it into the API call. I'm fairly new at this so any help would be great! I linked the github repo at the bottom of this post.

I have tried several things which I will explain below:

Attempt 1:

  1. I created a file where I set my GitHub key to a variable and exported it (Image of code)
  2. I put said file in the .gitignore

  3. I imported the variable in the files where I made API calls and used them it directly in the API call. (Image of API call)

  4. This worked on my dev environment but (obviously) did not work on my deployed Heroku app because it had no idea what the variable was. (Image of error)

Attempt 2:

  1. I configured variables in Heroku and set GITHUB_KEY to my key. (Image of Heroku variable setting).

  2. Next, I checked that Heroku recognized this variable by running the command heroku config:get GITHUB_KEY and received the correct key in response (Image of terminal)

  3. In my secrets file, I set the variable like so: process.env.GITHUB_KEY = 'a93b2c21918b42df5a28e0e529c627ee22c60de4'; (Image of setting variable using process.env)

  4. And then I use it in my API calls on the frontend: const res = await fetch( 'https://api.github.com/users/${this.state.input}?access_token=${process.env.GITHUB_KEY}' );. However, I get the following error: SearchBar.js:32 GET https://api.github.com/users/livmarx?access_token=undefined 401 (Unauthorized). (Image of error).

So, I know that I'm misunderstanding how process.env works but cannot seem to figure it out! Any clarification would be super helpful.

Here is the link to my github repo: https://github.com/livmarx/zilliow-challenge

Liv Marx
  • 35
  • 1
  • 5
  • In the interpolated URL string you have `access_token=undefined` because in [your code](https://github.com/livmarx/zilliow-challenge/blob/0f80b59fa5b64bfddc84a38f9cdb3a5d0314f1f8/client/components/SearchBar.js#L31) (not in the example here) you have `access_token=${GITHUB_KEY}` instead of `access_token=${process.env.GITHUB_KEY}` – marekful Feb 13 '19 at 17:23
  • Hi! So, I tried changing them all to process.env.GITHUB_KEY and still getting undefined – Liv Marx Feb 13 '19 at 19:39
  • See [this](https://stackoverflow.com/a/11104156/1207049). It means you have to pass the value to an environment variable in the _shell_ the node app is running from. `process.env` will be populated with the env. variables available for the shell at the time. You'd start your app e.g. by `export GITHUB_KEY="xxx" node server.js` in a Linux shell. – marekful Feb 14 '19 at 09:52
  • Also see [this](https://stackoverflow.com/a/35317795/1207049) for a workaround for setting env variables at run time. – marekful Feb 14 '19 at 09:59

0 Answers0