oidc-spa 0.1.0

package/src/oidc.ts

@@ -0,0 +1,398 @@
+import { UserManager, type User } from "oidc-client-ts";
+import { id } from "tsafe/id";
+import { readExpirationTimeInJwt } from "./tools/readExpirationTimeInJwt";
+import { assert } from "tsafe/assert";
+import { addParamToUrl, retrieveParamFromUrl } from "./tools/urlSearchParams";
+import { fnv1aHashToHex } from "./tools/fnv1aHashToHex";
+import { Deferred } from "./tools/Deferred";
+
+export declare type Oidc = Oidc.LoggedIn | Oidc.NotLoggedIn;
+
+export declare namespace Oidc {
+    export type Common = {
+        params: {
+            issuerUri: string;
+            clientId: string;
+        };
+    };
+
+    export type NotLoggedIn = Common & {
+        isUserLoggedIn: false;
+        login: (params: { doesCurrentHrefRequiresAuth: boolean }) => Promise<never>;
+    };
+
+    export type LoggedIn = Common & {
+        isUserLoggedIn: true;
+        renewTokens(): Promise<void>;
+        getTokens: () => Tokens;
+        logout: (params: { redirectTo: "home" | "current page" }) => Promise<never>;
+    };
+
+    export type Tokens = {
+        accessToken: string;
+        accessTokenExpirationTime: number;
+        idToken: string;
+        refreshToken: string;
+        refreshTokenExpirationTime: number;
+    };
+}
+
+const paramsToRetrieveFromSuccessfulLogin = ["code", "state", "session_state"] as const;
+
+export async function createOidc(params: {
+    issuerUri: string;
+    clientId: string;
+    transformUrlBeforeRedirect?: (url: string) => string;
+    /** Default `${window.location.origin}/silent-sso.html` */
+    silentSsoUrl?: string;
+}): Promise<Oidc> {
+    const {
+        issuerUri,
+        clientId,
+        silentSsoUrl = `${window.location.origin}/silent-sso.html`,
+        transformUrlBeforeRedirect = url => url
+    } = params;
+
+    const configHash = fnv1aHashToHex(`${issuerUri} ${clientId}`);
+    const configHashKey = "configHash";
+
+    const userManager = new UserManager({
+        "authority": issuerUri,
+        "client_id": clientId,
+        "redirect_uri": "" /* provided when calling login */,
+        "response_type": "code",
+        "scope": "openid profile",
+        "automaticSilentRenew": false,
+        "silent_redirect_uri": `${silentSsoUrl}?${configHashKey}=${configHash}`
+    });
+
+    const login: Oidc.NotLoggedIn["login"] = async ({ doesCurrentHrefRequiresAuth }) => {
+        //NOTE: We know there is a extraQueryParameter option but it doesn't allow
+        // to control the encoding so we have to hack the global URL Class that is
+        // used internally by oidc-client-ts
+
+        const URL_real = window.URL;
+
+        function URL(...args: ConstructorParameters<typeof URL_real>) {
+            const urlInstance = new URL_real(...args);
+
+            return new Proxy(urlInstance, {
+                "get": (target, prop) => {
+                    if (prop === "href") {
+                        return transformUrlBeforeRedirect(urlInstance.href);
+                    }
+
+                    //@ts-expect-error
+                    return target[prop];
+                }
+            });
+        }
+
+        Object.defineProperty(window, "URL", { "value": URL });
+
+        const { newUrl: redirect_uri } = addParamToUrl({
+            "url": window.location.href,
+            "name": configHashKey,
+            "value": configHash
+        });
+
+        await userManager.signinRedirect({
+            redirect_uri,
+            "redirectMethod": doesCurrentHrefRequiresAuth ? "replace" : "assign"
+        });
+        return new Promise<never>(() => {});
+    };
+
+    const currentTokens = await (async function getUser() {
+        read_successful_login_query_params: {
+            let url = window.location.href;
+
+            {
+                const result = retrieveParamFromUrl({ "name": configHashKey, url });
+
+                if (!result.wasPresent || result.value !== configHash) {
+                    break read_successful_login_query_params;
+                }
+
+                url = result.newUrl;
+            }
+
+            {
+                const result = retrieveParamFromUrl({ "name": "error", url });
+
+                if (result.wasPresent) {
+                    throw new Error(`OIDC error: ${result.value}`);
+                }
+            }
+
+            let loginSuccessUrl = "https://dummy.com";
+
+            for (const name of paramsToRetrieveFromSuccessfulLogin) {
+                const result = retrieveParamFromUrl({ name, url });
+
+                assert(result.wasPresent);
+
+                loginSuccessUrl = addParamToUrl({
+                    "url": loginSuccessUrl,
+                    "name": name,
+                    "value": result.value
+                }).newUrl;
+
+                url = result.newUrl;
+            }
+
+            window.history.pushState(null, "", url);
+
+            let user: User | undefined = undefined;
+
+            try {
+                user = await userManager.signinRedirectCallback(loginSuccessUrl);
+            } catch {
+                //NOTE: The user has likely pressed the back button just after logging in.
+                return undefined;
+            }
+
+            return user;
+        }
+
+        restore_from_session: {
+            const user = await userManager.getUser();
+
+            if (user === null) {
+                break restore_from_session;
+            }
+
+            // The server might have restarted and the session might have been lost.
+            try {
+                await userManager.signinSilent();
+            } catch {
+                return undefined;
+            }
+
+            return user;
+        }
+
+        restore_from_http_only_cookie: {
+            const dLoginSuccessUrl = new Deferred<string | undefined>();
+
+            const timeout = setTimeout(
+                () =>
+                    dLoginSuccessUrl.reject(
+                        new Error(`SSO silent login timeout with clientId: ${clientId}`)
+                    ),
+                5000
+            );
+
+            const listener = (event: MessageEvent) => {
+                if (event.origin !== window.location.origin || typeof event.data !== "string") {
+                    return;
+                }
+
+                const url = event.data;
+
+                {
+                    let result: ReturnType<typeof retrieveParamFromUrl>;
+
+                    try {
+                        result = retrieveParamFromUrl({ "name": configHashKey, url });
+                    } catch {
+                        // This could possibly happen if url is not a valid url.
+                        return;
+                    }
+
+                    if (!result.wasPresent || result.value !== configHash) {
+                        return;
+                    }
+                }
+
+                clearTimeout(timeout);
+
+                window.removeEventListener("message", listener);
+
+                {
+                    const result = retrieveParamFromUrl({ "name": "error", url });
+
+                    if (result.wasPresent) {
+                        dLoginSuccessUrl.resolve(undefined);
+                        return;
+                    }
+                }
+
+                let loginSuccessUrl = "https://dummy.com";
+
+                for (const name of paramsToRetrieveFromSuccessfulLogin) {
+                    const result = retrieveParamFromUrl({ name, url });
+
+                    assert(result.wasPresent);
+
+                    loginSuccessUrl = addParamToUrl({
+                        "url": loginSuccessUrl,
+                        "name": name,
+                        "value": result.value
+                    }).newUrl;
+                }
+
+                dLoginSuccessUrl.resolve(loginSuccessUrl);
+            };
+
+            window.addEventListener("message", listener, false);
+
+            userManager.signinSilent({ "silentRequestTimeoutInSeconds": 1 }).catch(() => {
+                /* error expected */
+            });
+
+            const loginSuccessUrl = await dLoginSuccessUrl.pr;
+
+            if (loginSuccessUrl === undefined) {
+                break restore_from_http_only_cookie;
+            }
+
+            const user = await userManager.signinRedirectCallback(loginSuccessUrl);
+
+            return user;
+        }
+
+        return undefined;
+    })().then(user => {
+        if (user === undefined) {
+            return undefined;
+        }
+
+        const tokens = userToTokens(user);
+
+        if (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.",
+                    `Check your oidc server configuration for ${clientId} ${issuerUri}`
+                ].join(" ")
+            );
+        }
+
+        return tokens;
+    });
+
+    const common: Oidc.Common = {
+        "params": {
+            issuerUri,
+            clientId
+        }
+    };
+
+    if (currentTokens === undefined) {
+        return id<Oidc.NotLoggedIn>({
+            ...common,
+            "isUserLoggedIn": false,
+            login
+        });
+    }
+
+    const oidc = id<Oidc.LoggedIn>({
+        ...common,
+        "isUserLoggedIn": true,
+        "getTokens": () => ({
+            "accessToken": currentTokens.accessToken,
+            "idToken": currentTokens.idToken,
+            "refreshToken": currentTokens.refreshToken,
+            "refreshTokenExpirationTime": currentTokens.refreshTokenExpirationTime,
+            "accessTokenExpirationTime": currentTokens.accessTokenExpirationTime
+        }),
+        "logout": async ({ redirectTo }) => {
+            await userManager.signoutRedirect({
+                "post_logout_redirect_uri": (() => {
+                    switch (redirectTo) {
+                        case "current page":
+                            return window.location.href;
+                        case "home":
+                            return window.location.origin;
+                    }
+                })()
+            });
+            return new Promise<never>(() => {});
+        },
+        "renewTokens": async () => {
+            const user = await userManager.signinSilent();
+
+            assert(user !== null);
+
+            Object.assign(currentTokens, userToTokens(user));
+        }
+    });
+
+    (function scheduleAutomaticRenew() {
+        const msBeforeExpiration =
+            Math.min(currentTokens.accessTokenExpirationTime, currentTokens.refreshTokenExpirationTime) -
+            Date.now();
+
+        setTimeout(async () => {
+            try {
+                await oidc.renewTokens();
+            } catch {
+                await login({ "doesCurrentHrefRequiresAuth": true });
+            }
+
+            scheduleAutomaticRenew();
+        }, msBeforeExpiration - /* min validity in seconds */ 25 * 1000);
+    })();
+
+    return oidc;
+}
+
+function userToTokens(user: User): Oidc.Tokens {
+    const accessToken = user.access_token;
+
+    const accessTokenExpirationTime = (() => {
+        read_from_metadata: {
+            const { expires_at } = user;
+
+            if (expires_at === undefined) {
+                break read_from_metadata;
+            }
+
+            return expires_at * 1000;
+        }
+
+        read_from_jwt: {
+            const expirationTime = readExpirationTimeInJwt(accessToken);
+
+            if (expirationTime === undefined) {
+                break read_from_jwt;
+            }
+
+            return expirationTime;
+        }
+
+        assert(false, "Failed to get access token expiration time");
+    })();
+
+    const refreshToken = user.refresh_token;
+
+    assert(refreshToken !== undefined, "No refresh token provided by the oidc server");
+
+    const refreshTokenExpirationTime = (() => {
+        read_from_jwt: {
+            const expirationTime = readExpirationTimeInJwt(refreshToken);
+
+            if (expirationTime === undefined) {
+                break read_from_jwt;
+            }
+
+            return expirationTime;
+        }
+
+        assert(false, "Failed to get refresh token expiration time");
+    })();
+
+    const idToken = user.id_token;
+
+    assert(idToken !== undefined, "No id token provided by the oidc server");
+
+    return {
+        accessToken,
+        accessTokenExpirationTime,
+        refreshToken,
+        refreshTokenExpirationTime,
+        idToken
+    };
+}

package/src/react.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState, createContext, useContext, type ReactNode } from "react";
+import { createOidc, type Oidc } from "./oidc";
+import { assert } from "tsafe/assert";
+
+const oidcClientContext = createContext<Oidc | undefined>(undefined);
+
+export function createOidcClientProvider(params: Parameters<typeof createOidc>[0]) {
+    const prOidc = createOidc(params);
+
+    function OidcClientProvider(props: { fallback?: ReactNode; children: ReactNode }) {
+        const { children, fallback } = props;
+
+        const [oidcClient, setOidcClient] = useState<Oidc | undefined>(undefined);
+
+        useEffect(() => {
+            prOidc.then(setOidcClient);
+        }, []);
+
+        if (oidcClient === undefined) {
+            return <>{fallback === undefined ? null : fallback}</>;
+        }
+
+        return <oidcClientContext.Provider value={oidcClient}>{children}</oidcClientContext.Provider>;
+    }
+
+    return { OidcClientProvider };
+}
+
+export function useOidc() {
+    const oidc = useContext(oidcClientContext);
+    assert(oidc !== undefined, "You must use useOidc inside a OidcClientProvider");
+    return { oidc };
+}

package/src/tools/Deferred.ts

@@ -0,0 +1,39 @@
+import { overwriteReadonlyProp } from "tsafe/lab/overwriteReadonlyProp";
+
+export class Deferred<T> {
+    public readonly pr: Promise<T>;
+
+    /** NOTE: Does not need to be called bound to instance*/
+    public readonly resolve: (value: T) => void;
+    public readonly reject: (error: any) => void;
+
+    constructor() {
+        let resolve!: (value: T) => void;
+        let reject!: (error: any) => void;
+
+        this.pr = new Promise<T>((resolve_, reject_) => {
+            resolve = value => {
+                overwriteReadonlyProp(this, "isPending", false);
+                resolve_(value);
+            };
+
+            reject = error => {
+                overwriteReadonlyProp(this, "isPending", false);
+                reject_(error);
+            };
+        });
+
+        this.resolve = resolve;
+        this.reject = reject;
+    }
+
+    public readonly isPending: boolean = true;
+}
+
+export namespace Deferred {
+    export type Unpack<T extends Deferred<any>> = T extends Deferred<infer U> ? U : never;
+}
+
+export class VoidDeferred extends Deferred<undefined> {
+    public declare readonly resolve: () => void;
+}

package/src/tools/fnv1aHashToHex.ts

@@ -0,0 +1,8 @@
+export function fnv1aHashToHex(str: string) {
+    let hash = 2166136261;
+    for (let i = 0; i < str.length; i++) {
+        hash ^= str.charCodeAt(i);
+        hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+    }
+    return (hash >>> 0).toString(16); // Convert to unsigned 32-bit integer and then to hexadecimal
+}

package/src/tools/readExpirationTimeInJwt.ts

@@ -0,0 +1,17 @@
+import decodeJwt from "jwt-decode";
+import { assert } from "tsafe/assert";
+
+// Return undefined if token provided wasn't a JWT or if it hasn't an exp claim number
+export function readExpirationTimeInJwt(token: string): number | undefined {
+    let expirationTime: number;
+
+    try {
+        expirationTime = decodeJwt<{ exp: number }>(token).exp * 1000;
+
+        assert(typeof expirationTime === "number" && !isNaN(expirationTime));
+    } catch {
+        return undefined;
+    }
+
+    return expirationTime;
+}

package/src/tools/urlSearchParams.ts

@@ -0,0 +1,86 @@
+export function addParamToUrl(params: { url: string; name: string; value: string }): { newUrl: string } {
+    const { url, name, value } = params;
+
+    let newUrl = url;
+
+    const result = retrieveParamFromUrl({
+        url,
+        name
+    });
+
+    if (result.wasPresent) {
+        newUrl = result.newUrl;
+    }
+
+    newUrl += `${
+        newUrl.includes("?") ? "&" : newUrl.endsWith("?") ? "" : "?"
+    }${name}=${encodeURIComponent(value)}`;
+
+    return { newUrl };
+}
+
+export function retrieveAllParamStartingWithPrefixFromUrl<
+    Prefix extends string,
+    DoLeave extends boolean
+>(params: {
+    url: string;
+    prefix: Prefix;
+    doLeavePrefixInResults: DoLeave;
+}): { newUrl: string; values: Record<DoLeave extends true ? `${Prefix}${string}` : string, string> } {
+    const { url, prefix, doLeavePrefixInResults } = params;
+
+    const [baseUrl, locationSearch = ""] = url.split("?");
+
+    const values: Record<string, string> = {};
+
+    const { newLocationSearch } = (() => {
+        let newLocationSearch = locationSearch
+            .replace(/^\?/, "")
+            .split("&")
+            .map(part => part.split("=") as [string, string])
+            .filter(([key, value_i]) =>
+                !key.startsWith(prefix)
+                    ? true
+                    : ((values[doLeavePrefixInResults ? key : key.substring(prefix.length)] =
+                          decodeURIComponent(value_i)),
+                      false)
+            )
+            .map(entry => entry.join("="))
+            .join("&");
+        newLocationSearch = newLocationSearch === "" ? "" : `?${newLocationSearch}`;
+
+        return { newLocationSearch };
+    })();
+
+    return {
+        "newUrl": `${baseUrl}${newLocationSearch}`,
+        values
+    };
+}
+
+export function retrieveParamFromUrl(params: {
+    url: string;
+    name: string;
+}): { wasPresent: false } | { wasPresent: true; newUrl: string; value: string } {
+    const { url, name } = params;
+
+    const { newUrl, values } = retrieveAllParamStartingWithPrefixFromUrl({
+        url,
+        "prefix": name,
+        "doLeavePrefixInResults": true
+    });
+
+    return name in values
+        ? {
+              "wasPresent": true,
+              newUrl,
+              "value": values[name]
+          }
+        : {
+              "wasPresent": false
+          };
+}
+
+export function updateSearchBarUrl(url: string) {
+    window.history.replaceState("", "", url);
+}

package/tools/Deferred.d.ts

@@ -0,0 +1,14 @@
+export declare class Deferred<T> {
+    readonly pr: Promise<T>;
+    /** NOTE: Does not need to be called bound to instance*/
+    readonly resolve: (value: T) => void;
+    readonly reject: (error: any) => void;
+    constructor();
+    readonly isPending: boolean;
+}
+export declare namespace Deferred {
+    type Unpack<T extends Deferred<any>> = T extends Deferred<infer U> ? U : never;
+}
+export declare class VoidDeferred extends Deferred<undefined> {
+    readonly resolve: () => void;
+}

package/tools/Deferred.js

@@ -0,0 +1,50 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VoidDeferred = exports.Deferred = void 0;
+var overwriteReadonlyProp_1 = require("tsafe/lab/overwriteReadonlyProp");
+var Deferred = /** @class */ (function () {
+    function Deferred() {
+        var _this = this;
+        this.isPending = true;
+        var resolve;
+        var reject;
+        this.pr = new Promise(function (resolve_, reject_) {
+            resolve = function (value) {
+                (0, overwriteReadonlyProp_1.overwriteReadonlyProp)(_this, "isPending", false);
+                resolve_(value);
+            };
+            reject = function (error) {
+                (0, overwriteReadonlyProp_1.overwriteReadonlyProp)(_this, "isPending", false);
+                reject_(error);
+            };
+        });
+        this.resolve = resolve;
+        this.reject = reject;
+    }
+    return Deferred;
+}());
+exports.Deferred = Deferred;
+var VoidDeferred = /** @class */ (function (_super) {
+    __extends(VoidDeferred, _super);
+    function VoidDeferred() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return VoidDeferred;
+}(Deferred));
+exports.VoidDeferred = VoidDeferred;
+//# sourceMappingURL=Deferred.js.map

package/tools/Deferred.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Deferred.js","sourceRoot":"","sources":["../src/tools/Deferred.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,yEAAwE;AAExE;IAOI;QAAA,iBAkBC;QAEe,cAAS,GAAY,IAAI,CAAC;QAnBtC,IAAI,OAA4B,CAAC;QACjC,IAAI,MAA6B,CAAC;QAElC,IAAI,CAAC,EAAE,GAAG,IAAI,OAAO,CAAI,UAAC,QAAQ,EAAE,OAAO;YACvC,OAAO,GAAG,UAAA,KAAK;gBACX,IAAA,6CAAqB,EAAC,KAAI,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;gBAChD,QAAQ,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC,CAAC;YAEF,MAAM,GAAG,UAAA,KAAK;gBACV,IAAA,6CAAqB,EAAC,KAAI,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;gBAChD,OAAO,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC,CAAC;QACN,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACzB,CAAC;IAGL,eAAC;AAAD,CAAC,AA5BD,IA4BC;AA5BY,4BAAQ;AAkCrB;IAAkC,gCAAmB;IAArD;;IAEA,CAAC;IAAD,mBAAC;AAAD,CAAC,AAFD,CAAkC,QAAQ,GAEzC;AAFY,oCAAY"}

package/tools/fnv1aHashToHex.d.ts

@@ -0,0 +1 @@
+export declare function fnv1aHashToHex(str: string): string;

package/tools/fnv1aHashToHex.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fnv1aHashToHex = void 0;
+function fnv1aHashToHex(str) {
+    var hash = 2166136261;
+    for (var i = 0; i < str.length; i++) {
+        hash ^= str.charCodeAt(i);
+        hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+    }
+    return (hash >>> 0).toString(16); // Convert to unsigned 32-bit integer and then to hexadecimal
+}
+exports.fnv1aHashToHex = fnv1aHashToHex;
+//# sourceMappingURL=fnv1aHashToHex.js.map

package/tools/fnv1aHashToHex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fnv1aHashToHex.js","sourceRoot":"","sources":["../src/tools/fnv1aHashToHex.ts"],"names":[],"mappings":";;;AAAA,SAAgB,cAAc,CAAC,GAAW;IACtC,IAAI,IAAI,GAAG,UAAU,CAAC;IACtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACjC,IAAI,IAAI,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;KAChF;IACD,OAAO,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,6DAA6D;AACnG,CAAC;AAPD,wCAOC"}

package/tools/readExpirationTimeInJwt.d.ts

@@ -0,0 +1 @@
+export declare function readExpirationTimeInJwt(token: string): number | undefined;