Firebase authentication

Server configuration

Go in the Firebase Console

Go to Settings and under General - Your project - Public settings change the Public-facing name to JobSearchLog, this name will be used in the email templates and other Firebase related component.

Go to Authentication and click Setup sign-in method, enable some signin providers.

For the application I choose:

  • Email/password
  • Google

I plan to enable Facebook, Twitter and GitHub but I have to setup application keys for each provider, this will be done later.

Client configuration

Open app.component.ts add a DI for AngularFireAuth and implement login and logout methods

constructor(db: AngularFirestore, public auth: AngularFireAuth) {
 this.items = db.collection('items').valueChanges();

login() {
 this.auth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());

logout() {
<mat-toolbar color="primary">
    <span class="toolbar-spacer"></span>

    <div *ngIf="auth.user | async as user; else showLogin">
      <span>Hello {{ user.displayName }}!</span>
      <mat-icon class="toolbar-icon">mail_outline</mat-icon>
      <mat-icon class="toolbar-icon" (click)="logout()">exit_to_app</mat-icon>
    <ng-template #showLogin>
      <p>Please login</p>
      <mat-icon class="toolbar-icon" (click)="login()">vpn_key</mat-icon>

  <mat-list-item *ngFor="let item of items | async">
    <mat-icon matListIcon>done</mat-icon>
    <h3 matLine> {{}} </h3>

Browser configuration

Running from localhost the browser prevents cookies from external domains

Open Chrome settings


Add to the whitelist



Test the application