How to fix Uncaught TypeError: window.crypto.randomUUID is not a function in react JS app using MSAL after deploying it in IIS

bharani kumar 30

After deploying the React js application which uses Single sign on process using MSAL library, the following error occurs in IIS.

Uncaught TypeError: window.crypto.randomUUID is not a function
    at d.value (CryptoOps.ts:70:5)
    at e.value (EventHandler.ts:64:5)
    at A.value (StandardController.ts:1801:5)
    at o.value (PublicClientApplication.ts:167:5)
    at MsalProvider.tsx:88:37
    at ol (react-dom.production.min.js:244:332)
    at Cc (react-dom.production.min.js:286:111)
    at react-dom.production.min.js:282:391
    at _ (scheduler.production.min.js:13:203)
    at MessagePort.R (scheduler.production.min.js:14:128)

Ben Gunnewijk 0

Hey, I have the same issue here.
Not on localhost during development, only after building and deploying.

Using the most recent version of @azure/msal-browser: 3.6.0
Both local and deployed website built with Node 18.17.1 but also tried with Node 20.10.0.

My code that opens the login popup:

const newMsalApp = new PublicClientApplication(AzureSessionConfig);    newMsalApp.initialize().catch((e) => {
	console.error("Msal App failed to initialize.");
	console.log(e);
});

const AzurePopupConfig: PopupRequest = {
  scopes: ["user.read"],
  prompt: "select_account"
};

const result = await msalApp.loginPopup(AzurePopupConfig);

The stacktrace is a little different for me:

console.js:213 TypeError: window.crypto.randomUUID is not a function
    at createNewGuid (BrowserCrypto.mjs:82:26)
    at StandardController.getRequestCorrelationId (StandardController.mjs:1143:93)
    at StandardController.loginPopup (StandardController.mjs:1177:36)
    at PublicClientApplication.loginPopup (PublicClientApplication.mjs:221:32)
    at eval (login-shell.tsx:93:50)
    at step (login-shell.tsx:41:23)
    at Object.eval [as next] (login-shell.tsx:22:53)
    at eval (login-shell.tsx:16:71)
    at new Promise (<anonymous>)
    at __awaiter (login-shell.tsx:12:12)
    at showLoginPopup (login-shell.tsx:81:47)
    at toggleLogin (login-shell.tsx:79:9)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    ... deeper React button event stacktrace.

4 answers

Tony Nguyen 5 Reputation points

2023-10-17T03:08:23.01+00:00

Hi, I have the same issue, but a workaround for this is installing @azure/msal-react 2.0.2 and the build will work like normal. Cheers.
Please sign in to rate this answer.

1 person found this answer helpful.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
Raman Zhukouski 0 Reputation points

2023-10-10T16:21:49.12+00:00

I have the same issue, but only on Android using client app
Please sign in to rate this answer.
bharani kumar 30 Reputation points

2023-10-11T00:51:23.2733333+00:00

Did you solve this issue for Android, how did you solve it.

Shweta Mathur 30,191 Reputation points Microsoft Employee

2023-10-11T06:08:13.52+00:00

Hi @Raman Zhukouski ,

Thanks for reaching out.

It seems that the error is related to the usage of the “window.crypto.randomUUID” function. This function is not recognized or available in the current environment, resulting in a TypeError.

To resolve this issue, it is recommended to check the compatibility of the “window.crypto.randomUUID” function with the environment in which the application is deployed. It is possible that the function is not supported or available in the current version of the environment.

The randomUUID function was added in Node v15.6.0.Upgrading the version might help you to resolve the issue.

Hope this will help.

Thanks,

Shweta

bharani kumar 30 Reputation points

2023-10-11T07:04:53.5166667+00:00

Node version v18.18.1 is used, in the developer machine, development mode it is working fine, but once we deploy it iis or nginx it is still giving the same issue, any idea
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
Bruce (SqlWork.com) 69,276 Reputation points

2023-12-19T21:23:55.24+00:00

this is a missing browser method. you must be using an old browser, just add a polyfill:

https://www.npmjs.com/package/crypto-randomuuid
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
Ben Gunnewijk 0 Reputation points

2023-12-20T12:42:44.65+00:00

Okay I know what caused the error for me.
window.crypto.randomUUID is only available under HTTPS context: https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID

My website was being deployed to a linux server without domain name or certificate. And thus on localhost the crypto functions were loaded but on the http website they never get loaded, not even with the crypto-randomuuid polyfill.

Found this in a similar issue on the parcel bundler:
https://github.com/parcel-bundler/parcel/issues/8820
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How to fix Uncaught TypeError: window.crypto.randomUUID is not a function in react JS app using MSAL after deploying it in IIS

4 answers

Your answer