Helium 6435 auth0 integration (#190)

* Adds base auth provider and removes additional redirect to login

* HELIUM-6435 Update configuration

* Added the current organization management, user retrieval, and access token verification

* Remove unnecessary console log

* Fixed redirect broken by auth0 path overwrite and fixed migrations

* Fixes relationships to not require user entry

* Refactors to use ID Token instead of Access Token and removes some log statements

* Fixes invalid associations, allows terms to be viewed while not registered, modifies data received on invitation

* Updates to allow users to accept organization invitations TODO: remove dependency on auth modules

* Remove console log

* HELIUM-6435 Addresses PR comments, corrects socket authentication, pauses rendering unallowed children

* Updates to fix broken tests due to changed authentication process

* Update to remove unused function stub added by mistake

* Updates regarding review comments, cleaned unecessary var def, reorganized router, removed unused method stub

* Update to remove unnecessary comment and move from window to push

* Removes two factor from members table information

* Update to remove repeated Auth0 jwk fetching (#185)

* Update to allow rendering children once the organizations have been fetched (#186)

* Updates to use the store instead of the localStorage for org id (#187)

* Allows users to switch organizations and join organizations initially (#188)

* Allows users to switch organizations and join organizations initially

* Removed additional imports

* Updates to allow users to read role and api keys to associate user email (#189)

* Updates to allow users to read role and api keys to associate user email

* Updates disgusting line length

* Updates to not have undefined organization

* Corrects redirect on register and removes commented out code

Author: snoretrain

assets/.babelrc

@@ -1,5 +1,15 @@
 {
-  "presets": ["env", "react"],
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "node": "10"
+        }
+      }
+    ],
+    "babel-preset-react"
+  ],
   "plugins": [
     "transform-es2015-destructuring",
     "transform-es2015-parameters",

assets/js/Router.jsx

@@ -1,28 +1,21 @@
-import React from "react"
+import React, { useEffect } from 'react'
 
 import { store, persistor, history } from './store/configureStore';
 import { PersistGate } from 'redux-persist/lib/integration/react';
 
 import { ApolloProvider } from 'react-apollo';
-import apolloClient from './util/apolloClient'
+import { setupApolloClient } from './util/apolloClient'
 
 // Routes
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
 import { Redirect } from 'react-router';
 import { Route, Switch } from 'react-router-dom';
-import PrivateRoute from './components/routes/PrivateRoute.jsx';
+import ConsoleRoute from './components/routes/ConsoleRoute.jsx';
 import PublicRoute from './components/routes/PublicRoute.jsx';
 import UserOrgProvider from './components/UserOrgProvider'
-import Login from './components/auth/Login.jsx';
-import Terms from './components/auth/Terms.jsx';
 import Register from './components/auth/Register.jsx';
-import ResendVerification from './components/auth/ResendVerification.jsx';
-import ForgotPassword from './components/auth/ForgotPassword.jsx';
-import ResetPassword from './components/auth/ResetPassword.jsx';
 import Profile from './components/profile/Profile.jsx';
-import TwoFactorPrompt from './components/auth/TwoFactorPrompt.jsx';
-import ConfirmEmailPrompt from './components/auth/ConfirmEmailPrompt.jsx';
 import DeviceIndex from './components/devices/DeviceIndex';
 import DeviceShow from './components/devices/DeviceShow';
 import ChannelIndex from './components/channels/ChannelIndex'
@@ -33,53 +26,61 @@ import OrganizationIndex from './components/organizations/OrganizationIndex'
 import LabelIndex from './components/labels/LabelIndex'
 import LabelShow from './components/labels/LabelShow'
 import DataCredits from './components/billing/DataCredits'
+import { useAuth0  } from './components/auth/Auth0Provider'
 import FunctionIndex from './components/functions/FunctionIndex';
 import FunctionNew from './components/functions/FunctionNew';
 import FunctionShow from './components/functions/FunctionShow';
 import Welcome from './components/Welcome';
 
-class Router extends React.Component {
-  render() {
-    return (
-      <Provider store={store}>
-        <PersistGate loading={null} persistor={persistor}>
+const Router = () => {
+  const { loading, isAuthenticated, loginWithRedirect, getIdTokenClaims, user } = useAuth0();
+  useEffect(() => {
+    if (loading || isAuthenticated) {
+      return;
+    }
+    const fn = async () => {
+      await loginWithRedirect({
+        appState: {targetUrl: window.location.pathname, params: window.location.search}
+      });
+    };
+    fn();
+  }, [loading, isAuthenticated, loginWithRedirect]);
+  if (loading) {
+    return <div>Loading...</div>
+  }
+  const apolloClient = setupApolloClient(getIdTokenClaims);
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <UserOrgProvider>
           <ApolloProvider client={apolloClient}>
-            <UserOrgProvider>
-              { /* ConnectedRouter will use the store from Provider automatically */ }
-              <ConnectedRouter history={history}>
-                <Switch>
-                  <Redirect exact from="/" to="/login" />
-                  <PublicRoute path="/login" component={Login}/>
-                  <PublicRoute path="/terms" component={Terms}/>
-                  <PublicRoute path="/resend_verification" component={ResendVerification}/>
-                  <PublicRoute path="/forgot_password" component={ForgotPassword}/>
-                  <PublicRoute path="/reset_password/:token" component={ResetPassword}/>
-                  <PublicRoute path="/register" component={Register}/>
-                  <PublicRoute path="/confirm_email" component={ConfirmEmailPrompt}/>
-                  <PrivateRoute path="/2fa_prompt" component={TwoFactorPrompt}/>
-                  <PrivateRoute path="/profile" component={Profile}/>
-                  <PrivateRoute exact path="/devices" component={DeviceIndex} />
-                  <PrivateRoute exact path="/labels" component={LabelIndex} />
-                  <PrivateRoute path="/devices/:id" component={DeviceShow}/>
-                  <PrivateRoute path="/labels/:id" component={LabelShow} />
-                  <PrivateRoute exact path="/integrations" component={ChannelIndex} />
-                  <PrivateRoute exact path="/integrations/new/:id?" component={ChannelNew} />
-                  <PrivateRoute exact path="/integrations/:id" component={ChannelShow} />
-                  <PrivateRoute exact path="/users" component={UserIndex} />
-                  <PrivateRoute exact path="/organizations" component={OrganizationIndex} />
-                  <PrivateRoute exact path="/datacredits" component={DataCredits} />
-                  <PrivateRoute exact path="/functions" component={FunctionIndex} />
-                  <PrivateRoute exact path="/functions/new" component={FunctionNew} />
-                  <PrivateRoute exact path="/functions/:id" component={FunctionShow} />
-                  <PrivateRoute exact path="/welcome" component={Welcome} />
-                </Switch>
-              </ConnectedRouter>
-            </UserOrgProvider>
+            { /* ConnectedRouter will use the store from Provider automatically */ }
+            <ConnectedRouter history={history}>
+              <Switch>
+                <Redirect exact from="/" to="/devices" />
+                <PublicRoute path="/register" component={Register}/>
+                <ConsoleRoute path="/profile" component={Profile} user={user}/>
+                <ConsoleRoute exact path="/devices" component={DeviceIndex} />
+                <ConsoleRoute exact path="/labels" component={LabelIndex} />
+                <ConsoleRoute path="/devices/:id" component={DeviceShow}/>
+                <ConsoleRoute path="/labels/:id" component={LabelShow} />
+                <ConsoleRoute exact path="/integrations" component={ChannelIndex} />
+                <ConsoleRoute exact path="/integrations/new/:id?" component={ChannelNew} />
+                <ConsoleRoute exact path="/integrations/:id" component={ChannelShow} />
+                <ConsoleRoute exact path="/users" component={UserIndex} user={user}/>
+                <ConsoleRoute exact path="/organizations" component={OrganizationIndex} />
+                <ConsoleRoute exact path="/datacredits" component={DataCredits} />
+                <ConsoleRoute exact path="/functions" component={FunctionIndex} />
+                <ConsoleRoute exact path="/functions/new" component={FunctionNew} />
+                <ConsoleRoute exact path="/functions/:id" component={FunctionShow} />
+                <ConsoleRoute exact path="/welcome" component={Welcome} />
+              </Switch>
+            </ConnectedRouter>
           </ApolloProvider>
-        </PersistGate>
-      </Provider>
-    )
-  }
+        </UserOrgProvider>
+      </PersistGate>
+    </Provider>
+  )
 }
 
-export default Router
+export default Router;

assets/js/actions/organization.js

@@ -1,12 +1,47 @@
 import { push } from 'connected-react-router';
 import sanitizeHtml from 'sanitize-html'
 import * as rest from '../util/rest';
-import { getOrganizationId, getOrganizationName } from '../util/jwt';
-import { logIn } from './auth'
 
-export const FETCH_ORGANIZATIONS = 'FETCH_ORGANIZATIONS'
+export const FETCHED_ORGANIZATION = 'FETCHED_ORGANIZATIONS'
+export const FETCHING_ORGANIZATION = 'FETCHING_ORGANIZATION'
 export const SWITCHED_ORGANIZATION = 'SWITCHED_ORGANIZATION'
 
+export const fetchOrganization = () => {
+  return async (dispatch) => {
+    dispatch(fetchingOrganization());
+    let organization;
+    try {
+      organization = JSON.parse(localStorage.getItem('organization'));
+    } catch (e) {
+      organization = null;
+    }
+    if (!organization) {
+      // get a new organization id
+      const organizations = await getOrganizations();
+      if (organizations && organizations.length) {
+        localStorage.setItem('organization', JSON.stringify({ id: organizations[0].id }));
+        return dispatch(fetchedOrganization(organizations[0]));
+      }
+    } else {
+      // validate or replace organization id
+      const fetchedOrganizations = await getOrganizations();
+      const org = fetchedOrganizations.find(
+        org => org.id === organization.id
+      );
+      if (org) {
+        return dispatch(fetchedOrganization(org));
+      } else if (fetchedOrganizations.length) {
+        localStorage.setItem(
+          'organization', 
+          JSON.stringify({ id: fetchedOrganizations[0].id })
+        );
+        return dispatch(fetchedOrganization(fetchedOrganizations[0]));
+      }
+    }
+    return dispatch(fetchedOrganization({ id: null, name: "", role: "" }));
+  }
+}
+
 export const createOrganization = (name, noOtherOrg = false) => {
   return (dispatch) => {
     rest.post('/api/organizations', {
@@ -16,19 +51,29 @@ export const createOrganization = (name, noOtherOrg = false) => {
       })
       .then(response => {
         if (noOtherOrg) {
-          dispatch(logIn(response.data.jwt))
-          window.location.reload(true)
+          dispatch(fetchedOrganization(response));
+          window.location.reload(true);
         }
       })
   }
 }
 
-export const switchOrganization = (id) => {
+export const switchOrganization = (organization) => {
   return (dispatch) => {
-    rest.post(`/api/organizations/${id}/switch`)
+    localStorage.setItem('organization', JSON.stringify(organization));
+    dispatch(switchedOrganization(organization));
+    window.location.reload(true);
+  }
+}
+
+export const joinOrganization = (token) => {
+  let params = { invitation: { token } }
+  return async dispatch => {
+    rest.post('/api/users', params)
       .then(response => {
-        dispatch(switchedOrganization(response.data.jwt))
-        window.location.reload(true)
+        dispatch(fetchedOrganization(response.data[0]));
+        localStorage.setItem('organization', JSON.stringify(response.data[0]));
+        push('/devices');
       })
   }
 }
@@ -40,11 +85,30 @@ export const deleteOrganization = (id) => {
   }
 }
 
-export const switchedOrganization = (apikey) => {
+export const fetchingOrganization = () => {
+  return {
+    type: FETCHING_ORGANIZATION
+  }
+}
+
+export const fetchedOrganization = (organization) => {
+  return {
+    type: FETCHED_ORGANIZATION,
+    currentOrganizationId: organization.id,
+    currentOrganizationName: organization.name,
+    currentRole: organization.role
+  }
+}
+
+export const switchedOrganization = (organization) => {
   return {
     type: SWITCHED_ORGANIZATION,
-    apikey,
-    currentOrganizationId: getOrganizationId(apikey),
-    currentOrganizationName: getOrganizationName(apikey)
+    currentOrganizationId: organization.id,
+    currentOrganizationName: organization.name
   }
 }
+
+const getOrganizations = async () => {
+  const organizations = await rest.get('/api/organizations/');
+  return organizations.data;
+}

assets/js/app.js

@@ -20,11 +20,40 @@ import "phoenix_html"
 
 // import socket from "./socket"
 
-import React from "react"
-import ReactDOM from "react-dom"
-import App from "./App.jsx"
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';
+import App from './App.jsx'
+import { Auth0Provider } from './components/auth/Auth0Provider'
+import Terms from './components/auth/Terms'
+import { history } from './store/configureStore'
+import { config } from './config/auth0'
+
+const onRedirectCallback = appState => {
+  // This uses replace instead of push because the Auth0 SDK
+  // will overwrite the history with it's own special route otherwise
+  history.replace(
+    appState && appState.targetUrl
+      ? appState.targetUrl + appState.params
+      : window.location.pathname
+  )
+}
 
 ReactDOM.render(
-  <App/>,
+  <Router history={history}>
+    <Switch>
+      <Route exact path="/terms"><Terms/></Route>
+      <Route>
+        <Auth0Provider
+          domain={config.domain}
+          client_id={config.clientId}
+          redirect_uri={window.location.origin}
+          onRedirectCallback={onRedirectCallback}
+        >
+          <App/>
+        </Auth0Provider>
+      </Route>
+    </Switch>
+  </Router>,
   document.getElementById("react-root")
 )

assets/js/components/UserOrgProvider.jsx

@@ -1,47 +1,37 @@
-import React, { Component } from 'react';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import { isJwtExpired } from '../util/jwt.js'
+import React, { useEffect } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { useLocation } from 'react-router-dom'
 import { fetchIndices } from '../actions/main'
+import { fetchOrganization } from '../actions/organization'
 
-@connect(mapStateToProps, mapDispatchToProps)
-class UserOrgProvider extends Component {
-  componentDidMount() {
-    if (this.props.isLoggedIn && this.props.currentOrganizationId) {
-      this.props.fetchIndices()
-    }
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const { isLoggedIn, currentOrganizationId, apikey, fetchIndices } = this.props
-
-    // if the user has just logged in...
-    if (!prevProps.isLoggedIn && isLoggedIn && currentOrganizationId) {
-      return fetchIndices()
-    }
-  }
-
-  render() {
+const UserOrgProvider = (props) => {
+  useEffect(() => {
+    props.fetchOrganization();
+  }, []);
+  const location = useLocation();
+  const { loadingOrganization } = props;
+  if (location.pathname == '/register' || !loadingOrganization) {
     return (
       <div>
-        {this.props.children}
+        { props.children }
       </div>
     )
   }
+  return null;
 }
 
 function mapStateToProps(state, ownProps) {
   return {
-    isLoggedIn: state.auth.isLoggedIn,
-    apikey: state.auth.apikey,
-    currentOrganizationId: state.auth.currentOrganizationId
+    loadingOrganization: state.organization.loadingOrganization
   }
 }
 
 function mapDispatchToProps(dispatch) {
   return bindActionCreators({
     fetchIndices,
+    fetchOrganization
   }, dispatch);
 }
 
-export default UserOrgProvider
+export default connect(mapStateToProps, mapDispatchToProps)(UserOrgProvider)