Merge pull request #765 from bcgov/anton/use-auto-sign-in-hook

feat: SRS-859 - useAutoSignin hook + auth flow fixes

Author: anton-bcgov

cats-frontend/package-lock.json

@@ -20,7 +20,7 @@
     "graphql-tag": "^2.12.6",
     "keycloak-js": "^19.0.2",
     "leaflet": "^1.9.3",
-    "oidc-client-ts": "^2.1.0",
+    "oidc-client-ts": "3.1.0",
     "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-aria-components": "^1.6.0",
@@ -30,7 +30,7 @@
     "react-icons": "^4.12.0",
     "react-leaflet": "^4.2.1",
     "react-leaflet-cluster": "^2.1.0",
-    "react-oidc-context": "^2.3.1",
+    "react-oidc-context": "3.2.0",
     "react-parcelmap-bc": "^1.1.4",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.4.1",

cats-frontend/package.json

@@ -2,10 +2,13 @@ import "./App.css";
 import Header from "./app/components/navigation/Header";
 import { Outlet } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 import SideBar from "./app/components/navigation/SideBar";
-import '@bcgov/bc-sans/css/BC_Sans.css'
 import { useState } from "react";
+import { useAutoSignin } from "./hooks/useAutoSignIn";
+
+import "react-toastify/dist/ReactToastify.css";
+import "@bcgov/design-tokens/css/variables.css";
+import "@bcgov/bc-sans/css/BC_Sans.css";
 
 function App() {
   const [isSidebarExpanded, setIsSidebarExpanded] = useState(false);
@@ -14,21 +17,27 @@ function App() {
   const handleMouseEnter = () => setIsSidebarExpanded(true);
   const handleMouseLeave = () => setIsSidebarExpanded(false);
 
-
-
   // Toggle sidebar expand/collapse on hover or click
   const handleSidebarToggle = () => {
     setIsSidebarExpanded((prevState) => !prevState);
   };
 
+  useAutoSignin();
+
   return (
     <div className="container-fluid p-0">
       <Header />
       <div className="container m-0 p-0">
-        <div className={`sidebar-container display-from-medium ${isSidebarExpanded ? "expanded" : ""}`} onMouseEnter={handleSidebarToggle} onMouseLeave={handleSidebarToggle}>
-            <SideBar />
+        <div
+          className={`sidebar-container display-from-medium ${isSidebarExpanded ? "expanded" : ""}`}
+          onMouseEnter={handleSidebarToggle}
+          onMouseLeave={handleSidebarToggle}
+        >
+          <SideBar />
         </div>
-        <div className={`p-0 main-content-container ${isSidebarExpanded ? "shifted" : ""}`}>
+        <div
+          className={`p-0 main-content-container ${isSidebarExpanded ? "shifted" : ""}`}
+        >
           <Outlet />
         </div>
       </div>

cats-frontend/src/App.tsx

@@ -3,25 +3,18 @@ import Dropdown from 'react-bootstrap/Dropdown';
 import './UserAccount.css';
 import { DropdownIcon, DropdownUpIcon } from '../common/icon';
 import { useAuth } from 'react-oidc-context';
-import { getUser } from '../../helpers/utility';
 import Avatar from '../avatar/Avatar';
 import { useDispatch } from 'react-redux';
 import { AppDispatch } from '../../Store';
 import { fetchRecentViews } from '../../features/dashboard/DashboardSlice';
 
 const UserAccount = (props: any) => {
   const dispatch = useDispatch<AppDispatch>();
-  const authRedirectUri =
-    ((window as any)._env_ &&
-      (window as any)._env_.REACT_APP_AUTH_LOGOUT_REDIRECT_URI) ||
-    process.env.REACT_APP_AUTH_LOGOUT_REDIRECT_URI ||
-    'http://localhost:4000/';
   const auth = useAuth();
-  const loggedInUser = getUser();
   // Sample user data
   const userObj = {
-    firstname: loggedInUser?.profile.given_name,
-    lastName: loggedInUser?.profile.family_name,
+    firstname: auth.user?.profile.given_name,
+    lastName: auth.user?.profile.family_name,
   };
 
   const [user, setUser] = useState(userObj);
@@ -32,13 +25,21 @@ const UserAccount = (props: any) => {
   };
 
   useEffect(() => {
-    dispatch(fetchRecentViews(loggedInUser?.profile.preferred_username ?? ''));
+    dispatch(fetchRecentViews(auth.user?.profile.preferred_username ?? ''));
     setUser({
-      firstname: loggedInUser?.profile.given_name,
-      lastName: loggedInUser?.profile.family_name,
+      firstname: auth.user?.profile.given_name,
+      lastName: auth.user?.profile.family_name,
     });
   }, []);
 
+  const signOut = () => {
+    auth.removeUser();
+    auth.signoutRedirect({
+      id_token_hint: auth.user?.id_token,
+    });
+    auth.clearStaleState();
+  }
+
   if (props.mobileView) {
     return (
       <>
@@ -95,11 +96,7 @@ const UserAccount = (props: any) => {
                 aria-label="Log Out"
                 tabIndex={0} // Make focusable with keyboard
                 className="account-custom-item-mobile"
-                onClick={() => {
-                  auth.removeUser().then(() => {
-                    window.location.href = authRedirectUri;
-                  });
-                }}
+                onClick={signOut}
               >
                 Log Out
               </div>
@@ -176,12 +173,7 @@ const UserAccount = (props: any) => {
                 role="menuitem"
                 className="account-custom-item"
                 aria-label="Log Out"
-                onClick={() => {
-                  auth.removeUser().then(() => {
-                    window.location.href = authRedirectUri;
-                    localStorage.removeItem('siteFilterPills');
-                  });
-                }}
+                onClick={signOut}
               >
                 Log Out
               </Dropdown.Item>

cats-frontend/src/app/components/account/UserAccount.tsx

@@ -2,7 +2,7 @@ import { Dropdown } from 'react-bootstrap';
 import { useAuth } from 'react-oidc-context';
 import './LoginDropdown.css';
 
-export const LoginDropdown = (title: string, width_override?: number) => {
+export const LoginDropdown = ({title}: {title: string}) => {
   const auth = useAuth();
   return (
     <Dropdown id="login-selector-dropdown">

cats-frontend/src/app/components/login/LoginDropdown.tsx

@@ -1,20 +1,17 @@
-import "@bcgov/design-tokens/css/variables.css";
 import logo from "../../../app/images/logos/logo-banner.png";
 
 import "./Header.css";
-import moon from "../../images/moon.png";
 import { BarsIcon } from "../common/icon";
 import { useState } from "react";
 import MobileNavMenu from "./MobileNavMenu";
-import LanguageSwitcher from "../language/LanguageSwitcher";
 import UserAccount from "../account/UserAccount";
 import { LoginDropdown } from "../login/LoginDropdown";
-import { getUser } from "../../helpers/utility";
+import { useAuth } from "react-oidc-context";
 
 const Header = () => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const user = getUser();
+  const auth = useAuth()
 
   const toggleNavbar = () => {
     setIsOpen(!isOpen);
@@ -48,8 +45,8 @@ const Header = () => {
         {/* <div className="d-sm-none d-md-flex d-none">       
         <img src={moon} alt="Moon image for theme." />
       </div> */}
-        {user == null && LoginDropdown("Sign in")}
-        {!isOpen && user !== null && <UserAccount mobileView={isOpen} />}
+        {!auth.isAuthenticated && <LoginDropdown title="Sign in" />}
+        {!isOpen && auth.isAuthenticated && <UserAccount mobileView={isOpen} />}
       </div>
       <div
         role="menu"

cats-frontend/src/app/components/navigation/Header.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import "./Search.css";
-import "@bcgov/design-tokens/css/variables.css";
 import { useSelector, useDispatch } from "react-redux";
 import {
   fetchPeoples,
@@ -109,17 +108,6 @@ const Search = () => {
     );
   };
 
-  useEffect(() => {
-    const loggedInUser = getUser();
-    if (loggedInUser === null) {
-      auth.signinRedirect({ extraQueryParams: { kc_idp_hint: "idir" } });
-    }
-    if (currSearchVal.searchQuery !== "") {
-      setUserAction(false);
-      setSearchText(currSearchVal.searchQuery);
-      dispatch(fetchPeoples({ searchParam: currSearchVal.searchQuery }));
-    }
-  }, []);
 
   // useEffect(() => {
   //   fetchPeoples(searchText);

cats-frontend/src/app/features/people/Search.tsx

@@ -84,6 +84,8 @@ export const flattenFormRows = (arr: IFormField[][]): IFormField[] => {
   return flattened;
 };
 
+// This should only be used outside of the <AuthContext> component tree (redux slice, axios calls, etc)
+// In React components, use `const {user} = useAuth()`
 export function getUser() {
   const oidcStorage = sessionStorage.getItem(
     `oidc.user:` +