feat: add user authentication, actions linked to userId

Author: pyphilia

public/app/config/channels.js

@@ -42,4 +42,7 @@ module.exports = {
   SHOW_CLEAR_USER_INPUT_PROMPT_CHANNEL: 'prompt:space:clear:show',
   RESPOND_CLEAR_USER_INPUT_PROMPT_CHANNEL: 'prompt:space:clear:respond',
   POST_ACTION_CHANNEL: 'action:post',
+  SIGN_IN_CHANNEL: 'auth:signin',
+  SIGN_OUT_CHANNEL: 'auth:signout',
+  IS_AUTHENTICATED_CHANNEL: 'auth:authenticated:get',
 };

public/app/config/config.js

@@ -46,6 +46,7 @@ const DEFAULT_DEVELOPER_MODE = false;
 const DEFAULT_GEOLOCATION_ENABLED = false;
 const DEFAULT_PROTOCOL = 'https';
 const DEFAULT_LOGGING_LEVEL = 'info';
+const DEFAULT_AUTHENTICATED = false;
 
 module.exports = {
   DEFAULT_LOGGING_LEVEL,
@@ -62,4 +63,5 @@ module.exports = {
   ICON_PATH,
   PRODUCT_NAME,
   escapeEscapeCharacter,
+  DEFAULT_AUTHENTICATED,
 };

public/app/config/messages.js

@@ -50,6 +50,9 @@ const SUCCESS_CLEARING_USER_INPUT_MESSAGE =
 const CONNECTION_MESSAGE_HEADER = 'Connection Status';
 const CONNECTION_OFFLINE_MESSAGE = 'You are offline.';
 const CONNECTION_ONLINE_MESSAGE = 'You are online.';
+const ERROR_SIGNING_IN = 'There was an error logging in the user';
+const ERROR_SIGNING_OUT = 'There was an error logging out the user';
+const ERROR_GETTING_AUTHENTICATED = 'There was an error getting authenticated';
 
 module.exports = {
   ERROR_GETTING_DEVELOPER_MODE,
@@ -89,4 +92,7 @@ module.exports = {
   CONNECTION_MESSAGE_HEADER,
   CONNECTION_OFFLINE_MESSAGE,
   CONNECTION_ONLINE_MESSAGE,
+  ERROR_SIGNING_IN,
+  ERROR_SIGNING_OUT,
+  ERROR_GETTING_AUTHENTICATED,
 };

public/app/db.js

@@ -10,6 +10,7 @@ const fsPromises = fs.promises;
 
 const SPACES_COLLECTION = 'spaces';
 const ACTIONS_COLLECTION = 'actions';
+const USERS_COLLECTION = 'users';
 
 // bootstrap database
 const ensureDatabaseExists = async (dbPath = DATABASE_PATH) => {
@@ -33,6 +34,7 @@ const bootstrapDatabase = (dbPath = DATABASE_PATH) => {
   // set some defaults (required if json file is empty)
   db.defaults({
     [SPACES_COLLECTION]: [],
+    [USERS_COLLECTION]: [],
     user: { lang: DEFAULT_LANG },
     [ACTIONS_COLLECTION]: [],
   }).write();
@@ -41,6 +43,7 @@ const bootstrapDatabase = (dbPath = DATABASE_PATH) => {
 
 module.exports = {
   SPACES_COLLECTION,
+  USERS_COLLECTION,
   ensureDatabaseExists,
   bootstrapDatabase,
 };

public/app/listeners/index.js

@@ -19,6 +19,9 @@ const setDeveloperMode = require('./setDeveloperMode');
 const clearUserInput = require('./clearUserInput');
 const showClearUserInputPrompt = require('./showClearUserInputPrompt');
 const postAction = require('./postAction');
+const signIn = require('./signIn');
+const signOut = require('./signOut');
+const isAuthenticated = require('./isAuthenticated');
 
 module.exports = {
   loadSpace,
@@ -42,4 +45,7 @@ module.exports = {
   clearUserInput,
   showClearUserInputPrompt,
   postAction,
+  signIn,
+  signOut,
+  isAuthenticated,
 };

public/app/listeners/isAuthenticated.js

@@ -0,0 +1,17 @@
+const { IS_AUTHENTICATED_CHANNEL } = require('../config/channels');
+const logger = require('../logger');
+const { ERROR_GENERAL } = require('../config/errors');
+const { DEFAULT_AUTHENTICATED } = require('../config/config');
+
+const isAuthenticated = (mainWindow, db) => async () => {
+  try {
+    const authenticated =
+      db.get('user.authenticated').value() || DEFAULT_AUTHENTICATED;
+    mainWindow.webContents.send(IS_AUTHENTICATED_CHANNEL, authenticated);
+  } catch (e) {
+    logger.error(e);
+    mainWindow.webContents.send(IS_AUTHENTICATED_CHANNEL, ERROR_GENERAL);
+  }
+};
+
+module.exports = isAuthenticated;

public/app/listeners/signIn.js

@@ -0,0 +1,25 @@
+const ObjectId = require('bson-objectid');
+const { USERS_COLLECTION } = require('../db');
+const { SIGN_IN_CHANNEL } = require('../config/channels');
+
+const DEFAULT_USER = {};
+
+const signIn = (mainWindow, db) => async (event, { username, password }) => {
+  const users = db.get(USERS_COLLECTION);
+
+  // @TODO hash password and check password validity
+
+  // check in db if username exists
+  const user = users.find({ username }).value();
+  if (user) {
+    mainWindow.webContents.send(SIGN_IN_CHANNEL, user);
+  } else {
+    const userId = ObjectId().str;
+    // assignment inside function to avoid sharing the same array among users
+    const newUser = { userId, username, password, ...DEFAULT_USER };
+    users.push(newUser).write();
+    mainWindow.webContents.send(SIGN_IN_CHANNEL, newUser);
+  }
+};
+
+module.exports = signIn;

public/app/listeners/signOut.js

@@ -0,0 +1,20 @@
+const { SIGN_OUT_CHANNEL } = require('../config/channels');
+const { ERROR_GENERAL } = require('../config/errors');
+const logger = require('../logger');
+
+const signOut = mainWindow => async () => {
+  try {
+    // clear cookies
+    // session.defaultSession.clearStorageData(
+    //   { options: { storages: ['cookies'] } },
+    //   () => {}
+    //   );
+
+    mainWindow.webContents.send(SIGN_OUT_CHANNEL);
+  } catch (e) {
+    logger.error(e);
+    mainWindow.webContents.send(SIGN_OUT_CHANNEL, ERROR_GENERAL);
+  }
+};
+
+module.exports = signOut;

public/electron.js

@@ -5,6 +5,7 @@ const {
   ipcMain,
   Menu,
   dialog,
+  session,
   // eslint-disable-next-line import/no-extraneous-dependencies
 } = require('electron');
 const path = require('path');
@@ -51,6 +52,9 @@ const {
   CLEAR_USER_INPUT_CHANNEL,
   SHOW_CLEAR_USER_INPUT_PROMPT_CHANNEL,
   POST_ACTION_CHANNEL,
+  SIGN_IN_CHANNEL,
+  SIGN_OUT_CHANNEL,
+  IS_AUTHENTICATED_CHANNEL,
 } = require('./app/config/channels');
 const env = require('./env.json');
 const {
@@ -75,6 +79,9 @@ const {
   clearUserInput,
   showClearUserInputPrompt,
   postAction,
+  signIn,
+  signOut,
+  isAuthenticated,
 } = require('./app/listeners');
 const isMac = require('./app/utils/isMac');
 
@@ -397,6 +404,14 @@ app.on('ready', async () => {
 
   // called when creating an action
   ipcMain.on(POST_ACTION_CHANNEL, postAction(mainWindow, db));
+  // called when logging in a user
+  ipcMain.on(SIGN_IN_CHANNEL, signIn(mainWindow, db));
+
+  // called when logging out a user
+  ipcMain.on(SIGN_OUT_CHANNEL, signOut(mainWindow, session));
+
+  // called when getting authenticated
+  ipcMain.on(IS_AUTHENTICATED_CHANNEL, isAuthenticated(mainWindow, db));
 
   // called when getting AppInstanceResources
   ipcMain.on(GET_APP_INSTANCE_RESOURCES_CHANNEL, (event, data = {}) => {

src/App.js

@@ -18,6 +18,8 @@ import SpaceScreen from './components/space/SpaceScreen';
 import DeveloperScreen from './components/developer/DeveloperScreen';
 import { OnlineTheme, OfflineTheme } from './themes';
 import Dashboard from './components/dashboard/Dashboard';
+import LoginScreen from './components/login/LoginScreen';
+import Authorization from './components/Authorization';
 import {
   SETTINGS_PATH,
   SPACE_PATH,
@@ -27,14 +29,15 @@ import {
   LOAD_SPACE_PATH,
   DEVELOPER_PATH,
   DASHBOARD_PATH,
+  LOGIN_PATH,
 } from './config/paths';
 import {
   getGeolocation,
   getUserFolder,
   getLanguage,
   getDeveloperMode,
   getGeolocationEnabled,
-} from './actions/user';
+} from './actions';
 import { DEFAULT_LANGUAGE } from './config/constants';
 import {
   CONNECTION_MESSAGE_HEADER,
@@ -146,22 +149,40 @@ export class App extends Component {
             <Router>
               <div className="app" style={{ height }}>
                 <Switch>
-                  <Route exact path={HOME_PATH} component={Home} />
+                  <Route exact path={LOGIN_PATH} component={LoginScreen} />
+                  <Route
+                    exact
+                    path={HOME_PATH}
+                    component={Authorization()(Home)}
+                  />
                   <Route
                     exact
                     path={SPACES_NEARBY_PATH}
-                    component={SpacesNearby}
+                    component={Authorization()(SpacesNearby)}
+                  />
+                  <Route
+                    exact
+                    path={VISIT_PATH}
+                    component={Authorization()(VisitSpace)}
+                  />
+                  <Route
+                    exact
+                    path={LOAD_SPACE_PATH}
+                    component={Authorization()(LoadSpace)}
                   />
-                  <Route exact path={VISIT_PATH} component={VisitSpace} />
-                  <Route exact path={LOAD_SPACE_PATH} component={LoadSpace} />
                   <Route exact path={SETTINGS_PATH} component={Settings} />
-                  <Route exact path={SPACE_PATH} component={SpaceScreen} />
+                  <Route
+                    exact
+                    path={SPACE_PATH}
+                    component={Authorization()(SpaceScreen)}
+                  />
+                  <Route exact path={DASHBOARD_PATH} component={Dashboard} />
                   <Route
                     exact
                     path={DEVELOPER_PATH}
                     component={DeveloperScreen}
                   />
-                  <Route exact path={DASHBOARD_PATH} component={Dashboard} />
+                  <Route exact path={LOGIN_PATH} component={LoginScreen} />
                 </Switch>
               </div>
             </Router>

src/actions/authentication.js

@@ -0,0 +1,107 @@
+import { toastr } from 'react-redux-toastr';
+import {
+  FLAG_SIGNING_IN,
+  FLAG_SIGNING_OUT,
+  FLAG_GETTING_AUTHENTICATED,
+  SIGN_IN_SUCCEEDED,
+  SIGN_OUT_SUCCEEDED,
+  IS_AUTHENTICATED_SUCCEEDED,
+} from '../types';
+import {
+  ERROR_SIGNING_IN,
+  ERROR_MESSAGE_HEADER,
+  ERROR_SIGNING_OUT,
+  ERROR_GETTING_AUTHENTICATED,
+} from '../config/messages';
+import {
+  SIGN_IN_CHANNEL,
+  SIGN_OUT_CHANNEL,
+  IS_AUTHENTICATED_CHANNEL,
+} from '../config/channels';
+import { createFlag } from './common';
+import { ERROR_GENERAL } from '../config/errors';
+
+const flagSigningInUser = createFlag(FLAG_SIGNING_IN);
+const flagSigningOutUser = createFlag(FLAG_SIGNING_OUT);
+const flagGettingAuthenticated = createFlag(FLAG_GETTING_AUTHENTICATED);
+
+const signIn = async ({ username, password }) => async dispatch => {
+  try {
+    dispatch(flagSigningInUser(true));
+    window.ipcRenderer.send(SIGN_IN_CHANNEL, { username, password });
+    window.ipcRenderer.once(SIGN_IN_CHANNEL, async (event, user) => {
+      if (user === ERROR_GENERAL) {
+        toastr.error(ERROR_MESSAGE_HEADER, ERROR_SIGNING_IN);
+      } else {
+        // obtain user cookie
+        // await fetch(REACT_APP_GRAASP_LOGIN, {
+        //   body: `email=${encodeURIComponent(
+        //     user.username
+        //   )}&password=${encodeURIComponent(user.password)}`,
+        //   headers: {
+        //     'Content-Type': 'application/x-www-form-urlencoded',
+        //   },
+        //   method: 'post',
+        // });
+
+        dispatch({
+          type: SIGN_IN_SUCCEEDED,
+          payload: user,
+        });
+      }
+      dispatch(flagSigningInUser(false));
+    });
+  } catch (e) {
+    toastr.error(ERROR_MESSAGE_HEADER, ERROR_SIGNING_IN);
+    dispatch(flagSigningInUser(false));
+  }
+};
+
+const signOutUser = () => dispatch => {
+  try {
+    dispatch(flagSigningOutUser(true));
+    window.ipcRenderer.send(SIGN_OUT_CHANNEL);
+    window.ipcRenderer.once(SIGN_OUT_CHANNEL, (event, response) => {
+      if (response === ERROR_GENERAL) {
+        toastr.error(ERROR_MESSAGE_HEADER, ERROR_SIGNING_OUT);
+      } else {
+        dispatch({
+          type: SIGN_OUT_SUCCEEDED,
+          payload: response,
+        });
+      }
+      dispatch(flagSigningOutUser(false));
+    });
+  } catch (e) {
+    console.error(e);
+    toastr.error(ERROR_MESSAGE_HEADER, ERROR_SIGNING_OUT);
+    dispatch(flagSigningOutUser(false));
+  }
+};
+
+const isAuthenticated = async () => dispatch => {
+  try {
+    dispatch(flagGettingAuthenticated(true));
+    window.ipcRenderer.send(IS_AUTHENTICATED_CHANNEL);
+    window.ipcRenderer.once(
+      IS_AUTHENTICATED_CHANNEL,
+      (event, authenticated) => {
+        if (authenticated === ERROR_GENERAL) {
+          toastr.error(ERROR_MESSAGE_HEADER, ERROR_GETTING_AUTHENTICATED);
+        } else {
+          dispatch({
+            type: IS_AUTHENTICATED_SUCCEEDED,
+            payload: authenticated,
+          });
+        }
+        dispatch(flagGettingAuthenticated(false));
+      }
+    );
+  } catch (e) {
+    console.error(e);
+    toastr.error(ERROR_MESSAGE_HEADER, ERROR_GETTING_AUTHENTICATED);
+    dispatch(flagGettingAuthenticated(false));
+  }
+};
+
+export { signIn, signOutUser, isAuthenticated };

src/actions/index.js

@@ -6,3 +6,4 @@ export * from './appInstance';
 export * from './developer';
 export * from './layout';
 export * from './action';
+export * from './authentication';