AngularFire 2 authState returning null on Page Refresh

Question

I am using firebase with AngularFire 2.

My issue is that when I a try to refresh the page, the auth instance is returning null.

This is code for my auth Service.

Everything works fine, but whenever I refresh the page, the auth is null and I am unable to call firebase database as my rules required user to be authenticated.

export class AuthService {
private userDetails: Users = null;
private dbUsers;
public loginStatus = new BehaviorSubject(false);

public GOOGLE_OATH_SCOPES = 'email, https://www.googleapis.com/auth/drive';

constructor(
    private _firebaseAuth: AngularFireAuth,
    private router: Router,
    private firebase: AngularFireDatabase,
    private _userService: UserService
) {
    var currentUser = JSON.parse(localStorage.getItem('currentUser'));
    this.setUserFromLocalstorage(currentUser);
    _firebaseAuth.authState.subscribe(
        (user) => {
             console.log("Step 1",user);
            if (user) {

            }
            else {
                this.setUserFromLocalstorage(currentUser);
            }
        }
    );

}
setUserFromLocalstorage(currentUser) {
    if (currentUser && !_.isEmpty(currentUser)) {
        this.userDetails = currentUser;
    } else {
        this.userDetails = null;
    };
}
signInWithGoogle() {
    var provider = new firebase.auth.GoogleAuthProvider();
    provider.setCustomParameters({
        prompt: 'select_account'
    });
    provider.addScope(this.GOOGLE_OATH_SCOPES);
    this._firebaseAuth.auth.setPersistence(firebase.auth.Auth.Persistence.NONE).then(() =>
        this._firebaseAuth.auth.signInWithPopup(
            provider
        ).then((result) => {
            localStorage.setItem('accessToken', result.credential.accessToken);
        })
    )
}

isLoggedIn() {
    if (!this.loginStatus.value) {
        return false;
    } else {
        return true;
    }
}


logout() {
    this._firebaseAuth.auth.signOut()
        .then((res) => {
            this.router.navigate(['/'])
            localStorage.clear()
            this.userDetails = null;
            this.loginStatus.next(false);
        }
        );

}


getLoggedInUser() {
    return _.cloneDeep(this.userDetails);
}

setLoggedInUser(user: Users) {
    this.userDetails = user;
    localStorage.setItem("currentUser", JSON.stringify(user));
}

}

And AngularFireAuth :

export declare class AngularFireAuth {
    private zone;
    readonly auth: FirebaseAuth;
    readonly authState: Observable<User | null>;
    readonly idToken: Observable<string | null>;
    constructor(config: FirebaseOptions, name: string, platformId: Object, zone: NgZone);
}

My SignIn Method :

this._firebaseAuth.auth.setPersistence(firebase.auth.Auth.Persistence.None).then(() =>
                this._firebaseAuth.auth.signInWithPopup(
                    provider
                ).then((result) => {

                })
    )

How can I resolve this issue?

Answer 1

The issue is with your sign in method.

this._firebaseAuth.auth.setPersistence(firebase.auth.Auth.Persistence.None).then(() =>
            this._firebaseAuth.auth.signInWithPopup(
                provider
            ).then((result) => {

            })
)

the Line setPersistence(firebase.auth.Auth.Persistence.None) states that the state will only be stored in memory and will be cleared when the window or activity is refreshed.

Try using firebase.auth.Auth.Persistence.Session or firebase.auth.Auth.Persistence.Local

based on your requirement.

Refer : https://firebase.google.com/docs/auth/web/auth-state-persistence