Fetch API Data While Keeping Keys Secure

Author: seejamescode

.gitignore

@@ -15,4 +15,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
+keys.json

index.js

@@ -1,16 +1,37 @@
 import compression from 'compression';
 import express from 'express';
+import fs from 'fs';
+import request from 'request';
 
 const app = express();
 const port = process.env.PORT || 8080;
 app.use(compression());
 
-app.use(express.static('./build'));
+let keys;
+if (fs.existsSync('./keys.json')) {
+  keys = require('./keys.json');
+} else {
+  keys = JSON.parse(process.env.VCAP_SERVICES)['user-provided'][0].credentials;
+}
+
+app.get('/github', (req, res) => {
+  request({
+    url: `https://api.github.com/user/repos?affiliation=owner,collaborator&access_token=${keys.github}`,
+    headers: {
+      'user-agent': 'node.js',
+    },
+  }, (err, response, body) => {
+    if (!err && response.statusCode === 200) {
+      res.send(body);
+    }
+  });
+});
 
+app.use(express.static('./build'));
 app.listen(port, (err) => {
- if (err) {
-   console.log(err);
-   return;
- }
- console.log(`Server is live at http://localhost:${port}`);
+  if (err) {
+    console.log(err);
+    return;
+  }
+  console.log(`Server is live at http://localhost:${port}`);
 });

manifest.yml

@@ -5,3 +5,5 @@ applications:
   command: npm run bluemix
   disk_quota: 256MB
   memory: 128MB
+  services:
+       - keys

package.json

@@ -9,7 +9,8 @@
     "compression": "^1.6.2",
     "express": "^4.15.2",
     "react": "^15.4.2",
-    "react-dom": "^15.4.2"
+    "react-dom": "^15.4.2",
+    "request": "^2.80.0"
   },
   "devDependencies": {
     "babel-watch": "^2.0.6",

src/App.js

@@ -3,6 +3,23 @@ import logo from './logo.svg';
 import './App.css';
 
 class App extends Component {
+
+  state = {
+    repos: [],
+  }
+
+  componentDidMount() {
+    fetch('/github')
+    .then(response => response.json())
+    .then((data) => {
+      const repos = data.map((repo) =>
+        <p key={repo.id}>{repo.name}</p>
+      );
+
+      this.setState({ repos })
+    });
+  }
+
   render() {
     return (
       <div className="App">
@@ -13,6 +30,8 @@ class App extends Component {
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
+        <h3>App Creator's Repos:</h3>
+        {this.state.repos}
       </div>
     );
   }

yarn.lock

@@ -4638,7 +4638,7 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
-request@^2.79.0:
+request, request@^2.79.0:
   version "2.80.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.80.0.tgz#8cc162d76d79381cdefdd3505d76b80b60589bd0"
   dependencies: