secure flow of .env params configured

Author: anton-tiptyuk

.env_test

@@ -0,0 +1,5 @@
+REACT_APP_API_ENDPOINT="http://sandbox.gonebusy.com/api/v1"
+REACT_APP_API_ENDPOINT="v1"
+REACT_APP_TOKEN="Token af9094c6d46658e60cde12e34ad26979"
+
+CI="true"

.example.env

@@ -1,6 +1,5 @@
-REACT_APP_SERVICE_ID=7891245607
-REACT_APP_GONEBUSY_TOKEN="Token af9094c6d46658e60cde12e34ad26979"
-REACT_APP_API_HOST="http://sandbox.gonebusy.com"
-REACT_APP_API_PATH="/api/v1"
-REACT_APP_IS_PROXIED="true"
-REACT_APP_PROXY_HOST="http://localhost:3000"
+GONEBUSY_TOKEN="Token af9094c6d46658e60cde12e34ad26979"
+GONEBUSY_API_HOST="http://sandbox.gonebusy.com"
+GONEBUSY_API_PATH="/api/v1"
+GONEBUSY_IS_PROXIED="true"
+GONEBUSY_PROXY_HOST="http://localhost:3000"

.example.env_test

@@ -0,0 +1,4 @@
+REACT_APP_API_ENDPOINT="http://sandbox.gonebusy.com/api/v1"
+REACT_APP_TOKEN="Token af9094c6d46658e60cde12e34ad26979"
+
+CI="true"

config/env.js

@@ -2,19 +2,22 @@
 // injected into the application via DefinePlugin in Webpack configuration.
 
 var REACT_APP = /^REACT_APP_/i;
+var clientParams = require('./gonebusy_env').client;
 
 function getClientEnvironment(publicUrl) {
+  var envData = Object.assign({}, process.env, clientParams);
+
   var processEnv = Object
-    .keys(process.env)
+    .keys(envData)
     .filter(key => REACT_APP.test(key))
     .reduce((env, key) => {
-      env[key] = JSON.stringify(process.env[key]);
+      env[key] = JSON.stringify(envData[key]);
       return env;
     }, {
       // Useful for determining whether we’re running in production mode.
       // Most importantly, it switches React into the correct mode.
       'NODE_ENV': JSON.stringify(
-        process.env.NODE_ENV || 'development'
+        envData.NODE_ENV || 'development'
       ),
       // Useful for resolving the correct path to static assets in `public`.
       // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.

config/gonebusy_env.js

@@ -1,26 +1,28 @@
 const url = require('url');
 const env = process.env;
-const reactAppServiceId = env['REACT_APP_SERVICE_ID'];
-const reactAppGonebusyToken = env['REACT_APP_GONEBUSY_TOKEN'];
-const gonebusyApiHost = env['REACT_APP_API_HOST'];
-const gonebusyApiPath = env['REACT_APP_API_PATH'];
-const gonebusyIsProxied = env['REACT_APP_IS_PROXIED'];
-const gonebusyProxyHost = env['REACT_APP_PROXY_HOST'];
 
-const is_proxied = !!(gonebusyIsProxied && JSON.parse(gonebusyIsProxied));
+const envToken = env['GONEBUSY_TOKEN'];
+const envApiHost = env['GONEBUSY_API_HOST'];
+const envApiPath = env['GONEBUSY_API_PATH'];
+const envIsProxied = env['GONEBUSY_IS_PROXIED'];
+const envProxyHost = env['GONEBUSY_PROXY_HOST'];
 
-const clientApiEndpoint = url.resolve((is_proxied ? gonebusyProxyHost : gonebusyApiHost) || '', gonebusyApiPath);
-const clientToken = is_proxied ? 'none' : reactAppGonebusyToken;
-const middlewareProxyHost = is_proxied ? gonebusyApiHost : undefined;
-const middlewareToken = is_proxied ? reactAppGonebusyToken : undefined;
+const is_proxied = !!(envIsProxied && JSON.parse(envIsProxied));
 
-console.log("to change the way we process .env so that it won't appear in plain JS", is_proxied);
+const clientApiEndpoint = url.resolve((is_proxied ? envProxyHost : envApiHost) || '', envApiPath);
+const clientToken = is_proxied ? 'none' : envToken;
+
+const middlewareProxyHost = is_proxied ? envApiHost : undefined;
+const middlewareToken = is_proxied ? envToken : undefined;
 
 module.exports = {
-  service_id: reactAppServiceId,
-  clientApiEndpoint,
-  clientToken,
-  middlewareProxyHost,
-  middlewarePath: gonebusyApiPath,
-  middlewareToken,
+  client: {
+    REACT_APP_API_ENDPOINT: clientApiEndpoint,
+    REACT_APP_TOKEN: clientToken
+  },
+  middleware: {
+    proxy: middlewareProxyHost,
+    path: envApiPath,
+    token: middlewareToken
+  }
 };

scripts/start.js

@@ -156,10 +156,10 @@ function addMiddleware(devServer) {
   // `proxy` lets you to specify a fallback server during development.
   // Every unrecognized request will be forwarded to it.
 
-  const gonebusy_env = require('../config/gonebusy_env');
-  const proxy = gonebusy_env['middlewareProxyHost'];
-  const token = gonebusy_env['middlewareToken'];
-  const middlewarePath = gonebusy_env['middlewarePath'];
+  var envParams = require('../config/gonebusy_env').middleware;
+  var proxy = envParams.proxy;
+  var token = envParams.token;
+  var apiPath = envParams.path;
 
   devServer.use(historyApiFallback({
     // Paths with dots should still use the history fallback.
@@ -192,7 +192,7 @@ function addMiddleware(devServer) {
     // Tip: use https://jex.im/regulex/ to visualize the regex
     // var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
     // var mayProxy = /^\/api.*$/;
-    var mayProxy = new RegExp('^' + middlewarePath + '.*$');
+    var mayProxy = new RegExp('^' + apiPath + '.*$');
 
     // Pass the scope regex both to Express and to the middleware for proxying
     // of both HTTP and WebSockets to work without false positives.

scripts/test.js

@@ -5,13 +5,19 @@ process.env.PUBLIC_URL = '';
 // if this file is missing. dotenv will never modify any environment variables
 // that have already been set.
 // https://github.com/motdotla/dotenv
-require('dotenv').config({silent: true});
+require('dotenv').config({
+  silent: true,
+  path: './.env_test'
+});
 
 const jest = require('jest');
 const argv = process.argv.slice(2);
 
+// console.log(process.env);
+
 // Watch unless on CI or in coverage mode
 if (!process.env.CI && argv.indexOf('--coverage') < 0) {
+  console.log('got inside');
   argv.push('--watch');
 }
 

src/lib/BusyAdapter.js

@@ -2,15 +2,10 @@ import gonebusy, { CreateBookingBody } from 'gonebusy-nodejs-client/lib';
 import { Promise } from 'bluebird';
 import Scheduler from './Scheduler';
 
-import gonebusyEnv from '../../config/gonebusy_env';
-
 const ServicesController = Promise.promisifyAll(gonebusy.ServicesController);
 const BookingsController = Promise.promisifyAll(gonebusy.BookingsController);
 
-const {
-  clientToken: authorization,
-  clientApiEndpoint
-} = gonebusyEnv;
+const { REACT_APP_TOKEN: authorization, REACT_APP_API_ENDPOINT: clientApiEndpoint } = process.env;
 
 gonebusy.configuration.BASEURI = clientApiEndpoint;