[mlx-ui] Add an ENV var to disable login (#87)

Use an Env var to control if login mechanism is needed
or not. When the login is off, all requests are treated
as admin.

Signed-off-by: Yihong Wang <[email protected]>

dashboard/origin-mlx/README.md

@@ -78,6 +78,7 @@ There are a few environment variables that can be defined that dictate how MLX i
 * REACT_APP_BASE_PATH - A basepath can be configured that appends to the end of the address (ex.
   http://<ip_address>:<port>/<basepath>)
 * REACT_APP_BRAND - The brand name to use on the website
+* REACT_APP_DISABLE_LOGIN - A switch to turn off login mechanism
 
 # Project Overview:
 

dashboard/origin-mlx/package.json

@@ -39,7 +39,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "start-dev": "HTTPS=false REACT_APP_BRAND=<BRAND> REACT_APP_API=<MLX API> REACT_APP_KFP=<KFP> REACT_APP_NBVIEWER_API=<Notebook Viewer API> react-scripts start",
+    "start-dev": "HTTPS=false REACT_APP_BRAND=<BRAND> REACT_APP_API=<MLX API> REACT_APP_KFP=<KFP> REACT_APP_NBVIEWER_API=<Notebook Viewer API> REACT_APP_DISABLE_LOGIN=<true|false> react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

dashboard/origin-mlx/server/server.ts

@@ -17,7 +17,7 @@ import * as fileStore from 'session-file-store';
 import * as passport from "passport";
 import * as cookieParser from "cookie-parser";
 import { BasicStrategy } from "passport-http";
-import { loadUsers } from "./users";
+import { loadUsers, DEFAULT_ADMIN_EMAIL } from "./users";
 import { Application, static as StaticHandler } from 'express';
 import * as fs from 'fs';
 import { randomBytes } from 'crypto';
@@ -30,6 +30,7 @@ const {
   REACT_APP_BASE_PATH     = '',
   SESSION_SECRET          = randomBytes(64).toString('hex'),
   KUBEFLOW_USERID_HEADER  = 'kubeflow-userid',
+  REACT_APP_DISABLE_LOGIN = 'false',
 } = process.env;
 
 const app = express() as Application;
@@ -42,27 +43,33 @@ const port = process.argv[3] || 3000;
 
 const apiServerAddress = `http://${MLX_API_ENDPOINT}`;
 
+const disableLogin = REACT_APP_DISABLE_LOGIN === 'true';
+
 type User = {
   username: string;
   email: string;
   roles: string[];
 };
 
-// enable session
-initLogin(app);
+const proxyCheckingMiddleware = [];
+// enable login and permission check
+if (!disableLogin) {
+  initLogin(app);
+  proxyCheckingMiddleware.push(checkPermissionMiddleware);
+}
 
 if (REACT_APP_BASE_PATH.length !== 0) {
-  app.all('/' + apiPrefix + '/*', checkPermissionMiddleware, proxy({
+  app.all('/' + apiPrefix + '/*', [...proxyCheckingMiddleware, proxy({
     changeOrigin: true,
     onProxyReq: proxyReq => {
       console.log('Proxied request: ', (proxyReq as any).path);
     },
     target: apiServerAddress,
-  }));
+  })]);
 }
 
 app.all(REACT_APP_BASE_PATH  + '/' + apiPrefix + '/*',
-    checkPermissionMiddleware, proxy({
+    [...proxyCheckingMiddleware, proxy({
 
   changeOrigin: true,
   onProxyReq: proxyReq => {
@@ -71,9 +78,9 @@ app.all(REACT_APP_BASE_PATH  + '/' + apiPrefix + '/*',
   pathRewrite: (path) =>
     path.startsWith(REACT_APP_BASE_PATH) ? path.substr(REACT_APP_BASE_PATH.length, path.length) : path,
   target: apiServerAddress,
-}));
+})]);
 
-app.all('/session-validation*', sessionValidator);
+app.all('/session-validation*', getSessionValidator(!disableLogin));
 
 const staticHandler = StaticHandler(staticDir, {redirect: false})
 
@@ -169,6 +176,26 @@ function initLogin(app: express.Application) {
   );
 }
 
+/**
+ * get session validator based on `login` flag
+ */
+function getSessionValidator(login: boolean) :
+    (req: express.Request, res: express.Response) => void {
+
+  if (login) {
+    return sessionValidator;
+  } else {
+    /*
+     when login is disabled, all requests are treated as admin
+     */
+    return (req: express.Request, res: express.Response) => {
+      res.setHeader(KUBEFLOW_USERID_HEADER, DEFAULT_ADMIN_EMAIL);
+      res.status(200);
+      res.send();
+    }
+  }
+}
+
 /**
  * Validate the request to see if the request contains a valid user information.
  * This is used as a ext authz for the custom action of istio authorizationpolicy

dashboard/origin-mlx/server/users.ts

@@ -30,12 +30,13 @@ type UserInfo = {
 };
 
 const DEFAULT_USER_CONFIG = '/workspace/models/admin.json';
+export const DEFAULT_ADMIN_EMAIL = '[email protected]';
 
 export function loadUsers(): Users {
     if (existsSync(DEFAULT_USER_CONFIG)) {
         return require(DEFAULT_USER_CONFIG);
     }
     // return default settings if config file doesn't exist
-    return {"admin": {"password": "passw0rd", "email": "[email protected]", "roles": ["admin"]}};
+    return {"admin": {"password": "passw0rd", "email": DEFAULT_ADMIN_EMAIL, "roles": ["admin"]}};
 }
 

dashboard/origin-mlx/src/lib/util.ts

@@ -15,18 +15,19 @@
 */ 
 import Cookies from 'js-cookie';
 
+const disableLogin = process.env.REACT_APP_DISABLE_LOGIN === 'true';
+
 type UserInfo = {
   username: string;
   roles: string[];
 }
 
 const DEFAULT_USERINFO = {
   username: 'user',
-  roles: ['user']
+  roles: [disableLogin ? 'admin' : 'user']
 };
 
 let gUserInfo: UserInfo;
-
 export function getUserInfo(): UserInfo {
   return gUserInfo || (() => {
     const userinfo = Cookies.get('userinfo');

manifests/base/mlx-ui.yaml

@@ -62,6 +62,8 @@ spec:
           value: "true"
         - name: REACT_APP_BASE_PATH
           value: /mlx
+        - name: REACT_APP_DISABLE_LOGIN
+          value: "false"
         - name: KUBEFLOW_USERID_HEADER
           value: kubeflow-userid
         - name: SESSION_SECRET