set up Authentication

README.md

@@ -5,6 +5,9 @@
 	Install Dependencies 
 		`npm install`
 
+   To link cu-ui package locally for development:
+      `npm link ../cu-ui` 
+
 ## Run:
   ### Development
      `npm start`

app/constants/index.js

@@ -0,0 +1 @@
+export const AUTH_TOKEN = 'tip-auth-token';

app/containers/App/components/ProtectedRouteWithLayout.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import T from 'prop-types';
+import { Route, Redirect } from 'react-router-dom';
+
+import MasterLayout from 'containers/MasterLayout';
+import { getItem } from 'utils/localStorage';
+import { AUTH_TOKEN } from 'constants/index';
+
+const ProtectedRouteWithLayout = ({ component: Component, ...rest }) => (
+  <Route
+    {...rest}
+    render={props =>
+      getItem(AUTH_TOKEN) ? (
+        <MasterLayout>
+          <Component {...props} />
+        </MasterLayout>
+      ) : (
+        <Redirect
+          to={{
+            pathname: '/login',
+          }}
+        />
+      )
+    }
+  />
+);
+
+ProtectedRouteWithLayout.propTypes = {
+  component: T.func.isRequired,
+};
+
+export default ProtectedRouteWithLayout;

app/containers/App/components/RouteWithLayout.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import T from 'prop-types';
-import { Route } from 'react-router-dom';
-
-import MasterLayout from 'containers/MasterLayout';
-
-const RouteWithLayout = ({ component: Component, ...rest }) => (
-  <Route
-    {...rest}
-    render={props => (
-      <MasterLayout>
-        <Component {...props} />
-      </MasterLayout>
-    )}
-  />
-);
-
-RouteWithLayout.propTypes = {
-  component: T.func.isRequired,
-};
-
-export default RouteWithLayout;

app/containers/App/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { Switch } from 'react-router-dom';
+import { Switch, Route } from 'react-router-dom';
 
-import { Dashboard } from 'cu-ui';
+import { Login, Dashboard } from 'cu-ui';
 
-import RouteWithLayout from './components/RouteWithLayout';
+import ProtectedRouteWithLayout from './components/ProtectedRouteWithLayout';
 
 const App = () => (
   <>
@@ -13,7 +13,8 @@ const App = () => (
     </Helmet>
 
     <Switch>
-      <RouteWithLayout exact path="/" component={Dashboard} />
+      <Route exact path="/login" component={Login} />
+      <ProtectedRouteWithLayout exact path="/" component={Dashboard} />
     </Switch>
   </>
 );

app/index.js

@@ -8,11 +8,20 @@ import 'styles/antd.less';
 import 'styles/index.scss';
 
 import App from 'containers/App';
+import { AUTH_TOKEN } from 'constants/index';
 
 const MOUNT_NODE = document.getElementById('root');
 
 const client = new ApolloClient({
-  // uri: "https://48p1r2roz4.sse.codesandbox.io"
+  // uri: ""
+  request: operation => {
+    const token = localStorage.getItem(AUTH_TOKEN);
+    operation.setContext({
+      headers: {
+        authorization: token ? `Bearer ${token}` : '',
+      },
+    });
+  },
 });
 
 const render = () => {

package-lock.json

@@ -3330,9 +3330,6 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
-    "cu-ui": {
-      "version": "git+https://sean_macfarlane@bitbucket.org/connectustechnologies/connectus-wlan-ui-workspace.git#1956b5f3f702a67e8f503a47fe5a14af0ef2a202"
-    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",

webpack.config.js

@@ -14,6 +14,7 @@ module.exports = {
   devtool: 'inline-source-map',
   devServer: {
     port: 3000,
+    historyApiFallback: true,
   },
   module: {
     rules: [