Merge pull request #363 from bento-platform/chore/update-auth-js

refact: use bento auth JS 3.x
bento-platform · Feb 6, 2024 · 5f82cf9 · 5f82cf9
2 parents 01f21c1 + 3c0632a
commit 5f82cf9
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 69 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -23,10 +23,10 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Run Bento build action
-        uses: bento-platform/bento_build_action@v0.11.0
+        uses: bento-platform/bento_build_action@v0.11.1
         with:
           registry: ghcr.io
           registry-username: ${{ github.actor }}

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -8,15 +8,15 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Install modules
         run: npm install
       - name: Build
         run: npm run build
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Install modules
         run: npm install
       - name: Run linter

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "bento_web",
-  "version": "4.1.1",
+  "version": "4.1.2",
   "description": "Bento platform front-end",
   "main": "src/index.js",
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.7",
     "ajv": "^8.12.0",
     "ansi_up": "^6.0.2",
     "antd": "^3.26.20",
-    "bento-auth-js": "^2.4.0",
+    "bento-auth-js": "^3.2.1",
     "bento-charts": "~2.3.0",
     "cross-fetch": "^3.1.8",
     "file-saver": "^2.0.5",

diff --git a/src/components/App.js b/src/components/App.js
@@ -11,20 +11,19 @@ import {
     usePopupOpenerAuthCallback,
     useSignInPopupTokenHandoff,
     useSessionWorkerTokenRefresh,
-    useOpenIdConfig,
 } from "bento-auth-js";
 
 import * as io from "socket.io-client";
 
-import { Layout, Modal } from "antd";
+import { Layout, message, Modal } from "antd";
 
 import OwnerRoute from "./OwnerRoute";
 
 const SiteHeader = lazy(() => import("./SiteHeader"));
 import SiteFooter from "./SiteFooter";
 import SitePageLoading from "./SitePageLoading";
 
-import { AUTH_CALLBACK_URL, BENTO_URL_NO_TRAILING_SLASH, CLIENT_ID, OPENID_CONFIG_URL } from "../config";
+import { BENTO_URL_NO_TRAILING_SLASH, OPENID_CONFIG_URL } from "../config";
 import eventHandler from "../events";
 import SessionWorker from "../session.worker";
 import { nop } from "../utils/misc";
@@ -73,25 +72,22 @@ const App = () => {
 
     const isInAuthPopup = checkIsInAuthPopup(BENTO_URL_NO_TRAILING_SLASH);
 
-    const openIdConfig = useOpenIdConfig(OPENID_CONFIG_URL);
-
     // Using the fetchUserDependentData thunk creator as a hook argument may lead to unwanted triggers on re-renders.
     // So we store the thunk inner function of the fetchUserDependentData thunk creator in a const.
     const onAuthSuccess = fetchUserDependentData(nop);
 
+    const popupOpenerAuthCallback = usePopupOpenerAuthCallback();
+
     // Set up auth callback handling
     useHandleCallback(
         CALLBACK_PATH,
         onAuthSuccess,
-        CLIENT_ID,
-        AUTH_CALLBACK_URL,
         isInAuthPopup ? popupOpenerAuthCallback : undefined,
+        (msg) => message.error(msg),
     );
 
     // Set up message handling from sign-in popup
-    useSignInPopupTokenHandoff(BENTO_URL_NO_TRAILING_SLASH, AUTH_CALLBACK_URL, CLIENT_ID, windowMessageHandler);
-
-    const popupOpenerAuthCallback = usePopupOpenerAuthCallback(BENTO_URL_NO_TRAILING_SLASH);
+    useSignInPopupTokenHandoff(windowMessageHandler);
 
     const createEventRelayConnectionIfNecessary = useCallback(() => {
         if (eventRelayConnection.current) return;
@@ -184,7 +180,6 @@ const App = () => {
     }, [dispatch, createEventRelayConnectionIfNecessary, didPostLoadEffects]);
 
     useSessionWorkerTokenRefresh(
-        CLIENT_ID,
         sessionWorker,
         createSessionWorker,
         onAuthSuccess,
@@ -196,8 +191,7 @@ const App = () => {
         pingInterval.current = null;
     }, [pingInterval]);
 
-    const openSignInWindow = useOpenSignInWindowCallback(
-        signInWindow, openIdConfig, CLIENT_ID, AUTH_CALLBACK_URL, SIGN_IN_WINDOW_FEATURES);
+    const openSignInWindow = useOpenSignInWindowCallback(signInWindow, SIGN_IN_WINDOW_FEATURES);
 
     // On the cBioPortal tab only, eliminate the margin around the content
     // to give as much space as possible to the cBioPortal application itself.

diff --git a/src/components/OwnerRoute.js b/src/components/OwnerRoute.js
@@ -1,19 +1,17 @@
-import React, { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import React from "react";
+import { useSelector } from "react-redux";
 import { Route } from "react-router-dom";
 import PropTypes from "prop-types";
 import {
-    LS_BENTO_WAS_SIGNED_IN,
-    performAuth,
-    setLSNotSignedIn,
-    getIsAuthenticated,
-    signOut,
+    useAutoAuthenticate,
+    useIsAuthenticated,
+    usePerformAuth,
+    usePerformSignOut,
 } from "bento-auth-js";
 
 import { Button, Empty, Icon, Layout } from "antd";
 
 import SitePageLoading from "./SitePageLoading";
-import { AUTH_CALLBACK_URL, CLIENT_ID } from "../config";
 
 const signInIcon = (
     <div style={{ textAlign: "center" }}>
@@ -22,30 +20,11 @@ const signInIcon = (
 );
 
 const OwnerRoute = ({ component: Component, path, ...rest }) => {
-    const dispatch = useDispatch();
-
-    const [isAutoAuthenticating, setIsAutoAuthenticating] = useState(false);
-
-    const idTokenContents = useSelector((state) => state.auth.idTokenContents);
-    const isAuthenticated = getIsAuthenticated(idTokenContents);
-
-    const { data: openIdConfig, isFetching: openIdConfigFetching } = useSelector((state) => state.openIdConfiguration);
-
-    const authzEndpoint = openIdConfig?.["authorization_endpoint"];
-
-    useEffect(() => {
-        if (
-            !isAuthenticated &&
-            !isAutoAuthenticating &&
-            authzEndpoint &&
-            localStorage.getItem(LS_BENTO_WAS_SIGNED_IN) === "true"
-        ) {
-            console.debug("auto-authenticating");
-            setLSNotSignedIn();
-            setIsAutoAuthenticating(true);
-            performAuth(authzEndpoint, CLIENT_ID, AUTH_CALLBACK_URL).catch(console.error);
-        }
-    }, [authzEndpoint, isAuthenticated, isAutoAuthenticating]);
+    const { isFetching: openIdConfigFetching } = useSelector((state) => state.openIdConfiguration);
+    const { isAutoAuthenticating } = useAutoAuthenticate();
+    const isAuthenticated = useIsAuthenticated();
+    const performAuth = usePerformAuth();
+    const performSignOut = usePerformSignOut();
 
     if (openIdConfigFetching || isAutoAuthenticating) {
         return <SitePageLoading />;
@@ -64,13 +43,9 @@ const OwnerRoute = ({ component: Component, path, ...rest }) => {
                             description="You must sign into this node to access this page."
                         >
                             {isAuthenticated ? (
-                                <Button onClick={() => dispatch(signOut())}>Sign Out</Button>
+                                <Button onClick={performSignOut}>Sign Out</Button>
                             ) : (
-                                <Button
-                                    type="primary"
-                                    loading={openIdConfigFetching}
-                                    onClick={() => performAuth(authzEndpoint, CLIENT_ID, AUTH_CALLBACK_URL)}
-                                >
+                                <Button type="primary" loading={openIdConfigFetching} onClick={performAuth}>
                                     Sign In
                                 </Button>
                             )}

diff --git a/src/config.js b/src/config.js
@@ -1,6 +1,6 @@
 /* global BENTO_WEB_CONFIG:false */
 
-export const BENTO_URL = BENTO_WEB_CONFIG.BENTO_URL ?? process.env.BENTO_URL ?? null;
+export const BENTO_URL = BENTO_WEB_CONFIG.BENTO_URL ?? process.env.BENTO_URL ?? "";
 export const BENTO_PUBLIC_URL = BENTO_WEB_CONFIG.BENTO_PUBLIC_URL ?? process.env.BENTO_PUBLIC_URL ?? null;
 export const BENTO_URL_NO_TRAILING_SLASH = BENTO_URL.replace(/\/$/g, "");
 
@@ -11,9 +11,12 @@ export const BENTO_CBIOPORTAL_PUBLIC_URL = BENTO_WEB_CONFIG.BENTO_CBIOPORTAL_PUB
     process.env.BENTO_CBIOPORTAL_PUBLIC_URL ?? null;
 export const CUSTOM_HEADER = BENTO_WEB_CONFIG.CUSTOM_HEADER ?? process.env.CUSTOM_HEADER ?? null;
 
-export const CLIENT_ID = BENTO_WEB_CONFIG.CLIENT_ID ?? process.env.CLIENT_ID ?? null;
+/** @type {string} */
+export const CLIENT_ID = BENTO_WEB_CONFIG.CLIENT_ID ?? process.env.CLIENT_ID ?? "";
+
+/** @type {string} */
 export const OPENID_CONFIG_URL = BENTO_WEB_CONFIG.OPENID_CONFIG_URL
-    ?? process.env.OPENID_CONFIG_URL ?? null;
+    ?? process.env.OPENID_CONFIG_URL ?? "";
 
 export const AUTH_CALLBACK_URL = `${BENTO_URL_NO_TRAILING_SLASH}/callback`;
 export const IDP_BASE_URL = OPENID_CONFIG_URL ? (new URL(OPENID_CONFIG_URL)).origin : null;

diff --git a/src/index.js b/src/index.js
@@ -4,8 +4,11 @@ import { render } from "react-dom";
 import { Provider } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
 
+import { BentoAuthContextProvider } from "bento-auth-js";
+
 import "antd/es/message/style/css";
 
+import { AUTH_CALLBACK_URL, BENTO_URL_NO_TRAILING_SLASH, CLIENT_ID, OPENID_CONFIG_URL } from "./config";
 import App from "./components/App";
 import { store } from "./store";
 
@@ -14,7 +17,16 @@ document.addEventListener("DOMContentLoaded", () => {
     render(
         <Provider store={store}>
             <BrowserRouter>
-                <App />
+                <BentoAuthContextProvider value={{
+                    applicationUrl: BENTO_URL_NO_TRAILING_SLASH,
+                    openIdConfigUrl: OPENID_CONFIG_URL,
+                    clientId: CLIENT_ID,
+                    scope: "openid email",
+                    postSignOutUrl: `${BENTO_URL_NO_TRAILING_SLASH}/`,
+                    authCallbackUrl: AUTH_CALLBACK_URL,
+                }}>
+                    <App />
+                </BentoAuthContextProvider>
             </BrowserRouter>
         </Provider>,
         root,

diff --git a/src/store.js b/src/store.js
@@ -7,7 +7,7 @@ import { readFromLocalStorage, writeToLocalStorage } from "./utils/localStorageU
 import rootReducer from "./reducers";
 
 // The Immutability Middleware is only present in DEV builds.
-// Thes options prevent delay warnings caused by large states in DEV mode by increasing the warning delay.
+// These options prevent delay warnings caused by large states in DEV mode by increasing the warning delay.
 // See Redux Toolkit doc: https://redux-toolkit.js.org/api/getDefaultMiddleware#development
 const IMMUTABILITY_OPTIONS = {
     immutableCheck: {