Authentication with Firebase

To allow users to log in/sign up for our app, we need to do three things:

1. Turn on email authentication on the Firebase console.
2. Submit the email and password in our form to Firebase when the user clicks on the button.
3. Either sign up or log in the user based on the result.

Let’s open up our Firebase console (https://console.firebase.google.com) and get to work on task #1:

1. From our Chatastrophe project page, click on Authentication.
2. Under the SIGN-IN METHOD tab, you can see all the options that Firebase provides. These authentication solutions are huge boons to developers, as configuring authentication can be tricky (especially when working with third-party APIs, such as Twitter or Facebook). There's a lot of infrastructure to create to provide the proper security. Firebase takes care of that for us, so all we have to worry about is tapping into their system.
3. Click on Email/Password and then on Enable and Save. Our app can now use email and password combinations to sign up and log in. If you're looking to spice up our app a bit down the line, try implementing a Facebook or GitHub sign-in.

Get back to the app, and hop on over to LoginContainer.js. At the moment, when the user submits our form, we just prevent the default submission and log out our state:

handleSubmit = (event) => {
  event.preventDefault();
  console.log(this.state);
};

For our process, we will combine the signup and login processes into one. First, we'll check whether the email and password fields are filled in. If so, we'll try logging the user in, and if Firebase tells us that no user exists with that email, we'll create the user and sign them in automatically.

However, if the user does exist and we get a wrong password error, we'll alert the user by implementing a bit more state in our component.

Here's the plan:

handleSubmit = (event) => {
 event.preventDefault();
 // Step 1. Check if user filled out fields
 // Step 2. If yes, try to log them in.
 // Step 3. If login fails, sign them up.
}

Firstly, check whether the fields are filled in:

handleSubmit = (event) => {
  event.preventDefault();
  if (this.state.email && this.state.password) {
    // Try to log them in.
  } else {
    // Display an error reminding them to fill out fields.
  }
}

Right away, we need a way to display an error to the user to tell them that they missed a field. Let's add an error string to our state:

state = { email: '', password: '', error: ‘’ }

We'll reset that error to an empty string every time they submit the form, but if they missed a field, we'll display the following text:

handleSubmit = (event) => {
  event.preventDefault();
  this.setState({ error: '' });
  if (this.state.email && this.state.password) {
    // Try to log them in.
  } else {
    this.setState({ error: 'Please fill in both fields.' });
  }
}

Lastly, to display the error, we'll add a <p> tag above our button, with the className of the error:

  <input  
    type="password"  
    onChange={this.handlePasswordChange} 
    value={this.state.password} 
    placeholder="Your password" /> 
  <p className="error">{this.state.error}</p> 
  <button className="red light" type="submit">Login</button>

Okay, try submitting our form without a field filled in. You can do so by either running the app locally (with your Dev server) or redeploying your changes. You should see the following:

It's looking good so far. The next step is to try to log the user in. At this point, our app has no users, so Firebase should return an error. Let's call Firebase with our email and password, and then console log the result.

The method we want to use is firebase.auth().signInWithEmailAndPassword(email, password). This function returns a JavaScript promise. For those familiar with promises, you can skip to the next section, but it’s worth brushing up on if you're unsure.