how to get email authenticate with Gmail in angular and firebase?

Question

i want to get email authenticate gmail in angular and firebase, i created the function

getAuth (){ return this.afAuth.authState.pipe (map (auth => auth));} .

auth-client.service.ts

import { map } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app'

@Injectable({
  providedIn: 'root' 
})

export class AuthClientService {

constructor(private afAuth:AngularFireAuth) { }

 getAuth(){
    return this.afAuth.authState.pipe(map(auth=>auth));
  }
}

i assign email authenticate to a variable in navbar.component.ts (userLoggedIn).

navbar.component.ts

import { Router } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';
import { AuthClientService } from './../../services/auth-client.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  isLoggedIn:boolean=false;
  userLoggedIn:string;

  constructor(
    private authService:AuthClientService,
    private flashMessage:FlashMessagesService,
    private route:Router
    ) { }
 ngOnInit() {
    this.authService.getAuth().subscribe(auth=>{
      if(auth){
       return this.isLoggedIn=true;
       this.userLoggedIn  = auth.email; 
       }else{
         this.isLoggedIn=false;

       }
    })

  }
}

in the end I want to display it in navbar.component.html but rine to display. navbar.component.html

<li class="nav-item">
          <a routerLink="/login" class="nav-link">{{ userLoggedIn }} </a>
      </li>

can you share with us the repository on github thanks – ZINE Mahmoud Nov 22 '19 at 22:43 — ZINE Mahmoud, Nov 22 '19 at 22:43

score 3 · Accepted Answer · answered Nov 22 '19 at 22:14

3

Change this:

 ngOnInit() {
    this.authService.getAuth().subscribe(auth=>{
      if(auth){
       return this.isLoggedIn=true;
       this.userLoggedIn  = auth.email; 
       }else{
         this.isLoggedIn=false;

       }
    })

  }

into this:

 ngOnInit() {
    this.authService.getAuth().subscribe(auth=>{
      if(auth){
        this.userLoggedIn  = auth.email;
        this.isLoggedIn = true; 
       }else{
         this.isLoggedIn = false;
       }
    })

  }

answered Nov 22 '19 at 22:14

Peter Haddad

78,874
25
140
134

Hey @PeterHaddad can you check this question please?https://stackoverflow.com/questions/59033989/how-to-use-multi-auth-firebase – Oliver D Nov 25 '19 at 21:17

how to get email authenticate with Gmail in angular and firebase?

1 Answers1