Repository navigation
Expand file tree
/
Copy pathauth.component.ts
More file actions
67 lines (54 loc) · 1.7 KB
/
Copy pathauth.component.ts
File metadata and controls
67 lines (54 loc) · 1.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { Component, OnInit, OnDestroy, PLATFORM_ID } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import firebase from 'firebase/app';
import { Subscription } from 'rxjs';
import { trace } from '@angular/fire/performance';
import { Inject } from '@angular/core';
import { isPlatformServer } from '@angular/common';
@Component({
selector: 'app-auth',
template: `
<p>
Auth!
{{ (auth.user | async)?.uid | json }}
{{ (auth.credential | async)?.additionalUserInfo?.isNewUser | json }}
<button (click)="login()" *ngIf="showLoginButton">Log in with Google</button>
<button (click)="loginAnonymously()" *ngIf="showLoginButton">Log in anonymously</button>
<button (click)="logout()" *ngIf="showLogoutButton">Log out</button>
</p>
`,
styles: []
})
export class AuthComponent implements OnInit, OnDestroy {
private readonly userDisposable: Subscription|undefined;
showLoginButton = false;
showLogoutButton = false;
constructor(
public readonly auth: AngularFireAuth,
@Inject(PLATFORM_ID) platformId: object,
) {
if (!isPlatformServer(platformId)) {
this.userDisposable = auth.authState.pipe(
trace('auth')
).subscribe(isLoggedIn => {
this.showLoginButton = !isLoggedIn;
this.showLogoutButton = !!isLoggedIn;
});
}
}
ngOnInit(): void { }
ngOnDestroy(): void {
if (this.userDisposable) {
this.userDisposable.unsubscribe();
}
}
async login() {
const user = await this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
}
async loginAnonymously() {
const user = await this.auth.signInAnonymously();
}
logout() {
this.auth.signOut();
}
}