Use Argon2 in ionic 6

Hi everybody,

I search an solution to hash my password with argon2 before send in my app.

Thanks

Not sure what exactly you are asking, but if you are asking “how to use argon2 in Ionic” , take a look at argon2 browser.

Yes it’s that Howell to use argon2 In ionic but Yesterday I wanted to test argon2-browser but on the ionic serve errors everywhere.

Could you give me an example of how to import argon2 into my .ts

Thanks

Hi

From the face of it:

npm install argon2-browser
Then import {argon2} from ‘argon2-browser’
And then use the argon2 object as per api spec

Does this work?

No, it doesn’t work.

If I just do the import nothing happens no error, but if I start using the argon2 object, the application bugs and restarts but with errors that I don’t have time to see. I run In ionic serve

Try it and you will see

Ok

so what I did was:

Put this in index.html
<script src="https://unpkg.com/argon2-browser@1.18.0/lib/argon2.js"></script>

Then the argon2 object will be available (hopefully sooner than later), which you just need to declare to avoid typescript errors:

declare var argon2:any;

Somewhere under the import statements in a ts file

And if you then console.log('Argon2',argon2) you will see the object in the console.

This is CDN way of including.

Using import is more preferred, but couldn’t get it running using Stackblitz - given the limited time I wanted to spend.

Edit: using npm install argon2-browser and then use

<script src="node_modules/argon2-browser/lib/argon2.js"></script>

also works (see documentation).

I think the package is not a module (or however it is called) so the bundler cannot grab it, nor the import working properly.

So, to have this library go along with the package of the app, you need to include it in the asset folder and then reference to it in html, otherwise you won’t have it in the final bundle (I believe)

Hmm, looking over the package itself, it’s got some weirdness going on. Between it pointing to various node packages and expecting webpack to provide polyfils, to the package itself pointing to an incorrect entry point. Honestly, it doesn’t look like argon2-browser is useable in the browser.

I’m looking for a solution for Android and Ios so if it’s a native package I’m fine with it too, just explain me how to implement it

Well if you want native code you will need a plugin in capacitor or even cordova

And if that does not exist, you can make your own

Euuuuuhhhhhh, I’m too new to develop this :joy:

welll…then there is always the option of posting in the jobs section and pay someone to do it for you :wink: