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
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() {
this.auth.auth.signOut();
}
<mat-toolbar color="primary">
<mat-toolbar-row>
<span>JobSearchLog</span>
<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>
</div>
<ng-template #showLogin>
<p>Please login</p>
<mat-icon class="toolbar-icon" (click)="login()">vpn_key</mat-icon>
</ng-template>
</mat-toolbar-row>
</mat-toolbar>
<mat-list>
<mat-list-item *ngFor="let item of items | async">
<mat-icon matListIcon>done</mat-icon>
<h3 matLine> {{item.name}} </h3>
</mat-list-item>
</mat-list>
Browser configuration
Running from localhost the browser prevents cookies from external domains
Open Chrome settings
chrome://settings/content/cookies
Add to the whitelist
https://[*.]firebaseapp.com
Test
Test the application