oidc-spa 6.5.1 → 6.6.0

package/src/oidc/{isUserActive.ts → evtIsUserActive.ts}

@@ -1,27 +1,46 @@
-import { createStatefulObservable } from "../tools/StatefulObservable";
+import { createEvt, type NonPostableEvt } from "../tools/Evt";
 import { subscribeToUserInteraction } from "../tools/subscribeToUserInteraction";
 import { assert, is, id } from "../vendor/frontend/tsafe";
 import { setTimeout, clearTimeout } from "../tools/workerTimers";
 
-const GLOBAL_CONTEXT_KEY = "__oidc-spa.createIsUserActive.globalContext";
+const GLOBAL_CONTEXT_KEY = "__oidc-spa.evtIsUserActive.globalContext";
 
 declare global {
     interface Window {
         [GLOBAL_CONTEXT_KEY]: {
             appInstanceId: string;
+            evtIsUserActiveBySessionId: Map<string, NonPostableEvt<boolean>>;
         };
     }
 }
 
 window[GLOBAL_CONTEXT_KEY] ??= {
-    appInstanceId: Math.random().toString(36).slice(2)
+    appInstanceId: Math.random().toString(36).slice(2),
+    evtIsUserActiveBySessionId: new Map()
 };
 
 const globalContext = window[GLOBAL_CONTEXT_KEY];
 
-export function create$isUserActive(params: { configId: string; sessionId: string | undefined }) {
+export function createEvtIsUserActive(params: {
+    configId: string;
+    sessionId: string | undefined;
+}): NonPostableEvt<boolean> {
     const { configId, sessionId } = params;
 
+    use_existing_instance: {
+        if (sessionId === undefined) {
+            break use_existing_instance;
+        }
+
+        const evtIsUserActive = globalContext.evtIsUserActiveBySessionId.get(sessionId);
+
+        if (evtIsUserActive === undefined) {
+            break use_existing_instance;
+        }
+
+        return evtIsUserActive;
+    }
+
     const { notifyOtherTabsOfUserInteraction, subscribeToUserInteractionOnOtherTabs } = (() => {
         type Message = {
             appInstanceId: string;
@@ -54,12 +73,14 @@ export function create$isUserActive(params: { configId: string; sessionId: strin
         return { notifyOtherTabsOfUserInteraction, subscribeToUserInteractionOnOtherTabs };
     })();
 
-    const $isUserActive = createStatefulObservable(() => true);
+    const evtIsUserActive = createEvt<boolean>();
+    let isUserActive = true;
 
     const scheduleSetInactive = () => {
         const timer = setTimeout(() => {
-            assert($isUserActive.current);
-            $isUserActive.current = false;
+            assert(isUserActive);
+            isUserActive = false;
+            evtIsUserActive.post(isUserActive);
         }, 5_000);
         return () => {
             clearTimeout(timer);
@@ -79,8 +100,9 @@ export function create$isUserActive(params: { configId: string; sessionId: strin
             notifyOtherTabsOfUserInteraction();
         }
 
-        if (!$isUserActive.current) {
-            $isUserActive.current = true;
+        if (!isUserActive) {
+            isUserActive = true;
+            evtIsUserActive.post(isUserActive);
         }
     };
 
@@ -91,5 +113,9 @@ export function create$isUserActive(params: { configId: string; sessionId: strin
 
     subscribeToUserInteractionOnOtherTabs(() => onUserActivity({ isInteractionOnCurrentTab: false }));
 
-    return $isUserActive;
+    if (sessionId !== undefined) {
+        globalContext.evtIsUserActiveBySessionId.set(sessionId, evtIsUserActive);
+    }
+
+    return evtIsUserActive;
 }

package/src/oidc/handleOidcCallback.ts

@@ -1,4 +1,11 @@
-import { getStateData, markStateDataAsProcessedByCallback, getIsStatQueryParamValue } from "./StateData";
+import {
+    getStateData,
+    markStateDataAsProcessedByCallback,
+    getIsStatQueryParamValue,
+    type StateData
+} from "./StateData";
+import { assert } from "../vendor/frontend/tsafe";
+import type { AuthResponse } from "./AuthResponse";
 
 const GLOBAL_CONTEXT_KEY = "__oidc-spa.handleOidcCallback.globalContext";
 
@@ -24,8 +31,6 @@ export function handleOidcCallback(): { isHandled: boolean } {
     return (globalContext.previousCall = handleOidcCallback_nonMemoized());
 }
 
-export const AUTH_RESPONSE_KEY = "oidc-spa.authResponse";
-
 function handleOidcCallback_nonMemoized(): { isHandled: boolean } {
     const locationUrl = new URL(window.location.href);
 
@@ -80,7 +85,7 @@ function handleOidcCallback_nonMemoized(): { isHandled: boolean } {
         stateData === undefined ||
         (stateData.context === "redirect" && stateData.hasBeenProcessedByCallback)
     ) {
-        reloadOnRestore();
+        reloadOnBfCacheNavigation();
 
         const historyMethod: "back" | "forward" = (() => {
             const backForwardTracker = readBackForwardTracker();
@@ -113,21 +118,25 @@ function handleOidcCallback_nonMemoized(): { isHandled: boolean } {
         return { isHandled };
     }
 
-    const authResponse: Record<string, string> = {};
+    const authResponse: AuthResponse = { state: "" };
 
     for (const [key, value] of locationUrl.searchParams) {
         authResponse[key] = value;
     }
 
+    assert(authResponse.state !== "");
+
     switch (stateData.context) {
         case "iframe":
             parent.postMessage(authResponse, location.origin);
             break;
         case "redirect":
-            reloadOnRestore();
+            reloadOnBfCacheNavigation();
             markStateDataAsProcessedByCallback({ stateQueryParamValue });
             clearBackForwardTracker();
-            sessionStorage.setItem(AUTH_RESPONSE_KEY, JSON.stringify(authResponse));
+            writeRedirectAuthResponses({
+                authResponses: [...readRedirectAuthResponses(), authResponse]
+            });
             location.href = (() => {
                 if (stateData.action === "login" && authResponse.error === "consent_required") {
                     return stateData.redirectUrl_consentRequiredCase;
@@ -141,16 +150,68 @@ function handleOidcCallback_nonMemoized(): { isHandled: boolean } {
     return { isHandled };
 }
 
-function reloadOnRestore() {
-    document.addEventListener("visibilitychange", () => {
-        if (document.visibilityState === "visible") {
-            location.reload();
+const { readRedirectAuthResponses, writeRedirectAuthResponses } = (() => {
+    const AUTH_RESPONSES_KEY = "oidc-spa:authResponses";
+
+    function writeRedirectAuthResponses(params: { authResponses: AuthResponse[] }): void {
+        const { authResponses } = params;
+        sessionStorage.setItem(AUTH_RESPONSES_KEY, JSON.stringify(authResponses));
+    }
+
+    function readRedirectAuthResponses(): AuthResponse[] {
+        const raw = sessionStorage.getItem(AUTH_RESPONSES_KEY);
+
+        if (raw === null) {
+            return [];
+        }
+
+        return JSON.parse(raw);
+    }
+
+    return { writeRedirectAuthResponses, readRedirectAuthResponses };
+})();
+
+export function retrieveRedirectAuthResponseAndStateData(params: {
+    configId: string;
+}): { authResponse: AuthResponse; stateData: StateData.Redirect } | undefined {
+    const { configId } = params;
+
+    const authResponses = readRedirectAuthResponses();
+
+    let authResponseAndStateData:
+        | { authResponse: AuthResponse; stateData: StateData.Redirect }
+        | undefined = undefined;
+
+    for (const authResponse of [...authResponses]) {
+        const stateData = getStateData({ stateQueryParamValue: authResponse.state });
+
+        assert(stateData !== undefined);
+        assert(stateData.context === "redirect");
+
+        if (stateData.configId !== configId) {
+            continue;
         }
+
+        authResponses.splice(authResponses.indexOf(authResponse), 1);
+
+        authResponseAndStateData = { authResponse, stateData };
+    }
+
+    if (authResponseAndStateData !== undefined) {
+        writeRedirectAuthResponses({ authResponses });
+    }
+
+    return authResponseAndStateData;
+}
+
+function reloadOnBfCacheNavigation() {
+    window.addEventListener("pageshow", () => {
+        location.reload();
     });
 }
 
 const { writeBackForwardTracker, readBackForwardTracker, clearBackForwardTracker } = (() => {
-    const BACK_NAVIGATION_TRACKER_KEY = "oidc-spa.callback-back-forward-tracker";
+    const BACK_NAVIGATION_TRACKER_KEY = "oidc-spa:callback-back-forward-tracker";
 
     type BackForwardTracker = {
         previousHistoryMethod: "back" | "forward";

package/src/oidc/loginOrGoToAuthServer.ts

@@ -2,21 +2,22 @@ import type { UserManager as OidcClientTsUserManager } from "../vendor/frontend/
 import { toFullyQualifiedUrl } from "../tools/toFullyQualifiedUrl";
 import { id, assert, type Equals } from "../vendor/frontend/tsafe";
 import type { StateData } from "./StateData";
+import type { NonPostableEvt } from "../tools/Evt";
+import { type StatefulEvt, createStatefulEvt } from "../tools/StatefulEvt";
+import { Deferred } from "../tools/Deferred";
 
 const GLOBAL_CONTEXT_KEY = "__oidc-spa.loginOrGoToAuthSever.globalContext";
 
 declare global {
     interface Window {
         [GLOBAL_CONTEXT_KEY]: {
-            hasLoginBeenCalled: boolean;
-            URL_real: typeof URL;
+            evtHasLoginBeenCalled: StatefulEvt<boolean>;
         };
     }
 }
 
 window[GLOBAL_CONTEXT_KEY] ??= {
-    hasLoginBeenCalled: false,
-    URL_real: window.URL
+    evtHasLoginBeenCalled: createStatefulEvt(() => false)
 };
 
 const globalContext = window[GLOBAL_CONTEXT_KEY];
@@ -42,12 +43,26 @@ namespace Params {
     };
 }
 
+export function getPrSafelyRestoredFromBfCacheAfterLoginBackNavigation() {
+    const dOut = new Deferred<void>();
+
+    const { unsubscribe } = globalContext.evtHasLoginBeenCalled.subscribe(hasLoginBeenCalled => {
+        if (!hasLoginBeenCalled) {
+            unsubscribe();
+            dOut.resolve();
+        }
+    });
+
+    return dOut.pr;
+}
+
 export function createLoginOrGoToAuthServer(params: {
     configId: string;
     oidcClientTsUserManager: OidcClientTsUserManager;
     getExtraQueryParams: (() => Record<string, string>) | undefined;
     transformUrlBeforeRedirect: ((url: string) => string) | undefined;
     homeAndCallbackUrl: string;
+    evtIsUserLoggedIn: NonPostableEvt<boolean>;
     log: typeof console.log | undefined;
 }) {
     const {
@@ -56,14 +71,15 @@ export function createLoginOrGoToAuthServer(params: {
         getExtraQueryParams,
         transformUrlBeforeRedirect,
         homeAndCallbackUrl,
+        evtIsUserLoggedIn,
         log
     } = params;
 
-    const LOCAL_STORAGE_KEY_TO_CLEAR_WHEN_RETURNING_OIDC_LOGGED_IN = `oidc-spa.login-redirect-initiated:${configId}`;
+    const LOCAL_STORAGE_KEY_TO_CLEAR_WHEN_USER_LOGGED_IN = `oidc-spa.login-redirect-initiated:${configId}`;
 
     let lastPublicUrl: string | undefined = undefined;
 
-    async function loginOrGoToAuthServer(params: Params): Promise<never> {
+    function loginOrGoToAuthServer(params: Params): Promise<never> {
         const {
             redirectUrl: redirectUrl_params,
             extraQueryParams_local,
@@ -78,64 +94,54 @@ export function createLoginOrGoToAuthServer(params: {
                 break login_specific_handling;
             }
 
-            if (globalContext.hasLoginBeenCalled) {
+            if (globalContext.evtHasLoginBeenCalled.current) {
                 log?.("login() has already been called, ignoring the call");
                 return new Promise<never>(() => {});
             }
 
-            globalContext.hasLoginBeenCalled = true;
+            globalContext.evtHasLoginBeenCalled.current = true;
 
             bf_cache_handling: {
                 if (rest.doForceReloadOnBfCache) {
-                    document.removeEventListener("visibilitychange", () => {
-                        if (document.visibilityState === "visible") {
-                            location.reload();
-                        }
+                    window.removeEventListener("pageshow", () => {
+                        location.reload();
                     });
                     break bf_cache_handling;
                 }
 
-                localStorage.setItem(LOCAL_STORAGE_KEY_TO_CLEAR_WHEN_RETURNING_OIDC_LOGGED_IN, "true");
+                localStorage.setItem(LOCAL_STORAGE_KEY_TO_CLEAR_WHEN_USER_LOGGED_IN, "true");
 
                 const callback = () => {
-                    if (document.visibilityState === "visible") {
-                        document.removeEventListener("visibilitychange", callback);
-
-                        log?.(
-                            "We came back from the login pages and the state of the app has been restored"
-                        );
-
-                        if (rest.doNavigateBackToLastPublicUrlIfTheTheUserNavigateBack) {
-                            if (lastPublicUrl !== undefined) {
-                                log?.(`Loading last public route: ${lastPublicUrl}`);
-                                window.location.href = lastPublicUrl;
-                            } else {
-                                log?.("We don't know the last public route, navigating back in history");
-                                window.history.back();
-                            }
+                    window.removeEventListener("pageshow", callback);
+
+                    log?.(
+                        "We came back from the login pages and the state of the app has been restored"
+                    );
+
+                    if (rest.doNavigateBackToLastPublicUrlIfTheTheUserNavigateBack) {
+                        if (lastPublicUrl !== undefined) {
+                            log?.(`Loading last public route: ${lastPublicUrl}`);
+                            window.location.href = lastPublicUrl;
+                        } else {
+                            log?.("We don't know the last public route, navigating back in history");
+                            window.history.back();
+                        }
+                    } else {
+                        log?.("The current page doesn't require auth...");
+
+                        if (
+                            localStorage.getItem(LOCAL_STORAGE_KEY_TO_CLEAR_WHEN_USER_LOGGED_IN) === null
+                        ) {
+                            log?.("but the user is now authenticated, reloading the page");
+                            location.reload();
                         } else {
-                            log?.("The current page doesn't require auth...");
-
-                            if (
-                                localStorage.getItem(
-                                    LOCAL_STORAGE_KEY_TO_CLEAR_WHEN_RETURNING_OIDC_LOGGED_IN
-                                ) === null
-                            ) {
-                                log?.("but the user is now authenticated, reloading the page");
-                                location.reload();
-                            } else {
-                                log?.(
-                                    "and the user doesn't seem to be authenticated, avoiding a reload"
-                                );
-                                globalContext.hasLoginBeenCalled = false;
-                            }
+                            log?.("and the user doesn't seem to be authenticated, avoiding a reload");
+                            globalContext.evtHasLoginBeenCalled.current = false;
                         }
                     }
                 };
 
-                log?.("Start listening to visibility change event");
-
-                document.addEventListener("visibilitychange", callback);
+                window.addEventListener("pageshow", callback);
             }
         }
 
@@ -215,53 +221,54 @@ export function createLoginOrGoToAuthServer(params: {
             return { extraQueryParams };
         })();
 
-        await oidcClientTsUserManager.signinRedirect({
-            state: id<StateData>({
-                context: "redirect",
-                redirectUrl,
-                extraQueryParams,
-                hasBeenProcessedByCallback: false,
-                configId,
-                action: "login",
-                redirectUrl_consentRequiredCase: (() => {
+        return oidcClientTsUserManager
+            .signinRedirect({
+                state: id<StateData>({
+                    context: "redirect",
+                    redirectUrl,
+                    extraQueryParams,
+                    hasBeenProcessedByCallback: false,
+                    configId,
+                    action: "login",
+                    redirectUrl_consentRequiredCase: (() => {
+                        switch (rest.action) {
+                            case "login":
+                                return lastPublicUrl ?? homeAndCallbackUrl;
+                            case "go to auth server":
+                                return redirectUrl;
+                        }
+                    })()
+                }),
+                redirectMethod,
+                prompt: (() => {
                     switch (rest.action) {
-                        case "login":
-                            return lastPublicUrl ?? homeAndCallbackUrl;
                         case "go to auth server":
-                            return redirectUrl;
+                            return undefined;
+                        case "login":
+                            return rest.doForceInteraction ? "consent" : undefined;
                     }
-                })()
-            }),
-            redirectMethod,
-            prompt: (() => {
-                switch (rest.action) {
-                    case "go to auth server":
-                        return undefined;
-                    case "login":
-                        return rest.doForceInteraction ? "consent" : undefined;
-                }
-                assert<Equals<typeof rest, never>>;
-            })(),
-            transformUrl: transformUrl_oidcClientTs
-        });
-        return new Promise<never>(() => {});
-    }
-
-    function toCallBeforeReturningOidcLoggedIn() {
-        localStorage.removeItem(LOCAL_STORAGE_KEY_TO_CLEAR_WHEN_RETURNING_OIDC_LOGGED_IN);
+                    assert<Equals<typeof rest, never>>;
+                })(),
+                transformUrl: transformUrl_oidcClientTs
+            })
+            .then(() => new Promise<never>(() => {}));
     }
 
-    function toCallBeforeReturningOidcNotLoggedIn() {
-        const realPushState = history.pushState.bind(history);
-        history.pushState = function pushState(...args) {
-            lastPublicUrl = window.location.href;
-            return realPushState(...args);
-        };
-    }
+    const { unsubscribe } = evtIsUserLoggedIn.subscribe(isLoggedIn => {
+        unsubscribe();
+
+        if (isLoggedIn) {
+            localStorage.removeItem(LOCAL_STORAGE_KEY_TO_CLEAR_WHEN_USER_LOGGED_IN);
+        } else {
+            const realPushState = history.pushState.bind(history);
+            history.pushState = function pushState(...args) {
+                lastPublicUrl = window.location.href;
+                return realPushState(...args);
+            };
+        }
+    });
 
     return {
-        loginOrGoToAuthServer,
-        toCallBeforeReturningOidcLoggedIn,
-        toCallBeforeReturningOidcNotLoggedIn
+        loginOrGoToAuthServer
     };
 }

package/src/oidc/loginPropagationToOtherTabs.ts

@@ -0,0 +1,63 @@
+import { assert, is } from "../vendor/frontend/tsafe";
+import { Deferred } from "../tools/Deferred";
+
+const GLOBAL_CONTEXT_KEY = "__oidc-spa.loginPropagationToOtherTabs.globalContext";
+
+declare global {
+    interface Window {
+        [GLOBAL_CONTEXT_KEY]: {
+            appInstanceId: string;
+        };
+    }
+}
+
+window[GLOBAL_CONTEXT_KEY] ??= {
+    appInstanceId: Math.random().toString(36).slice(2)
+};
+
+const globalContext = window[GLOBAL_CONTEXT_KEY];
+
+type Message = {
+    appInstanceId: string;
+    configId: string;
+};
+
+function getChannelName(params: { configId: string }) {
+    const { configId } = params;
+    return `oidc-spa:login-propagation:${configId}`;
+}
+
+export function notifyOtherTabsOfLogin(params: { configId: string }) {
+    const { configId } = params;
+
+    const message: Message = {
+        configId,
+        appInstanceId: globalContext.appInstanceId
+    };
+
+    new BroadcastChannel(getChannelName({ configId })).postMessage(message);
+}
+
+export function getPrOtherTabLogin(params: { configId: string }) {
+    const { configId } = params;
+
+    const dOtherTabLogin = new Deferred<void>();
+
+    const channel = new BroadcastChannel(getChannelName({ configId }));
+
+    channel.onmessage = ({ data: message }) => {
+        assert(is<Message>(message));
+
+        if (message.appInstanceId === globalContext.appInstanceId) {
+            return;
+        }
+
+        channel.close();
+
+        dOtherTabLogin.resolve();
+    };
+
+    const prOtherTabLogin = dOtherTabLogin.pr;
+
+    return { prOtherTabLogin };
+}

package/src/oidc/loginSilent.ts

@@ -5,25 +5,7 @@ import { getStateData, clearStateStore, type StateData } from "./StateData";
 import { getDownlinkAndRtt } from "../tools/getDownlinkAndRtt";
 import { getIsDev } from "../tools/isDev";
 import type { User as OidcClientTsUser } from "../vendor/frontend/oidc-client-ts-and-jwt-decode";
-
-export type AuthResponse = {
-    state: string;
-    [key: string]: string;
-};
-
-function getIsAuthResponse(data: any): data is AuthResponse {
-    return data instanceof Object && "state" in data && typeof data.state === "string";
-}
-
-export function authResponseToUrl(authResponse: AuthResponse): string {
-    const authResponseUrl = new URL("https://dummy.com");
-
-    for (const [name, value] of Object.entries(authResponse)) {
-        authResponseUrl.searchParams.set(name, value);
-    }
-
-    return authResponseUrl.href;
-}
+import { type AuthResponse, getIsAuthResponse } from "./AuthResponse";
 
 type ResultOfLoginSilent =
     | {
@@ -117,7 +99,7 @@ export async function loginSilent(params: {
         })
         .then(
             oidcClientTsUser => {
-                assert(oidcClientTsUser !== null);
+                assert(oidcClientTsUser !== null, "oidcClientTsUser is not supposed to be null here");
 
                 clearTimeout(timeout);
 

package/src/oidc/logoutPropagationToOtherTabs.ts

@@ -60,12 +60,12 @@ export function getPrOtherTabLogout(params: {
     channel.onmessage = ({ data: message }) => {
         assert(is<Message>(message));
 
-        channel.close();
-
         if (message.appInstanceId === globalContext.appInstanceId) {
             return;
         }
 
+        channel.close();
+
         const redirectUrl = (() => {
             if (configId === message.configId) {
                 return message.redirectUrl_initiator;