Meteor Authentication from React Native

As technology changes articles get out of date. This post may be in that state now so be aware that things may not work exactly the same way. If you’re interested in me re-exploring this subject respond and let me know!

In this post I extend on my previous one in which I discussed how to easily connect a React Native app to a Meteor server. We’ll talk about the next component you’re likely to encounter — authentication. I’ll cover how to login with a username/password, email/password, or via a resume token (and how to store it).

Creating the Apps

I covered how to create and connect both the meteor app and the react native app last time so I won’t cover that here. If you need help getting started please refer to my previous post.

To get started simply clone the previous Github repo via

git clone https://github.com/spencercarli/quick-meteor-react-native

The code in this post will use that as a starting point. With that, let’s make a couple small adjustments before we dive in.

First,

cd meteor-app && meteor add accounts-password

We’ll need to pull in the basic Meteor accounts package.

Then, create RNApp/app/ddp.js:

import DDPClient from 'ddp-client'; 
let ddpClient = new DDPClient(); 
export default ddpClient;

Then in RNApp/app/index.js replace

import DDPClient from 'ddp-client'; 
let ddpClient = new DDPClient();

with

import ddpClient from './ddp';

We’re doing this to keep our sign in/up logic out of the index.js file — keeping it a bit cleaner and organized.

Creating a User

Before diving into logging in we have to learn how to create a user. We’ll just hook into the Meteor core method createUser. We’ll be using it for email and password authentication — you can view the other options available in the Meteor docs.

In RNApp/app/ddp.js

We’ll wire up the UI a bit later.

Exploring the “login” Meteor method

Meteor core provides a method, login, that we can use to handle authorization of a DDP connection. This means that this.userId will now be available in Meteor methods and publications — allowing you to handle verification. This method handles all login services for Meteor. Logging in via email, username, resume token, and Oauth (though we won’t cover OAuth here).

When using the login method you pass an object as a single parameter to the function — the formatting of that object determines how you’re logging in. Here is how each looks.

For Email and Password:

{ user: { email: USER_EMAIL }, password: USER_PASSWORD }

For Username and Password:

{ user: { username: USER_USERNAME }, password: USER_PASSWORD }

For Resume Token:

{ resume: RESUME_TOKEN }

Signing In with Email and Password

In RNApp/app/ddp.js:

Signing In with Username and Password

In RNApp/app/ddp.js:

Storing the User Data

React Native has the AsyncStorage API which we’ll be using to store the login token, login token expiration, and the userId. This data will be returned after successfully logging in or creating an account.

In RNApp/app/ddp.js:

This will give us persistent storage of those credentials, that way you can automatically login a user the next time they open the app.

Signing In with a Resume Token

In RNApp/app/ddp:

Signing Out

In RNApp/app/ddp:

The UI

First thing I want to do is break up RNApp/app/index a bit. It’ll make it easier to manage later on.

First, create RNApp/app/loggedIn.js:

You’ll notice this looks nearly identical to RNApp/app/index.js right now — and that’s true. We’re basically moving the entire existing app over to the loggedIn.js file in preparation for what’s next. With that, let’s update RNApp/app/index.js to use the newly created loggedIn.js file.

In RNApp/app/index.js:

UI: Sign In

Now let’s mock up the (ugly) UI to sign in. We’ll only cover email but the exact same applies for username.

Create RNApp/app/loggedOut.js:

Now we actually need to display our logged out component.

In RNApp/app/index.js:

Almost there! Just two steps left. Next, let’s give the user the ability to sign out.

In RNApp/app/loggedIn.js:

Last step! Let’s automatically log a user in if they’ve got a valid loginToken stored in AsyncStorage:

In RNApp/app/loggedOut.js:

There we go! You should now be able to authenticate your React Native app with a Meteor backend. This gives you access to `this.userId` in Meteor Methods and Meteor Publications. Test it out by updating the `addPost` method in meteor-app/both/posts.js:

https://gist.github.com/spencercarli/39e75acaf9bbb7b4e174

Does `userId` exist on the newly created post?

Conclusion

I do want to drop a note about security here — it’s something I didn’t cover at all in this post. When in a production environment and users are passing real data make sure to set up SSL (same as with a normal Meteor app). Also, we’re not doing any password hashing on the client here so the password is being sent in plain text over the wire. This just increases the need for SSL. Covering password hashing would have made this post even longer — if you’re interested in seeing an implementation let me know @spencer_carli.

You can view the completed project on Github here: https://github.com/spencercarli/meteor-react-native-authentication

Want to learn more about React Native and Meteor? Let me send you the latest post as soon as it comes out www.handlebarlabs.com/email-list/

Originally published at blog.differential.com on February 9, 2016.