Use auth state to track the history

Signed-off-by: Andrea Lamparelli <a.lamparelli95@gmail.com>

Author: lampajr

horreum-web/src/App.tsx

@@ -42,12 +42,13 @@ import About from "./About"
 import AppContextProvider from "./context/AppContext";
 import TableReportConfigPage from "./domain/reports/TableReportConfigPage";
 import TableReportPage from "./domain/reports/TableReportPage";
-import {createUserManager, onSigninCallback} from "./auth/oidc";
+import {createUserManager} from "./auth/oidc";
 import {AuthProvider} from "react-oidc-context";
 import {KeycloakConfig} from "./generated";
 import {configApi} from "./api";
 import AuthBridgeContextProvider, {AuthBridgeContext} from "./context/AuthBridgeContext";
 import {AuthContextType} from "./context/@types/authContextTypes";
+import {User} from "oidc-client-ts";
 import CallbackSSO from "./auth/CallbackSSO";
 
 const router = createBrowserRouter(
@@ -92,20 +93,33 @@ const router = createBrowserRouter(
 export default function App() {
     const [horreumOidcConfig, setHorreumOidcConfig] = useState<KeycloakConfig | undefined>()
 
+    const onSignInCallback = (user: User | undefined) => {
+        // TODO: find a way to get rid of the CallbackSSO route and use this callback to redirect to the last visited page
+        const redirectUrl = (user?.state as { history?: string }).history;
+        window.history.replaceState({}, document.title, redirectUrl);
+    };
+
+    const onSignOutCallback = () => {
+        window.history.replaceState({}, document.title, window.location.pathname);
+    };
+
     useEffect(() => {
         configApi.keycloak().then(setHorreumOidcConfig)
     }, []);
 
     if (!horreumOidcConfig) {
-        return <Bullseye>
-            <Spinner/>
-        </Bullseye>
+        return (
+            <Bullseye>
+                <Spinner/>
+            </Bullseye>
+        )
     }
 
     // if using oidc let's wrap the entire app with AuthProvider
     const userManager = createUserManager(horreumOidcConfig)
+
     return (
-        <AuthProvider userManager={userManager} onSigninCallback={onSigninCallback}>
+        <AuthProvider userManager={userManager} onSigninCallback={onSignInCallback} onSignoutCallback={onSignOutCallback}>
             {/* if url is empty or null -> use basic authentication */}
             <AuthBridgeContextProvider isOidc={horreumOidcConfig.url !== undefined && horreumOidcConfig.url !== ""}>
                 <AppContextProvider>

horreum-web/src/auth/CallbackSSO.tsx

@@ -1,7 +1,6 @@
 import {Bullseye, Spinner} from "@patternfly/react-core";
 import {useAuth} from "react-oidc-context";
 import {useNavigate} from "react-router-dom";
-import {AuthBridgeContext, beforeLoginHistorySession} from "../context/AuthBridgeContext";
 import {useEffect, useState} from "react";
 
 // Default callback sso component, which redirects to the last visited page when the login is completed
@@ -14,7 +13,7 @@ function CallbackSSO() {
     useEffect(() => {
         // redirect only once the authentication stopped loading
         if (!isLoading) {
-            const history = window.sessionStorage.getItem(beforeLoginHistorySession) ?? "/"
+            const history = (auth.user?.state as { history?: string }).history ?? "/";
             navigate(history, {replace: true});
         }
     }, [isLoading]);

horreum-web/src/auth/oidc.ts

@@ -1,5 +1,5 @@
-import {KeycloakConfig} from "../generated";
-import {User, UserManager, WebStorageStateStore} from "oidc-client-ts";
+import { KeycloakConfig } from "../generated";
+import { UserManager, WebStorageStateStore } from "oidc-client-ts";
 
 export const createUserManager = (config: KeycloakConfig): UserManager => {
     return new UserManager({
@@ -8,11 +8,7 @@ export const createUserManager = (config: KeycloakConfig): UserManager => {
         redirect_uri: `${window.location.origin}/callback-sso`,
         post_logout_redirect_uri: window.location.origin,
         userStore: new WebStorageStateStore({ store: window.localStorage }),
-        monitorSession: true, // this allows cross tab login/logout detection
+        monitorSession: true,
         automaticSilentRenew: true,
     })
 }
-
-export const onSigninCallback = (_user: User | undefined) => {
-    window.history.replaceState({}, document.title, window.location.pathname);
-};

horreum-web/src/context/AuthBridgeContext.tsx

@@ -30,7 +30,6 @@ function isTester(owner: string, roles: string[]) {
 }
 
 export const AuthBridgeContext = React.createContext<AuthContextType | null>(null);
-export const beforeLoginHistorySession = "beforeLoginPath"
 
 const signOutCallback = () => window.location.replace(window.location.origin)
 
@@ -56,8 +55,7 @@ const AuthBridgeContextProvider: React.FC<ContextProviderProps> = ({ isOidc, chi
     const signIn = isOidc ?
         () => {
             // save the current pathname in the local session to let the callback page redirect back
-            window.sessionStorage.setItem(beforeLoginHistorySession, window.location.pathname)
-            return auth.signinRedirect()
+            return auth.signinRedirect({state: { history: `${location.pathname}${location.search}` }})
         } :
         (username?: string, password?: string) => {
             setIsAuthenticated(true)