oidc-spa 6.5.2 → 6.6.0

package/src/oidc/oidcClientTsUserToTokens.ts

@@ -1,5 +1,5 @@
 import type { User as OidcClientTsUser } from "../vendor/frontend/oidc-client-ts-and-jwt-decode";
-import { assert } from "../vendor/frontend/tsafe";
+import { assert, id } from "../vendor/frontend/tsafe";
 import { readExpirationTimeInJwt } from "../tools/readExpirationTimeInJwt";
 import { decodeJwt } from "../tools/decodeJwt";
 import type { Oidc } from "./Oidc";
@@ -9,7 +9,7 @@ export function oidcClientTsUserToTokens<DecodedIdToken extends Record<string, u
     decodedIdTokenSchema?: { parse: (data: unknown) => DecodedIdToken };
     __unsafe_useIdTokenAsAccessToken: boolean;
     decodedIdToken_previous: DecodedIdToken | undefined;
-    log: ((message: string) => void) | undefined;
+    log: typeof console.log | undefined;
 }): Oidc.Tokens<DecodedIdToken> {
     const {
         oidcClientTsUser,
@@ -19,14 +19,16 @@ export function oidcClientTsUserToTokens<DecodedIdToken extends Record<string, u
         log
     } = params;
 
+    const isFirstInit = decodedIdToken_previous === undefined;
+
     const accessToken = oidcClientTsUser.access_token;
 
     const accessTokenExpirationTime = (() => {
-        read_from_metadata: {
+        read_from_token_response: {
             const { expires_at } = oidcClientTsUser;
 
             if (expires_at === undefined) {
-                break read_from_metadata;
+                break read_from_token_response;
             }
 
             return expires_at * 1000;
@@ -49,7 +51,7 @@ export function oidcClientTsUserToTokens<DecodedIdToken extends Record<string, u
 
     const refreshTokenExpirationTime = (() => {
         if (refreshToken === undefined) {
-            return Number.POSITIVE_INFINITY;
+            return undefined;
         }
 
         read_from_jwt: {
@@ -62,23 +64,50 @@ export function oidcClientTsUserToTokens<DecodedIdToken extends Record<string, u
             return expirationTime;
         }
 
-        log?.(
-            [
-                "Couldn't read the expiration time of the refresh token from the jwt",
-                "It's ok. Some OIDC server like Microsoft Entra ID does not use JWT for the refresh token.",
-                "Be aware that it prevent you from implementing the auto logout mechanism: https://docs.oidc-spa.dev/v/v6/auto-logout",
-                "If you need auto logout you'll have to provide use the __unsafe_ssoSessionIdleSeconds param."
-            ].join("\n")
-        );
-
-        return Number.POSITIVE_INFINITY;
+        return undefined;
     })();
 
     const idToken = oidcClientTsUser.id_token;
 
     assert(idToken !== undefined, "No id token provided by the oidc server");
 
-    const tokens: Oidc.Tokens<DecodedIdToken> = {
+    const decodedIdToken = (() => {
+        let decodedIdToken = decodeJwt(idToken) as DecodedIdToken;
+
+        if (isFirstInit) {
+            log?.(
+                [
+                    `Decoded ID token`,
+                    decodedIdTokenSchema === undefined ? "" : " before `decodedIdTokenSchema.parse()`\n",
+                    JSON.stringify(decodedIdToken, null, 2)
+                ].join("")
+            );
+        }
+
+        if (decodedIdTokenSchema !== undefined) {
+            decodedIdToken = decodedIdTokenSchema.parse(decodedIdToken);
+
+            if (isFirstInit) {
+                log?.(
+                    [
+                        "Decoded ID token after `decodedIdTokenSchema.parse()`\n",
+                        JSON.stringify(decodedIdToken, null, 2)
+                    ].join("")
+                );
+            }
+        }
+
+        if (
+            decodedIdToken_previous !== undefined &&
+            JSON.stringify(decodedIdToken) === JSON.stringify(decodedIdToken_previous)
+        ) {
+            return decodedIdToken_previous;
+        }
+
+        return decodedIdToken;
+    })();
+
+    const tokens_common: Oidc.Tokens.Common<DecodedIdToken> = {
         ...(__unsafe_useIdTokenAsAccessToken
             ? {
                   accessToken: idToken,
@@ -94,27 +123,37 @@ export function oidcClientTsUserToTokens<DecodedIdToken extends Record<string, u
                   })()
               }
             : { accessToken, accessTokenExpirationTime }),
-        refreshToken: refreshToken ?? "",
-        refreshTokenExpirationTime,
         idToken,
-        decodedIdToken: (() => {
-            let decodedIdToken = decodeJwt(idToken) as DecodedIdToken;
-
-            if (decodedIdTokenSchema !== undefined) {
-                decodedIdToken = decodedIdTokenSchema.parse(decodedIdToken);
-            }
-
-            if (
-                decodedIdToken_previous !== undefined &&
-                JSON.stringify(decodedIdToken) === JSON.stringify(decodedIdToken_previous)
-            ) {
-                return decodedIdToken_previous;
-            }
-
-            return decodedIdToken;
-        })()
+        decodedIdToken
     };
 
+    const tokens: Oidc.Tokens<DecodedIdToken> =
+        refreshToken === undefined
+            ? id<Oidc.Tokens.WithoutRefreshToken<DecodedIdToken>>({
+                  ...tokens_common,
+                  hasRefreshToken: false
+              })
+            : id<Oidc.Tokens.WithRefreshToken<DecodedIdToken>>({
+                  ...tokens_common,
+                  hasRefreshToken: true,
+                  refreshToken,
+                  refreshTokenExpirationTime
+              });
+
+    if (
+        isFirstInit &&
+        tokens.hasRefreshToken &&
+        tokens.refreshTokenExpirationTime !== undefined &&
+        tokens.refreshTokenExpirationTime < tokens.accessTokenExpirationTime
+    ) {
+        console.warn(
+            [
+                "The OIDC refresh token shorter than the one of the access token.",
+                "This is very unusual and probably a misconfiguration."
+            ].join(" ")
+        );
+    }
+
     return tokens;
 }
 
@@ -124,7 +163,7 @@ export function getMsBeforeExpiration(tokens: Oidc.Tokens): number {
     // assumption here.
     const tokenExpirationTime = Math.min(
         tokens.accessTokenExpirationTime,
-        tokens.refreshTokenExpirationTime
+        tokens.refreshTokenExpirationTime ?? Number.POSITIVE_INFINITY
     );
 
     const msBeforeExpiration = Math.min(

package/src/oidc/ongoingLoginOrRefreshProcesses.ts

@@ -0,0 +1,60 @@
+import { Deferred } from "../tools/Deferred";
+import { assert } from "../vendor/frontend/tsafe";
+
+const GLOBAL_CONTEXT_KEY = "__oidc-spa.ongoingLoginOrRefreshProcesses.globalContext";
+
+declare global {
+    interface Window {
+        [GLOBAL_CONTEXT_KEY]: {
+            prDone_arr: Promise<void>[];
+            prUnlock: Promise<void>;
+        };
+    }
+}
+
+window[GLOBAL_CONTEXT_KEY] ??= {
+    prDone_arr: [],
+    prUnlock: Promise.resolve()
+};
+
+const globalContext = window[GLOBAL_CONTEXT_KEY];
+
+export async function startLoginOrRefreshProcess(): Promise<{
+    completeLoginOrRefreshProcess: () => void;
+}> {
+    await globalContext.prUnlock;
+
+    const dDone = new Deferred<void>();
+
+    const { prDone_arr } = globalContext;
+
+    prDone_arr.push(dDone.pr);
+
+    function completeLoginOrRefreshProcess() {
+        const index = prDone_arr.indexOf(dDone.pr);
+
+        assert(index !== -1);
+
+        prDone_arr.splice(index, 1);
+
+        dDone.resolve();
+    }
+
+    return { completeLoginOrRefreshProcess };
+}
+
+export async function waitForAllOtherOngoingLoginOrRefreshProcessesToComplete(params: {
+    prUnlock: Promise<void>;
+}): Promise<void> {
+    const { prUnlock } = params;
+
+    const prUnlock_current = globalContext.prUnlock;
+
+    globalContext.prUnlock = (async () => {
+        await prUnlock_current;
+
+        await prUnlock;
+    })();
+
+    await Promise.all(globalContext.prDone_arr);
+}

package/src/oidc/persistedAuthState.ts

@@ -1,4 +1,4 @@
-import { assert } from "../vendor/frontend/tsafe";
+import { typeGuard, id } from "../vendor/frontend/tsafe";
 
 function getKey(params: { configId: string }) {
     const { configId } = params;
@@ -6,9 +6,29 @@ function getKey(params: { configId: string }) {
     return `oidc-spa:auth-state:${configId}`;
 }
 
-type PersistedAuthState = "logged in" | "explicitly logged out";
+type PersistedAuthState = PersistedAuthState.LoggedIn | PersistedAuthState.ExplicitlyLoggedOut;
+namespace PersistedAuthState {
+    type Common = {
+        __brand: "PersistedAuthState-v1";
+    };
 
-export function persistAuthState(params: { configId: string; state: PersistedAuthState | undefined }) {
+    export type LoggedIn = Common & {
+        stateDescription: "logged in";
+        untilTime: number | undefined;
+    };
+
+    export type ExplicitlyLoggedOut = Common & {
+        stateDescription: "explicitly logged out";
+    };
+}
+
+export function persistAuthState(params: {
+    configId: string;
+    state:
+        | Omit<PersistedAuthState.ExplicitlyLoggedOut, "__brand">
+        | Omit<PersistedAuthState.LoggedIn, "__brand">
+        | undefined;
+}) {
     const { configId, state } = params;
 
     const key = getKey({ configId });
@@ -18,19 +38,57 @@ export function persistAuthState(params: { configId: string; state: PersistedAut
         return;
     }
 
-    localStorage.setItem(key, state);
+    localStorage.setItem(
+        key,
+        JSON.stringify(
+            id<PersistedAuthState>({
+                __brand: "PersistedAuthState-v1",
+                ...state
+            })
+        )
+    );
 }
 
-export function getPersistedAuthState(params: { configId: string }): PersistedAuthState | undefined {
+export function getPersistedAuthState(params: {
+    configId: string;
+}): PersistedAuthState["stateDescription"] | undefined {
     const { configId } = params;
 
-    const value = localStorage.getItem(getKey({ configId }));
+    const key = getKey({ configId });
+
+    const value = localStorage.getItem(key);
 
     if (value === null) {
         return undefined;
     }
 
-    assert(value === "logged in" || value === "explicitly logged out");
+    let state: unknown;
+
+    try {
+        state = JSON.parse(value);
+    } catch {
+        localStorage.removeItem(key);
+        return undefined;
+    }
+
+    if (
+        !typeGuard<PersistedAuthState>(
+            state,
+            state instanceof Object &&
+                "__brand" in state &&
+                state.__brand === id<PersistedAuthState["__brand"]>("PersistedAuthState-v1")
+        )
+    ) {
+        localStorage.removeItem(key);
+        return undefined;
+    }
+
+    if (state.stateDescription === "logged in") {
+        if (state.untilTime !== undefined && state.untilTime <= Date.now()) {
+            localStorage.removeItem(key);
+            return undefined;
+        }
+    }
 
-    return value;
+    return state.stateDescription;
 }

package/src/react/react.tsx

@@ -235,7 +235,7 @@ export function createOidcReactApi_dependencyInjection<
             return unsubscribe;
         }, [oidc]);
 
-        const refTokensState = useRef<{
+        const tokensState_ref = useRef<{
             isConsumerReadingTokens: boolean;
             tokens: Oidc.Tokens<DecodedIdToken> | undefined;
         }>({
@@ -243,23 +243,17 @@ export function createOidcReactApi_dependencyInjection<
             tokens: undefined
         });
 
-        const tokensPropertyDescriptorGetter = () => {
-            const tokenState = refTokensState.current;
-            tokenState.isConsumerReadingTokens = true;
-            return tokenState.tokens;
-        };
-
         useEffect(() => {
             if (!oidc.isUserLoggedIn) {
                 return;
             }
 
             const updateTokens = (tokens: Oidc.Tokens<DecodedIdToken>) => {
-                if (tokens === refTokensState.current.tokens) {
+                if (tokens === tokensState_ref.current.tokens) {
                     return;
                 }
 
-                const tokenState = refTokensState.current;
+                const tokenState = tokensState_ref.current;
 
                 tokenState.tokens = tokens;
 
@@ -305,7 +299,11 @@ export function createOidcReactApi_dependencyInjection<
             isUserLoggedIn: true,
             oidcTokens: oidc.getTokens(),
             decodedIdToken: oidc.getDecodedIdToken(),
-            tokens: null as any,
+            get tokens() {
+                const tokensState = tokensState_ref.current;
+                tokensState.isConsumerReadingTokens = true;
+                return tokensState.tokens;
+            },
             logout: oidc.logout,
             renewTokens: oidc.renewTokens,
             subscribeToAutoLogoutCountdown: oidc.subscribeToAutoLogoutCountdown,
@@ -314,12 +312,6 @@ export function createOidcReactApi_dependencyInjection<
             backFromAuthServer: oidc.backFromAuthServer
         };
 
-        Object.defineProperty(oidcReact, "tokens", {
-            get: tokensPropertyDescriptorGetter,
-            enumerable: true,
-            configurable: true
-        });
-
         return oidcReact;
     }
 

package/src/tools/{ephemeralSessionStorage.ts → EphemeralSessionStorage.ts}

@@ -1,15 +1,11 @@
 import { assert, typeGuard, id } from "../vendor/frontend/tsafe";
 
 type SessionStorageItem_Parsed = {
-    __brand: typeof SessionStorageItem_Parsed.brand;
+    __brand: "SessionStorageItem_Parsed-v1";
     value: string;
     expiresAtTime: number;
 };
 
-namespace SessionStorageItem_Parsed {
-    export const brand = "SessionStorageItem_Parsed";
-}
-
 function parseSessionStorageItem(
     sessionStorageItemValue: string
 ): SessionStorageItem_Parsed | undefined {
@@ -26,7 +22,7 @@ function parseSessionStorageItem(
             json,
             json instanceof Object &&
                 "__brand" in json &&
-                json.__brand === SessionStorageItem_Parsed.brand
+                json.__brand === id<SessionStorageItem_Parsed["__brand"]>("SessionStorageItem_Parsed-v1")
         )
     ) {
         return undefined;
@@ -72,7 +68,7 @@ function createStoreInSessionStorageAndScheduleRemovalInMemoryItem(params: {
         sessionStorageKey,
         JSON.stringify(
             id<SessionStorageItem_Parsed>({
-                __brand: "SessionStorageItem_Parsed",
+                __brand: "SessionStorageItem_Parsed-v1",
                 value,
                 expiresAtTime: Date.now() + remainingTtlMs
             })
@@ -82,7 +78,22 @@ function createStoreInSessionStorageAndScheduleRemovalInMemoryItem(params: {
     return inMemoryItem;
 }
 
-export function createEphemeralSessionStorage(params: { sessionStorageTtlMs: number }): Storage {
+export type EphemeralSessionStorage = {
+    // `Storage` methods, we don't use the type directly because it has [name: string]: any;
+    readonly length: number;
+    clear(): void;
+    getItem(key: string): string | null;
+    key(index: number): string | null;
+    removeItem(key: string): void;
+    setItem(key: string, value: string): void;
+
+    // Custom method
+    persistCurrentStateAndSubsequentChanges: () => void;
+};
+
+export function createEphemeralSessionStorage(params: {
+    sessionStorageTtlMs: number;
+}): EphemeralSessionStorage {
     const { sessionStorageTtlMs } = params;
 
     const inMemoryItems: InMemoryItem[] = [];
@@ -107,25 +118,40 @@ export function createEphemeralSessionStorage(params: { sessionStorageTtlMs: num
 
         const remainingTtlMs = sessionStorageItem_parsed.expiresAtTime - Date.now();
 
+        sessionStorage.removeItem(sessionStorageKey);
+
         if (remainingTtlMs <= 0) {
-            sessionStorage.removeItem(sessionStorageKey);
             continue;
         }
 
-        inMemoryItems.push(
-            createStoreInSessionStorageAndScheduleRemovalInMemoryItem({
-                key: sessionStorageKey.slice(SESSION_STORAGE_PREFIX.length),
-                value: sessionStorageItem_parsed.value,
-                remainingTtlMs
-            })
-        );
+        inMemoryItems.push({
+            key: sessionStorageKey.slice(SESSION_STORAGE_PREFIX.length),
+            value: sessionStorageItem_parsed.value,
+            removeFromSessionStorage: undefined
+        });
     }
 
-    const storage = {
+    let isPersistenceEnabled = false;
+
+    const storage: EphemeralSessionStorage = {
+        persistCurrentStateAndSubsequentChanges: () => {
+            isPersistenceEnabled = true;
+
+            for (let i = 0; i < storage.length; i++) {
+                const key = storage.key(i);
+                assert(key !== null);
+
+                const value = storage.getItem(key);
+
+                assert(value !== null);
+
+                storage.setItem(key, value);
+            }
+        },
         get length() {
             return inMemoryItems.length;
         },
-        key(index: number) {
+        key: index => {
             const inMemoryItem = inMemoryItems[index];
 
             if (inMemoryItem === undefined) {
@@ -134,7 +160,7 @@ export function createEphemeralSessionStorage(params: { sessionStorageTtlMs: num
 
             return inMemoryItem.key;
         },
-        removeItem(key: string) {
+        removeItem: key => {
             const inMemoryItem = inMemoryItems.find(item => item.key === key);
 
             if (inMemoryItem === undefined) {
@@ -147,21 +173,21 @@ export function createEphemeralSessionStorage(params: { sessionStorageTtlMs: num
 
             inMemoryItems.splice(index, 1);
         },
-        clear() {
+        clear: () => {
             for (let i = 0; i < storage.length; i++) {
                 const key = storage.key(i);
                 assert(key !== null);
                 storage.removeItem(key);
             }
         },
-        getItem(key: string) {
+        getItem: key => {
             const inMemoryItem = inMemoryItems.find(item => item.key === key);
             if (inMemoryItem === undefined) {
                 return null;
             }
             return inMemoryItem.value;
         },
-        setItem(key: string, value: string) {
+        setItem: (key, value) => {
             let existingInMemoryItemIndex: number | undefined = undefined;
 
             {
@@ -173,11 +199,17 @@ export function createEphemeralSessionStorage(params: { sessionStorageTtlMs: num
                 }
             }
 
-            const inMemoryItem_new = createStoreInSessionStorageAndScheduleRemovalInMemoryItem({
-                key,
-                value,
-                remainingTtlMs: sessionStorageTtlMs
-            });
+            const inMemoryItem_new = isPersistenceEnabled
+                ? createStoreInSessionStorageAndScheduleRemovalInMemoryItem({
+                      key,
+                      value,
+                      remainingTtlMs: sessionStorageTtlMs
+                  })
+                : id<InMemoryItem>({
+                      key,
+                      value,
+                      removeFromSessionStorage: undefined
+                  });
 
             if (existingInMemoryItemIndex !== undefined) {
                 inMemoryItems[existingInMemoryItemIndex] = inMemoryItem_new;

package/src/tools/Evt.ts

@@ -0,0 +1,56 @@
+import { Deferred } from "./Deferred";
+import { assert, is } from "../vendor/frontend/tsafe";
+
+export type NonPostableEvt<T> = {
+    waitFor: () => Promise<T>;
+    subscribe: (next: (data: T) => void) => { unsubscribe: () => void };
+    postCount: number;
+};
+
+export type Evt<T> = NonPostableEvt<T> & {
+    post: (data: T) => void;
+};
+
+export function createEvt<T>(): Evt<T> {
+    const eventTarget = new EventTarget();
+    const KEY = "event";
+
+    let postCount = 0;
+
+    const evt: Evt<T> = {
+        subscribe: next => {
+            const listener = (e: Event) => {
+                assert(is<CustomEvent<T>>(e));
+
+                next(e.detail);
+            };
+
+            eventTarget.addEventListener(KEY, listener);
+
+            return {
+                unsubscribe: () => {
+                    eventTarget.removeEventListener(KEY, listener);
+                }
+            };
+        },
+        waitFor: () => {
+            const d = new Deferred<T>();
+
+            const { unsubscribe } = evt.subscribe(data => {
+                unsubscribe();
+                d.resolve(data);
+            });
+
+            return d.pr;
+        },
+        post: (data: T) => {
+            postCount++;
+            eventTarget.dispatchEvent(new CustomEvent(KEY, { detail: data }));
+        },
+        get postCount() {
+            return postCount;
+        }
+    };
+
+    return evt;
+}

package/src/tools/StatefulEvt.ts

@@ -0,0 +1,38 @@
+export type StatefulEvt<T> = {
+    current: T;
+    subscribe: (next: (data: T) => void) => Subscription;
+};
+
+export type StatefulReadonlyEvt<T> = {
+    readonly current: T;
+    subscribe: (next: (data: T) => void) => Subscription;
+};
+
+export type Subscription = {
+    unsubscribe: () => void;
+};
+
+export function createStatefulEvt<T>(getInitialValue: () => T): StatefulEvt<T> {
+    let nextFunctions: ((data: T) => void)[] = [];
+
+    let wrappedState: [T] | undefined = undefined;
+
+    return {
+        get current() {
+            if (wrappedState === undefined) {
+                wrappedState = [getInitialValue()];
+            }
+            return wrappedState[0];
+        },
+        set current(data: T) {
+            wrappedState = [data];
+
+            nextFunctions.forEach(next => next(data));
+        },
+        subscribe: (next: (data: T) => void) => {
+            nextFunctions.push(next);
+
+            return { unsubscribe: () => nextFunctions.splice(nextFunctions.indexOf(next), 1) };
+        }
+    };
+}

package/src/tools/subscribeToUserInteraction.ts

@@ -1,5 +1,4 @@
 import { getPrUserInteraction } from "./getPrUserInteraction";
-import { clearTimeout, setTimeout } from "../tools/workerTimers";
 
 export function subscribeToUserInteraction(params: { throttleMs: number; callback: () => void }) {
     const { throttleMs } = params;