Let's set up a simple user/password authentication. Click on the Authentication menu option and select the Sign-in method tab. Then, enable the email/password option. It should look like this:

At this point, we need to add a user, a user that is allowed to access our data. So, let's set up the user. We go to the Users tab instead and click ADD USER button. It should look something like this:

Okay, so now we have a user with an email [email protected] and password abc123. We still need to log in such a user for the database to show us the data. If we don't log in, our application will look very empty and devoid of any data. We will also get a lot of errors on the console log saying that we lack permission to look at the data.

In the previous setup of Firebase, we had only set up the database itself, not the authentication part. As Firebase is an Angular module, there are some rules we need to follow:

• Import the module and add it to the import keyword of the @NgModule
• Put the AngularFireAuth service in the providers keyword in @NgModule, so a component is able to inject it into its constructor
• Perform a programmatic login

The module side of things looks like the following:

import { 
  AngularFireAuthModule, 
  AngularFireAuth 
} from 'angularfire2/auth';

@NgModule({
  imports: [
    AngularFireAuthModule
  ],
  providers: [AngularFireAuth]
})

Now, we are ready to inject the service into the component and perform the login:

import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'anguarfire2/auth';

@Component({
  template : `
    <div *ngFor="let b of books$ | async">
      {{ b.title }} {{ b.author }}
    </div>
    <div *ngIf="book$ | async; let book">
      {{ book.title }} {{ book.author }}
    </div>
 `
})
export class BookComponent {
  user;
  book$: Observable<Book>;
  books$: Observable<Book[]>;

  constructor(
    private authService: AngularFireAuth,
    private angularFireDatabase: AngularFireDatabase
  ) {
    this.user = this.authService.authState;
    this.authService.auth
      .signInWithEmailAndPassword('[email protected]','abc123')
      .then(success => {
        this.book = 
        this.angularFireDatabase
          .object('/book')
          .valueChanges().map(this.mapBook);

        this.books = 
        this.angularFireDatabase
          .list('/books')
          .valueChanges()
          .map(this.mapBooks);
      }, 
      err => console.log(err)
    );
  }
}

Here, we do two interesting things.

First off, we assign the authState of the  authService to a user. This is an Observable that, once logged in, will contain your user. We have now learned that we can show Observables with the async pipe. However, we are interested in getting two things from this user, uid and email, so we can see we are logged in as the correct user. It is tempting to write template code that looks like this:

<div *ngIf="user | async; let user">
  User : {{ user.uid }} {{ user.email }}
</div>

This creates the variable user for us that we can refer to instead. As expected, this prints out the user for us once logged in.

Now, to the second piece of our preceding code, the login call:

authService
.auth
.signInWithEmailAndPassword('[email protected]','abc123')
.then(success => {
  this.book = this.angularFireDatabase.object('/book')
    .map(this.mapBook);
    this.books$ = this.angularFireDatabase.list('/books')
    .map(this.mapBooks);
  }, 
  err => console.log(err)
)

Here, we talk to the auth property on the authService and we call the signInWithEmailAndPassword(email, password) method. We pass it the credentials. The method returns a promise and, on resolving that promise, we set our properties' book and books. If we don't do it this way and first authenticate, we will get a lot of access not allowed errors.

There are a ton more signInWith... methods, as shown here:

We urge you to try them out for yourself.

As for ways of authenticating, we have just scratched the surface. The following is the full range of login methods:

Try them out and see what works for you and your app.