Password Hashing for Meteor React Native

Last week I talked about how to authenticate a Meteor user from a React Native client. It covers how to sign up and login via email, username, and resume token. I mentioned in that post that the password would be sent over the wire in plain text - that’s obviously not great.

So we’ll implement password encryption in using the same hashing that Meteor uses, sha256. Meteor uses a custom implementation but we’ll accomplish it by using hash.js. It’s going to be pretty quick and straightforward. Shall we?

Adding Accounts to the Meteor App

Just to test that a user will be able to login regardless of what platform let’s quickly set up Meteor’s default accounts-ui. In the meteor-app directory run:

Getting the React Native App Set Up

Once you’ve got that installed and running you want to switch the the React Native app directory.

cd RNApp/

Then let’s install the hash.js.

npm install hash.js --save

Hashing

Everything we’ll be working on today will take place in a single file, RNApp/app/ddp.js.

First, let’s bring in the heavy lifter of today’s post - hash.js.

Now let’s create a function that does the actual encryption so we have a single function that handles anything related to hashing.

That’s all we’ve got to do to get hashing set up! Now we just need to hook it up into our existing login and sign up logic.

Implementation

Just have to make a couple small changes here:

And that’s all, folks! You’re now no longer sending your user’s password over the wire in plain text. You still really should be use SSL in production though - especially now that Let’s Encrypt provides free SSL.