How to disconnect from Google authentication after angularfire2/auth signOut?

7
votes

I'm building a website using Angular and Firebase. I'm using Angularfire2 and AngularFireAuth libraries and GoogleAuthProvider (Google) as my authentication provider.

Here is my service code:

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

@Injectable()
export class AuthenticationService {
  user: Observable<firebase.User>;

  constructor(public afAuth: AngularFireAuth) {
    this.user = afAuth.authState;
  }

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

  logout() {
    this.afAuth.auth.signOut();
  }
}

When a user 'logs out' of my site, it works, but seems to 'cache' the Google authentication. So when they attempt to login a second time I run into a few problems:

  1. User is not allowed to choose another Google account to login with.
  2. User is automatically logged in...which seems like a security problem. Another user could come to the same shared PC, and login as the previous user and is not required to type in a password to do so.

What am I doing wrong? Is there a way I can stop angularfire2/auth from caching these credentials? Is there a way to log users out of Google when they log out of my site?

2
angularfirebasefirebase-authenticationangularfireangularfire2
Exactly same here! – Jeb50

2 Answers

3
votes

This is expected as they are 2 separate systems and each Auth state is stored separately. Firebase Auth signOut signs you out of Firebase. To sign out from Google, you have to go to google and sign out. If this is critical for your app, you can always on Firebase Auth sign out, redirect to the google logout page:

auth.signOut().then(() => {
  window.location.assign('https://accounts.google.com/Logout');
}, (error) => {
  console.log(error);
});
1
votes

As a suggestion, you could do it more discreetly by following the "solution" at this link. I am using it in my app in case the user is not authorized to access the database, but you can add the iframe anywhere.

logout service:

function LogoutService($location){
        this.logOut = function(myAuth){
            myAuth.$signOut().then(() => {

                $location.path("/logout");

            }, (error) => {
                console.log(error);
            });
        };
    };

router:

.when('/logout', {
            templateUrl : "login/logout.html"
        })

logout.html:

<div class="container" >

<p >{{logUser.unauthUser}} unauthorized. Try again.</p>

<iframe id="logoutframe" src="https://accounts.google.com/logout" style="display: none"></iframe>

</div>