Build a Social App With React Native

3.1 Create the Login Screen

Hi, and welcome back to Build a Social App With React Native. In this lesson we will add authentication to the app, and create a login screen. Before we can start implementing, there are a few libraries we need to install. To interact with the Firebase backend, I'm going to go with react-redux-firebase. This also means we are going to need the redux and react-redux packages. The library supports ES7 decorators, but react native doesn't. So, we need to install the babel plugin transform-decorators-legacy library, and add it to the babel configuration in .babelrc. Decorators are helpful for anything that you want to transparently wrap with extra functionality. In our case that is equipping the components with Redux connectivity. If you don't know about Redux and React Native, check out my lesson in the Get Started With React Native course about application state, there I'm explaining how to use it in more detail. Okay let's get started. First of all I'm going to create a store that is connected to Firebase. So let's import the createStore and compose methods from redux, reactReduxFilebase from react-redux-filebase, and AsyncStorage from react-native. I'm also going to import an AppReducer that I will create in a moment. Now to start of them at the across put the result of a function call the configureStore. This take some initialState and some history. But we are not going to use them here. First of all let's initialize reactReduxFirebase by calling the method. We have to parse in the Firebase configuration as the first parameter. And now I'm going to create that as a constant outside the function. The minimum configuration includes the authDomain, which is normally the name of your app with .firebaseapp.com appended. Then the database URL, which is the firebaseio.com domain, which you can find in the firebase console, as well as an API key. Let me quickly show you where that is. You can find it when you go to your console. Click on the cox and open the project settings. Here is your web API key. So now that we have the firebase connection configuration done, it's time for the app specific configuration. React Redux Firebase cannot only handle authentication but also user profiles. We have to specify under which key the library can find this data. In our case that's just profiles. We can specify which profile params should be populated. That means that the library is going to map the ids that it finds in a place to actual data from another key. In our case we want to map the following parameter to the users. We can also enable logging to see the queries in the debug console If you need to have a look at the data. Then we have to set the React Native params to the Async storage component. Now that's created, we can create the store with some middleware with a compose function. This allows us to debug it in the dev tools if we have to It will return a function. Now we can call this very function and supply the reducer to create the actual store. Finally, to support hot reloading and development, we need to supply some code to achieve this. It is responsible for refreshing the app reducer in the store. Also, we shouldn't forget to return to the store. Now let's move to the app reducer. It's very simple, we just need to import combineReducers from redux, as well as the fire-based state reducer, which I will alias as firebase from the react-redux firebase library. The radio set solve is a call to combineReducers. Well we will supply the Frebase Reducer. Now we have to connect the store with the app. We need to use the provider component on the top level. First up is to extract the navigation functionality in a separate file. I'm calling it App Navigator Jess. With that out of the way, we can start a new component. To do this, I'm going to create a class called Root, and add a render function that contains the provider of the store that also points to a variable called store. And the component app with navigation state. This component can be imported from the app navigator and we also need to import the create store method from. Now we can create store content to be the results of this function. I also have to replace the root component in the app registry to Root. Now in the navigator we actually need to export this app with navigation state component. In fact, that will be another navigator, I'm calling it AppNavigator. It will have two screens, the Main screen and the Login screen. It also uses hadMode none, so we don't get a navigation controller around it. To hook it up, I'm simply wrapping the navigator and the connect function. And export it. We can't use decorators here because we can only use them with an export if we are exporting a class. Now, the main class will be representing the app, once the user has logged in. If the user isn't logged in, then we will display the logging screen as a model. Let's create the main component in this very same file. So first of all I'm going to set the state to have the property all complete. This means that the authentication flow has been completed and it should show the main app. Then, we are going to have render method that only renders the main navigator when the authentication is completed. Otherwise, it will run on nothing. Now, it's time to use the decorators. Here, I'm going to use the Firebase connect decorator. Then I'm going to use the normal connect and supply it with a function that takes a hash with the firebase property and returns a hash that has the auth property. And here we're going to call pathToJs with a firebase variable and the auth keyword as well as undefined as the default. This makes the Firebase and auth of objects available as properties in the component. It's important that you have the order right with the decorative. If you do it like we do here the Firebase Connect decorator will wrap around the normal connect decorator Which we'll wrap around the class. Now we need to import some stuff. The firebaseConnect, path.js, and isLoaded functions from react-redux firebase. The connect function from react-redux, and I'm also adding navigation actions to react litigation from a login screen from the lab. Okay, now we have to navigate to the login screen if the user hasn't authenticated. For now, let's just do it all the time. So we need a method called setupAuthentication. That calls this props navigation dispatch and provides a navigation action. Since I don't want to use it to be able to go back to another screen, I'm going to use reset. Here, I'm going to supply the index which is 0, as well as an action. The only action we need is the navigate action to the route named log in. We also have to call set up authentication, which we can do in the componentDidMount function. We do that if the auth property is undefined or null. Otherwise we're gonna set the auth state to true. It's time to create a login screen. Let's start from the top with the imports. I'm going to need a standard react and component import from react. Activity indicator, AsyncStorage, text and view from react native. Firebase Connect and is loaded from react Firebase and navigation actions from react navigation. To show the UI I want a button, a form label, and a form input component from react native elements. Now we can create the component. I'm also adding an isLoading property and set it to false. Then we can create the render function. First of all we have this.state.isLoading, then we can just return a view with an activity indicator. The view will get a style flex 1 and align items and justify content will be centered to center the indicator, which we'll be animating and be of size large. If we aren't loading, we can return the form. I'm going to add a text that has a top margin. It is center aligned, and has a bold 18 point font that says authentication required. Then we can add a form label that says email, and a form input. I'm going to quickly jump ahead, so you don't have to watch me type all this. The input sets the and the value and has some formatting .So it automatically focuses and, upon hitting enter, it jumps to the next field. The password field is almost the same, but it has the secured text and free property. And also calls performLogin on submit. Then, we have a button that also calls performLogin. Now, we need the two methods, focusField is very simple. It just looks up the reference to the component and calls focus on it. The performLogin method is going to set the state of isLoading to true. And then fetches the credentials as email and password from the state. Now we are going to call login on the Firebase property. It returns a promise and we can use the then function to react to it. It's time we save the email and password for further runs so the user doesn't have to log in every time. I'm going to do this in AsyncStorage, but you should use a secure alternative like the keygen for this. AsyncStorage has a multiset method that takes an array of arrays of key and value pairs. It is also asynchronous, so we have to wrap the next line in a callback again. At this point, we are ready to go back to the main screen. And we can do that, the very same way we did, in the navigator. By using reset. If there was an error, for instance because the username and password were wrong. We are just going to set isLoading, back to false. You should probably add an error message to it. So this concludes the first part of the authentication flow lessons. In the next lesson, we are going to finish it by adding the possibility to sign up, and properly fetch the data from the store, and let the user in again, upon restarting the app. See you then.