From 86449ef04a8b85b6b5cf9cf43352117b76af6325 Mon Sep 17 00:00:00 2001 From: David Lougheed Date: Tue, 6 Feb 2024 13:10:09 -0500 Subject: [PATCH 1/8] refact: use bento auth JS 3.x --- package-lock.json | 9 ++++----- package.json | 2 +- src/components/App.js | 20 +++++++----------- src/components/OwnerRoute.js | 39 +++++++++--------------------------- src/config.js | 9 ++++++--- src/index.js | 14 ++++++++++++- src/store.js | 2 +- 7 files changed, 42 insertions(+), 53 deletions(-) diff --git a/package-lock.json b/package-lock.json index aa63b08eb..009a07db9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,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.0", "bento-charts": "~2.3.0", "cross-fetch": "^3.1.8", "file-saver": "^2.0.5", @@ -3408,15 +3408,14 @@ "dev": true }, "node_modules/bento-auth-js": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/bento-auth-js/-/bento-auth-js-2.4.0.tgz", - "integrity": "sha512-A7R/3zfIoPT1xcNRgY1IlumyviZyxb88svqEq3Nv0wu4deXY2EMRFAbHiNSGL6u7kJZpKUOV8XOSnSDQabyZ8w==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/bento-auth-js/-/bento-auth-js-3.2.0.tgz", + "integrity": "sha512-CBhz2DTDRpemFcI11BuaxtA/slgw+pJmnAtWpNIBdFpsIlQj0PJ8qPwri/crcOF2KYUladxnOP1Gyg/tJt6WCw==", "dependencies": { "jose": "^4.14.6" }, "peerDependencies": { "@reduxjs/toolkit": "^1.9.7", - "antd": "^3.26.20", "react": ">=16.0.0", "react-redux": "^7.2.9", "react-router-dom": "^5.3.4", diff --git a/package.json b/package.json index feb03d5a3..d238b3d8d 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,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.0", "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 index 861eaa1fd..85bd80a1c 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -11,12 +11,11 @@ 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"; @@ -24,7 +23,7 @@ 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 index be866f5fe..a296d5375 100644 --- a/src/components/OwnerRoute.js +++ b/src/components/OwnerRoute.js @@ -1,19 +1,17 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import { useDispatch, 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, + 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"; +import { useAutoAuthenticate } from "bento-auth-js/src"; const signInIcon = (
@@ -24,28 +22,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 ; @@ -69,7 +50,7 @@ const OwnerRoute = ({ component: Component, path, ...rest }) => { diff --git a/src/config.js b/src/config.js index ab9753dc8..0d7858f99 100644 --- 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 index bbc7828ca..8c43745c7 100644 --- 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( - + + + , root, diff --git a/src/store.js b/src/store.js index 7de5c00a2..a83c639e8 100644 --- 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: { From 2b95491e087cab7f50f7c26a3e78fc3108a5310d Mon Sep 17 00:00:00 2001 From: David Lougheed Date: Tue, 6 Feb 2024 13:10:50 -0500 Subject: [PATCH 2/8] lint: use performSignOut fn --- src/components/OwnerRoute.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OwnerRoute.js b/src/components/OwnerRoute.js index a296d5375..25cc983d0 100644 --- a/src/components/OwnerRoute.js +++ b/src/components/OwnerRoute.js @@ -45,7 +45,7 @@ const OwnerRoute = ({ component: Component, path, ...rest }) => { description="You must sign into this node to access this page." > {isAuthenticated ? ( - + ) : ( ) : ( - )} From 0912e63eece08b08b817928e77a56007fa81ba3f Mon Sep 17 00:00:00 2001 From: David Lougheed Date: Tue, 6 Feb 2024 13:15:50 -0500 Subject: [PATCH 4/8] fix: import --- src/components/OwnerRoute.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OwnerRoute.js b/src/components/OwnerRoute.js index 28b74b77e..be5774ed8 100644 --- a/src/components/OwnerRoute.js +++ b/src/components/OwnerRoute.js @@ -3,6 +3,7 @@ import { useSelector } from "react-redux"; import { Route } from "react-router-dom"; import PropTypes from "prop-types"; import { + useAutoAuthenticate, useIsAuthenticated, usePerformAuth, usePerformSignOut, @@ -11,7 +12,6 @@ import { import { Button, Empty, Icon, Layout } from "antd"; import SitePageLoading from "./SitePageLoading"; -import { useAutoAuthenticate } from "bento-auth-js/src"; const signInIcon = (
From 39ce009c33f34a473321fe35d49e74eb3bfc7b72 Mon Sep 17 00:00:00 2001 From: David Lougheed Date: Tue, 6 Feb 2024 13:44:13 -0500 Subject: [PATCH 5/8] chore: update bento-auth-js to 3.2.1 --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 009a07db9..16097f2db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "ajv": "^8.12.0", "ansi_up": "^6.0.2", "antd": "^3.26.20", - "bento-auth-js": "^3.2.0", + "bento-auth-js": "^3.2.1", "bento-charts": "~2.3.0", "cross-fetch": "^3.1.8", "file-saver": "^2.0.5", @@ -3408,9 +3408,9 @@ "dev": true }, "node_modules/bento-auth-js": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/bento-auth-js/-/bento-auth-js-3.2.0.tgz", - "integrity": "sha512-CBhz2DTDRpemFcI11BuaxtA/slgw+pJmnAtWpNIBdFpsIlQj0PJ8qPwri/crcOF2KYUladxnOP1Gyg/tJt6WCw==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/bento-auth-js/-/bento-auth-js-3.2.1.tgz", + "integrity": "sha512-Jf9FM/3CaEppvHRgvoJ0q+sTjpKppZVyIgcNU0hw07No4j5SY17l1OzFOd0lKd00xQAAiPFtNIy5fc1DBqpd7Q==", "dependencies": { "jose": "^4.14.6" }, diff --git a/package.json b/package.json index d238b3d8d..1e4ab6f89 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "ajv": "^8.12.0", "ansi_up": "^6.0.2", "antd": "^3.26.20", - "bento-auth-js": "^3.2.0", + "bento-auth-js": "^3.2.1", "bento-charts": "~2.3.0", "cross-fetch": "^3.1.8", "file-saver": "^2.0.5", From 2e6ca8eb65f452559edc9d05e68ebb4a2ca7e4ec Mon Sep 17 00:00:00 2001 From: David Lougheed Date: Tue, 6 Feb 2024 13:52:35 -0500 Subject: [PATCH 6/8] chore: bump version to 4.1.2 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 16097f2db..281c379d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "bento_web", - "version": "4.1.1", + "version": "4.1.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "bento_web", - "version": "4.1.1", + "version": "4.1.2", "license": "LGPL-3.0-only", "dependencies": { "@reduxjs/toolkit": "^1.9.7", diff --git a/package.json b/package.json index 1e4ab6f89..21ad3feb9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bento_web", - "version": "4.1.1", + "version": "4.1.2", "description": "Bento platform front-end", "main": "src/index.js", "dependencies": { From b7813093e6b6c33b338dd720320128f97b799476 Mon Sep 17 00:00:00 2001 From: David Lougheed Date: Tue, 6 Feb 2024 14:11:24 -0500 Subject: [PATCH 7/8] fix: sign out --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 8c43745c7..9e3260dfe 100644 --- a/src/index.js +++ b/src/index.js @@ -22,7 +22,7 @@ document.addEventListener("DOMContentLoaded", () => { openIdConfigUrl: OPENID_CONFIG_URL, clientId: CLIENT_ID, scope: "openid email", - postSignOutUrl: "/", + postSignOutUrl: `${BENTO_URL_NO_TRAILING_SLASH}/`, authCallbackUrl: AUTH_CALLBACK_URL, }}> From 3c0632a8d307a40384e192dc9f1d3af7e2698d74 Mon Sep 17 00:00:00 2001 From: David Lougheed Date: Tue, 6 Feb 2024 14:16:50 -0500 Subject: [PATCH 8/8] ci: update actions --- .github/workflows/build.yml | 4 ++-- .github/workflows/main.yml | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 8b9fb4b95..9e0e0f919 100644 --- 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 index a1f234642..d9a12bd77 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -8,7 +8,7 @@ jobs: build: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Install modules run: npm install - name: Build @@ -16,7 +16,7 @@ jobs: lint: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Install modules run: npm install - name: Run linter