Ionic 4 multiple authentication state

Ionic Framework
1

Hi guys, I’m working with authentication of my app wherein I was handling three different types of account. My question is, how I can identify the account type of the recently logged user? In my case, I was trying to determine if the user is clinician, clinician instructor or patient. Each of these has its own dashboard where they will redirected.

Here is my code:

app.component.ts

      this.authenticationService.authenticationState.subscribe(state => {
        if(state){
          this.authenticationService.isClinician.subscribe(clinician => {
            if(clinician){
              this.router.navigate(['members', 'menu', 'clinician-dashboard']);
              console.log('clinician')
            }
          });
          this.authenticationService.isInstructor.subscribe(instructor => {
            if(instructor){
              this.router.navigate(['members', 'instructor-dashboard'])
              console.log('instructor')
            }
          });
          this.authenticationService.isPatient.subscribe(patient => {
            if(patient){
              this.router.navigate(['members', 'patient-dashboard'])
              console.log('patient')
            }
          });
        } else {
          this.router.navigate(['login']);
          console.log('User has not authenticated yet.')
        }
      });

authentication.service.ts please note that this is same for all account types.

  loginAsClinician(data) {
    return this.httpClient.post(this.url+'authenticate/clinicians', JSON.stringify(data), httpOptions)
    .pipe( tap(res => {
      // this.storageService.storage.clear();
      this.success = true;
      this.authenticationState.next(true);
      this.isClinician.next(true);
      this.storageService.setObject('clinician', res);
      })
    )
    .toPromise();
  }

Anyone know how to work with authentication of multiple accounts? Thanks.

2

If you can, I would change the backend to have only a single authentication endpoint, and have it return the account type. Then you can do something like so:

interface User {
  flavor: "clinician" | "instructor" | "patient";
  id: string;
  name: string;
  // other common things
}

interface Clinician extends User {
  flavor: "clinician";
  // clinician-specific fields
}

// other Instructor, Patient interfaces

class AuthenticationService {
  user$ = new BehaviorSubject<User | null>(null);
  watchUser(): Observable<User | null> { return user$; }
  peekUser(): User | null { return user$.value; }
  pokeUser(user: User): void { this.user$.next(user); }
  login(uname: string, pwd: string): void {
   this.http.post(url, {uname, pwd}).subscribe(u => this.pokeUser(u));
  }
}

class AppComponent {
  this.authenticationService.watchUser().subscribe(user => {
    if (user) {
      if (user.flavor === "clinician") {
        this.router.navigate((['members', 'menu', 'clinician-dashboard']);
      } else if (user.flavor === "instructor") {
        this.router.navigate(['members', 'instructor-dashboard']);
      } else if (user.flavor === "patient") {
        this.router.navigate(['members', 'patient-dashboard']);
      } else {
        throw new Error("shouldn't happen");
      }
    } else {
      this.router.navigate(['login']);
    }
  });

No more nested subscriptions, only one Observable in the authentication service.