👤 Google SignIn

Create a directive that extends Google SignIn to any button or element


Step 1 - Generate the Google Signin Directive

command line
ng g directive user/google-signin

The directive listens to the click event on the host element to trigger the signin process in Firebase.

Event Types

file_type_ng_component_ts google-signin.directive.ts
import { Directive, HostListener } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import firebase from 'firebase/app;

  selector: '[appGoogleSignin]'
export class GoogleSigninDirective {
  constructor(private afAuth: AngularFireAuth) {}

  onclick() {
    this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider());

The directive can be attached to any button or clickable element.

Step 2 - Attach the Directive to a Button

Update the Login Page to use the directive on a material button and listen to the AngularFire user.

file_type_ng_component_ts login-page.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';

  selector: 'app-login-page',
  templateUrl: './login-page.component.html',
  styleUrls: ['./login-page.component.scss']
export class LoginPageComponent {

  constructor(public afAuth: AngularFireAuth) { }

file_type_html login-page.component.html
  <div *ngIf="!(afAuth.authState | async)">

    <button mat-raised-button appGoogleSignin>
      <img src="/assets/google-logo.svg" /> Login with Google

  <div *ngIf="afAuth.authState | async as user" class="logout">
      Logged in as <strong>{{ user.email }}</strong>

    <button mat-stroked-button (click)="afAuth.signOut()">Logout</button>

Questions? Let's chat

Open Discord