Continue on your application's path and add a Firebase and MobX store for authentication information. In this video, learn how to use Firebase and MobX to log users in and detect if a user is currently logged in.
- [Instructor] Now to continue on with our login screen we're going to need to add authentication. To do that we're going to to be using Firebase. I've got my terminal open and I'm in our dinder directory. Let's add Firebase using the yarn command, yarn add firebase, hit enter, and clear the screen. Now we need to get the configuration from the Firebase website. I already have the Firebase website open and in my console on another screen.
Here we have the console for Firebase. We're in our dinder project, and we need to click on Add Firebase to your web app. Once this comes up, you want to copy the var config, all the way from var to the last curly brace and semicolon. We'll copy this, and then we go over to our code editor. I have Visual Studio code already open and in our projects directory. We go into app, stores, config.store.js, we click on line one, create some new lines, then we start back on line one, and add an import.
We're going to imprt firebase from firebase. Then we paste our config and change the var to constant. Then down in our constructor, we call firebase.initializeApp, and we pass in the config, we just created. Now we can save the file, and we're going to add a new store to our stores. So in this stores directory, we click new file, we're going to create auth.store.js.
This is the authentication store we used previously in our login screen but had not yet created. We're going to start off with an import, open curly brace, observable and action. Now we haven't seen action before, we'll get into that in a moment. Those both are going to come from mobx. Then we import firebase from firebase.
Next we need to export default class AuthStore. The first thing we'll add is an observable, so @observable, this is called authUser, we set it equal to null. Null will represent the current user logged in. We can then create a constructor, this constructor does not take on anything, but inside of it we are going to set up a listener handle.
We'll type firebase.auth().onAuthStateChanged(). This take in a call back, which takes a user. What this does is when the authentication state changes in firebase, it calls this handler and updates our user. So we want to set this.authUser = user.
This is why we took out the AuthStore in our render method on the login screen, so then when this user changed mobx will tell that login screen it needs to update and re render. Next we're going to add an action. We're goinng to do @action and actions are mobx functions that cause some side effects back to the database. So in this case, this is going to be our signIn method, and signIn is going to send data to the database and change the state of our authenticated user.
SignIn takes an email and a password, we wrap those in curly braces so they're one object. Inside of here we're going to check if we already have an authenticated user, so this.authUser, so if the authUser exists, we're just going to return Promise.resolve, and we're going to pass in this.authUser.
If we don't have an authUser, we're going to return firebase.auth().signInWithEmailAndPassword. And that's going to take the first parameter of email, and a second parameter of password. Now we can save this. Now we need to go into index.js and add our auth store. On line two, we'll import AuthStore from ./auth.store, hit enter, after our config we add a new costant auth, which will equal new AuthStore.
We're going to have this constant after the config store, because we want to initialize firebase before using the AuthStore. We'll add a new line, then on line seven, in the default object we're exporting, we add a comma, and auth. This will add auth everywhere we're injecting the store. We can save this file, go over to our terminal, and here we can run react -native run-ios.
If you're on Windows, you want to do run.android instead. Let's run this command and wait for our application to build. My application started in the background, so I'm going to bring it to the foreground. For email we're going to do firstname.lastname@example.org, and for the password we're going to do testtest. Let's click login, this is our expected result, because we don't have a match screen to go to.
We'll get to that soon.
- Setting up your project and Firebase account
- Creating the app container
- Setting up basic navigation
- Creating a splash screen
- Creating a login screen
- Creating a match feature
- Creating a post feature