First of all, we need to store the Firebase configuration settings inside the project environment variables. Follow these steps to do so:

1. Update the src/environments/environment.ts file with the Firebase configuration that you received earlier in this chapter when setting up the Firebase project:

      export const environment = {
        production: false,
        firebaseConfig: {
          apiKey: 'AIzaSyDPgAiN7dFqjp17HVFRWT2QaChHx5oGeBo',
          authDomain: 'electron-chat-app-df7eb.firebaseapp.com',
          databaseURL: 'https://electron-chat-app-df7eb.firebaseio.com',
          projectId: 'electron-chat-app-df7eb',
          storageBucket: '',
          messagingSenderId: '610931503152',
          appId: '1:610931503152:web:f2ccc78969eb58a3'
        }
      };

2. Install the AngularFire2 library with the following command:

      npm install @angular/fire firebase

3. Next, import and set up the Angular Fire modules in the src/app/app.module.ts file according to the following code:

      import { AngularFireModule } from '@angular/fire';
      import { AngularFireAuthModule } from '@angular/fire/auth';
      import { environment } from '../environments/environment';

      @NgModule({
        // ...
        imports: [
          // ...
          AngularFireModule.initializeApp(
            environment.firebaseConfig
          ),
          AngularFireAuthModule
        ],
        // ...
      })
      export class AppModule {}

As you can see, we've imported AngularFireModule and initialized it with firebaseConfig from the environment.ts file. We've also imported the AngularFireAuthModule module, which carries all the structures that our application may require to get our authentication up and running.

4. Switch back to the login.component.ts file and import the AngularFireAuth service. You also need to inject it via the constructor, as shown in the following code:

      import { AngularFireAuth } from '@angular/fire/auth';

      // ...
      export class LoginComponent {
        // ...

        constructor(
          private router: Router, 
          private firebaseAuth: AngularFireAuth) {}
        // ...
      }

5. Next, update the implementation of the login function using the following code:

      login(username: string, password: string) {
          this.firebaseAuth.auth.signInWithEmailAndPassword(username, 
              password).then(
            credential => {
              console.log(credential);
              this.router.navigate(['chat']);
            },
            err => {
              this.error = err.message || 'Unknown error';
            }
          );
        }

The preceding code is self-explanatory. Here, we call the signInWithEmailAndPassword function that AngularFire provides and pass our username and password to it. Upon a successful call, we log the resulting credential object to the console (for testing purposes) and then navigate to the /chat page. If an error occurs, we update the error property and display the error to the user.

Let's try the failure scenario first:

1. Enter some incorrect credentials and press the Login button. You should see the following error on your screen:

2. Now, use the credentials that you created earlier in the Firebase console.

3. This time, you should see no errors. The application will display the /chat page after we click on the Login button:

4. We also dump the server response into the console log. If you switch to the developer tools, you should see the following data:

As you can see, the server provides you with a set of additional information that your application may require. Please refer to the Firebase documentation to see what those fields are and how you can use them.

You have made significant progress so far. We have set up a Firebase project that's running authentication checks for our application. We also have a fully working, though minimalistic, Login dialog. So far, it isn't possible to log into the application and be redirected to the Chat page.

In the next section, we are going to start working on the chat functionality, starting with the database configuration.