Creating React-Native authentication with a Rails Backend.

Recently I needed to build a native app and link it to my backend which was coded in Rails 4. And a core component of implementing that was creating the authentication system for logging into the app and sending and receiving data from authenticated routes in the backend.

Using Redux and a Token based authentication approach really made it easy for me to implement the Authentication system required for the app.

Here I am going to discuss a quick way to approach the authentication system.

NOTE: I shall assume that you know how React and Redux work, this is not an intro into Redux and React.

Also I am NOT going to discuss how to setup the rails app in this tutorial. However, just to give you a hint it is a simple rails new project with Devise gem for authentication and using the simple-token-auth gem for reenabling the token auth system in Devise.

sankalpsingha/logindemonative

This is a very basic overview and I am only going to discuss how to implement the login. The entire code with the completed authentication can be found here.

Ok then… Let’s get to it…

How is the authentication happening?

Basically we are going to use Token based system to log in into our Rails App. The way Token auth works is that, we send a request to the server with our Username and Password once. And then the server verifies if the username and the password is correct. If it is, it will send us a token which we then need to store it. And when we need to access any authenticated routes, all we need to do is send the token and the server will figure out that I am the registered user with that token and give me the API data for the authenticated route.

This is basically how a token auth takes place. However in our case, the Identity provider and the Relying Party are the same Rails Application.

Setting up the project React-Native Project:

Lets create a new project for this demo.

react-native init LoginDemo

Once it has been setup, we are going to create a single app.js file which will be the entry point for both the index.ios.js and the index.android.js files.

This is the way I like to organize my files and folders.

We setup our entry point with the basic Redux setup and add in the Store and the link to the reducers.

Once the basic setup for the Redux is done. We will be creating the LoginForm.js component in the components directory.

I shall be using the react-native-textinput-effects library to make the Input form with awesome animations! This is an amazing library and the text input animations are such a treat to watch.

After which point, the app should have a beautiful Login Form ( with an awesome effect as well. )

Perfect… Looks neat! :)

Ok for the next step, we need to create an action to login the user. So we create an action in the LoginActions.js file. And this is where we need to authenticate the user. We are going to do a simple Fetch call to the API endpoint. Basically, we need to do a POST request with the username and password to our token endpoint.

We update the LoginForm.js file like so :

So we create a loginUser function in the actions file and do the following:

Once this is done, we need to store the data, i.e. : the info token that we receive from the server into the store. ( We can then persist it using Redux-Persist as well in AsyncStore. )

We do this in the Reducers :

As you can see above. Once the user has given correct credentials the ‘LOGIN_USER_SUCCESS’ action is dispatched. ( We have used Redux-Thunk for the async action dispatching. ) And we have cleared the form as well.

Using Redux makes it easy to implement the little UX features as well, like clearing out the password field when the user has entered a wrong password or the authentication is wrong. Also, implementing a loading spinner is also a piece of cake. We simple set a Spinner flag to false and then conditionally render it in the Component.

This way we have implemented the basic authentication in our Native app. We can now send the user to the main homepage after he has logged-in in the action itself.

Hope this will be helpful to you. If it is please give a like and a share :) It will motivate me to write more stuff like this.

P.S : In case you want to know how to further do requests post the login, using the authentication token, please follow my blog at : sankalpsingha.com where I shall write about this.