How to store user data in local storage & use it in canLoad() guard using Capacitor's Storage Plugin?

Ionic Framework Ionic Angular
1

I am trying to add Firebase Authentication to my Ionic / Angular app.

I am able to sign users in with Firebase, now I want to add a canLoad guard to some components. These components should only be accessible to logged in users.

To do this, I have tried to add Capacitor’s Storage plugin to my app to store the user’s credentials.

Then use the stored data to allow or deny user access (i.e. allow logged in users access to the components).

Below is my code, but the guard is not working currently as I’m still able to navigate to the components even though I am not logged in.

Can someone please tell me what changes are required so that the login & guard works as expected:

Login Component:

onLogin() {
    let authObs: Observable<any>;

    authObs = this.authService.login(this.form.value.email, this.form.value.password);

    authObs.subscribe(
        resData => {
            this.router.navigateByUrl('/home');
    );
}

Auth Service:

import { Plugins } from '@capacitor/core';

login(email: string, password: string) {

    const userCredential = from(firebase.auth().signInWithEmailAndPassword(email, password));

    Plugins.Storage.set({
        key: 'userCredential',
        value: JSON.stringify(userCredential)
        });

    return userCredential;
}

Auth Guard:

export class AuthGuard implements CanLoad {

  constructor() { }

  canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {

    const userCredential = Plugins.Storage.get({ key: 'userCredential' });

    if (!userCredential) {
      return false;
    } else {
      return true;
    }
  }
}
2

Try adding the following line somewhere in your project (or just run it under ts-node):

console.log(!Promise.resolve(undefined) || "hmm");