Angluar:Firebase auth でGoogle/Twtterログインを試す

Firebase Hosting に Angular を統合して Firestore に接続にて、Angularから、Firestoreを利用したが、Flutter側のめどがついてきたので、Angularにもどって、認証を試す。

Firebaseの設定は、Flutter: Firebase auth から twitter サインインを行う。AndroidとiPhone にて実施済み。

angularfire のサンプルソースに少し手を加えて動作確認。

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="auth.user | async as user; else showLogin">
      <h1>Hello {{ user.displayName }}!</h1>
      <button (click)="logout()">Logout</button>
    </div>
    <ng-template #showLogin>
      <p>Please login with Google.</p>
      <button (click)="loginGoogle()">Login with Google</button>
      <p>Please login with Twitter.</p>
      <button (click)="loginTwitter()">Login with Google</button>
    </ng-template>
  `,
})
export class AppComponent {
  constructor(public auth: AngularFireAuth) {
  }
  loginGoogle() {
    this.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }
  loginTwitter() {
    this.auth.signInWithPopup(new auth.TwitterAuthProvider());
  }
  logout() {
    this.auth.signOut();
  }
}

ここまでFlutter+Firebaseで準備に時間をかけてきたのもあるのだろうが、あまりにあっけなく動作確認完了！！