Authentication screens

Learn how to customize the authentication screens in this angular admin template.

We included authentication screens such as Sign in, Sign up and Forgot password.

Please note that currently there's no backend functionality attached to these authentication screens. If you wish to have examples of social logins and/or firebase auth, please send us an email.

Navigation Layout

Authentication screens don't share the same navigation layout as the rest of the template because we don't want to show the side menu and toolbar before the user logs in.

Authentication Service

We created this service located in src/app/authentication/authentication.service.ts with a loggedUser object and a loggedUserSubject: BehaviorSubject.

loggedUserSubject: BehaviorSubject<LoggedUserModel>;
loggedUser: LoggedUserModel;

The BehaviorSubject

An RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers. While plain Observables are unicast (each subscribed Observer owns an independent execution of the Observable), Subjects are multicast.

Every Subject is an Observable. Given a Subject, you can subscribe to it, providing an Observer, which will start receiving values normally.

One of the variants of Subjects is the BehaviorSubject, which has a notion of "the current value". It stores the latest value emitted to its consumers, and whenever a new Observer subscribes, it will immediately receive the "current value" from the BehaviorSubject.

Learn more about RxJS Subjects.

In this angular project we will use a BehaviorSubject to cast the value of the loggedUser. So for example the navigation toolbar can get notified if the loggedUser changes.

In src/app/app.component.tswe subscribe to this subject, so every time the loggedUserSubject emits a value, the AppComponent loggedUser will get notified.

this.authenticationService.loggedUserSubject.subscribe({
  next: (loggedUser) => {
    this.loggedUser = loggedUser;
  }
});