React Native Meteor: Auth with Email, Username, and Password

Welcome to post #2 of my series on authentication using React Native & Meteor! This week we’re going to cover auth as it pertains to email/username + password.

It’s much more simple than last week’s post on OAuth with Facebook. It’s easier because we don’t have to deal with any native dependencies and even easier still thanks to the great work on react-native-meteor. Let’s dive in.

The full source is available here.

Make sure you’ve got React Native and Meteor installed on your system.

First thing we want to do is create our Meteor app and our React Native app.

meteor create MeteorApp && react-native init RNPasswordExample

Configuring Meteor

If you’ve used Meteor in the past you know how simple it is to setup accounts. We’re going to cover that very quickly.

cd MeteorApp/ && meteor add accounts-password accounts-ui

Then we’ll use the loginButtons template helper to quickly and easily setup accounts on our Meteor app. This is the absolute bare bones — I just want to demonstrate that we’re using the exact same accounts system.

Well, that’s it on the Meteor side! Great isn’t it?! You’ll want to start your Meteor server (via meteor) at this point so it’s ready later one.

Configuring React Native

Now that we’ve setup our server to handle accounts let’s get things going in the React Native app.

cd RNPasswordExample && npm install --save react-native-meteor 

We’ll also want to set up a few basic views. The following lays out our basic project architecture — it should be pretty straightforward.

That should all be pretty vanilla React Native stuff (minus the this.data). Now we’ll start hooking up react-native-meteor.

First, let’s get some reactive data coming in — that’s where this.data comes into play. The react-native-meteor package tries to emulate the Meteor API as closely as possible so we can expect that Meteor.user will be a reactive data source.

Note: The following examples assume you’ve configured decorator support as outlined in the setup docs here.

The first thing we do is connect our component (via a decorator) so that we can get access to getMeteorData. We’re then connecting to the Meteor server (which should still be running from earlier). Finally we’re using getMeteorData to setup our reactive data source. Meteor.user() will return either the currently logged in user or null and when that value changes the component will re-render. For us that means we’ll change which component is displayed.

Logging In

So now we’ve got our React Native connected to Meteor

Now that our main component is setup to show the correct component depending on whether the user is logged in or not let’s create a form that allows a user to create an account or to sign in.

That’s just creating a very basic for with two inputs (email, password) and two buttons (sign in, create account). Easy enough.

We’re also going to add some very basic form validation so our user doesn’t have to wait for a round trip to the server to check if they entered a password or not. We’ll also tack on some onPress handlers to our buttons.

Okay let’s log them into our Meteor server now! One thing to note about this snippet — I noticed what seems to be a bug when creating an account that the user won’t automatically be logged in so line 29 will likely be unnecessary in the future. You’ll also notice we’re catching a displaying the Meteor error, if one exists.

Logging Out

We also want to give the user the option to sign out. This creates the exact same button as earlier but when it’s pressed we’re calling Meteor.logout()

Note: If this was a real app you would likely want to create a button component. I didn’t here to keep things simple and to stay focused on the subject at hand.

Did you find this post helpful? If so then you’ll find my email list extremely valuable — I’ll show you how you can build full apps with React Native + Meteor.