Crypto js r.randomBytes is not a function

Question

I'm encountering an issue when trying to set auth0 with ionic.

However, I think it's not related with it and it's more of a crypto js / config issue.

This is the error I'm getting:

main.7c4444f936ddaf5620f8.bundle.js:formatted:15919 ERROR Error:

Uncaught (in promise): TypeError: r.randomBytes is not a function

TypeError: r.randomBytes is not a function at n.generateProofKey (main.7c4444f936ddaf5620f8.bundle.js:formatted:844)

and below is my crypto js file:

import * as crypto from 'crypto-js';

function base64UrlSafeEncode(string) {
  return string.toString('base64')
      .replace(/+/g, '-')
      .replace(/\//g, '_')
      .replace(/=/g, '');
}

function sha256(buffer) {
  return crypto.createHash('sha256').update(buffer).digest();
}

exports.generateProofKey = function generateProofKey() {
  var codeVerifier = base64UrlSafeEncode(crypto.randomBytes(32)); 
  var codeChallenge = base64UrlSafeEncode(sha256(codeVerifier)); 
  return { codeVerifier: codeVerifier, codeChallenge: codeChallenge };
};

exports.generateState = function generateState() {
  return base64UrlSafeEncode(crypto.randomBytes(32));
}

Edit: with crypto.lib.WordArray.random(32) now says

c is not a function

p.prototype.authorize = function(t, n) {
            if (!n || "function" != typeof n)
                throw new Error("callback not specified or is not a function");
            var e = this;
            i(function(l, i) {
                if (l)
                    return n(l);
                var o = c()
                  , a = e.client
                  , f = e.redirectUri
                  , p = t.state || h(

Cordova Auth0

callbackFromNative: function (callbackId, isSuccess, status, args, keepCallback) {
        try {
            var callback = cordova.callbacks[callbackId];
            if (callback) {
                if (isSuccess && status === cordova.callbackStatus.OK) {
                    callback.success && callback.success.apply(null, args);
                } else if (!isSuccess) {
                    callback.fail && callback.fail.apply(null, args);
                }
                /*
                else
                    Note, this case is intentionally not caught.
                    this can happen if isSuccess is true, but callbackStatus is NO_RESULT
                    which is used to remove a callback from the list without calling the callbacks
                    typically keepCallback is false in this case
                */
                // Clear callback if not expecting any more results
                if (!keepCallback) {
                    delete cordova.callbacks[callbackId];
                }
            }
        } catch (err) {
            var msg = 'Error in ' + (isSuccess ? 'Success' : 'Error') + ' callbackId: ' + callbackId + ' : ' + err;
            console && console.log && console.log(msg);
            cordova.fireWindowEvent('cordovacallbackerror', { 'message': msg });
            throw err;
        }

Answer 1

Seen on this site :

 // Creates a word array filled with random bytes. // @param {number} nBytes The number of random bytes to generate. var wordArray = CryptoJS.lib.WordArray.random(16);

So, I think you should probably use crypto.lib.WordArray.random(32) instead.

Answer 2

Here what you can use instead:

import { nanoid } from "nanoid";
const token = nanoid(64); //instead of crypto.randomBytes(64).toString('hex')

This Question seems to be a duplicate. I wrote more extensively here: https://stackoverflow.com/a/71106157/828184