Storing user information in local storage with the Capacitor Storage Plugin: A Comprehensive Guide

Question

Storing user information in local storage with the Capacitor Storage Plugin: A Comprehensive Guide

I'm attempting to integrate Firebase Authentication into my Angular application.

Here's the signUp() function within my AuthService:

signUp(email: string, password: string, name: string) {
    const userCredential = from(
      firebase.auth().createUserWithEmailAndPassword(email, password)
        .then(
          (data) => {

            let newUser: firebase.User = data.user;

            newUser.updateProfile({
              displayName: name,
              photoURL: ''
            }).then(() => {
              firebase.firestore().collection('users').add({
                userId: firebase.auth().currentUser.uid,
                userName: firebase.auth().currentUser.displayName,
                created: firebase.firestore.FieldValue.serverTimestamp()
              });
            });
            Plugins.Storage.set({
              key: 'userCredential',
              value: newUser.uid
            });
          }
        )
    );
    return userCredential;
  }

Using this function, I'm able to save newUser.uid in local storage via Capacitor's Storage plugin.

However, I'm looking to store the same details as shown below (specifically localId, email, idToken, and expirationTime):

 login(email: string, password: string) {
    return this.http.post<AuthResponseData>(
      `firebaseUrl/v1/accounts:signInWithPassword?key=${
      environment.firebaseAPIKey
      }`,
      { email: email, password: password, returnSecureToken: true }
    ).pipe(tap(this.setUserData.bind(this)));
  }

private setUserData(userData: AuthResponseData) {
    const expirationTime = new Date(
      new Date().getTime() + (+userData.expiresIn * 1000)
    );
    this._user.next(
      new User(
        userData.localId,
        userData.email,
        userData.idToken,
        expirationTime
      )
    );
    this.storeAuthData(userData.localId, userData.idToken, expirationTime.toISOString(), userData.email);
  }

  private storeAuthData(userId: string, token: string, tokenExpirationDate: string, email: string) {
    const data = JSON.stringify({
      userId: userId,
      token: token,
      tokenExpirationDate: tokenExpirationDate,
      email: email
    });
    Plugins.Storage.set({ key: 'authData', value: data });
  }

Could someone guide me on how to obtain these 4 values in my signUp() function?

angular typescript firebase firebase-authentication angular-canload

Answer 1

Answer №1

As per the documentation, the method .signInWithEmailAndPassword from Firebase Auth returns a Promise<UserCredential>. This enables you to maintain a user's authentication status within your application.

Here is a simple example using localStorage:

login(email: string, password: string) {
  return from(firebase.auth().signInWithEmailAndPassword(email, password));
}

Upon calling login(..., ...), you can store the successful result in localStorage:

localStorage.createItem('auth', userCredential)

In your guard, you can then check the contents of localStorage:

canLoad(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const userCredential = localStorage.getItem('auth');
    // TODO: add validation step
    return !!userCredential; // or the result of your validation
  }

Another approach is to utilize the onAuthStateChanged callback:

firebase.auth().onAuthStateChanged(user => {
      if (user) {
        localStorage.setItem('auth', user);
        console.log('Logged In User:', user);
      } else {
        console.log('Not Logged In');
        this.router.navigateByUrl('login');
      }
});

Remember to remove the item from localStorage when the user logs out or the session is invalidated:

localStorage.removeItem('auth');

Consider using NgRx or another state management tool to handle user state management more effectively. To enhance security, ensure that an API key or JWT is passed with each API request for user validation.

If you require a more performant guard, explore Firebase's API for validation checks that can be used in place of local storage. For instance, authenticating a user using an auth token directly with Firebase could be a more efficient approach, although it would involve making an API call each time the guard is triggered. Local storage, on the other hand, does not pose this latency issue.

Answer 2

As per the documentation, the method .signInWithEmailAndPassword from Firebase Auth returns a Promise<UserCredential>. This enables you to maintain a user's authentication status within your application.

Here is a simple example using localStorage:

login(email: string, password: string) {
  return from(firebase.auth().signInWithEmailAndPassword(email, password));
}

Upon calling login(..., ...), you can store the successful result in localStorage:

localStorage.createItem('auth', userCredential)

In your guard, you can then check the contents of localStorage:

canLoad(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const userCredential = localStorage.getItem('auth');
    // TODO: add validation step
    return !!userCredential; // or the result of your validation
  }

Another approach is to utilize the onAuthStateChanged callback:

firebase.auth().onAuthStateChanged(user => {
      if (user) {
        localStorage.setItem('auth', user);
        console.log('Logged In User:', user);
      } else {
        console.log('Not Logged In');
        this.router.navigateByUrl('login');
      }
});

Remember to remove the item from localStorage when the user logs out or the session is invalidated:

localStorage.removeItem('auth');

Consider using NgRx or another state management tool to handle user state management more effectively. To enhance security, ensure that an API key or JWT is passed with each API request for user validation.

If you require a more performant guard, explore Firebase's API for validation checks that can be used in place of local storage. For instance, authenticating a user using an auth token directly with Firebase could be a more efficient approach, although it would involve making an API call each time the guard is triggered. Local storage, on the other hand, does not pose this latency issue.

Answer 3

Answer №2

Authentication Service - Login Function:

login(email: string, password: string) {
    const userToken = from(firebase.auth().signInWithEmailAndPassword(email, password).then(loggedInUser => {
      Plugins.Storage.set({
        key: 'userToken',
        value: loggedInUser.user.displayName
      });
    }));
    return userToken;
  }

Authentication Guard:

userToken;

canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
    return Plugins.Storage.get({ key: 'userToken' }).then(userToken => {
      this.userToken = userToken;
      return this.checkAutoLogin();
    });
  }

  checkAutoLogin() {
    if (!this.userToken || this.userToken.value === null) {
      this.router.navigateByUrl('login');
      return false;
    } else {
      return true;
    }
  }

Answer 4

Authentication Service - Login Function:

login(email: string, password: string) {
    const userToken = from(firebase.auth().signInWithEmailAndPassword(email, password).then(loggedInUser => {
      Plugins.Storage.set({
        key: 'userToken',
        value: loggedInUser.user.displayName
      });
    }));
    return userToken;
  }

Authentication Guard:

userToken;

canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
    return Plugins.Storage.get({ key: 'userToken' }).then(userToken => {
      this.userToken = userToken;
      return this.checkAutoLogin();
    });
  }

  checkAutoLogin() {
    if (!this.userToken || this.userToken.value === null) {
      this.router.navigateByUrl('login');
      return false;
    } else {
      return true;
    }
  }

Storing user information in local storage with the Capacitor Storage Plugin: A Comprehensive Guide

Answer №1

Answer №2

Similar questions

The Elusive Glitch: IOS Encounter with Ionic 2

Error: global not declared in the context of web3

Assign a specific value to the sub-component within the grid using Angular 2+

The sequence of operations when assigning in Typescript with || and utilizing the array .find method

Having trouble setting up mongodb-memory-server 8 to work with jest

React and Enzyme are coming up empty-handed when trying to locate any elements within a functional component

How can we ensure that Protractor's ElementArrayFinder 'each' function pauses until the current action has finished before moving on to the next iteration?

Extract image file name and date information (day, month, year) from an HTML form using Angular

The children prop in React Typescript is specified in the props type, but for some reason it is not being

Setting checkbox values using patchValue in Angular programming

What is the reason behind Flow's reluctance to infer the function type from its return value?

Error encountered when implementing Angular Model Class within an array structure

How come the value assigned to the [(ngModel)] variable does not show up as the selected value in the PrimeNG drop-down menu?

The specified type argument is not compatible with the ObservableInput<any> type

What are some strategies for circumventing the need for two switches?

What is Prettier's reasoning for suggesting the use of `;` before a destructuring assignment declaration?

How can we verify if a React component successfully renders another custom component that we've created?

The exportAs attribute is not specified as "ngForm" for any directive

What is the best way to set up Storybook with Vue Cli 3?

The validation requirement in Angular prevents the form from being considered valid until the input has been modified