oidc-spa 6.6.1 → 6.8.0

package/src/oidc/createOidc.ts

@@ -57,11 +57,22 @@ export type ParamsOfCreateOidc<
      **/
     scopes?: string[];
     /**
-     * Transform the url before redirecting to the login pages.
+     * Transform the url of the authorization endpoint before redirecting to the login pages.
      */
     transformUrlBeforeRedirect?: (url: string) => string;
+
+    /**
+     * NOTE: Will replace transformUrlBeforeRedirect in the next major version.
+     *
+     * Transform the url (authorization endpoint) before redirecting to the login pages.
+     *
+     * The isSilent parameter is true when the redirect is initiated in the background iframe for silent signin.
+     * This can be used to omit ui related query parameters (like `ui_locales`).
+     */
+    transformUrlBeforeRedirect_next?: (params: { isSilent: boolean; url: string }) => string;
+
     /**
-     * Extra query params to be added on the login url.
+     * Extra query params to be added to the authorization endpoint url before redirecting or silent signing in.
      * You can provide a function that returns those extra query params, it will be called
      * when login() is called.
      *
@@ -69,7 +80,9 @@ export type ParamsOfCreateOidc<
      *
      * This parameter can also be passed to login() directly.
      */
-    extraQueryParams?: Record<string, string> | (() => Record<string, string>);
+    extraQueryParams?:
+        | Record<string, string | undefined>
+        | ((params: { isSilent: boolean; url: string }) => Record<string, string | undefined>);
     /**
      * Extra body params to be added to the /token POST request.
      *
@@ -81,7 +94,7 @@ export type ParamsOfCreateOidc<
      * Example: extraTokenParams: ()=> ({ selectedCustomer: "xxx" })
      *          extraTokenParams: { selectedCustomer: "xxx" }
      */
-    extraTokenParams?: Record<string, string> | (() => Record<string, string>);
+    extraTokenParams?: Record<string, string | undefined> | (() => Record<string, string | undefined>);
     /**
      * Where to redirect after successful login.
      * Default: window.location.href (here)
@@ -246,6 +259,7 @@ export async function createOidc_nonMemoized<
     }
 ): Promise<AutoLogin extends true ? Oidc.LoggedIn<DecodedIdToken> : Oidc<DecodedIdToken>> {
     const {
+        transformUrlBeforeRedirect_next,
         transformUrlBeforeRedirect,
         extraQueryParams: extraQueryParamsOrGetter,
         extraTokenParams: extraTokenParamsOrGetter,
@@ -261,19 +275,29 @@ export async function createOidc_nonMemoized<
 
     const { issuerUri, clientId, scopes, configId, log } = preProcessedParams;
 
-    const [getExtraQueryParams, getExtraTokenParams] = (
-        [extraQueryParamsOrGetter, extraTokenParamsOrGetter] as const
-    ).map(valueOrGetter => {
-        if (typeof valueOrGetter === "function") {
-            return valueOrGetter;
+    const getExtraQueryParams = (() => {
+        if (extraQueryParamsOrGetter === undefined) {
+            return undefined;
         }
 
-        if (valueOrGetter !== undefined) {
-            return () => valueOrGetter;
+        if (typeof extraQueryParamsOrGetter !== "function") {
+            return () => extraQueryParamsOrGetter;
         }
 
-        return undefined;
-    });
+        return extraQueryParamsOrGetter;
+    })();
+
+    const getExtraTokenParams = (() => {
+        if (extraTokenParamsOrGetter === undefined) {
+            return undefined;
+        }
+
+        if (typeof extraTokenParamsOrGetter !== "function") {
+            return () => extraTokenParamsOrGetter;
+        }
+
+        return extraTokenParamsOrGetter;
+    })();
 
     const homeAndCallbackUrl = toFullyQualifiedUrl({
         urlish: homeUrl_params,
@@ -369,8 +393,10 @@ export async function createOidc_nonMemoized<
     const { loginOrGoToAuthServer } = createLoginOrGoToAuthServer({
         configId,
         oidcClientTsUserManager,
-        getExtraQueryParams,
         transformUrlBeforeRedirect,
+        transformUrlBeforeRedirect_next,
+        getExtraQueryParams,
+        getExtraTokenParams,
         homeAndCallbackUrl,
         evtIsUserLoggedIn,
         log
@@ -400,7 +426,13 @@ export async function createOidc_nonMemoized<
             switch (stateData.action) {
                 case "login":
                     {
-                        log?.("Handling login redirect auth response", authResponse);
+                        log?.(
+                            `Handling login redirect auth response ${JSON.stringify(
+                                authResponse,
+                                null,
+                                2
+                            )}`
+                        );
 
                         const authResponseUrl = authResponseToUrl(authResponse);
 
@@ -540,6 +572,8 @@ export async function createOidc_nonMemoized<
                     oidcClientTsUserManager,
                     stateQueryParamValue_instance,
                     configId,
+                    transformUrlBeforeRedirect_next,
+                    getExtraQueryParams,
                     getExtraTokenParams
                 });
 
@@ -886,7 +920,9 @@ export async function createOidc_nonMemoized<
             return new Promise<never>(() => {});
         },
         renewTokens: (() => {
-            async function renewTokens_nonMutexed(params: { extraTokenParams: Record<string, string> }) {
+            async function renewTokens_nonMutexed(params: {
+                extraTokenParams: Record<string, string | undefined>;
+            }) {
                 const { extraTokenParams } = params;
 
                 log?.("Renewing tokens");
@@ -897,6 +933,8 @@ export async function createOidc_nonMemoized<
                     oidcClientTsUserManager,
                     stateQueryParamValue_instance,
                     configId,
+                    transformUrlBeforeRedirect_next,
+                    getExtraQueryParams,
                     getExtraTokenParams: () => extraTokenParams
                 });
 
@@ -999,7 +1037,7 @@ export async function createOidc_nonMemoized<
             let ongoingCall:
                 | {
                       pr: Promise<void>;
-                      extraTokenParams: Record<string, string>;
+                      extraTokenParams: Record<string, string | undefined>;
                   }
                 | undefined = undefined;
 

package/src/oidc/loginOrGoToAuthServer.ts

@@ -1,7 +1,7 @@
 import type { UserManager as OidcClientTsUserManager } from "../vendor/frontend/oidc-client-ts-and-jwt-decode";
 import { toFullyQualifiedUrl } from "../tools/toFullyQualifiedUrl";
-import { id, assert, type Equals } from "../vendor/frontend/tsafe";
-import type { StateData } from "./StateData";
+import { assert, type Equals, noUndefined } from "../vendor/frontend/tsafe";
+import { StateData } from "./StateData";
 import type { NonPostableEvt } from "../tools/Evt";
 import { type StatefulEvt, createStatefulEvt } from "../tools/StatefulEvt";
 import { Deferred } from "../tools/Deferred";
@@ -27,7 +27,7 @@ type Params = Params.Login | Params.GoToAuthServer;
 namespace Params {
     type Common = {
         redirectUrl: string;
-        extraQueryParams_local: Record<string, string> | undefined;
+        extraQueryParams_local: Record<string, string | undefined> | undefined;
         transformUrlBeforeRedirect_local: ((url: string) => string) | undefined;
     };
 
@@ -59,8 +59,15 @@ export function getPrSafelyRestoredFromBfCacheAfterLoginBackNavigation() {
 export function createLoginOrGoToAuthServer(params: {
     configId: string;
     oidcClientTsUserManager: OidcClientTsUserManager;
-    getExtraQueryParams: (() => Record<string, string>) | undefined;
     transformUrlBeforeRedirect: ((url: string) => string) | undefined;
+    transformUrlBeforeRedirect_next: ((params: { isSilent: false; url: string }) => string) | undefined;
+
+    getExtraQueryParams:
+        | ((params: { isSilent: false; url: string }) => Record<string, string | undefined>)
+        | undefined;
+
+    getExtraTokenParams: (() => Record<string, string | undefined>) | undefined;
+
     homeAndCallbackUrl: string;
     evtIsUserLoggedIn: NonPostableEvt<boolean>;
     log: typeof console.log | undefined;
@@ -68,8 +75,13 @@ export function createLoginOrGoToAuthServer(params: {
     const {
         configId,
         oidcClientTsUserManager,
-        getExtraQueryParams,
+
         transformUrlBeforeRedirect,
+        transformUrlBeforeRedirect_next,
+        getExtraQueryParams,
+
+        getExtraTokenParams,
+
         homeAndCallbackUrl,
         evtIsUserLoggedIn,
         log
@@ -83,7 +95,7 @@ export function createLoginOrGoToAuthServer(params: {
         const {
             redirectUrl: redirectUrl_params,
             extraQueryParams_local,
-            transformUrlBeforeRedirect_local,
+            transformUrlBeforeRedirect_local: transformUrl,
             ...rest
         } = params;
 
@@ -152,33 +164,82 @@ export function createLoginOrGoToAuthServer(params: {
 
         log?.(`redirectUrl: ${redirectUrl}`);
 
+        const stateData: 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;
+                }
+            })()
+        };
+
         const transformUrl_oidcClientTs = (url: string) => {
             (
                 [
-                    [getExtraQueryParams?.(), transformUrlBeforeRedirect],
-                    [extraQueryParams_local, transformUrlBeforeRedirect_local]
+                    [
+                        undefined,
+                        transformUrlBeforeRedirect_next === undefined
+                            ? undefined
+                            : (url: string) => transformUrlBeforeRedirect_next({ url, isSilent: false })
+                    ],
+                    [getExtraQueryParams, transformUrlBeforeRedirect],
+                    [extraQueryParams_local, transformUrl]
                 ] as const
-            ).forEach(([extraQueryParams, transformUrlBeforeRedirect]) => {
+            ).forEach(([extraQueryParamsMaybeGetter, transformUrlBeforeRedirect], i) => {
+                const urlObj_before = i !== 2 ? undefined : new URL(url);
+
                 add_extra_query_params: {
-                    if (extraQueryParams === undefined) {
+                    if (extraQueryParamsMaybeGetter === undefined) {
                         break add_extra_query_params;
                     }
 
+                    const extraQueryParams =
+                        typeof extraQueryParamsMaybeGetter === "function"
+                            ? extraQueryParamsMaybeGetter({ isSilent: false, url })
+                            : extraQueryParamsMaybeGetter;
+
                     const url_obj = new URL(url);
 
                     for (const [name, value] of Object.entries(extraQueryParams)) {
+                        if (value === undefined) {
+                            continue;
+                        }
                         url_obj.searchParams.set(name, value);
                     }
 
                     url = url_obj.href;
                 }
 
-                apply_transform_before_redirect: {
+                apply_transform_url: {
                     if (transformUrlBeforeRedirect === undefined) {
-                        break apply_transform_before_redirect;
+                        break apply_transform_url;
                     }
                     url = transformUrlBeforeRedirect(url);
                 }
+
+                update_state: {
+                    if (urlObj_before === undefined) {
+                        break update_state;
+                    }
+
+                    for (const [name, value] of new URL(url).searchParams.entries()) {
+                        const value_before = urlObj_before.searchParams.get(name);
+
+                        if (value_before === value) {
+                            continue;
+                        }
+
+                        stateData.extraQueryParams[name] = value;
+                    }
+                }
             });
 
             return url;
@@ -197,48 +258,9 @@ export function createLoginOrGoToAuthServer(params: {
 
         log?.(`redirectMethod: ${redirectMethod}`);
 
-        const { extraQueryParams } = (() => {
-            const extraQueryParams: Record<string, string> = extraQueryParams_local ?? {};
-
-            read_query_params_added_by_transform_before_redirect: {
-                if (transformUrlBeforeRedirect_local === undefined) {
-                    break read_query_params_added_by_transform_before_redirect;
-                }
-
-                let url_afterTransform;
-
-                try {
-                    url_afterTransform = transformUrlBeforeRedirect_local("https://dummy.com");
-                } catch {
-                    break read_query_params_added_by_transform_before_redirect;
-                }
-
-                for (const [name, value] of new URL(url_afterTransform).searchParams) {
-                    extraQueryParams[name] = value;
-                }
-            }
-
-            return { extraQueryParams };
-        })();
-
         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;
-                        }
-                    })()
-                }),
+                state: stateData,
                 redirectMethod,
                 prompt: (() => {
                     switch (rest.action) {
@@ -249,7 +271,9 @@ export function createLoginOrGoToAuthServer(params: {
                     }
                     assert<Equals<typeof rest, never>>;
                 })(),
-                transformUrl: transformUrl_oidcClientTs
+                transformUrl: transformUrl_oidcClientTs,
+                extraTokenParams:
+                    getExtraTokenParams === undefined ? undefined : noUndefined(getExtraTokenParams())
             })
             .then(() => new Promise<never>(() => {}));
     }

package/src/oidc/loginSilent.ts

@@ -1,6 +1,6 @@
 import type { UserManager as OidcClientTsUserManager } from "../vendor/frontend/oidc-client-ts-and-jwt-decode";
 import { Deferred } from "../tools/Deferred";
-import { id, assert } from "../vendor/frontend/tsafe";
+import { id, assert, noUndefined } from "../vendor/frontend/tsafe";
 import { getStateData, clearStateStore, type StateData } from "./StateData";
 import { getDownlinkAndRtt } from "../tools/getDownlinkAndRtt";
 import { getIsDev } from "../tools/isDev";
@@ -25,10 +25,23 @@ export async function loginSilent(params: {
     oidcClientTsUserManager: OidcClientTsUserManager;
     stateQueryParamValue_instance: string;
     configId: string;
-    getExtraTokenParams: (() => Record<string, string>) | undefined;
+
+    transformUrlBeforeRedirect_next: ((params: { isSilent: true; url: string }) => string) | undefined;
+
+    getExtraQueryParams:
+        | ((params: { isSilent: true; url: string }) => Record<string, string | undefined>)
+        | undefined;
+
+    getExtraTokenParams: (() => Record<string, string | undefined>) | undefined;
 }): Promise<ResultOfLoginSilent> {
-    const { oidcClientTsUserManager, stateQueryParamValue_instance, configId, getExtraTokenParams } =
-        params;
+    const {
+        oidcClientTsUserManager,
+        stateQueryParamValue_instance,
+        configId,
+        transformUrlBeforeRedirect_next,
+        getExtraQueryParams,
+        getExtraTokenParams
+    } = params;
 
     const dResult = new Deferred<ResultOfLoginSilent>();
 
@@ -88,6 +101,36 @@ export async function loginSilent(params: {
 
     window.addEventListener("message", listener, false);
 
+    const transformUrl_oidcClientTs = (url: string) => {
+        add_extra_query_params: {
+            if (getExtraQueryParams === undefined) {
+                break add_extra_query_params;
+            }
+
+            const extraQueryParams = getExtraQueryParams({ isSilent: true, url });
+
+            const url_obj = new URL(url);
+
+            for (const [name, value] of Object.entries(extraQueryParams)) {
+                if (value === undefined) {
+                    continue;
+                }
+                url_obj.searchParams.set(name, value);
+            }
+
+            url = url_obj.href;
+        }
+
+        apply_transform_url: {
+            if (transformUrlBeforeRedirect_next === undefined) {
+                break apply_transform_url;
+            }
+            url = transformUrlBeforeRedirect_next({ url, isSilent: true });
+        }
+
+        return url;
+    };
+
     oidcClientTsUserManager
         .signinSilent({
             state: id<StateData.IFrame>({
@@ -95,7 +138,9 @@ export async function loginSilent(params: {
                 configId
             }),
             silentRequestTimeoutInSeconds: timeoutDelayMs / 1000,
-            extraTokenParams: getExtraTokenParams?.()
+            extraTokenParams:
+                getExtraTokenParams === undefined ? undefined : noUndefined(getExtraTokenParams()),
+            transformUrl: transformUrl_oidcClientTs
         })
         .then(
             oidcClientTsUser => {

package/src/react/react.tsx

@@ -5,11 +5,13 @@ import {
     useContext,
     useReducer,
     useRef,
-    type ReactNode
+    type ReactNode,
+    type ComponentType,
+    type FC,
+    JSX
 } from "react";
-import type { JSX } from "../tools/JSX";
 import { type Oidc, createOidc, type ParamsOfCreateOidc, OidcInitializationError } from "../oidc";
-import { assert, type Equals } from "../vendor/frontend/tsafe";
+import { assert, type Equals, type Param0 } from "../vendor/frontend/tsafe";
 import { id } from "../vendor/frontend/tsafe";
 import type { ValueOrAsyncGetter } from "../tools/ValueOrAsyncGetter";
 import { Deferred } from "../tools/Deferred";
@@ -23,7 +25,12 @@ export namespace OidcReact {
 
     export type NotLoggedIn = Common & {
         isUserLoggedIn: false;
-        login: Oidc.NotLoggedIn["login"];
+        login: (params?: {
+            extraQueryParams?: Record<string, string | undefined>;
+            redirectUrl?: string;
+            transformUrlBeforeRedirect?: (url: string) => string;
+            doesCurrentHrefRequiresAuth?: boolean;
+        }) => Promise<never>;
         initializationError: OidcInitializationError | undefined;
 
         /** @deprecated: Use `const { decodedIdToken, tokens} = useOidc();` */
@@ -67,6 +74,14 @@ export namespace OidcReact {
         isNewBrowserSession: boolean;
     };
 }
+{
+    type Actual = Param0<OidcReact.NotLoggedIn["login"]>;
+    type Expected = Omit<Param0<Oidc.NotLoggedIn["login"]>, "doesCurrentHrefRequiresAuth"> & {
+        doesCurrentHrefRequiresAuth?: boolean;
+    };
+
+    assert<Equals<Actual, Expected>>();
+}
 
 type OidcReactApi<DecodedIdToken extends Record<string, unknown>, AutoLogin extends boolean> = {
     OidcProvider: AutoLogin extends true
@@ -88,6 +103,12 @@ type OidcReactApi<DecodedIdToken extends Record<string, unknown>, AutoLogin exte
     getOidc: () => Promise<
         AutoLogin extends true ? Oidc.LoggedIn<DecodedIdToken> : Oidc<DecodedIdToken>
     >;
+    withAuthenticationRequired: <Props extends Record<string, unknown>>(
+        Component: ComponentType<Props>,
+        params?: {
+            onRedirecting: () => JSX.Element | null;
+        }
+    ) => FC<Props>;
 };
 
 export function createOidcReactApi_dependencyInjection<
@@ -109,7 +130,9 @@ export function createOidcReactApi_dependencyInjection<
 > {
     const dReadyToCreate = new Deferred<void>();
 
-    const oidcContext = createContext<Oidc<DecodedIdToken> | undefined>(undefined);
+    const oidcContext = createContext<{ oidc: Oidc<DecodedIdToken>; fallback: ReactNode } | undefined>(
+        undefined
+    );
 
     // NOTE: It can be InitializationError only if autoLogin is true
     const prOidcOrInitializationError = (async () => {
@@ -183,7 +206,11 @@ export function createOidcReactApi_dependencyInjection<
 
         const oidc = oidcOrInitializationError;
 
-        return <oidcContext.Provider value={oidc}>{children}</oidcContext.Provider>;
+        return (
+            <oidcContext.Provider value={{ oidc, fallback: fallback ?? null }}>
+                {children}
+            </oidcContext.Provider>
+        );
     }
 
     function useOidc(params?: {
@@ -191,9 +218,11 @@ export function createOidcReactApi_dependencyInjection<
     }): OidcReact<DecodedIdToken> {
         const { assert: assert_params } = params ?? {};
 
-        const oidc = useContext(oidcContext);
+        const contextValue = useContext(oidcContext);
 
-        assert(oidc !== undefined, "You must use useOidc inside the corresponding OidcProvider");
+        assert(contextValue !== undefined, "You must use useOidc inside the corresponding OidcProvider");
+
+        const { oidc } = contextValue;
 
         check_assertion: {
             if (assert_params === undefined) {
@@ -289,7 +318,8 @@ export function createOidcReactApi_dependencyInjection<
             return id<OidcReact.NotLoggedIn>({
                 ...common,
                 isUserLoggedIn: false,
-                login: oidc.login,
+                login: ({ doesCurrentHrefRequiresAuth = false, ...rest } = {}) =>
+                    oidc.login({ doesCurrentHrefRequiresAuth, ...rest }),
                 initializationError: oidc.initializationError
             });
         }
@@ -315,6 +345,39 @@ export function createOidcReactApi_dependencyInjection<
         return oidcReact;
     }
 
+    function withAuthenticationRequired<Props extends Record<string, unknown>>(
+        Component: ComponentType<Props>,
+        params?: {
+            onRedirecting?: () => JSX.Element | null;
+        }
+    ): FC<Props> {
+        const { onRedirecting } = params ?? {};
+
+        function ComponentWithAuthenticationRequired(props: Props) {
+            const contextValue = useContext(oidcContext);
+
+            assert(contextValue !== undefined);
+
+            const { oidc, fallback } = contextValue;
+
+            useEffect(() => {
+                if (oidc.isUserLoggedIn) {
+                    return;
+                }
+
+                oidc.login({ doesCurrentHrefRequiresAuth: true });
+            }, []);
+
+            if (!oidc.isUserLoggedIn) {
+                return onRedirecting === undefined ? fallback : onRedirecting();
+            }
+
+            return <Component {...props} />;
+        }
+
+        return ComponentWithAuthenticationRequired;
+    }
+
     const prOidc = prOidcOrInitializationError.then(oidcOrInitializationError => {
         if (oidcOrInitializationError instanceof OidcInitializationError) {
             return new Promise<never>(() => {});
@@ -341,7 +404,8 @@ export function createOidcReactApi_dependencyInjection<
             }
 
             return oidc;
-        }
+        },
+        withAuthenticationRequired
     };
 }
 

package/src/vendor/frontend/tsafe.ts

@@ -2,4 +2,5 @@ export { id } from "tsafe/id";
 export { assert, is, type Equals } from "tsafe/assert";
 export { typeGuard } from "tsafe/typeGuard";
 export { overwriteReadonlyProp } from "tsafe/lab/overwriteReadonlyProp";
+export { noUndefined } from "tsafe/noUndefined";
 export type { Param0 } from "tsafe";