Merge pull request #41 from magopian/3-implement-auth0

Add auth0 login

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "antd": "^3.2.1",
+    "auth0-js": "^9.4.2",
     "autobind-decorator": "^2.1.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "es6-promise": "^4.2.4",

src/console/App.js

@@ -4,46 +4,79 @@ import React, { Component } from 'react';
 
 import 'console/App.less';
 
-import LoginPage from './LoginPage';
 import Normandy from 'normandy/App';
 import { BrowserRouter, NavLink, Link } from 'react-router-dom';
+
 import { Route, Redirect, Switch } from 'react-router';
+import {
+  checkLogin,
+  fetchUserInfo,
+  isAuthenticated,
+  login,
+  logout,
+} from './auth0Utils';
 
-import { Alert, Layout } from 'antd';
+import { Button, Layout } from 'antd';
 const { Header, Content } = Layout;
 
 const Homepage = props => (
   <div>
-    <h3>Welcome {props.authToken ? 'back' : 'home'}!</h3>
-    {props.authToken ? (
+    <h3>Welcome {props.userInfo ? 'back' : 'home'}!</h3>
+    {props.userInfo ? (
       <p>
         Go to the <Link to="/shield">SHIELD control panel</Link>.
       </p>
     ) : (
-      <p>
-        You are not logged in! Go to the <Link to="/login">login page</Link>.
-      </p>
+      <p>You are not logged in! Please use the login button in the header.</p>
     )}
   </div>
 );
 
 type AppProps = {};
+type UserInfo = {
+  family_name: string,
+  given_name: string,
+  locale: string,
+  name: string,
+  nickname: string,
+  picture: string,
+  sub: string,
+  updated_at: string,
+};
 type AppState = {
-  authToken: ?string,
-  username: ?string,
+  userInfo: ?UserInfo,
+  accessToken: ?string,
 };
 
 class App extends Component<AppProps, AppState> {
   state = {
-    authToken: null,
-    username: null,
+    userInfo: null,
+    accessToken: null,
+  };
+
+  componentDidMount = () => {
+    checkLogin(this.onLoggedIn);
+    if (isAuthenticated()) {
+      this.onLoggedIn();
+    }
+  };
+
+  onUserLogin = () => {
+    // Call auth0.login which will start the login redirection dance.
+    login();
+  };
+
+  onLoggedIn = () => {
+    fetchUserInfo(this.onUserInfo);
+  };
+
+  onUserInfo = (accessToken: string, userInfo: UserInfo) => {
+    this.setState({ userInfo, accessToken });
   };
 
-  onUserLogin = (username: string, authToken: string) => {
-    this.setState({
-      username,
-      authToken,
-    });
+  onUserLogout = () => {
+    logout();
+    this.setState({ userInfo: null, accessToken: null });
   };
 
   render() {
@@ -56,52 +89,35 @@ class App extends Component<AppProps, AppState> {
             <NavLink exact to="/">
               Home
             </NavLink>
-            <NavLink to="/login">Login</NavLink>
             <NavLink to="/shield">SHIELD</NavLink>
 
-            {this.state.username && (
-              <Alert
-                style={{ marginLeft: '3em' }}
-                type="info"
-                showIcon
-                message={`You are logged in as ${this.state.username}.`}
-              />
-            )}
+            {(this.state.userInfo && (
+              <Button onClick={this.onUserLogout}>{`Logged in as ${
+                this.state.userInfo.nickname
+              }`}</Button>
+            )) || <Button onClick={this.onUserLogin}>Login</Button>}
           </Header>
           <Content className="app-content">
             <Switch>
               {/* Homepage */}
               <Route
                 exact
                 path="/"
-                component={() => <Homepage authToken={this.state.authToken} />}
-              />
-
-              {/* Login */}
-              <Route
-                exact
-                path="/login/"
-                component={() =>
-                  this.state.username ? (
-                    <Redirect to="/" />
-                  ) : (
-                    <LoginPage onAuth={this.onUserLogin} />
-                  )
-                }
+                component={() => <Homepage userInfo={this.state.userInfo} />}
               />
 
               {/* Normandy App */}
               <Route
                 path="/shield"
                 component={props =>
-                  this.state.username ? (
+                  this.state.userInfo ? (
                     <Normandy
-                      authToken={this.state.authToken}
+                      authToken={this.state.accessToken}
                       urlPrefix="/shield"
                       {...props}
                     />
                   ) : (
-                    <Redirect to="/login/?next=/shield" />
+                    <Redirect to="/" />
                   )
                 }
               />

src/console/App.test.js

@@ -3,6 +3,36 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import { shallow } from 'enzyme';
 
+// Mock the localStorage API.
+global.localStorage = (function() {
+  var store = {};
+
+  return {
+    getItem: function(key) {
+      return store[key] || null;
+    },
+    removeItem: function(key) {
+      delete store[key];
+    },
+    setItem: function(key, value) {
+      store[key] = value.toString();
+    },
+    clear: function() {
+      store = {};
+    },
+  };
+})();
+
+const webAuthMock = {
+  authorize: jest.fn(),
+  parseHash: jest.fn(),
+  client: { userInfo: jest.fn() },
+};
+
+global.auth0 = {
+  WebAuth: jest.fn(() => webAuthMock),
+};
+
 describe('delivery-console', () => {
   it('renders without crashing', () => {
     const wrapper = () => shallow(<App />);