Software systems to innovate and grow

Authentication in Angular with NgRx Part 2

By Engineering Team October 2, 2018 10 mins read

In the previous article, you were introduced to functional programming and NgRx, the reactive and highly performant Redux state management for Angular apps.

We defined three main building blocks of NgRx: the app state, the actions and the reducers. A project was previously started, creating an instance of each app state for an authentication example. In this article I will add the remaining components to the project as well as an explanation for each one of them. Let’s start by adding an element of NgRx, the effects.

NgRx Effects

NGRX Effects is in charge of listening for the actions dispatched from the NgRx Store, performing some logic in the middle (e.g. a side effect), and finally dispatching a new action.

Authentication in Angular with NRGX Part 1

Effects remove responsibilities from components as external interactions such as network requests, websocket messages and time-based events. By isolating this side effect from the components you achieve more pure components. The components then select a state and dispatch actions.

Adding effects to the project:

Defining The Effects

Since the login call is async, the successes and errors are handled by adding an effect. This way the effect organizes actions. In addition, adding a logout helps by removing the active session data from local storage, making a logout easier. Next, add the file inside the effects folder.

  • app/
    • store/
      • actions/
      •      authentication.actions.ts
      • effects/
      •      authentication.effects.ts
      • reducers/
      •      authentication.reducer.ts
      • app.state.ts

    Adding The Components

    The application will have two pages, the login and the home page. A login is added to allow the user to login. And the home page is set up so that it is only available to logged users. Both components consume the app state and dispatch the corresponding, previously created actions.mThe component files are added inside a newly created components folder.

    • app/
      • app.module.ts
      • app.component.ts
      • components/
        • home/
        • login/

    Login

    Now add the login form to the template.

    login.component.html

    It looks like this:

    Authentication in Angular with NRGX Part 1

    Home

    This page indicates the email of the user logged in and adds a button to log out.

    home.component.html

    Here’s what it looks like:

    Authentication in Angular with NRGX Part 1

    Adding The Guard Service for Protected Routes

    Since we are going to have a protected route, which is only accessible for users who are logged in, a router guard is created. Basically, it checks if the user is logged in or not by implementing the canActivate method. The file is added inside the services folder.

    • app/
      • services/
      • authentication.services.ts
      • authentication-guard.service.ts

    Defining The Routes of The Application

    Here you have the configuration of the basic routes of the application. The file is added inside the app folder.

    • app/
      • app.module.ts
      • app.component.ts
      • app.routes.ts

    Wrapping Everything Together

    To have the application working you need to add all the dependencies to the app.module.

    Add the router outlet in the app.component.html file.

    Conclusion

    Angular’s applications can benefit the use of functional programming and the Redux library NgRx. By delegating the state management to the NgRx Store and adding the side effects to NgRx Effects, you can achieve pure components and gain big performance improvements.

    NgRx offers more control of the restrictions by allowing you to regulate the ways the application state can be changed. As a result, debugging the application becomes easier and friendlier because you have more control over the changes, and can keep track of how they happened. The centralized store offers a great place to add a breakpoint because it must be called to change the app state.

    Together, the two parts of this article have shown an example of a real world scenario where the state management comes in handy when attempting to store the user tokens. It has also shown how to deal with the required methods such as logins, logouts and handling active users from the application. By using the Angular NgRx extension, a developer can prevent bugs and has more control over the application state.