Angularfire2: AuthState changing logged in user credentials (without logging out).

Question

The frontend of the app shows logged in user email: admin@admin.com on the top right corner of the navbar. This comes from the following code:

Navigation Component

loggedInUser;

  constructor(
    private _authService: AuthService
  ) {}

ngOnInit() {
    this._authService.getAuth().subscribe(auth => {
      if (auth) {
        this.loggedInUser = auth.email;
      }
    });
}

AuthService

constructor(
    private afAuth: AngularFireAuth,
    private _afs: AngularFirestore
  ) {}

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

createAccount(email: string, password: string) {
     return new Promise((resolve, reject) => {
      this.afAuth.auth.createUserWithEmailAndPassword(email, password)
        .then(userData => resolve(userData), err => reject(err));
     });
   }

Navigation Component HTML (I have removed the bootstrap code to help focus on the code)

<nav>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown">
        <a class="..">{{ loggedInUser }}</a>
        <div class="..">
          <a class=".." (click)="onLogoutClick()">Logout</a>
        </div>
      </li>
    </ul>
</nav>

When I click the Create Driver Mobile App Account a new user account is created in firebase from AuthService above. createAccount(email, password){}

The issue is that when I create this account loggedInUser changes from admin@admin.com to fcw@test.com which is the account for the newly created user.

If I create another account for another driver e.g. John Doe -> johndoe@test.com, the loggedInUser changes from fcw@test.com to johndoe@test.com

How can I prevent AuthState from changing loggedInUser credentials?

Stack used is Angular 5, Angularfire2, Firebase as shown in the package.json dependencies below:

"dependencies": {
    "@angular-devkit/core": "0.0.29",
    "@angular/animations": "^5.1.0",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/router": "^5.1.0",
    "@types/lodash": "^4.14.96",
    "angular2-flash-messages": "^2.0.5",
    "angularfire2": "^5.0.0-rc.4",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "^2.4.1",
    "firebase": "^4.9.0",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "lodash": "^4.17.4",
    "popper.js": "^1.12.9",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },

score 0 · Answer 1 · answered Mar 25 '18 at 12:40

0

duplicate, link to SO thread was solved but is still a very hacky way,

what I would do is write a Cloud function to create those users, so you would not actually create the users on a client device. I think this would be a lot cleaner

then use the firbase-admin for nodejs

  admin.auth().createUser({
   email: email,
   password: password,
   displayName: `${firstName} ${lastName}`,
  })

answered Mar 25 '18 at 12:40

Daniel Hoppe Alvarez

1,298
1
13
18

tested the hacky way works like a charm.. but got a warning on my terminal... Circular dependency detected.. however let me test the cloud functions route.. could yo point me to some good cloud functions tutorial? – Naobi Mar 25 '18 at 13:29
https://firebase.google.com/docs/functions/get-started In the bottom is a video tutorial, but the documentation is a lot more structured and in depth, hope it helps ! – Daniel Hoppe Alvarez Mar 25 '18 at 15:16

Angularfire2: AuthState changing logged in user credentials (without logging out).

1 Answers1