Fixing Crypto.subtle is available only in secure contexts (HTTPS)

Starting with oidc-spa 8.6.18, polyfills for Crypto.subtle are automatically loaded when needed.

Nothing to do, evrything will work even if your app is deployed without SSL.

oidc-spa internally relies on the Crypto.subtle browser API for cryptographic operations. This API is only available when your app is served over HTTPS or from localhost.

However, in certain intranet environments, for example, when using a local DNS entry or static IP, setting up HTTPS might not be feasible.

In those cases, you can work around the issue by installing a polyfill such as webcrypto-liner.

---

1. Install the polyfill

npm install --save webcrypto-liner-shim

---

3. Import the shim

Framework Agnostic

src/oidc.ts

import { createOidc } from "oidc-spa/core";

if( crypto.subtle === undefined ){
    await import("webcrypto-liner-shim");
}

const oidc = await createOidc({
    issuerUri: "...",
    clientId: "..."
});

React

src/oidc.ts

import { oidcSpa } from "oidc-spa/react-spa";

export const {
    bootstrapOidc,
    //...
} = oidcSpa
    .withExpectedDecodedIdTokenShape({ /*...*/ })
    .createUtils();

(async ()=> {

    if( crypto.subtle === undefined ){
        await import("webcrypto-liner-shim");
    }

    bootstrapOidc({
          implementation: "real",
          issuerUri: import.meta.env.VITE_OIDC_ISSUER_URI,
          clientId: import.meta.env.VITE_OIDC_CLIENT_ID
    });

})();

// ...