According to MDM () Most modern Browsers support the javascript native crypto api, which supports the former node-js crypto standard.

According to this article in plain js I may create an uuid via

crypto.randomUUID()

Is there any way to use this interface in react? Since crypto seems to refere to a completely different object in react.

ps. I am aware of the existence of the UUID package, and know that its a common way to generate UUIDs I am just curious.

According to MDM (https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) Most modern Browsers support the javascript native crypto api, which supports the former node-js crypto standard.

According to this article in plain js I may create an uuid via

crypto.randomUUID()

Is there any way to use this interface in react? Since crypto seems to refere to a completely different object in react.

ps. I am aware of the existence of the UUID package, and know that its a common way to generate UUIDs I am just curious.

• javascript
• reactjs
• uuid

• Does this answer your question? crypto.createPrivateKey is not a function in a next.js app – Son Nguyen Commented Jan 16, 2023 at 12:14
• I don't think so, I do not use next js and therefore no node rendering. Further, my question was answered about a year ago. – lubro Commented Jan 16, 2023 at 14:37

3 Answers 3

(Modern solution in 2023)

1. Next.js pre-renders your React page component on the server (represented as the NextPage type in TypeScript), so you need to add import crypto from 'crypto'; crypto.randomUUID() to generate a unique id on the server.

2. After the HTML page is returned to the browser as a result of pre-rendering, you need to use window.crypto.randomUUID() because crypto.randomUUID() is from the Node.js package in the server environment, not in the browser. U can add the following check to your code:

// The following Node.js package is imported on the server-side 
// and not available in the browser
import nodeCrypto from 'crypto';

// Use the web browser Crypto API if you're on the client, 
// otherwise use the Node.js Crypto API on the server
typeof window !== 'undefined' ? window.crypto.randomUUID() : nodeCrypto.randomUUID()

See Safely Accessing Web APIs on the Next.js doc to learn more.

I guess you are right, the crypto package in React is a different one. To use the one from NodeJs you can call:

window.crypto

I put it in the if to make sure, it is only rendered in the browser.

if (window !== undefined) {
    console.log('randomUUID', window.crypto.randomUUID());
}

or

import crypto from 'crypto';

console.log('crypto.randomUUID()', crypto.randomBytes(16).toString('hex'));

window.crypto.randomUUID() is fine. But please note that crypto.randomUUID() is only available in secure context (HTTPS). It will lead to the TypeError: window.crypto.randomUUID is not a function when you are on HTTP sites.

So it should be something like:

if (typeof window !== "undefined" && typeof window.crypto.randomUUID === "function") {
    console.log('randomUUID', window.crypto.randomUUID());
}