Storing Firebase Auth User Data in Ionic Storage Securely

Question

implementing firebase auth in an ionic app with AngularFireAuth, I am looking to have access to Firebase Auth User across the ionic app. would ionic storage be a good option?

in the login page, I would listen to the AuthState Observable. how can I observe the AuthState changes across the ionic app? and can I store that in ionic storage whenever AuthState Changes?

given the User Auth Data is Sensitive should I prefer secure storage to regular ionic storage?

update solution Listening to Auth State Changes across the ionic app (all components) we need a Service that maintains this Auth State Observable. And any component should be able to plugin into that and listen to changes.

example: After login user reaches the landing page, and if the auth logout(for any reason), he should be taken to login page. For this, the landing page component will listen to the AuthState Service's user observable. when null it logs him out. some code

As far as I know, Firebase should automatically persist the authentication state across reloads on Ionic. See stackoverflow.com/… — Frank van Puffelen
thanks, frank, I was also looking for something to make all components aware of the Auth State globally. — earlyBirdDev

earlyBirdDev earlyBirdDev · Accepted Answer · 2020-01-07T10:00:00

Listening to Auth State Changes across the ionic app (all components) we need a Service that maintains this Auth State Observable. And any component should be able to plugin into that and listen to changes.

example: After login user reaches the landing page, and if the auth logout(for any reason), he should be taken to login page. For this, the landing page component will listen to the AuthState Service's user observable. when null it logs him out. some code

import * as firebase from 'firebase/app';

import * as firebase from 'firebase/app';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';

import { Observable, of } from 'rxjs';

export class AuthService {
  user$: Observable<firebase.User>;

  constructor(
      private afAuth: AngularFireAuth,
      private afs: AngularFirestore,
      private gplus: GooglePlus,
      private platform: Platform,
      private navCtrl: NavController
  ) { 
    this.user$ = this.afAuth.authState;
  }
 }

Storing Firebase Auth User Data in Ionic Storage Securely

1 Answers