switched to react-oidc-context

client/package-lock.json

@@ -31,6 +31,7 @@
         "react-i18next": "^12.0.0",
         "react-input-mask": "^2.0.4",
         "react-markdown": "^8.0.3",
+        "react-oidc-context": "^2.2.2",
         "react-photoswipe-gallery": "^2.2.2",
         "react-redux": "^8.0.5",
         "react-router-dom": "^6.4.3",
@@ -19306,6 +19307,18 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/react-oidc-context": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-oidc-context/-/react-oidc-context-2.2.2.tgz",
+      "integrity": "sha512-rke8goKuxxQhSAR11h8wVn56m7kEa1mcAfYDlIycsIgmbZOFzKA0Un0y0RodHZ/M/CG6u0JD1I8RKZHqRJjWnA==",
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "oidc-client-ts": "^2.2.1",
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-onclickoutside": {
       "version": "6.12.2",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",
@@ -37423,6 +37436,12 @@
         }
       }
     },
+    "react-oidc-context": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-oidc-context/-/react-oidc-context-2.2.2.tgz",
+      "integrity": "sha512-rke8goKuxxQhSAR11h8wVn56m7kEa1mcAfYDlIycsIgmbZOFzKA0Un0y0RodHZ/M/CG6u0JD1I8RKZHqRJjWnA==",
+      "requires": {}
+    },
     "react-onclickoutside": {
       "version": "6.12.2",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",

client/package.json

@@ -78,6 +78,7 @@
     "react-i18next": "^12.0.0",
     "react-input-mask": "^2.0.4",
     "react-markdown": "^8.0.3",
+    "react-oidc-context": "^2.2.2",
     "react-photoswipe-gallery": "^2.2.2",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.4.3",

client/src/components/Login/Login.jsx

@@ -1,5 +1,6 @@
 import isEmail from 'validator/lib/isEmail';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useAuth } from 'react-oidc-context';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -48,6 +49,7 @@ const createMessage = (error) => {
 
 const Login = React.memo(
   ({ defaultData, isSubmitting, error, onAuthenticate, onMessageDismiss }) => {
+    const auth = useAuth();
     const [t] = useTranslation();
     const wasSubmitting = usePrevious(isSubmitting);
 
@@ -171,6 +173,9 @@ const Login = React.memo(
                         disabled={isSubmitting}
                       />
                     </Form>
+                    <Form.Button type="button" onClick={() => auth.signinRedirect()}>
+                      Log in with SSO
+                    </Form.Button>
                   </div>
                 </div>
               </Grid.Column>

client/src/components/OIDC/OidcLogin.jsx

@@ -1,13 +1,13 @@
-import { useAuth } from 'oidc-react';
+import { useAuth } from 'react-oidc-context';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 let isLoggingIn = true;
 const OidcLogin = React.memo(({ onAuthenticate }) => {
   const auth = useAuth();
-  if (isLoggingIn && auth.userData) {
+  if (isLoggingIn && auth.user) {
     isLoggingIn = false;
-    const user = auth.userData;
+    const { user } = auth;
     onAuthenticate(user);
   }
 });

client/src/components/Root.jsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { AuthProvider } from 'oidc-react';
+import { AuthProvider } from 'react-oidc-context';
 import { Provider } from 'react-redux';
 import { Route, Routes } from 'react-router-dom';
 import { ReduxRouter } from '../lib/redux-router';
@@ -21,8 +21,11 @@ function Root({ store, history, config }) {
   return (
     <AuthProvider
       authority={config.authority}
-      clientId={config.clientId}
-      redirectUri={config.redirectUri}
+      client_id={config.clientId}
+      redirect_uri={config.redirectUri}
+      onSigninCallback={() => {
+        window.history.replaceState({}, document.title, window.location.pathname);
+      }}
     >
       <Provider store={store}>
         <ReduxRouter history={history}>