oidc-spa 8.2.0 → 8.2.1

package/src/core/createOidc.ts

@@ -4,7 +4,7 @@ import {
     type User as OidcClientTsUser,
     InMemoryWebStorage
 } from "../vendor/frontend/oidc-client-ts";
-import type { OidcMetadata } from "./OidcMetadata";
+import { type OidcMetadata, fetchOidcMetadata } from "./OidcMetadata";
 import { assert, is, type Equals } from "../tools/tsafe/assert";
 import { id } from "../tools/tsafe/id";
 import { setTimeout, clearTimeout } from "../tools/workerTimers";
@@ -49,10 +49,10 @@ import { createGetIsNewBrowserSession } from "./isNewBrowserSession";
 import { getIsOnline } from "../tools/getIsOnline";
 import { isKeycloak } from "../keycloak/isKeycloak";
 import { INFINITY_TIME } from "../tools/INFINITY_TIME";
-import type { WELL_KNOWN_PATH } from "./diagnostic";
-import { getIsValidRemoteJson } from "../tools/getIsValidRemoteJson";
 import { prShouldLoadApp } from "./prShouldLoadApp";
 import { getBASE_URL } from "./BASE_URL";
+import { getIsLikelyDevServer } from "../tools/isLikelyDevServer";
+import { createObjectThatThrowsIfAccessed } from "../tools/createObjectThatThrowsIfAccessed";
 
 // NOTE: Replaced at build time
 const VERSION = "{{OIDC_SPA_VERSION}}";
@@ -432,92 +432,212 @@ export async function createOidc_nonMemoized<
 
     const stateUrlParamValue_instance = generateStateUrlParamValue();
 
+    const oidcMetadata = __metadata ?? (await fetchOidcMetadata({ issuerUri }));
+
     const canUseIframe = (() => {
         if (noIframe) {
             return false;
         }
 
         third_party_cookies: {
-            const isOidcServerThirdPartyRelativeToApp =
-                getHaveSharedParentDomain({
-                    url1: window.location.origin,
-                    url2: issuerUri
-                }) === false;
-
-            if (!isOidcServerThirdPartyRelativeToApp) {
-                break third_party_cookies;
+            if (oidcMetadata === undefined) {
+                return false;
             }
 
-            const isGoogleChrome = (() => {
-                const ua = navigator.userAgent;
-                const vendor = navigator.vendor;
+            const { authorization_endpoint } = oidcMetadata;
 
-                return (
-                    /Chrome/.test(ua) && /Google Inc/.test(vendor) && !/Edg/.test(ua) && !/OPR/.test(ua)
-                );
-            })();
+            assert(
+                authorization_endpoint !== undefined,
+                "Missing authorization_endpoint on the provided __metadata"
+            );
+
+            const isOidcServerThirdPartyRelativeToApp = !getHaveSharedParentDomain({
+                url1: window.location.origin,
+                // TODO: No, here we should test against the authorization endpoint!
+                url2: authorization_endpoint
+            });
 
-            if (window.location.origin.startsWith("http://localhost") && isGoogleChrome) {
+            if (!isOidcServerThirdPartyRelativeToApp) {
                 break third_party_cookies;
             }
 
-            log?.(
-                [
-                    "Can't use iframe because your auth server is on a third party domain relative",
-                    "to the domain of your app and third party cookies are blocked by navigators."
-                ].join(" ")
-            );
+            const isLikelyDevServer = getIsLikelyDevServer();
 
-            return false;
-        }
+            const domain_auth = new URL(authorization_endpoint).origin.split("//")[1];
 
-        // NOTE: Maybe not, it depend if the app can iframe itself.
-        return true;
-    })();
+            assert(domain_auth !== undefined, "33921384");
 
-    let isUserStoreInMemoryOnly: boolean;
-
-    const oidcClientTsUserManager = new OidcClientTsUserManager({
-        stateUrlParamValue: stateUrlParamValue_instance,
-        authority: issuerUri,
-        client_id: clientId,
-        redirect_uri: homeUrlAndRedirectUri,
-        silent_redirect_uri: homeUrlAndRedirectUri,
-        post_logout_redirect_uri: homeUrlAndRedirectUri,
-        response_mode: isKeycloak({ issuerUri }) ? "fragment" : "query",
-        response_type: "code",
-        scope: Array.from(new Set(["openid", ...scopes])).join(" "),
-        automaticSilentRenew: false,
-        userStore: new WebStorageStateStore({
-            store: (() => {
-                if (canUseIframe) {
-                    isUserStoreInMemoryOnly = true;
-                    return new InMemoryWebStorage();
+            const domain_here = window.location.origin.split("//")[1];
+
+            let isWellKnownProviderDomain = false;
+            let isIp = false;
+
+            const suggestedDeployments = (() => {
+                if (/^(?:\d{1,3}\.){3}\d{1,3}$|^\[?[A-Fa-f0-9:]+\]?$/.test(domain_auth)) {
+                    isIp = true;
+                    return [];
                 }
 
-                isUserStoreInMemoryOnly = false;
+                const baseDomain = (() => {
+                    const segments = domain_auth.split(".");
 
-                const storage = createEphemeralSessionStorage({
-                    sessionStorageTtlMs: 3 * 60_000
-                });
+                    if (segments.length >= 3) {
+                        segments.shift();
+                    }
+                    return segments.join(".");
+                })();
 
-                const { evtRequestToPersistTokens } = globalContext;
+                {
+                    const baseDomain_low = baseDomain.toLowerCase();
 
-                evtRequestToPersistTokens.subscribe(({ configIdOfInstancePostingTheRequest }) => {
-                    if (configIdOfInstancePostingTheRequest === configId) {
-                        return;
+                    if (
+                        baseDomain_low.includes("auth0") ||
+                        baseDomain_low.includes("clerk") ||
+                        baseDomain_low.includes("microsoft") ||
+                        baseDomain_low.includes("okta") ||
+                        baseDomain_low.includes("aws")
+                    ) {
+                        isWellKnownProviderDomain = true;
+                        return [];
                     }
+                }
 
-                    storage.persistCurrentStateAndSubsequentChanges();
-                });
+                const baseUrl = new URL(homeUrlAndRedirectUri).pathname;
 
-                return storage;
-            })()
-        }),
-        stateStore: new WebStorageStateStore({ store: localStorage, prefix: STATE_STORE_KEY_PREFIX }),
-        client_secret: __unsafe_clientSecret,
-        metadata: __metadata
-    });
+                return [
+                    `myapp.${baseDomain}`,
+                    baseDomain === domain_auth ? undefined : baseDomain,
+                    `${baseDomain}/${baseUrl === "/" ? "dashboard" : baseUrl}`
+                ].filter(x => x !== undefined);
+            })();
+
+            if (isLikelyDevServer) {
+                log?.(
+                    [
+                        "Detected localhost environment.",
+                        "\nWhen reloading while logged in, you may briefly see",
+                        "some URL params appear in the address bar.",
+                        "\nThis happens because session restore via iframe is disabled,",
+                        "the browser treats your auth server as a third party.",
+                        `\nAuth server: ${domain_auth}`,
+                        `\nApp domain:  ${domain_here}`,
+                        ...(() => {
+                            if (isIp) {
+                                return [];
+                            }
+
+                            if (isWellKnownProviderDomain) {
+                                return [
+                                    "\nYou seem to be using a well-known auth provider.",
+                                    "Check your provider's docs, some allow configuring",
+                                    `a your custom domain at least for the authorization endpoint.`,
+                                    "\nIf configured, oidc-spa will restore sessions silently",
+                                    "and improve the user experience."
+                                ];
+                            }
+
+                            return [
+                                "\nOnce deployed under the same root domain as your auth server,",
+                                "oidc-spa will use iframes to restore sessions silently.",
+                                "\nSuggested deployments:",
+                                ...suggestedDeployments.map(d => `\n  • ${d}`)
+                            ];
+                        })(),
+                        "\n\nMore info:",
+                        "https://docs.oidc-spa.dev/v/v8/resources/end-of-third-party-cookies#when-are-cookies-considered-third-party"
+                    ].join(" ")
+                );
+            } else {
+                log?.(
+                    [
+                        "Silent session restore via iframe is disabled.",
+                        `\nAuth server: ${domain_auth}`,
+                        `App domain:  ${domain_here}`,
+                        "\nThey do not share a common root domain.",
+                        ...(() => {
+                            if (isIp) {
+                                return [];
+                            }
+
+                            if (isWellKnownProviderDomain) {
+                                return [
+                                    "\nYou seem to be using a well-known auth provider.",
+                                    "Check if you can configure a custom auth domain.",
+                                    "\nIf so, oidc-spa can restore sessions silently",
+                                    "and improve the user experience."
+                                ];
+                            }
+
+                            return [
+                                "\nTo improve the experience, here are some examples of deployment for your app:",
+                                ...suggestedDeployments.map(d => `\n  • ${d}`)
+                            ];
+                        })(),
+                        "\nMore info:",
+                        "https://docs.oidc-spa.dev/v/v8/resources/end-of-third-party-cookies#when-are-cookies-considered-third-party"
+                    ].join(" ")
+                );
+            }
+
+            return false;
+        }
+
+        return true;
+    })();
+
+    let isUserStoreInMemoryOnly: boolean | undefined = undefined;
+
+    const oidcClientTsUserManager =
+        oidcMetadata === undefined
+            ? createObjectThatThrowsIfAccessed<OidcClientTsUserManager>({
+                  debugMessage: "oidc-spa: Wrong assertion 43943"
+              })
+            : new OidcClientTsUserManager({
+                  stateUrlParamValue: stateUrlParamValue_instance,
+                  authority: issuerUri,
+                  client_id: clientId,
+                  redirect_uri: homeUrlAndRedirectUri,
+                  silent_redirect_uri: homeUrlAndRedirectUri,
+                  post_logout_redirect_uri: homeUrlAndRedirectUri,
+                  response_mode: isKeycloak({ issuerUri }) ? "fragment" : "query",
+                  response_type: "code",
+                  scope: Array.from(new Set(["openid", ...scopes])).join(" "),
+                  automaticSilentRenew: false,
+                  userStore: new WebStorageStateStore({
+                      store: (() => {
+                          if (canUseIframe) {
+                              isUserStoreInMemoryOnly = true;
+                              return new InMemoryWebStorage();
+                          }
+
+                          isUserStoreInMemoryOnly = false;
+
+                          const storage = createEphemeralSessionStorage({
+                              sessionStorageTtlMs: 3 * 60_000
+                          });
+
+                          const { evtRequestToPersistTokens } = globalContext;
+
+                          evtRequestToPersistTokens.subscribe(
+                              ({ configIdOfInstancePostingTheRequest }) => {
+                                  if (configIdOfInstancePostingTheRequest === configId) {
+                                      return;
+                                  }
+
+                                  storage.persistCurrentStateAndSubsequentChanges();
+                              }
+                          );
+
+                          return storage;
+                      })()
+                  }),
+                  stateStore: new WebStorageStateStore({
+                      store: localStorage,
+                      prefix: STATE_STORE_KEY_PREFIX
+                  }),
+                  client_secret: __unsafe_clientSecret,
+                  metadata: oidcMetadata
+              });
 
     const evtInitializationOutcomeUserNotLoggedIn = createEvt<void>();
 
@@ -547,6 +667,14 @@ export async function createOidc_nonMemoized<
               backFromAuthServer: Oidc.LoggedIn["backFromAuthServer"]; // Undefined is silent signin
           }
     > => {
+        if (oidcMetadata === undefined) {
+            return (
+                await import("./diagnostic")
+            ).createWellKnownOidcConfigurationEndpointUnreachableInitializationError({
+                issuerUri
+            });
+        }
+
         handle_redirect_auth_response: {
             let stateDataAndAuthResponse:
                 | { stateData: StateData.Redirect; authResponse: AuthResponse }
@@ -731,6 +859,8 @@ export async function createOidc_nonMemoized<
         // NOTE: We almost never persist tokens, we have to only to support edge case
         // of multiple oidc instance in a single App with no iframe support.
         restore_from_session_storage: {
+            assert(isUserStoreInMemoryOnly !== undefined, "3392204");
+
             if (isUserStoreInMemoryOnly) {
                 break restore_from_session_storage;
             }
@@ -801,20 +931,6 @@ export async function createOidc_nonMemoized<
                 }
 
                 if (!canUseIframe) {
-                    if (
-                        !(await getIsValidRemoteJson(
-                            `${issuerUri}${id<typeof WELL_KNOWN_PATH>(
-                                "/.well-known/openid-configuration"
-                            )}`
-                        ))
-                    ) {
-                        return (
-                            await import("./diagnostic")
-                        ).createWellKnownOidcConfigurationEndpointUnreachableInitializationError({
-                            issuerUri
-                        });
-                    }
-
                     break actual_silent_signin;
                 }
 
@@ -835,26 +951,13 @@ export async function createOidc_nonMemoized<
 
                 assert(result_loginSilent.outcome !== "token refreshed using refresh token", "876995");
 
-                if (result_loginSilent.outcome === "failure") {
-                    switch (result_loginSilent.cause) {
-                        case "can't reach well-known oidc endpoint":
-                            return (
-                                await import("./diagnostic")
-                            ).createWellKnownOidcConfigurationEndpointUnreachableInitializationError({
-                                issuerUri
-                            });
-                        case "timeout":
-                            return (await import("./diagnostic")).createIframeTimeoutInitializationError(
-                                {
-                                    redirectUri: homeUrlAndRedirectUri,
-                                    clientId,
-                                    issuerUri,
-                                    noIframe
-                                }
-                            );
-                    }
-
-                    assert<Equals<typeof result_loginSilent.cause, never>>(false);
+                if (result_loginSilent.outcome === "timeout") {
+                    return (await import("./diagnostic")).createIframeTimeoutInitializationError({
+                        redirectUri: homeUrlAndRedirectUri,
+                        clientId,
+                        issuerUri,
+                        noIframe
+                    });
                 }
 
                 assert<Equals<typeof result_loginSilent.outcome, "got auth response from iframe">>();
@@ -918,9 +1021,7 @@ export async function createOidc_nonMemoized<
                         });
                     }
 
-                    const dCantFetchWellKnownEndpointOrNever = new Deferred<void | never>();
-
-                    loginOrGoToAuthServer({
+                    await loginOrGoToAuthServer({
                         action: "login",
                         doForceReloadOnBfCache: true,
                         redirectUrl: getRootRelativeOriginalLocationHref(),
@@ -939,19 +1040,7 @@ export async function createOidc_nonMemoized<
                             }
 
                             return "ensure no interaction";
-                        })(),
-                        onCantFetchWellKnownEndpointError: () => {
-                            dCantFetchWellKnownEndpointOrNever.resolve();
-                        }
-                    });
-
-                    await dCantFetchWellKnownEndpointOrNever.pr;
-
-                    return (
-                        await import("./diagnostic")
-                    ).createFailedToFetchTokenEndpointInitializationError({
-                        clientId,
-                        issuerUri
+                        })()
                     });
                 }
 
@@ -1072,11 +1161,7 @@ export async function createOidc_nonMemoized<
                             interaction:
                                 getPersistedAuthState({ configId }) === "explicitly logged out"
                                     ? "ensure interaction"
-                                    : "directly redirect if active session show login otherwise",
-                            onCantFetchWellKnownEndpointError: () => {
-                                log?.("Login called but the auth server seems to be down..");
-                                alert("Authentication unavailable please try again later.");
-                            }
+                                    : "directly redirect if active session show login otherwise"
                         });
                     },
                     initializationError: undefined
@@ -1308,16 +1393,7 @@ export async function createOidc_nonMemoized<
                         extraQueryParams_local: undefined,
                         transformUrlBeforeRedirect_local: undefined,
                         doNavigateBackToLastPublicUrlIfTheTheUserNavigateBack: false,
-                        interaction: "directly redirect if active session show login otherwise",
-                        onCantFetchWellKnownEndpointError: () => {
-                            log?.(
-                                [
-                                    "The auth server seems to be down while we needed to refresh the token",
-                                    "with a full page redirect. Reloading the page"
-                                ].join(" ")
-                            );
-                            window.location.reload();
-                        }
+                        interaction: "directly redirect if active session show login otherwise"
                     });
                     assert(false, "136134");
                 };
@@ -1352,10 +1428,10 @@ export async function createOidc_nonMemoized<
                     log
                 });
 
-                if (result_loginSilent.outcome === "failure") {
+                if (result_loginSilent.outcome === "timeout") {
                     log?.(
                         [
-                            `Silent refresh of the token failed with ${result_loginSilent.cause}.`,
+                            `Silent refresh of the token failed the iframe didn't post a response (timeout).`,
                             `This isn't recoverable, reloading the page.`
                         ].join(" ")
                     );
@@ -1545,11 +1621,7 @@ export async function createOidc_nonMemoized<
                 action: "go to auth server",
                 redirectUrl: redirectUrl ?? window.location.href,
                 extraQueryParams_local: extraQueryParams,
-                transformUrlBeforeRedirect_local: transformUrlBeforeRedirect,
-                onCantFetchWellKnownEndpointError: () => {
-                    log?.("goToAuthServer called but the auth server seems to be down..");
-                    alert("Authentication unavailable please try again later.");
-                }
+                transformUrlBeforeRedirect_local: transformUrlBeforeRedirect
             }),
         backFromAuthServer: resultOfLoginProcess.backFromAuthServer,
         isNewBrowserSession: (() => {

package/src/core/diagnostic.ts

@@ -1,8 +1,7 @@
 import { OidcInitializationError } from "./OidcInitializationError";
 import { isKeycloak, createKeycloakUtils } from "../keycloak";
 import { getIsValidRemoteJson } from "../tools/getIsValidRemoteJson";
-
-export const WELL_KNOWN_PATH = "/.well-known/openid-configuration";
+import { WELL_KNOWN_PATH } from "./OidcMetadata";
 
 export async function createWellKnownOidcConfigurationEndpointUnreachableInitializationError(params: {
     issuerUri: string;
@@ -95,6 +94,16 @@ export async function createIframeTimeoutInitializationError(params: {
 }): Promise<OidcInitializationError> {
     const { redirectUri, issuerUri, clientId, noIframe } = params;
 
+    check_if_well_known_endpoint_is_reachable: {
+        const isValid = await getIsValidRemoteJson(`${issuerUri}${WELL_KNOWN_PATH}`);
+
+        if (isValid) {
+            break check_if_well_known_endpoint_is_reachable;
+        }
+
+        return createWellKnownOidcConfigurationEndpointUnreachableInitializationError({ issuerUri });
+    }
+
     iframe_blocked: {
         if (noIframe) {
             break iframe_blocked;
@@ -233,6 +242,16 @@ export async function createFailedToFetchTokenEndpointInitializationError(params
 }) {
     const { issuerUri, clientId } = params;
 
+    check_if_well_known_endpoint_is_reachable: {
+        const isValid = await getIsValidRemoteJson(`${issuerUri}${WELL_KNOWN_PATH}`);
+
+        if (isValid) {
+            break check_if_well_known_endpoint_is_reachable;
+        }
+
+        return createWellKnownOidcConfigurationEndpointUnreachableInitializationError({ issuerUri });
+    }
+
     return new OidcInitializationError({
         isAuthServerLikelyDown: false,
         messageOrCause: [

package/src/core/loginOrGoToAuthServer.ts

@@ -20,7 +20,6 @@ namespace Params {
         redirectUrl: string;
         extraQueryParams_local: Record<string, string | undefined> | undefined;
         transformUrlBeforeRedirect_local: ((url: string) => string) | undefined;
-        onCantFetchWellKnownEndpointError: () => void;
     };
 
     export type Login = Common & {
@@ -90,10 +89,8 @@ export function createLoginOrGoToAuthServer(params: {
             redirectUrl: redirectUrl_params,
             extraQueryParams_local,
             transformUrlBeforeRedirect_local,
-            onCantFetchWellKnownEndpointError: onCantFetchWellKnownEndpointError_params,
             ...rest
         } = params;
-        let onCantFetchWellKnownEndpointError = onCantFetchWellKnownEndpointError_params;
 
         log?.(`Calling loginOrGoToAuthServer ${JSON.stringify(params, null, 2)}`);
 
@@ -147,12 +144,6 @@ export function createLoginOrGoToAuthServer(params: {
                     };
 
                     window.addEventListener("pageshow", callback);
-
-                    onCantFetchWellKnownEndpointError = () => {
-                        window.removeEventListener("pageshow", callback);
-                        onCantFetchWellKnownEndpointError_params();
-                    };
-
                     break bf_cache_handling;
                 }
 
@@ -183,12 +174,6 @@ export function createLoginOrGoToAuthServer(params: {
                 };
 
                 window.addEventListener("pageshow", callback);
-
-                onCantFetchWellKnownEndpointError = () => {
-                    window.removeEventListener("pageshow", callback);
-                    globalContext.evtHasLoginBeenCalled.current = false;
-                    onCantFetchWellKnownEndpointError_params();
-                };
             }
         }
 
@@ -348,13 +333,6 @@ export function createLoginOrGoToAuthServer(params: {
             .then(
                 () => new Promise<never>(() => {}),
                 (error: Error) => {
-                    if (error.message === "Failed to fetch") {
-                        // NOTE: See ./loginSilent for explanation.
-                        onCantFetchWellKnownEndpointError();
-
-                        return new Promise<never>(() => {});
-                    }
-
                     if (error.message.includes("Crypto.subtle is available only in secure contexts")) {
                         throw new Error(
                             [

package/src/core/loginSilent.ts

@@ -20,8 +20,7 @@ type ResultOfLoginSilent =
           authResponse: AuthResponse;
       }
     | {
-          outcome: "failure";
-          cause: "timeout" | "can't reach well-known oidc endpoint";
+          outcome: "timeout";
       }
     | {
           outcome: "token refreshed using refresh token";
@@ -106,8 +105,7 @@ export async function loginSilent(params: {
         const timeouts = [
             setTimeout(() => {
                 dResult.resolve({
-                    outcome: "failure",
-                    cause: "timeout"
+                    outcome: "timeout"
                 });
             }, timeoutDelayMs),
             setTimeout(() => {
@@ -259,28 +257,7 @@ export async function loginSilent(params: {
                     oidcClientTsUser
                 });
             },
-            (error: Error) => {
-                if (error.message === "Failed to fetch") {
-                    // NOTE: If we got an error here it means that the fetch to the
-                    // well-known oidc endpoint failed.
-                    // This usually means that the server is down or that the issuerUri
-                    // is not pointing to a valid oidc server.
-                    // It could be a CORS error on the well-known endpoint but it's unlikely.
-
-                    // NOTE: This error should happen well before we displayed
-                    // the warning notifying that something is probably misconfigured.
-                    // wasSuccess shouldn't really be a required parameter but we do it
-                    // for peace of mind.
-                    clearTimeouts({ wasSuccess: false });
-
-                    dResult.resolve({
-                        outcome: "failure",
-                        cause: "can't reach well-known oidc endpoint"
-                    });
-
-                    return;
-                }
-
+            () => {
                 // NOTE: Here, except error on our understanding there can't be any other
                 // error than timeout so we fail silently and let the timeout expire.
             }
@@ -289,7 +266,7 @@ export async function loginSilent(params: {
     dResult.pr.then(result => {
         clearSessionStoragePublicKey();
 
-        if (result.outcome === "failure") {
+        if (result.outcome === "timeout") {
             clearStateStore({ stateUrlParamValue: stateUrlParamValue_instance });
         }
     });

package/src/keycloak/keycloakIssuerUriParsed.ts

@@ -11,7 +11,16 @@ export type KeycloakIssuerUriParsed = {
 export function parseKeycloakIssuerUri(params: { issuerUri: string }): KeycloakIssuerUriParsed {
     const { issuerUri } = params;
 
-    assert(isKeycloak({ issuerUri }));
+    if (!isKeycloak({ issuerUri })) {
+        throw new Error(
+            [
+                `oidc-spa: The issuer uri provided ${issuerUri}`,
+                "if you are in an environnement that should support multiple",
+                "auth provider, you should first test `isKeycloakUrl({ issuerUri })`",
+                "before calling parseKeycloakIssuerUri({ issuerUri })"
+            ].join(" ")
+        );
+    }
 
     const url = new URL(issuerUri.replace(/\/$/, ""));
 

package/src/tools/isLikelyDevServer.ts

@@ -0,0 +1,17 @@
+export function getIsLikelyDevServer(): boolean {
+    const origin = window.location.origin;
+
+    if (/^https?:\/\/localhost/.test(origin)) {
+        return true;
+    }
+
+    if (/^https?:\/\/\[::\]/.test(origin)) {
+        return true;
+    }
+
+    if (/^https?:\/\/127.0.0.1/.test(origin)) {
+        return true;
+    }
+
+    return false;
+}

package/tools/isLikelyDevServer.d.ts

@@ -0,0 +1 @@
+export declare function getIsLikelyDevServer(): boolean;