oidc-spa 7.2.0 → 7.2.2

package/src/core/diagnostic.ts

@@ -0,0 +1,267 @@
+import { OidcInitializationError } from "./OidcInitializationError";
+import { isKeycloak, createKeycloakUtils } from "../keycloak";
+import { getIsValidRemoteJson } from "../tools/getIsValidRemoteJson";
+
+export async function createWellKnownOidcConfigurationEndpointUnreachableInitializationError(params: {
+    issuerUri: string;
+}): Promise<OidcInitializationError> {
+    const { issuerUri } = params;
+
+    const WELL_KNOWN_PATH = "/.well-known/openid-configuration";
+
+    const commonFallbackMessagePart = [
+        `The OIDC server is either down or the issuerUri you provided is incorrect.`,
+        `You provided the issuerUri: ${issuerUri}`,
+        `Endpoint that couldn't be reached: ${issuerUri}${WELL_KNOWN_PATH}`
+    ].join("\n");
+
+    if (!isKeycloak({ issuerUri })) {
+        return new OidcInitializationError({
+            messageOrCause: [
+                commonFallbackMessagePart,
+                ``,
+                `If you happen to be using Keycloak, be aware that the issuerUri you provided doesn't match the expected shape.`,
+                `It should look like: https://<YOUR_KEYCLOAK_DOMAIN><KC_HTTP_RELATIVE_PATH>/realms/<YOUR_REALM>`,
+                `Unless configured otherwise the KC_HTTP_RELATIVE_PATH is '/' by default on recent version of Keycloak.`
+            ].join("\n"),
+            isAuthServerLikelyDown: true
+        });
+    }
+
+    const keycloakUtils = createKeycloakUtils({ issuerUri });
+
+    const getCandidateIssuerUri = (params: { kcHttpRelativePath: string | undefined }) => {
+        const { kcHttpRelativePath } = params;
+
+        return `${keycloakUtils.issuerUriParsed.origin}${
+            kcHttpRelativePath ?? ""
+        }/realms/${encodeURIComponent(keycloakUtils.issuerUriParsed.realm)}`;
+    };
+
+    if (keycloakUtils.issuerUriParsed.kcHttpRelativePath === undefined) {
+        const issuerUri_candidate = getCandidateIssuerUri({ kcHttpRelativePath: "/auth" });
+
+        const isValid = await getIsValidRemoteJson(`${issuerUri_candidate}${WELL_KNOWN_PATH}`);
+
+        if (isValid) {
+            return new OidcInitializationError({
+                messageOrCause: [
+                    `Your Keycloak server is configured with KC_HTTP_RELATIVE_PATH=/auth`,
+                    `The issuerUri you provided: ${issuerUri}`,
+                    `The correct issuerUri is: ${issuerUri_candidate}`,
+                    `(You are missing the /auth portion)`
+                ].join("\n"),
+                isAuthServerLikelyDown: false
+            });
+        }
+    } else {
+        const issuerUri_candidate = getCandidateIssuerUri({ kcHttpRelativePath: undefined });
+
+        const isValid = await getIsValidRemoteJson(`${issuerUri_candidate}${WELL_KNOWN_PATH}`);
+
+        if (isValid) {
+            return new OidcInitializationError({
+                messageOrCause: [
+                    `Your Keycloak server is configured with KC_HTTP_RELATIVE_PATH=/`,
+                    `The issuerUri you provided: ${issuerUri}`,
+                    `The correct issuerUri is: ${issuerUri_candidate}`,
+                    `(You should remove the ${keycloakUtils.issuerUriParsed.kcHttpRelativePath} portion.)`
+                ].join("\n"),
+                isAuthServerLikelyDown: false
+            });
+        }
+    }
+
+    return new OidcInitializationError({
+        messageOrCause: [
+            commonFallbackMessagePart,
+            ``,
+            `Given the shape of the issuerUri you provided, it seems that you are using Keycloak.`,
+            `- Make sure the realm '${keycloakUtils.issuerUriParsed.realm}' exists.`,
+            `- Check the KC_HTTP_RELATIVE_PATH that you might have configured your keycloak server with.`,
+            `  For example if you have KC_HTTP_RELATIVE_PATH=/xxx the issuerUri should be ${getCandidateIssuerUri(
+                { kcHttpRelativePath: "/xxx" }
+            )}`
+        ].join("\n"),
+        isAuthServerLikelyDown: true
+    });
+}
+
+export async function createIframeTimeoutInitializationError(params: {
+    redirectUri: string;
+    issuerUri: string;
+    clientId: string;
+    noIframe: boolean;
+}): Promise<OidcInitializationError> {
+    const { redirectUri, issuerUri, clientId, noIframe } = params;
+
+    iframe_blocked: {
+        if (noIframe) {
+            break iframe_blocked;
+        }
+
+        const headersOrError = await fetch(redirectUri).then(
+            response => {
+                if (!response.ok) {
+                    return new Error(`${redirectUri} responded with a ${response.status} status code.`);
+                }
+
+                return {
+                    "Content-Security-Policy": response.headers.get("Content-Security-Policy"),
+                    "X-Frame-Options": response.headers.get("X-Frame-Options")
+                };
+            },
+            (error: Error) => error
+        );
+
+        if (headersOrError instanceof Error) {
+            return new OidcInitializationError({
+                isAuthServerLikelyDown: false,
+                messageOrCause: new Error(
+                    `Unexpected error while trying to diagnose why the silent sign-in process timed out.`,
+                    // @ts-expect-error
+                    { cause: cspOrError }
+                )
+            });
+        }
+
+        const headers = headersOrError;
+
+        let key_problem = (() => {
+            block: {
+                const key = "Content-Security-Policy" as const;
+
+                const header = headers[key];
+
+                if (header === null) {
+                    break block;
+                }
+
+                const hasFrameAncestorsNone = header
+                    .replace(/["']/g, "")
+                    .replace(/\s+/g, " ")
+                    .toLowerCase()
+                    .includes("frame-ancestors none");
+
+                if (!hasFrameAncestorsNone) {
+                    break block;
+                }
+
+                return key;
+            }
+
+            block: {
+                const key = "X-Frame-Options" as const;
+
+                const header = headers[key];
+
+                if (header === null) {
+                    break block;
+                }
+
+                const hasFrameAncestorsNone = header.toLowerCase().includes("deny");
+
+                if (!hasFrameAncestorsNone) {
+                    break block;
+                }
+
+                return key;
+            }
+
+            return undefined;
+        })();
+
+        if (key_problem === undefined) {
+            break iframe_blocked;
+        }
+
+        return new OidcInitializationError({
+            isAuthServerLikelyDown: false,
+            messageOrCause: [
+                `${redirectUri} is currently served by your web server with the HTTP header \`${key_problem}: ${headers[key_problem]}\`.\n`,
+                "This header prevents the silent sign-in process from working.\n",
+                "Refer to this documentation page to fix this issue: https://docs.oidc-spa.dev/v/v7/resources/iframe-related-issues"
+            ].join(" ")
+        });
+    }
+
+    // Here we know that the server is not down and that the issuer_uri is correct
+    // otherwise we would have had a fetch error earlier on the well-known endpoint.
+    // So this means that it's very likely a OIDC client misconfiguration.
+    // It could also be a very slow network but this risk is mitigated by the fact that we check
+    // for the network speed to adjust the timeout delay.
+    return new OidcInitializationError({
+        isAuthServerLikelyDown: false,
+        messageOrCause: [
+            `The silent sign-in process timed out.\n`,
+            `Based on the diagnostic performed by oidc-spa the more likely causes are:\n`,
+            `- Either the client ID "${clientId}" does not exist, or\n`,
+            `- You forgot to add the OIDC callback URL to the list of Valid Redirect URIs.\n`,
+            `Client ID: "${clientId}"\n`,
+            `Callback URL to add to the list of Valid Redirect URIs: "${redirectUri}"\n\n`,
+            ...(() => {
+                if (!isKeycloak({ issuerUri })) {
+                    return [
+                        "Check the documentation of your OIDC server to learn how to configure the public client (Authorization Code Flow + PKCE) properly."
+                    ];
+                }
+
+                const kc = createKeycloakUtils({ issuerUri });
+
+                return [
+                    `It seems you are using Keycloak. Follow these steps to resolve the issue:\n\n`,
+                    `1. Go to the Keycloak admin console: ${kc.adminConsoleUrl_master}\n`,
+                    `2. Log in as an admin user.\n`,
+                    `3. In the top left corner select the realm "${kc.issuerUriParsed.realm}".\n`,
+                    `4. In the left menu, click on "Clients".\n`,
+                    `5. Locate the client "${clientId}" in the list and click on it.\n`,
+                    `6. Find "Valid Redirect URIs" and add "${redirectUri}" to the list.\n`,
+                    `7. Save the changes.\n\n`,
+                    `For more information, refer to the documentation: https://docs.oidc-spa.dev/v/v7/providers-configuration/keycloak`
+                ];
+            })(),
+            "\n\n",
+            "If nothing works, you can try disabling the use of iframe: https://docs.oidc-spa.dev/resources/iframe-related-issues\n",
+            "with some OIDC provider it might solve the issue."
+        ].join(" ")
+    });
+}
+
+export async function createFailedToFetchTokenEndpointInitializationError(params: {
+    issuerUri: string;
+    clientId: string;
+}) {
+    const { issuerUri, clientId } = params;
+
+    return new OidcInitializationError({
+        isAuthServerLikelyDown: false,
+        messageOrCause: [
+            "Failed to fetch the token endpoint.\n",
+            "This is usually due to a CORS issue.\n",
+            `Make sure you have added '${window.location.origin}' to the list of Web Origins`,
+            `in the '${clientId}' client configuration of your OIDC server.\n`,
+            "\n",
+            ...(() => {
+                if (!isKeycloak({ issuerUri })) {
+                    return [
+                        "Check the documentation of your OIDC server to learn how to configure the public client (Authorization Code Flow + PKCE) properly."
+                    ];
+                }
+
+                const kc = createKeycloakUtils({ issuerUri });
+
+                return [
+                    `Since it seems that you are using Keycloak, here are the steps to follow:\n`,
+                    `1. Go to the Keycloak admin console: ${kc.adminConsoleUrl_master}\n`,
+                    `2. Log in as an admin user.\n`,
+                    `3. In the top left corner select the realm "${kc.issuerUriParsed.realm}".\n`,
+                    `4. In the left menu, click on "Clients".\n`,
+                    `5. Find '${clientId}' in the list of clients and click on it.\n`,
+                    `6. Find 'Web Origins' and add '${window.location.origin}' to the list.\n`,
+                    `7. Save the changes.\n\n`,
+                    `More info: https://docs.oidc-spa.dev/v/v7/providers-configuration/keycloak`
+                ];
+            })()
+        ].join(" ")
+    });
+}

package/src/core/evtIsUserActive.ts

@@ -0,0 +1,108 @@
+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 globalContext = {
+    appInstanceId: Math.random().toString(36).slice(2),
+    evtIsUserActiveBySessionId: new Map<string, NonPostableEvt<boolean>>()
+};
+
+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;
+        };
+
+        const channelName = `oidc-spa:user-interaction-tracker:${sessionId ?? configId}`;
+
+        function notifyOtherTabsOfUserInteraction() {
+            new BroadcastChannel(channelName).postMessage(
+                id<Message>({
+                    appInstanceId: globalContext.appInstanceId
+                })
+            );
+        }
+
+        function subscribeToUserInteractionOnOtherTabs(callback: () => void) {
+            const channel = new BroadcastChannel(channelName);
+
+            channel.onmessage = ({ data: message }) => {
+                assert(is<Message>(message));
+
+                if (message.appInstanceId === globalContext.appInstanceId) {
+                    return;
+                }
+
+                callback();
+            };
+        }
+
+        return { notifyOtherTabsOfUserInteraction, subscribeToUserInteractionOnOtherTabs };
+    })();
+
+    const evtIsUserActive = createEvt<boolean>();
+    let isUserActive = true;
+
+    const scheduleSetInactive = () => {
+        const timer = setTimeout(() => {
+            assert(isUserActive, "011507");
+            isUserActive = false;
+            evtIsUserActive.post(isUserActive);
+        }, 5_000);
+        return () => {
+            clearTimeout(timer);
+            clearScheduledSetInactive = undefined;
+        };
+    };
+
+    let clearScheduledSetInactive: (() => void) | undefined = scheduleSetInactive();
+
+    const onUserActivity = (params: { isInteractionOnCurrentTab: boolean }) => {
+        const { isInteractionOnCurrentTab } = params;
+
+        clearScheduledSetInactive?.();
+        clearScheduledSetInactive = scheduleSetInactive();
+
+        if (isInteractionOnCurrentTab) {
+            notifyOtherTabsOfUserInteraction();
+        }
+
+        if (!isUserActive) {
+            isUserActive = true;
+            evtIsUserActive.post(isUserActive);
+        }
+    };
+
+    subscribeToUserInteraction({
+        throttleMs: 1_000,
+        callback: () => onUserActivity({ isInteractionOnCurrentTab: true })
+    });
+
+    subscribeToUserInteractionOnOtherTabs(() => onUserActivity({ isInteractionOnCurrentTab: false }));
+
+    if (sessionId !== undefined) {
+        globalContext.evtIsUserActiveBySessionId.set(sessionId, evtIsUserActive);
+    }
+
+    return evtIsUserActive;
+}

package/src/core/handleOidcCallback.ts

@@ -0,0 +1,321 @@
+import {
+    getStateData,
+    markStateDataAsProcessedByCallback,
+    getIsStatQueryParamValue,
+    type StateData
+} from "./StateData";
+import { assert, id } from "../vendor/frontend/tsafe";
+import type { AuthResponse } from "./AuthResponse";
+import { initialLocationHref } from "./initialLocationHref";
+import { encryptAuthResponse } from "./iframeMessageProtection";
+
+const globalContext = {
+    previousCall: id<{ isHandled: boolean } | undefined>(undefined)
+};
+
+export function handleOidcCallback(): { isHandled: boolean } {
+    if (globalContext.previousCall !== undefined) {
+        return globalContext.previousCall;
+    }
+
+    return (globalContext.previousCall = handleOidcCallback_nonMemoized());
+}
+
+function handleOidcCallback_nonMemoized(): { isHandled: boolean } {
+    const location_urlObj = new URL(initialLocationHref);
+
+    const stateUrlParamValue_wrap = (() => {
+        fragment: {
+            const stateUrlParamValue = new URLSearchParams(location_urlObj.hash.replace(/^#/, "")).get(
+                "state"
+            );
+
+            if (stateUrlParamValue === null) {
+                break fragment;
+            }
+
+            if (!getIsStatQueryParamValue({ maybeStateUrlParamValue: stateUrlParamValue })) {
+                break fragment;
+            }
+
+            return { stateUrlParamValue, isFragment: true };
+        }
+
+        query: {
+            const stateUrlParamValue = location_urlObj.searchParams.get("state");
+
+            if (stateUrlParamValue === null) {
+                break query;
+            }
+
+            if (!getIsStatQueryParamValue({ maybeStateUrlParamValue: stateUrlParamValue })) {
+                break query;
+            }
+
+            if (
+                location_urlObj.searchParams.get("client_id") !== null &&
+                location_urlObj.searchParams.get("response_type") !== null &&
+                location_urlObj.searchParams.get("redirect_uri") !== null
+            ) {
+                // NOTE: We are probably in a Keycloakify theme and oidc-spa was loaded by mistake.
+                break query;
+            }
+
+            return { stateUrlParamValue, isFragment: false };
+        }
+
+        return undefined;
+    })();
+
+    if (stateUrlParamValue_wrap === undefined) {
+        const backForwardTracker = readBackForwardTracker();
+
+        if (backForwardTracker !== undefined) {
+            writeBackForwardTracker({
+                backForwardTracker: {
+                    ...backForwardTracker,
+                    hasExitedCallback: true
+                }
+            });
+        }
+
+        return { isHandled: false };
+    }
+
+    const isHandled = true;
+
+    const { stateUrlParamValue, isFragment } = stateUrlParamValue_wrap;
+
+    console.log = () => {};
+    console.warn = () => {};
+    console.error = () => {};
+    console.debug = () => {};
+
+    const stateData = getStateData({ stateUrlParamValue });
+
+    if (
+        stateData === undefined ||
+        (stateData.context === "redirect" && stateData.hasBeenProcessedByCallback)
+    ) {
+        const historyMethod: "back" | "forward" = (() => {
+            const backForwardTracker = readBackForwardTracker();
+
+            if (backForwardTracker === undefined) {
+                return "back";
+            }
+
+            if (!backForwardTracker.hasExitedCallback) {
+                return backForwardTracker.previousHistoryMethod;
+            }
+
+            switch (backForwardTracker.previousHistoryMethod) {
+                case "back":
+                    return "forward";
+                case "forward":
+                    return "back";
+            }
+        })();
+
+        writeBackForwardTracker({
+            backForwardTracker: {
+                previousHistoryMethod: historyMethod,
+                hasExitedCallback: false
+            }
+        });
+
+        setTimeout(() => {
+            reloadOnBfCacheNavigation();
+
+            window.history[historyMethod]();
+
+            // NOTE: This is a "better than nothing" approach.
+            // Under some circumstances it's possible to get stuck on this url
+            // if there is no "next" page in the history for example, navigating
+            // forward is a NoOp. So in that case it's better to reload the same route
+            // with just the authResponse removed from the url to avoid re-entering here.
+            setTimeout(() => {
+                const { protocol, host, pathname, hash } = window.location;
+                window.location.href = `${protocol}//${host}${pathname}${hash}`;
+            }, 350);
+        }, 0);
+
+        return { isHandled };
+    }
+
+    const authResponse: AuthResponse = { state: "" };
+
+    for (const [key, value] of isFragment
+        ? new URLSearchParams(location_urlObj.hash.replace(/^#/, ""))
+        : location_urlObj.searchParams) {
+        authResponse[key] = value;
+    }
+
+    assert(authResponse.state !== "", "063965");
+
+    switch (stateData.context) {
+        case "iframe":
+            encryptAuthResponse({
+                authResponse
+            }).then(({ encryptedMessage }) => parent.postMessage(encryptedMessage, location.origin));
+            break;
+        case "redirect":
+            markStateDataAsProcessedByCallback({ stateUrlParamValue });
+            clearBackForwardTracker();
+            writeRedirectAuthResponses({
+                authResponses: [...readRedirectAuthResponses(), authResponse]
+            });
+            reloadOnBfCacheNavigation();
+            setTimeout(() => {
+                const href = (() => {
+                    if (stateData.action === "login" && authResponse.error === "consent_required") {
+                        return stateData.redirectUrl_consentRequiredCase;
+                    }
+
+                    return stateData.redirectUrl;
+                })();
+
+                location.href = href;
+            }, 0);
+            break;
+    }
+
+    return { isHandled };
+}
+
+const {
+    readRedirectAuthResponses,
+    writeRedirectAuthResponses,
+    moveRedirectAuthResponseFromSessionStorageToMemory
+} = (() => {
+    const AUTH_RESPONSES_KEY = "oidc-spa:authResponses";
+
+    let authResponses_movedToMemoryFromSessionStorage: AuthResponse[] | undefined = undefined;
+
+    // NOTE: Here we note that we can re-write on session storage some auth response
+    // after earlyInit in retrieveRedirectAuthResponseAndStateData
+    // In situation where there are more than one client in the same app and we can't use iframe,
+    // we can have one client that has to redirect before the response has been dealt with.
+    // In most case it won't happen if the init sequence is deterministic but the client
+    // can be instantiated at any time really.
+    // So the move to memory of the response is fully effective only when theres one client.
+    function writeRedirectAuthResponses(params: { authResponses: AuthResponse[] }): void {
+        const { authResponses } = params;
+
+        authResponses_movedToMemoryFromSessionStorage = undefined;
+
+        if (authResponses.length === 0) {
+            sessionStorage.removeItem(AUTH_RESPONSES_KEY);
+            return;
+        }
+        sessionStorage.setItem(AUTH_RESPONSES_KEY, JSON.stringify(authResponses));
+    }
+
+    function readRedirectAuthResponses(): AuthResponse[] {
+        if (authResponses_movedToMemoryFromSessionStorage !== undefined) {
+            return authResponses_movedToMemoryFromSessionStorage;
+        }
+
+        const raw = sessionStorage.getItem(AUTH_RESPONSES_KEY);
+
+        if (raw === null) {
+            return [];
+        }
+
+        return JSON.parse(raw);
+    }
+
+    function moveRedirectAuthResponseFromSessionStorageToMemory() {
+        const authResponses = readRedirectAuthResponses();
+
+        writeRedirectAuthResponses({ authResponses: [] });
+
+        authResponses_movedToMemoryFromSessionStorage = authResponses;
+    }
+
+    return {
+        writeRedirectAuthResponses,
+        readRedirectAuthResponses,
+        moveRedirectAuthResponseFromSessionStorageToMemory
+    };
+})();
+
+export { moveRedirectAuthResponseFromSessionStorageToMemory };
+
+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({ stateUrlParamValue: authResponse.state });
+
+        if (stateData === undefined) {
+            // NOTE: We do not understand how this can happen but it can.
+            authResponses.splice(authResponses.indexOf(authResponse), 1);
+            continue;
+        }
+
+        assert(stateData.context === "redirect", "474728");
+
+        if (stateData.configId !== configId) {
+            continue;
+        }
+
+        authResponses.splice(authResponses.indexOf(authResponse), 1);
+
+        authResponseAndStateData = { authResponse, stateData };
+    }
+
+    writeRedirectAuthResponses({ authResponses });
+
+    return authResponseAndStateData;
+}
+
+function reloadOnBfCacheNavigation() {
+    const start = Date.now();
+    window.addEventListener("pageshow", () => {
+        const elapsed = Date.now() - start;
+
+        if (elapsed < 100) {
+            return;
+        }
+        location.reload();
+    });
+}
+
+const { writeBackForwardTracker, readBackForwardTracker, clearBackForwardTracker } = (() => {
+    const BACK_NAVIGATION_TRACKER_KEY = "oidc-spa:callback-back-forward-tracker";
+
+    type BackForwardTracker = {
+        previousHistoryMethod: "back" | "forward";
+        hasExitedCallback: boolean;
+    };
+
+    function writeBackForwardTracker(params: { backForwardTracker: BackForwardTracker }): void {
+        const { backForwardTracker } = params;
+
+        sessionStorage.setItem(BACK_NAVIGATION_TRACKER_KEY, JSON.stringify(backForwardTracker));
+    }
+
+    function readBackForwardTracker(): BackForwardTracker | undefined {
+        const raw = sessionStorage.getItem(BACK_NAVIGATION_TRACKER_KEY);
+
+        if (raw === null) {
+            return undefined;
+        }
+
+        return JSON.parse(raw);
+    }
+
+    function clearBackForwardTracker(): void {
+        sessionStorage.removeItem(BACK_NAVIGATION_TRACKER_KEY);
+    }
+
+    return { writeBackForwardTracker, readBackForwardTracker, clearBackForwardTracker };
+})();