@auth0/cordova with Vite

[customautosys]

Hi, has anyone managed to get @auth0/cordova working with Vite?

Currently I am stuck due to the crypto library. I have tried rollup-plugin-node-builtins, rollup-plugin-node-polyfills and rollup-plugin-polyfill-node to no avail as crypto did not contain the randomBytes function in all of these which is required by crypto.js.

The cordova-plugin-auth0 fork doesn’t work either.

I’ve tried various combinations of crypto-browserify and rollup-plugin-node-globals, to no avail.

[customautosys]

OK I have kind of used a kludge, namely:

npm install --save-dev readable-stream@npm:vite-compatible-readable-stream
Replace crypto with crypto-browserify in @auth0/cordova/src/crypto.js
Replace stream with readable-stream in cipher-base/index.js

Obviously this is not a very good solution (although it works) so hopefully something can be done to patch @auth0/cordova to fix this.

[jeff10]

@customautosys Did you ever find any better solution? I’m running into this same issue. I haven’t been able to get your kludge to work either because I run into some issue referencing “process” which I haven’t found a resolution for yet. Thanks

[methodcomserver]

Same problem here… auth0, please, fix this problem!

[mariopries1]

Same problem here… We use quasar framework with vite/webpack and got this same issue. How can we solve this?

[customautosys]

Hi fellow Quasar user!

Step 1: npm install --save-dev readable-stream@npm:readable-stream-no-circular@^3.6.0 (or the yarn / pnpm equivalent - this works better than vite-compatible-readable-stream)

Step 2: Here is my node_modules/@auth0/cordova/src/crypto.js:

var crypto = require('crypto-browserify');

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));
};

Step 3: Here is my node_modules/cipher-base/index.js

var Buffer = require('safe-buffer').Buffer
var Transform = require('readable-stream').Transform
var StringDecoder = require('string_decoder').StringDecoder
var inherits = require('inherits')

function CipherBase (hashMode) {
  Transform.call(this)
  this.hashMode = typeof hashMode === 'string'
  if (this.hashMode) {
    this[hashMode] = this._finalOrDigest
  } else {
    this.final = this._finalOrDigest
  }
  if (this._final) {
    this.__final = this._final
    this._final = null
  }
  this._decoder = null
  this._encoding = null
}
inherits(CipherBase, Transform)

CipherBase.prototype.update = function (data, inputEnc, outputEnc) {
  if (typeof data === 'string') {
    data = Buffer.from(data, inputEnc)
  }

  var outData = this._update(data)
  if (this.hashMode) return this

  if (outputEnc) {
    outData = this._toString(outData, outputEnc)
  }

  return outData
}

CipherBase.prototype.setAutoPadding = function () {}
CipherBase.prototype.getAuthTag = function () {
  throw new Error('trying to get auth tag in unsupported state')
}

CipherBase.prototype.setAuthTag = function () {
  throw new Error('trying to set auth tag in unsupported state')
}

CipherBase.prototype.setAAD = function () {
  throw new Error('trying to set aad in unsupported state')
}

CipherBase.prototype._transform = function (data, _, next) {
  var err
  try {
    if (this.hashMode) {
      this._update(data)
    } else {
      this.push(this._update(data))
    }
  } catch (e) {
    err = e
  } finally {
    next(err)
  }
}
CipherBase.prototype._flush = function (done) {
  var err
  try {
    this.push(this.__final())
  } catch (e) {
    err = e
  }

  done(err)
}
CipherBase.prototype._finalOrDigest = function (outputEnc) {
  var outData = this.__final() || Buffer.alloc(0)
  if (outputEnc) {
    outData = this._toString(outData, outputEnc, true)
  }
  return outData
}

CipherBase.prototype._toString = function (value, enc, fin) {
  if (!this._decoder) {
    this._decoder = new StringDecoder(enc)
    this._encoding = enc
  }

  if (this._encoding !== enc) throw new Error('can\'t switch encodings')

  var out = this._decoder.write(value)
  if (fin) {
    out += this._decoder.end()
  }

  return out
}

module.exports = CipherBase

You can either replace the files manually in node_modules or you can use a plugin, what I do is that I put both the above files in an src/patches subfolder (being careful to preserve the folder paths as though it were in node_modules) and use the following inside the “build” section of quasar.config.js (you would also need to npm i -D vite-plugin-files-copy):

vitePlugins: [
	['vite-plugin-files-copy',{
		patterns:[{
			from:'src/patches',
			to:'node_modules'
		}]
	}]
]

The result is when I run a quasar build the first time it doesn’t work but then I just run it again.

I use this android build script for development in package.json so it doesn’t use the usual quasar dev which sometimes ends up giving me grief:

“android”: “rm -Rf src-cordova/www/&&quasar build -m android --debug --skip-pkg&&cd src-cordova&&(cordova run android --device;rm -Rf www/)”