# @auth0/cordova with Vite

**URL:** <https://community.auth0.com/t/auth0-cordova-with-vite/80945>\
**Category:** Get Help\
**Tags:** vue-3, vuejs, cordova, vue\
**Created:** [April 1, 2022, 4:32am UTC](https://community.auth0.com/t/auth0-cordova-with-vite/80945 "2022-04-01T04:32:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![customautosys](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/customautosys/32/13540_2.png) [@customautosys](https://community.auth0.com/u/customautosys)\
**Post date:** [April 1, 2022, 4:32am UTC](https://community.auth0.com/t/auth0-cordova-with-vite/80945/1 "2022-04-01T04:32:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![customautosys](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/customautosys/32/13540_2.png) [@customautosys](https://community.auth0.com/u/customautosys)\
**Post date:** [April 1, 2022, 7:53am UTC](https://community.auth0.com/t/auth0-cordova-with-vite/80945/2 "2022-04-01T07:53:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jeff10](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/jeff10/32/35533_2.png) [@jeff10](https://community.auth0.com/u/jeff10)\
**Post date:** [August 2, 2022, 9:41pm UTC](https://community.auth0.com/t/auth0-cordova-with-vite/80945/4 "2022-08-02T21:41:11Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![methodcomserver](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/methodcomserver/32/39752_2.png) [@methodcomserver](https://community.auth0.com/u/methodcomserver)\
**Post date:** [October 10, 2022, 8:52pm UTC](https://community.auth0.com/t/auth0-cordova-with-vite/80945/5 "2022-10-10T20:52:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mariopries1](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/mariopries1/32/40509_2.png) [@mariopries1](https://community.auth0.com/u/mariopries1)\
**Post date:** [October 10, 2022, 9:58pm UTC](https://community.auth0.com/t/auth0-cordova-with-vite/80945/6 "2022-10-10T21:58:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![customautosys](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/customautosys/32/13540_2.png) [@customautosys](https://community.auth0.com/u/customautosys)\
**Post date:** [April 25, 2023, 9:22am UTC](https://community.auth0.com/t/auth0-cordova-with-vite/80945/7 "2023-04-25T09:22:31Z")

</div>

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:

```auto
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

```auto
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):

```auto
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/_)”

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [May 9, 2023, 9:23am UTC](https://community.auth0.com/t/auth0-cordova-with-vite/80945/8 "2023-05-09T09:23:14Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.