Password Hashing for Meteor React Native


by Spencer Carli

Future updates will be made on Medium.

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:

meteor add accounts-ui

Then we’ll modify the app to show the buttons:

Getting the React Native App Set Up

First, just to reduce boilerplate, you can start with last week’s project by cloning the Github repo. You can access that here: https://github.com/spencercarli/meteor-react-native-authentication.

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.

You can access the completed example on Github.

If you found this valuable consider signing up for my email list where I’ll send you new tips for using React Native and Meteor together.

Share Share on Twitter Share on Facebook Share on LinkedIn

How Can We Help?

Reaching out doesn’t mean you’re ready to start a project, but we’d love to learn more about the challenge you’re facing, answer any questions, and see if we might be a good fit for working together.

Contact Us