window.crypto.subtle is unavailable

[alexkreidler]

Issue and Steps to Reproduce

I really love this library and have used it with Keycloak in the past. Unfortunately now I'm getting a weird error on Firefox and Chrome. I have a React app with Vite and React Router.

To reproduce: follow the setup instructions from the README. Then make a component with a button that calls the login function. You'll see the error below.

Versions

"@axa-fr/react-oidc": "^6.16.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",

tested on Firefox 111.0.1 (64-bit) and Chrome Version 111.0.5563.147 (Official Build) (64-bit)

Screenshots

Expected

Successfully redirects to Keycloak login page and logs in

Actual

The user sees the default error component with text:

Error authentication
An error occurred during authentication.

The console has this message:

Uncaught (in promise) Error: window.crypto.subtle is unavailable.
    at deriveChallengeAsync (crypto.ts:53:29)
    at requests.ts:121:33
    at Generator.next (<anonymous>)
    at cache.ts:21:22
    at new Promise (<anonymous>)
    at __awaiter (cache.ts:21:22)
    at requests.ts:118:100
    at login.ts:65:59
    at Generator.next (<anonymous>)
    at fulfilled (route-utils.ts:79:1)

[alexkreidler]

BTW I tried reverting to "@axa-fr/react-oidc": "6.12.1", and it worked perfectly

[guillaume-chervet]

hi @alexkreidler, thank you very much for your issue.

That very strange. Do you have a template of your create app + vite?
It come from here but, I need to reproduce it to understand: https://github.com/AxaFrance/react-oidc/blob/master/packages/react/src/oidc/vanilla/crypto.ts

[abhilashlr7]

We used to get this same error, this was resolved after running local on https instead of http.

[guillaume-chervet]

Thank you @abhilashlr7 for you feedback. I need to add this in a FAQ

[guillaume-chervet]

Hi @alexkreidler thank you for your issue.
I have pinned it into the new FAQ https://github.com/AxaFrance/oidc-client/blob/main/FAQ.md.
I close the issue, feel free to reopen it if needed.