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.

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.

Storing the User Data

React Native has the (AsyncStorage)[https://facebook.github.io/react-native/docs/asyncstorage.html#content] 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.

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.

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

In RNApp/app/loggedOut.js:

importReact,{View,Text,TextInput,StyleSheet,AsyncStorage// Import AsyncStorage}from'react-native';importButtonfrom'./button';importddpClientfrom'./ddp';exportdefaultReact.createClass({getInitialState(){return{email:'',password:''}},componentDidMount(){// Grab the token from AsyncStorage - if it exists then attempt to login with it.AsyncStorage.getItem('loginToken').then((res)=>{if(res){ddpClient.loginWithToken(res,(err,res)=>{if(res){this.props.changedSignedIn(true);}else{this.props.changedSignedIn(false);}});}});},handleSignIn(){let{email,password}=this.state;ddpClient.loginWithEmail(email,password,(err,res)=>{ddpClient.onAuthResponse(err,res);if(res){this.props.changedSignedIn(true);}else{this.props.changedSignedIn(false);}});// Clear the input values on submitthis.refs.email.setNativeProps({text:''});this.refs.password.setNativeProps({text:''});},/*
* Removed from snippet for brevity
*/});

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:

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. Sign up here.