State Management in Angular Using NGXS – Part 2



TL;DR: In the first part of the state management in Angular with NGXS series, we learned about the basics of NGXS, how it works, and how to use it to manage our application’s state. In part 2, I will show you how to use Auth0 with NGXS to manage use-related states.


User State Management

The user store will work similarly to how the menus state management works. I won’t detail how each part of the state works and will focus more on the Auth0 and NGXS integration.

The starter app uses the Auth0 SDK directly and manages the roles through the RolesService. This tutorial section will walk you through migrating to using Auth0’s SDK through NGXS and managing the roles by using the NGXS’s Select function.

Create user model

Let’s start with defining the interface for the user state object. Open user.model.ts and add the following code 👇



import  User as Auth0User  from "@auth0/auth0-spa-js";

export interface UserStateModel 
  userDetails: Auth0User 

Create a barrel export for the user directory with the following code 👇



export * from "./user.model";

To further simplify our imports, add the user folder to the barrel export in the state folder and add the following code 👇



export * from "./menus";


export * from "./user";

Create user actions

We have three user-related Actions that we need for our user Store. Login, logout, and user changed Action to keep the user details in our Store in sync with Auth0’s SDK.

Since we have several user Actions that will originate from the Navbar component, you can group them under AllNavbarAction to ensure you aren’t reusing these Actions in a different part of the application (following the Good Action Hygiene pattern).

Because the UserChangedFromAuth0SDK Action originates from Auth0’s SDK, let’s name the source part of the Action type as Auth0 SDK.

Open user.actions.ts and add the following code 👇



import  User as Auth0User  from "@auth0/auth0-spa-js";

export namespace User 
  export namespace AllNavbarActions 
    export class LoginFlowInitiated 
      static readonly type = "[Navbar] Login Flow Initiated";
    

    export class LogoutFlowInitiated 
      static readonly type = "[Navbar] Logout Flow Initiated";
    
  
  export class UserChangedFromAuth0SDK 
    static readonly type = "[Auth0 SDK] User Changed";
    constructor(public payload:  undefined ) 
  

Add user.actions to the barrel export. Open index.ts and add the following code 👇



export * from "./user.model";


export * from "./user.actions";

Update application to use user actions

Like what you did with menus-related functionalities in the first part of the article, let’s update the application’s user-related functionalities to use NGXS’s Actions. You can use Actions by injecting the Store class and calling the dispatch function with the Action name you defined in the previous section.

Open nav-bar.component.ts and add the following code 👇



import  Component  from "@angular/core";
import  IconDefinition  from "@fortawesome/fontawesome-svg-core";
import  faHome, faUser, faUtensils  from "@fortawesome/free-solid-svg-icons";
import  AuthService  from "@auth0/auth0-angular";


import  Store  from "@ngxs/store";
import  User  from "src/app/core";

export interface INavBarMenuLinkProps 
  to: string;
  icon: IconDefinition;
  label: string;


@Component(
  selector: "app-nav-bar",
  templateUrl: "./nav-bar.component.html",
  styleUrls: ["./nav-bar.component.scss"],
)
export class NavBarComponent 
  faUser = faUser;
  isAuthenticated$ = this.authService.isAuthenticated$;
  user$ = this.authService.user$;

  navOptions: INavBarMenuLinkProps[] = [
     to: "/home", label: "Home", icon: faHome ,
     to: "/menu", label: "Menu", icon: faUtensils ,
  ];

  constructor(
    private authService: AuthService,
    
    private store: Store
  ) 

  loginWithRedirect(): void 
    
    this.store.dispatch(new User.AllNavbarActions.LoginFlowInitiated());
  

  logout(): void 
    
    this.store.dispatch(new User.AllNavbarActions.LogoutFlowInitiated());
  

Create user state

Before creating individual selectors for slices of the user state, let’s start by creating the boilerplate required to use this feature. NGXS uses an Injectable class with an additional State decorator. Create user.state.ts and add the following code 👇



import  Injectable  from "@angular/core";
import  State  from "@ngxs/store";
import  UserStateModel  from "./user.model";

@State<UserStateModel>(
  name: "user",
  defaults: 
    userDetails: undefined,
  ,
)
@Injectable()
export class UserState 

Next, Let’s add some utility Selectors for user, isLoggedIn, userRoles, and isAdmin to easily let your components access these properties. Open user.state.ts and update it with the following code 👇



import  Injectable  from "@angular/core";
import  UserStateModel  from "./user.model";


import  State, Selector  from "@ngxs/store";


import  environment  from "src/environments/environment";


import  USER_ROLES  from "../../services";

@State<UserStateModel>(
  name: "user",
  defaults: 
    userDetails: undefined,
  ,
)
@Injectable()
export class UserState 
  
  @Selector()
  static user(state: UserStateModel) 
    return state.userDetails;
  

  
  @Selector()
  static isLoggedIn(state: UserStateModel) 
    return !!state.userDetails;
  

  
  @Selector()
  static userRoles(state: UserStateModel) 

  
  @Selector()
  static isAdmin(state: UserStateModel) 
    return state.userDetails?.[`$environment.auth.audience/roles`]?.includes(
      USER_ROLES.MENU_ADMIN
    );
  

Add user.state to the list of exports in index.ts 👇



export * from "./user.model";
export * from "./user.actions";


export * from "./user.state";

Update application to use user selectors

The user role route guard previously used the value of the roles from RolesService. Since you now have a user roles Selector, you can replace the current implementation with a Selector created in the previous section. Open user-role.guard.ts and add the following code👇



import  Injectable  from "@angular/core";
import 
  CanActivate,
  Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
 from "@angular/router";
import  Observable, of  from "rxjs";
import  catchError, map  from "rxjs/operators";


import  Store  from "@ngxs/store";
import  UserState  from "..";

@Injectable( providedIn: "root" )
export class UserRoleGuard implements CanActivate 
  constructor(
    private router: Router,
    
    private store: Store
  ) 

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> 
    
    return this.store.select(UserState.userRoles).pipe(
      map((roles) => 
        if (roles && roles.includes(route?.data?.role)) 
          return true;
        

        
        this.router.navigate(["/home"]);
        return false;
      ),
      catchError((err) => 
        
        this.router.navigate(["/home"]);
        return of(false);
      )
    );
  

Another place we use user-related information is the Navbar. We display user information and conditionally display the login and logout button depending on the user’s isAuthenticated state. Open nav-bar.component.ts and add the following code 👇



import  Component  from "@angular/core";
import  IconDefinition  from "@fortawesome/fontawesome-svg-core";
import  faHome, faUser, faUtensils  from "@fortawesome/free-solid-svg-icons";
import  Store  from "@ngxs/store";


import  User, UserState  from "src/app/core";

export interface INavBarMenuLinkProps 
  to: string;
  icon: IconDefinition;
  label: string;


@Component(
  selector: "app-nav-bar",
  templateUrl: "./nav-bar.component.html",
  styleUrls: ["./nav-bar.component.scss"],
)
export class NavBarComponent 
  faUser = faUser;

  
  isAuthenticated$ = this.store.select(UserState.isLoggedIn);

  
  user$ = this.store.select(UserState.user);

  navOptions: INavBarMenuLinkProps[] = [
     to: "/home", label: "Home", icon: faHome ,
     to: "/menu", label: "Menu", icon: faUtensils ,
  ];

  constructor(private store: Store) 

  loginWithRedirect(): void 
    this.store.dispatch(new User.AllNavbarActions.LoginFlowInitiated());
  

  logout(): void 
    this.store.dispatch(new User.AllNavbarActions.LogoutFlowInitiated());
  

The profile page displays some information about the user, such as name and photo. Since this is stored as part of the user Store, let’s also update this to use the user Selector. Open profile.component.ts and add the following code 👇



import  Component  from "@angular/core";


import  Store  from "@ngxs/store";


import  UserState  from "src/app/core";

@Component(
  selector: "app-profile",
  templateUrl: "./profile.component.html",
  styleUrls: ["./profile.component.scss"],
)
export class ProfileComponent 
  
  user$ = this.store.select(UserState.user);

  
  constructor(private store: Store) 

We display an Add button when the logged-in user is an admin user on the Menu Items page. You can read more about setting up admin users on Auth0 in this blog post. Open menu-items.component.ts and add the following code 👇



import  Component  from "@angular/core";
import  ActivatedRoute, Router  from "@angular/router";
import  Store  from "@ngxs/store";


import  MenusState, UserState  from "src/app/core";

@Component(
  selector: "app-menu-items",
  templateUrl: "./menu-items.component.html",
  styles: [
    `
      :host 
        width: 100%;
        height: 100%;
      
    `,
  ],
)
export class MenuItemsComponent 
  menuItems$ = this.store.select(MenusState.menuItems);

  
  isAdmin$ = this.store.select(UserState.isAdmin);

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private store: Store
  ) 

  addMenuItem(): void 
    this.router.navigate(["add"],  relativeTo: this.activatedRoute );
  

Lastly, we display the Edit and Delete buttons when the logged-in user is an admin on the Menu Item page. Open menu-item.component.ts and add the following code 👇



import  Component  from "@angular/core";
import  Location  from "@angular/common";
import  ActivatedRoute, Router  from "@angular/router";
import  map, switchMap  from "rxjs/operators";
import  Store  from "@ngxs/store";


import  MenusState, UserState  from "src/app/core";

@Component(
  selector: "app-menu-item",
  templateUrl: "./menu-item.component.html",
  styleUrls: ["./menu-item.component.scss"],
)
export class MenuItemComponent 
  menuItemId$ = this.activatedRoute.params.pipe(map((params) => params.id));

  menuItem$ = this.menuItemId$.pipe(
    switchMap((id) => this.store.select(MenusState.menuItem(id)))
  );

  
  isAdmin$ = this.store.select(UserState.isAdmin);

  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private location: Location,
    private store: Store
  ) 

  back(): void 
    this.location.back();
  

  navigateTo(url: string): void 
    this.router.navigateByUrl(`$this.router.url/$url`);
  

Create user action handlers

Like the Menus action handlers, the User state will use the Action decorator to handle user-related actions. For the User state, the action handlers will be where the app interact with Auth0’s SDK – logging in, logging out, and updating the state with Auth0’s user object.

Let’s start with the login and logout action handlers that trigger their respective flows in Auth0’s SDK. Open user.state.ts and add the following code 👇



import  Injectable  from "@angular/core";


import  State, Action, StateContext, Store, Selector  from "@ngxs/store";

import  AuthService  from "@auth0/auth0-angular";

import  environment  from "src/environments/environment";
import  UserStateModel  from "./user.model";
import  User  from "./user.actions";
import  USER_ROLES  from "../../services";

@State<UserStateModel>(
  name: "user",
  defaults: 
    userDetails: undefined,
  ,
)
@Injectable()
export class UserState 
  constructor(
    private store: Store,
    
    private authService: AuthService
  ) 

  
  @Action(User.AllNavbarActions.LoginFlowInitiated)
  login() 
    this.authService.loginWithRedirect();
  

  
  @Action(User.AllNavbarActions.LogoutFlowInitiated)
  logout() 
    this.authService.logout();
  

  @Selector()
  static user(state: UserStateModel) 
    return state.userDetails;
  

  @Selector()
  static isLoggedIn(state: UserStateModel) 
    return !!state.userDetails;
  

  @Selector()
  static userRoles(state: UserStateModel)  undefined
    );
  

  @Selector()
  static isAdmin(state: UserStateModel) 
    return state.userDetails?.[`$environment.auth.audience/roles`]?.includes(
      USER_ROLES.MENU_ADMIN
    );
  

To keep the user observable from the Auth0’s SDK and our User State in sync, create a subscription to listen to AuthService‘s user$ property and dispatch the UserChangedFromAuth0SDK whenever the observable emits a new value. UserChangedFromAuth0SDK will then update the User State with the new user data from Auth0. Open user.state.ts and add the following code 👇



import  Injectable  from "@angular/core";
import  State, Action, StateContext, Store, Selector  from "@ngxs/store";
import  AuthService  from "@auth0/auth0-angular";
import  environment  from "src/environments/environment";
import  USER_ROLES  from "../../services";
import  UserStateModel  from "./user.model";
import  User  from "./user.actions";

@State<UserStateModel>(
  name: "user",
  defaults: 
    userDetails: undefined,
  ,
)
@Injectable()
export class UserState 
  constructor(private store: Store, private authService: AuthService) 
    
    this.listenToUserChange();
  

  
  @Action(User.UserChangedFromAuth0SDK)
  userChangedFromAuth0SDK(
    ctx: StateContext<UserStateModel>,
    actions: User.UserChangedFromAuth0SDK
  ) 
    const state = ctx.getState();
    ctx.setState(
      ...state,
      userDetails: actions.payload.user,
    );
  

  @Action(User.AllNavbarActions.LoginFlowInitiated)
  login() 
    this.authService.loginWithRedirect();
  

  @Action(User.AllNavbarActions.LogoutFlowInitiated)
  logout() 
    this.authService.logout();
  

  
  private listenToUserChange(): void 
    this.authService.user$.subscribe((user) => 
      this.store.dispatch(
        new User.UserChangedFromAuth0SDK( undefined )
      );
    );
  

  @Selector()
  static user(state: UserStateModel) 
    return state.userDetails;
  

  @Selector()
  static isLoggedIn(state: UserStateModel) 
    return !!state.userDetails;
  

  @Selector()
  static userRoles(state: UserStateModel) 
    return (
      state.userDetails?.[`$environment.auth.audience/roles`] 

  @Selector()
  static isAdmin(state: UserStateModel) 
    return state.userDetails?.[`$environment.auth.audience/roles`]?.includes(
      USER_ROLES.MENU_ADMIN
    );
  

Update app module

You will then need to add UserState to the NgxsModule initialization. Open app.module.ts and add the following code.



import  BrowserModule  from "@angular/platform-browser";
import  NgModule  from "@angular/core";
import  AuthHttpInterceptor, AuthModule  from "@auth0/auth0-angular";

import  AppRoutingModule  from "./app-routing.module";
import  AppComponent  from "./app.component";
import  NavBarModule  from "./shared";
import  environment  from "src/environments/environment";
import  HttpClientModule, HTTP_INTERCEPTORS  from "@angular/common/http";
import  NgxsModule  from "@ngxs/store";
import  NgxsReduxDevtoolsPluginModule  from "@ngxs/devtools-plugin";


import  MenusState, UserState  from "./core";

@NgModule(
  imports: [
    BrowserModule,
    HttpClientModule,
    AuthModule.forRoot(
      ...environment.auth,
      cacheLocation: "localstorage",
      httpInterceptor: 
        allowedList: [
          `$environment.serverUrl/api/menu/items`,
          `$environment.serverUrl/api/menu/items/*`,
        ],
      ,
    ),
    AppRoutingModule,
    NavBarModule,
    
    NgxsModule.forRoot([MenusState, UserState],  developmentMode: true ),
    NgxsReduxDevtoolsPluginModule.forRoot(),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    
      provide: HTTP_INTERCEPTORS,
      useClass: AuthHttpInterceptor,
      multi: true,
    ,
  ],
)
export class AppModule 

Checkpoint: There aren’t any visible functional changes added in this section. The difference between the app’s current state and the previous checkpoint is its underlying implementation. The app now uses NGXS versus a BehaviorSubject to manage user-related states. The app should display the login button with an empty dashboard when the user is not authenticated and display the logout button with the logged-in user’s name along with the menu items on the dashboard when a user is authenticated. Clicking on the ‘Log in’ and ‘Log out’ buttons should trigger their respective flows using Auth0’s SDK and update your application’s state. If you open Redux Devtools in your browser, you should see the user state and actions every time you perform any user-related actions.

Conclusion

State management is a key component when building applications. You added two Stores to our demo application to manage two distinct states – menus and users. This is a relatively small demo application with a few Stores, Actions, and Selectors to show how you can use NGXS to manage your Application’s state and use NGXS with Auth0’s SDK to handle user-related functionalities.



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Article

Heatwave in Delhi: Are ACs adding fuel to fire?

Next Article

What's New for 2023: Audi

Related Posts