matt-raible

Matt Raible is a well-known figure in the Java community and has been building web applications for most of his adult life. For over 20 years, he has helped developers learn and adopt open source frameworks and use them effectively. He's a web developer, Java Champion, and Developer Advocate at Okta. Matt is a frequent contributor to open source and a big fan of Java, IntelliJ, TypeScript, Angular, and Spring Boot. 

Developer Advocate

Matt Raible

Learn how to build a secure CRUD app with Spring Boot and Angular. You'll use Auth0 for authentication and authorization and Cypress to verify it all works.

Build a Beautiful CRUD App with Spring Boot and Angular

37590801?s=460&v=4

A software engineer who dreams about non-electric sheep and autonomous vehicles and likes to champion security.

Software Engineer

Dan Arias

Learn how to add user authentication to Angular using Observables and HTTP Interceptors.

The Complete Guide to Angular User Authentication with Auth0

Build an Ionic + Angular frontend for your Spring Boot backend, all using the power of JHipster! Secured by OpenID Connect.

Build Secure Ionic Apps with Angular and JHipster

William Juan

I am a Frontend Developer working primarily in the web and hybrid mobile spaces. The majority of my work has revolved around the Angular ecosystem, including working with other Angular-related frameworks such as NativeScript and Ionic. My passion lies in converting a design into code and achieving a close to pixel-perfect end-product.

Frontend Developer

See how it's easy to manage your Angular application's state using NGXS and learn how you can use NGXS with Auth0's SDK to handle user-related functionalities.

State Management in Angular Using NGXS

**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.

<hr/>

## 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 👇

```typescript
// src/app/core/state/user/user.model.ts

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

export interface UserStateModel {
  userDetails: Auth0User | undefined;
}
```

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

```typescript
// src/app/core/state/user/index.ts

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 👇

```typescript
// src/app/core/state/index.ts

export * from "./menus";

// ✨ New 👇
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 👇

```typescript
// src/app/core/state/user/user.actions.ts

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: { user: Auth0User | undefined }) {}
  }
}
```

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

```typescript
// src/app/core/state/user/index.ts

export * from "./user.model";

// ✨ New 👇
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 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

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";

// ✨ New 👇
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,
    // ✨ New 👇
    private store: Store
  ) {}

  loginWithRedirect(): void {
    // ✨ New 👇
    this.store.dispatch(new User.AllNavbarActions.LoginFlowInitiated());
  }

  logout(): void {
    // ✨ New 👇
    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 👇

```typescript
// src/app/core/state/user/user.state.ts

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 👇

```typescript
// src/app/core/state/user/user.state.ts

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

// ✨ New 👇
import { State, Selector } from "@ngxs/store";

// ✨ New 👇
import { environment } from "src/environments/environment";

// ✨ New 👇
import { USER_ROLES } from "../../services";

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

  // ✨ New 👇
  @Selector()
  static isLoggedIn(state: UserStateModel) {
    return !!state.userDetails;
  }

  // ✨ New 👇
  @Selector()
  static userRoles(state: UserStateModel) {
    return (
      state.userDetails?.[`${environment.auth.audience}/roles`] || undefined
    );
  }

  // ✨ New 👇
  @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` 👇

```typescript
// src/app/core/state/user/index.ts

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

// ✨ New 👇
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👇

```typescript
// src/app/core/guards/user-role.guard.ts

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

// ✨ New 👇
import { Store } from "@ngxs/store";
import { UserState } from "..";

@Injectable({ providedIn: "root" })
export class UserRoleGuard implements CanActivate {
  constructor(
    private router: Router,
    // ✨ New 👇
    private store: Store
  ) {}

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

        // redirect the user to home
        this.router.navigate(["/home"]);
        return false;
      }),
      catchError((err) => {
        // redirect the user to home
        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 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

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";

// ✨ New 👇
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;

  // ✨ New 👇
  isAuthenticated$ = this.store.select(UserState.isLoggedIn);

  // ✨ New 👇
  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 👇

```typescript
// src/app/features/profile/profile.component.ts

import { Component } from "@angular/core";

// ✨ New 👇
import { Store } from "@ngxs/store";

// ✨ New 👇
import { UserState } from "src/app/core";

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

  // ✨ New 👇
  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](https://auth0.com/blog/developing-a-secure-api-with-nestjs-adding-role-based-access-control/#Get-User-Roles). Open `menu-items.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-items/menu-items.component.ts

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

// ✨ New 👇
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);

  // ✨ New 👇
  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 👇

```typescript
// src/app/features/menu/menu-item/menu-item.component.ts

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";

// ✨ New 👇
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)))
  );

  // ✨ New 👇
  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 👇

```typescript
// src/app/core/state/user/user.state.ts

import { Injectable } from "@angular/core";

// ✨ New 👇
import { State, Action, StateContext, Store, Selector } from "@ngxs/store";
// ✨ New 👇
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,
    // ✨ New 👇
    private authService: AuthService
  ) {}

  // ✨ New 👇
  @Action(User.AllNavbarActions.LoginFlowInitiated)
  login() {
    this.authService.loginWithRedirect();
  }

  // ✨ New 👇
  @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) {
    return (
      state.userDetails?.[`${environment.auth.audience}/roles`] || 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 👇

```typescript
// src/app/core/state/user/user.state.ts

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) {
    // ✨ New 👇
    this.listenToUserChange();
  }

  // ✨ New 👇
  @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();
  }

  // ✨ New 👇
  private listenToUserChange(): void {
    this.authService.user$.subscribe((user) => {
      this.store.dispatch(
        new User.UserChangedFromAuth0SDK({ user: user || 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`] || undefined
    );
  }

  @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.

```typescript
// src/app/app.module.ts

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";

// ✨ Update this 👇
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,
    // ✨ Update this 👇
    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.

Add Authentication to Angular With NGXS For State Management

See how it's easy to manage your Angular application's state using Akita and learn how you can use Akita with Auth0's SDK to handle user-related functionalities.

**TL;DR:** In the first part of the state management in Angular with Akita series, we learned about the basics of Akita, 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 Akita to manage use-related states.

<hr/>

## 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 focus more on the Auth0 and Akita integration.

The starter app is using the Auth0 SDK directly and managing the roles through the `RolesService`, this section of the tutorial will walk you through migrating to using Auth0's SDK through Akita and managing the roles by using Queries.

## Create User Store

Let's start with defining the interface for the user state object and its initial state. Open `user.store.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.store.ts

import { Injectable } from "@angular/core";
import { Store, StoreConfig } from "@datorama/akita";
import { User as Auth0User } from "@auth0/auth0-spa-js";

export interface UserState {
  user: Auth0User | undefined;
}

export function createInitialState(): UserState {
  return {
    user: undefined,
  };
}
@StoreConfig({ name: "user" })
@Injectable({ providedIn: "root" })
export class UserStore extends Store<UserState> {
  constructor() {
    super(createInitialState());
  }
}
```

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

```typescript
// src/app/core/state/user/index.ts

export * from "./user.store";
```

## 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 👇

```typescript
// src/app/core/state/user/user.actions.ts

import { createAction, props } from "@datorama/akita-ng-effects";
import { User as Auth0User } from "@auth0/auth0-spa-js";

export const allNavbarActions = {
  loginFlowInitiated: createAction("[Navbar] Login Flow Initiated"),
  logoutFlowInitiated: createAction("[Navbar] Logout Flow Initiated"),
};

export const userChangedFromAuth0SDK = createAction(
  "[Auth0 SDK] User Changed",
  props<{ user: Auth0User | undefined }>()
);
```

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

```typescript
// src/app/core/state/user/index.ts

export * from "./user.store";

// ✨ New 👇
export * from "./user.actions";
```

### Update application to use user actions

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

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

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";

// ✨ New 👇
import { Actions } from "@datorama/akita-ng-effects";

// ✨ New 👇
import { allNavbarActions } from "src/app/core/state/user";

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,
    // ✨ New 👇
    private actions: Actions
  ) {}

  loginWithRedirect(): void {
    // ✨ New 👇
    this.actions.dispatch(allNavbarActions.loginFlowInitiated());
  }

  logout(): void {
    // ✨ New 👇
    this.actions.dispatch(allNavbarActions.logoutFlowInitiated());
  }
}
```

## Create User Query

Before creating individual queries for slices of the user state, let's start by creating the boilerplate required to use this feature. Akita uses an `Injectable` class that extends Akita's `Query` class. Create `user.query.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.query.ts

import { Injectable } from "@angular/core";
import { Query } from "@datorama/akita";
import { UserState } from "./user.store";

@Injectable({ providedIn: "root" })
export class UserQuery extends Query<UserState> {
  selectUser$ = this.select("user");
}
```

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

```typescript
// src/app/core/state/user/user.query.ts

import { Injectable } from "@angular/core";
import { Query } from "@datorama/akita";

// ✨ New 👇
import { map } from "rxjs/operators";

// ✨ New 👇
import { environment } from "src/environments/environment";

// ✨ New 👇
import { UserStore, UserState } from "./user.store";

// ✨ New 👇
export const USER_ROLES = {
  MENU_ADMIN: "menu-admin",
};
@Injectable({ providedIn: "root" })
export class UserQuery extends Query<UserState> {
  selectUser$ = this.select("user");

  // ✨ New 👇
  selectIsLoggedIn$ = this.selectUser$.pipe(map((user) => !!user));

  // ✨ New 👇
  selectUserRoles$ = this.selectUser$.pipe(
    map((user) => user?.[`${environment.auth.audience}/roles`] || undefined)
  );

  // ✨ New 👇
  selectIsAdmin$ = this.selectUserRoles$.pipe(
    map((userRoles) => userRoles?.includes(USER_ROLES.MENU_ADMIN))
  );

  constructor(protected store: UserStore) {
    super(store);
  }
}
```

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

```typescript
// src/app/core/state/user/index.ts

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

// ✨ New 👇
export * from "./user.query";
```

### Update application to use user queries

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

```typescript
// src/app/core/guards/user-role.guard.ts

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

// ✨ New 👇
import { UserQuery } from "../state/user";

@Injectable({ providedIn: "root" })
export class UserRoleGuard implements CanActivate {
  constructor(
    private router: Router,
    // ✨ New 👇
    private userQuery: UserQuery
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    // ✨ Update this 👇
    return this.userQuery.selectUserRoles$.pipe(
      map((roles) => {
        if (roles && roles.includes(route?.data?.role)) {
          return true;
        }

        // redirect the user to home
        this.router.navigate(["/home"]);
        return false;
      }),
      catchError((err) => {
        // redirect the user to home
        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 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

import { Component } from "@angular/core";
import { Actions } from "@datorama/akita-ng-effects";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faHome, faUser, faUtensils } from "@fortawesome/free-solid-svg-icons";

// ✨ New 👇
import { allNavbarActions, UserQuery } from "src/app/core/state/user";

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;

  // ✨ New 👇
  isAuthenticated$ = this.userQuery.selectIsLoggedIn$;

  // ✨ New 👇
  user$ = this.userQuery.selectUser$;

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

  // ✨ New 👇
  constructor(private userQuery: UserQuery, private actions: Actions) {}

  loginWithRedirect(): void {
    this.actions.dispatch(allNavbarActions.loginFlowInitiated());
  }

  logout(): void {
    this.actions.dispatch(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 `selectUser$` Query. Open `profile.component.ts` and add the following code 👇

```typescript
// src/app/features/profile/profile.component.ts

import { Component } from "@angular/core";

// ✨ New 👇
import { UserQuery } from "src/app/core/state/user";

@Component({
  selector: "app-profile",
  templateUrl: "./profile.component.html",
  styleUrls: ["./profile.component.scss"],
})
export class ProfileComponent {
  // ✨ New 👇
  user$ = this.userQuery.selectUser$;

  // ✨ New 👇
  constructor(private userQuery: UserQuery) {}
}
```

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](https://auth0.com/blog/developing-a-secure-api-with-nestjs-adding-role-based-access-control/#Get-User-Roles). Open `menu-items.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-items/menu-items.component.ts

import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { MenusQuery } from "src/app/core/state/menus";

// ✨ New 👇
import { UserQuery } from "src/app/core/state/user";

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

  // ✨ New 👇
  isAdmin$ = this.userQuery.selectIsAdmin$;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    // ✨ New 👇
    private userQuery: UserQuery,
    private menuQuery: MenusQuery
  ) {}

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

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

```typescript
// src/app/features/menu/menu-item/menu-item.component.ts

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { ActivatedRoute, Router } from "@angular/router";
import { map, switchMap } from "rxjs/operators";
import { MenusQuery } from "src/app/core/state/menus";

// ✨ New 👇
import { UserQuery } from "src/app/core/state/user";

@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.menusQuery.selectMenuItem(id))
  );

  // ✨ New 👇
  isAdmin$ = this.userQuery.selectIsAdmin$;

  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private location: Location,
    // ✨ New 👇
    private userQuery: UserQuery,
    private menusQuery: MenusQuery
  ) {}

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

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

## Create User Effects

As explained at the beginning of part 1 of the "State Management with Akita" series, Effects are where side effects of the Action are handled. For the user store, this will be where the app will interact with Auth0's SDK, updating the store when the user object changes and logging in and logging out the user. Let's start with creating an empty class with the `Injectable` decorator. Create `user.effects.ts` in the `core/state/user/` directory and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";

@Injectable()
export class UserEffects {}
```

Next, let's add login and logout action handlers that trigger their respective flows in Auth0's SDK. Open `user.effects.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";

// ✨ New 👇
import { map, tap } from "rxjs/operators";
import { AuthService } from "@auth0/auth0-angular";
import { Actions, createEffect, ofType } from "@datorama/akita-ng-effects";
import * as UserActions from "./user.actions";
import { UserStore } from "./user.store";

@Injectable()
export class UserEffects {
  // ✨ New 👇
  constructor(
    private actions$: Actions,
    private userStore: UserStore,
    private authService: AuthService
  ) {}

  // ✨ New 👇
  login$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.loginFlowInitiated),
        tap(() => this.authService.loginWithRedirect())
      ),
    { dispatch: false }
  );

  // ✨ New 👇
  logout$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.logoutFlowInitiated),
        tap(() => this.authService.logout())
      ),
    { dispatch: false }
  );
}
```

To keep the user observable from the Auth0's SDK and our user Store in sync, you can use an actionless effect that listens to an external observable (in our case `authService.user$`) and dispatches another action (`UserActions.userChangedFromAuth0SDK`) whenever that observable emits a new value. `UserActions.userChangedFromAuth0SDK` will then update the user store with new user data from Auth0. Open `user.effects.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";
import { map, tap } from "rxjs/operators";
import { Actions, createEffect, ofType } from "@datorama/akita-ng-effects";
import * as UserActions from "./user.actions";
import { UserStore } from "./user.store";
import { AuthService } from "@auth0/auth0-angular";

@Injectable()
export class UserEffects {
  constructor(
    private actions$: Actions,
    private userStore: UserStore,
    private authService: AuthService
  ) {}

  // ✨ New 👇
  userChanged$ = createEffect(
    () =>
      this.authService.user$.pipe(
        map((user) =>
          UserActions.userChangedFromAuth0SDK({ user: user || undefined })
        )
      ),
    { dispatch: true }
  );

  // ✨ New 👇
  userChangedFromAuth0SDK$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.userChangedFromAuth0SDK),
        tap((action) => {
          this.userStore.update((state) => ({
            ...state,
            user: action.user,
          }));
        })
      ),
    { dispatch: false }
  );

  login$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.loginFlowInitiated),
        tap(() => this.authService.loginWithRedirect())
      ),
    { dispatch: false }
  );

  logout$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.logoutFlowInitiated),
        tap(() => this.authService.logout())
      ),
    { dispatch: false }
  );
}
```

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

```typescript
// src/app/core/state/user/index.ts

export * from "./user.store";
export * from "./user.actions";
export * from "./user.query";

// ✨ New 👇
export * from "./user.effects";
```

### Update Effects Module

You will then need to add `UserEffects` to the `EffectsModule` initialization. Open `app.module.ts` and add the following code

```typescript
// src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { AkitaNgEffectsModule } from "@datorama/akita-ng-effects";
import { AkitaNgDevtools } from "@datorama/akita-ngdevtools";
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 { MenusEffects } from "./core/state/menus";

// ✨ New 👇
import { UserEffects } from "./core/state/user";

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AuthModule.forRoot({
      ...environment.auth,
      httpInterceptor: {
        allowedList: [
          `${environment.serverUrl}/api/menu/items`,
          `${environment.serverUrl}/api/menu/items/*`,
        ],
      },
    }),
    AppRoutingModule,
    NavBarModule,

    // ✨ Update this 👇
    AkitaNgEffectsModule.forRoot([MenusEffects, UserEffects]),
    environment.production
      ? []
      : AkitaNgDevtools.forRoot({
          maxAge: 25,
        }),
  ],
  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 Akita 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 user. This is a relatively small demo application with a few Stores, Actions, Queries, and Effects to show how you can use Akita to manage your Application's state, and use Akita with Auth0's SDK to handle user-related functionalities.

State Management in Angular Using Akita - Pt. 2

State Management in Angular Using Akita - Pt. 1

manfred

Under the leadership of Manfred Steyer, ANGULARarchitects.io supports companies with the implementation of web-based business applications with Angular. <br>
 
At the Angular seminars he designs, he combined his profound knowledge of Angular, for which he was recognized by Google as a Google Development Expert (GDE), with his experience, which he worked as a team leader in the field of software development, as a Professor at a university of applied sciences and as an external member of the Angular team. <br>
 
Manfred has published books at O'Reilly, Microsoft Press, and Hanser and writes for Heise Online, windows.developer, and the Java magazine. He also regularly shares his knowledge at conferences.

Trainer and Consultant with focus on Angular

Manfred Steyer

Module Federation allows loading Micro Frontends at runtime. Common dependencies like Angular or the Auth0 library can be shared and hence don't need to be loaded several times. This is also the key for sharing data like the current user or global filters.

**TL;DR:** Module Federation allows loading Micro Frontends at runtime. Common dependencies like Angular or the Auth0 library can be shared and hence don't need to be loaded several times. This is also the key for sharing data like the current user or global filters.

## Micro Frontends

Recently, there have been a lot of discussions about Micro Frontends. The underlying idea is quite tempting: Splitting a huge software system into smaller parts and assigning each part to an individual team:

![Each micro frontend can be developed by an autarkic team](https://images.ctfassets.net/23aumh6u8s0i/38DpehwkPwiMTNBOvOQowG/ce345e71277e19f211f23add38a0ae4e/microfrontends.png)

As these teams are -- more or less -- autonomous, they can work in a more flexible way and don't need to coordinate that much with others. This shows that Micro Frontends are mostly about scaling teams. Hence, if you don't have several frontend teams, Micro Frontends might be overkill. 

## Module Federation

Splitting software systems into several parts is, however, only one side of the coin. Even though we developers might like this idea, the users don't! They aren't interested in starting several frontends but expect an integrated solution. 

Accordingly, we need to find a way to make all our micro frontends appear as one (single page) application. Very often, this involves loading micro frontends into a shell application.

For instance, the example used here mimics a simple shopping system. One of its micro frontends deals with shipping:

![Example micro frontend dealing with shipping products](https://images.ctfassets.net/23aumh6u8s0i/3Zs0it0naO2U4W1GwBMpNn/caa76eb2a246ab2dfa5d5394c6ed89c5/example-shipping.png)

For the purpose of integration, this micro frontend needs to be loaded into a shell:

![Example of a shell loading the shipping micro frontend](https://images.ctfassets.net/23aumh6u8s0i/iJOA5Lg4AHYGHBt0SK06U/8bdb25c11b8ac571f259f57217ff72eb/example-shipping-in-shell.png)

The shell loads this but also other micro frontends on demand.

For such an implementation, you needed a lot of tricks in the past. Fortunately, Module Federation makes this task straightforward. 

Module Federation is an integrated part of webpack 5, and hence, it works with all modern web frameworks. Also, as webpack is highly used in nearly all communities, Module Federation immediately becomes a widespread solution.

In order to allow loading separately compiled and deployed micro frontends, Module Federation defines two roles: the host and the remote:

![Schematic representation of Module Federation](https://images.ctfassets.net/23aumh6u8s0i/6RTBbIScEwfnZm97MMe7nJ/2138d86c99a988b286f9852d020097a4/module-federation.png)

In our case, the host is the shell, while the remote is the micro frontend. Both can be configured with their webpack configurations. 

The host defines virtual URLs pointing to remotes. In the previous picture, for instance, the URL ``mfe1`` pointing to a micro frontend, also called ``mfe1``, is defined.

The remote, in turn, exposes files -- or, to be more precise: EcmaScript modules -- for the host. To prevent that, the latter one needs to know the remote's file structure; exposed files can get a shorter alias. The example in the last picture goes with the alias ``Cmp``. 

Exposed EcmaScript modules can easily be loaded into the host by using a dynamic ``import`` together with the mapped URLs and defined aliases. The best: From Angular's perspective, this is just like lazy loading. 

As Angular doesn't even recognize that the application loads a micro frontend, we can use it exactly as it was intended to be used. We don't need any tricks or meta frameworks orchestrating different SPAs in our browser window. This eases our endeavor dramatically.

## Module Federation in Angular

Since version 12, the Angular CLI uses webpack 5. Hence, we also get Module Federation out of the box. To activate it, we need a custom builder that, e. g. ships with the community solution ``@angular-architects/module-federation``. As it comes with respective schematics, you can easily ``ng add`` it to your CLI workspace:

```bash
ng add @angular-architects/module-federation
```

![Adding @angular-architects/module-federation to your project](https://images.ctfassets.net/23aumh6u8s0i/3eoqQDVCE5OK0QfzoYmXt8/378fda04d26bd28ffc798754f3150819/ng-add.png)

The well-known CLI extension [Nx](https://nx.dev/) is supported too. The schematic asks about the name of the project in your workspace you want to enable module federation for. Also, it asks which port to assign for ``ng serve``.

After that, it generates several files, e. g. a partial webpack configuration we need to adjust for our needs. Also, it registers the custom builder in our ``angular.json``.

For the example used here, I ran this command twice: Once for the shell and once for the above-shown shipping micro frontend. The latter one is just called ``mfe1`` here.

## Configuring the Micro Frontends

Now, we need to adjust the webpack configurations generated for the shell and the micro frontend. As the Angular CLI is generating most parts of the webpack configuration, we just need to define the remaining details for the module federation. First and foremost, this is about configuring the ``ModuleFederationPlugin`` that ships with webpack.

Let's start with the configuration for the micro frontend:

```javascript
// projects/mfe1/webpack.config.js

[...]
plugins: [

  new ModuleFederationPlugin({
    
      // For remotes (please adjust)
      name: "mfe1",
      filename: "remoteEntry.js",
      exposes: {
          './AddressModule': './projects/mfe1/src/app/address/address.module.ts',
      },        
      
      shared: share({
        "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/material": { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true },

        ...sharedMappings.getDescriptors()
      })
          
  }),
],
[...]
```

The property ``name`` is normally the project name and should be unique across all micro frontends. The ``filename`` points to a file webpack generates when building the project. It's often referred to as the remote entry point. This JavaScript file provides all the metadata the shell needs to know for loading the micro frontend.

While normally you can go with the generated values for ``name`` and ``filename``, you very likely need to adjust the ``exposes`` section. As discussed above, it contains the aliases for the files to expose.

With ``shared``, you define all the npm packages you want to share across the shell and the micro frontends. These packages are only loaded once at runtime. This is vital because having ten micro frontends doesn't mean you want to load Angular or other packages ten times!

Of course, when sharing packages at runtime, we might end up with version conflicts. Fortunately, Module Federation also got us covered here: It provides several strategies for dealing with version mismatches. 

In our case, the combination of ``singleton: true`` and ``strictVersion: true`` is used. Hence, only one version of the shared packages is allowed, and if Module Federation detects several versions at runtime, it throws an Error. While this seems to be quite harsh at first sight, it allows our integration tests to immediately find out about version mismatches.

More details on [strategies for preventing version mismatches](https://www.angulararchitects.io/en/aktuelles/getting-out-of-version-mismatch-hell-with-module-federation/) can be found [here](https://www.angulararchitects.io/en/aktuelles/getting-out-of-version-mismatch-hell-with-module-federation/).

Besides ``singleton`` and ``strictVersions``, there are two further properties used: ``requiredVersion`` and ``includeSecondaries``. If we set the first one to ``auto``, ``@angular-architects/module-federation`` assumes the version found in your project's ``package.json``. This avoids several [pitfalls](https://www.angulararchitects.io/aktuelles/pitfalls-with-module-federation-and-angular/). 

The option ``includeSecondaries`` is provided by ``@angular-architects/module-federation`` too. It automatically adds all secondary entry points to the list of shared libraries. In the case of libraries like Angular Material, this saves you a lot of typing as they provide one such entry point per component, e. g. ``@angular/material/input`` or ``@angular/material/button``.

Now, let's have a look at the exposed ``AddressModule``: 

```typescript
// projects/mfe1/src/app/address/address.module.ts

[...]

@NgModule({
  imports: [
    [...]
    RouterModule.forChild([{
      path: 'address', 
      component: AddressComponent
    }])  
  ],
  declarations: [
    AddressComponent
  ],
})
export class AddressModule { }
```

As you see, it's just an ordinary Angular module. However, as it has child routes, we can immediately route to them after loading the whole module into the shell. 

## Configuring the Shell

The shell's ``webpack.config.js`` is a bit simpler. Here, we only need to define the shared libraries:

```javascript
// projects/shell/webpack.config.js

[...]
plugins: [
  new ModuleFederationPlugin({

      shared: share({
        "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/material": { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true }

        ...sharedMappings.getDescriptors()
      })
      
  }),
],
[...]
```

In addition, we also could map URLs here, as outlined above. This would look like this:

```typescript
// Alternative that maps URLs upfront
new ModuleFederationPlugin({
  remotes: {
    "mfe1": "mfe1@http://localhost:3000/remoteEntry.js"
  },
  [...]
})
```

The key is the mapped URL, and the value defines the name of the micro frontend as defined in its ``webpack.config.js``. Here, the value also contains the location of the micro frontend's remote entry point. To load ``mfe1``'s exposed Module, we could use a dynamic ``import``:

```typescript
// Using mapped URL:
import('mfe1/AddressModule')
```

As the TypeScript compiler doesn't know the file ``mfe1/Module``, we also needed a type definition. For this, we could create an arbitrary with the ending ``.d.ts``:

```typescript
declare module "mfe1/AddressModule";
```

However, while mapping URLs this way is simple, it also requires us to know about the micro frontends and their locations upfront. Hence, I'm using a more dynamic approach that does not demand us to define URLs for compile time. 

Instead, we can tell Module Federation about possible Micro Frontends at runtime. To make use of it, I use the helper function ``loadRemoteModule`` provided by ``@angular-architects/module-federation`` together with lazy routes:

```typescript
// projects/shell/src/app/app.module.ts

[...]
RouterModule.forRoot([
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'mfe1',
    loadChildren: () => loadRemoteModule({
      remoteEntry: 'http://localhost:3000/remoteEntry.js',
      remoteName: 'mfe1',
      exposedModule: './AddressModule',
    }).then(m => m.AddressModule)
  }
])
[...]
```

The ``loadRemoteModule`` function takes the location of the remote entry point, the remote's name, and the alias of the exposed EcmaScript module. All these values are defined in the micro frontend's webpack configuration. 

As these properties are just strings, we could even retrieve their values from a configuration file or from a service endpoint.

## Trying It Out

After starting both projects, e. g. with ``ng serve shell, `` and ``ng serve mfe1``, we can use the lazy route shown above to load the micro frontend into the shell. It's also interesting to inspect the loaded files in your browser's dev tools:

![The browser loads the shared libraries](https://images.ctfassets.net/23aumh6u8s0i/5YzAFolOzvMYTspPsgZ5Wb/73d1fb9772e1128fca2eca404a1aa0ce/share.png)

At first sight, it really looks like lazy loading. However, when looking more closely, we see that the lazy chunks come from the micro frontend's origin. Also, for all the shared libraries, a bundle of its own is loaded. This is necessary because the module federation decides at runtime when to load which shared package. 

## Authentication for Micro Frontends

Sometimes we need to share some information between micro frontends and the shell, e. g. context information like the current user or global filters like the selected customer. The example used here allows logging in the user via the shell:

![Logging in the current user](https://images.ctfassets.net/23aumh6u8s0i/2XumqnUE2Cp56cB0nWJt2w/37480acbfca69c8036e36d38b94fbcd2/logged-in.png)

However, when loading the micro frontend on demand, it also knows about the current user:

![Sharing information about the logged in user](https://images.ctfassets.net/23aumh6u8s0i/2BdJ84YhuAxliC349B9A2Q/6294f33fd3d8b940789da984d41efe8c/logged-in-shipping.png)

To achieve this, we just need to share a package that holds the information to share. In our case, this is ``@auth0/auth0-angular`` as we are using Auth0 as our identity provider. It's available via npm:

```bash
npm i @auth0/auth0-angular
```

To make this work, I've configured a web application at https://manage.auth0.com/. If you want to try this out, don't forget to register your SPA's URL, e. g. http://localhost:4200, under _Allowed Callback URLs_. Besides this, I went with the default values proposed by the web portal.

To get started, we need to import the ``AuthModule`` provided by ``@auth0/auth0-angular`` into the ``shell``'s but also into ``mfe1``'s ``AppModule``:

```typescript
// projects/shell/src/app/app.module.ts
//  and
// projects/mfe1/src/app/app.module.ts

[...]

import { AuthModule } from '@auth0/auth0-angular';

[...]

@NgModule({
  imports: [
    AuthModule.forRoot({
      domain: 'dev-ha-6vf7s.us.auth0.com',
      clientId: 'pQXuZGn3bfOfHpFd9ch7Wfa4xP4KhKlS'
    }),
    [...]
  ],
  [...]
})
export class AppModule { }
```

The values for ``domain`` and ``clientId`` can be found at https://manage.auth0.com after registering your application.

After that, we can use the ``AuthService`` in the shell to login the current user:

```typescript
// projects/shell/src/app/home/home.component.ts

import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {

  user$ = this.auth.user$;

  constructor(private auth: AuthService) {}

  login(): void {
    this.auth.loginWithRedirect();
  }

}
```

I also decided to display the user's name after they logged in:  

```html


<h1>Welcome!</h1>

<p *ngIf="user$ | async as user">
    User: {{user.name}}
</p>

<div>
    <button (click)="login()" mat-flat-button color="primary">Login</button>
</div>
```

In the micro frontend's ``AddressComponent``, I'm also using the ``AuthService`` to get some information about the current user:

```typescript
// projects/mfe1/src/app/address/address.component.ts

[...]

import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.scss']
})
export class AddressComponent {

  [...]

  constructor(
    private auth: AuthService,
    private fb: FormBuilder) {

    this.auth.user$.pipe(take(1)).subscribe(user => {
      if (!user) return;
      this.addressForm.controls['firstName'].setValue(user.given_name);
      this.addressForm.controls['lastName'].setValue(user.family_name);

    });

  }

  [...]
}
```

In order to make this work, we need to share the ``@auth0/auth0-angular`` package:

```javascript
// projects/shell/webpack.config.js
//  AND
// projects/mfe1/webpack.config.js

[...]
shared: share({
  [...]
  
  // Add this:
  "@auth0/auth0-angular": { singleton: true, strictVersion: true, requiredVersion: 'auto' },

  ...sharedMappings.getDescriptors()
})
[...]
```

This ensures there is only one ``AuthService`` at runtime we can use to share information about the current user. 

After changing the webpack configuration, we need to restart our applications. If everything works well, we can log in the user via the shell and read the user's name in the lazy loaded micro frontend.

## Summary

Module Federation allows loading separately compiled applications at runtime. Also, we can share common dependencies. This also allows sharing common data like information on the current user or global filters.

As Module Federation allows runtime integration, it is also the key for plugin systems and micro frontend architectures. However, this approach turns to compile-time dependencies into runtime dependencies; we need a sound set of integration tests to detect issues. 

In general, Micro Frontends only makes sense if you want to scale a project by splitting it into several smaller applications developed by different autarkic teams. If you only have one frontend team, Micro Frontend architectures are very likely an overhead.

Micro Frontends with Angular, Module Federation, and Auth0

This tutorial shows you how to add authentication to your Angular App with Auth0

AngularJS 1.0 was released in October 2010. At the time, it was considered one of the most revolutionary and popular web frameworks ever to see the light of day. Developers loved it, and created many apps with it. However, as a pioneer in the JS framework space, AngularJS had some growing pains and significant issues. The team went back to the drawing board for a major breaking release with Angular 2. It took two years to develop and influenced many devs to hop onto other frameworks in the meantime.

Today, five years after Angular 2 was released, we just call it “Angular” and its version numbers have far less meaning. Five years is a long time for a modern JS web framework to live and thrive. If you look at the number of Stack Overflow questions, you’ll see that users struggle with React far more than Angular.

![hotframeworks.com](https://images.ctfassets.net/23aumh6u8s0i/59q6jcF1y3liZ2s5dHjFZ1/ff4258bdeac2cad19506a693b21c7e46/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

I kid, I kid. 😅

I don’t think Stack Overflow tags indicate that developers have a hard time with the framework; I think they indicate a thriving community. The more people use technology, the more they submit questions for it.

[hotframeworks.com](https://hotframeworks.com/) lists a score that combines GitHub stars with Stack Overflow tags and says the top six web frameworks are as follows (at the time of this writing):

1. React
2. ASP.NET MVC
3. Angular
4. Ruby on Rails
5. AngularJS
6. Vue.js

Angular is still very popular among developers. If you’re developing an Angular app today, you probably need a way to authenticate your users. That’s where OpenID Connect (OIDC) can help you. OIDC is a layer on top of OAuth 2.0 that provides identity.

In this tutorial, I'll show you how to add OIDC authentication with Auth0 to a new Angular app in just a few steps.

### Prerequisites:

* A favorite text editor or IDE. I recommend [IntelliJ IDEA](https://www.jetbrains.com/idea/), but I know many JavaScript developers prefer [Visual Studio Code](https://code.visualstudio.com/).
* [Node.js](http://nodejs.org/) v14+ and npm installed.

If you would rather follow along by watching a video, check out the screencast below from [the OktaDev YouTube channel](https://youtu.be/YiR7XFgsD8w).

<AmpContent>
<amp-youtube
    data-videoid="YiR7XFgsD8w"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>

<NonAmpContent>
<div class='embed-container' style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src='https://www.youtube.com/embed/YiR7XFgsD8w' frameborder='0' allowfullscreen></iframe></div>
</NonAmpContent>

## Create an Angular App

First, you’ll need to create a new Angular app with routing enabled. Install the Angular CLI globally, then create an app.

```shell
npm i -g @angular/cli@13
ng new auth0-demo --routing
```

You’ll be prompted to select your favorite stylesheet format. The selection you make doesn’t matter for this example since we’re focused on functionality rather than updating visuals.

## Add Authentication with OpenID Connect

To add authentication with Auth0, you’ll first need a [free Auth0 account](https://a0.to/blog_signup). Install the [Auth0 CLI](https://github.com/auth0/auth0-cli#installation) and run `auth0 login` to register your account. Then, run `auth0 apps create`. Use the name `auth0-demo` and specify a description of your choosing. Select Single Page Web Application and use `http://localhost:4200/home` for the Callback URL. Specify `http://localhost:4200` for the rest of the URLs. We’re using 4200 as the port here because that’s the default for local Angular development.

![Auth0 Apps Create](https://images.ctfassets.net/23aumh6u8s0i/6treCQmKthgFUfWwzf3AfL/79c7378cb41c2b7fcdc603f7787b493e/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

You can also use the Auth0 Console to create an OIDC app:

* [Log in](https://auth0.com/auth/login) to Auth0 or [create an account](https://a0.to/blog_signup) if you don’t have one. Go to **Applications** > **Create Application**.
* Choose **Single Page Web Applications** as the application type and click **Create**.
* Click **Angular**, then the **Settings** tab.
* Add `http://localhost:4200/home` as an Allowed Callback URL and `http://localhost:4200` as a Logout URL.
* Specify `http://localhost:4200` as an Allowed Origin and click **Save Changes** at the bottom.

Once you have a new Angular app and Auth0 OIDC set up, you can use [OktaDev Schematics](https://github.com/oktadev/schematics#angular--auth0) to add OAuth 2.0 and OIDC support to your Angular app. Be sure to execute this command in the folder for the app itself (`auth0-demo`) adjacent to `package.json`.

```shell
ng add @oktadev/schematics --auth0
```

The Auth0 CLI will prompt you for an issuer URL and client ID, which were displayed when setting up the app in Auth0. If you used the CLI, it would have shown the issuer URL right above the client ID.

```shell
=== dev-0ua1y-go.us.auth0.com application created

  CLIENT ID            TJgZxGnlSkqUe6JfMFSipZcFsbpl6LS2
```

This process will perform the following steps for you:

1. Install the [Auth0 Angular SDK](https://github.com/auth0/auth0-angular).
2. Add `src/app/auth-routing.module.ts` with your OIDC configuration and initialization logic.
3. Configure an `AuthHttpInterceptor` that adds an `Authorization` header with an access token to outbound requests.
4. Create a `HomeComponent` and configure it with authentication logic.
5. Update unit tests for `AppComponent` and `HomeComponent` to mock Auth0.

To see all the changes it makes to your files, see [this pull request on GitHub](https://github.com/oktadev/auth0-angular-example/pull/1/files). If you’re interested in learning more about Schematics, I recommend reading my [Use Angular Schematics to Simplify Your Life](https://developer.okta.com/blog/2019/02/13/angular-schematics) tutorial.

### Test your Angular authentication flow

Run `ng serve` in your app, and you should see a login button at `http://localhost:4200/home`.

![Auth0 Login button](https://images.ctfassets.net/23aumh6u8s0i/50ajbMEhMjKTlo8FFIrhcc/34ab5bd3e71ef2098232c1fa17094f7a/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

Click the **Login** button and sign in with one of the configured users for your Auth0 application. Because this is just a demo, you probably haven’t done that - more likely, you should sign up as a new user.

![Auth0 Login form](https://images.ctfassets.net/23aumh6u8s0i/4k6lvyaFm08105rMKbngMK/04946fb269344caaa466e995895816ee/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

After login, you’ll be redirected back to your app, and you’ll see a **Logout** button displayed in the bottom left corner.

![Auth0 Logout button](https://images.ctfassets.net/23aumh6u8s0i/4wmWthcAoznrbP7iP9qQ6T/38b2188e91decdbdd2a3046a57410369/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

### Display the authenticated user’s name

To display the authenticated user’s name, you can use the `user$` observable on the `AuthService` instance.

Modify `src/app/home/home.component.html` to display a welcome message to the user.

```html
<div>
  <button *ngIf="(auth.isAuthenticated$ | async) === false" (click)="login()" id="login">Login</button>
  <div *ngIf="auth.user$ | async as user">
    <h2>Welcome, {{user?.name}}!</h2>
  </div>
  <button *ngIf="auth.isAuthenticated$ | async" (click)="logout()" id="logout">Logout</button>
</div>
```

Refresh your app, and you should see your name displayed.

![Display user's name](https://images.ctfassets.net/23aumh6u8s0i/40JjOQXUidYCgMIWgDYSdT/b012e9c1c44d0397f89145dc00521053/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

If everything works—congrats!

## Learn more about Angular and OpenID Connect

I hope you enjoyed this quick tutorial on using Auth0 and OIDC for authentication in your Angular apps. If you’re looking for a more detailed step-by-step tutorial, please read [The Complete Guide to Angular User Authentication with Auth0](https://auth0.com/blog/complete-guide-to-angular-user-authentication/).

You can find the source code for the example on GitHub in the [@oktadev/auth0-angular-example](https://github.com/oktadev/auth0-angular-example) repository.

To learn more about Angular and OIDC, check out the following blog posts:

* [What You Need to Know about Angular v13](https://developer.okta.com/blog/2021/11/10/angular-v13)
* [The Things to Keep in Mind about Auth](https://developer.okta.com/blog/2021/10/29/things-to-keep-in-mind-about-auth)
* [A Quick Guide to Angular and GraphQL](https://developer.okta.com/blog/2021/10/22/angular-graphql)

<br>
<img src="https://images.ctfassets.net/23aumh6u8s0i/2FKsfPuzkEluf4MALzOoLT/969e1b0d6b58723b2bf263a8799c5cd6/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly" alt="The Angular Mini-Book" width="392" height="512">
<p align="center"><i><a href="https://www.infoq.com/minibooks/angular-mini-book/">The Angular Mini-Book</a></i></p>
<p align="left"></p>

I [just published a mini-book book on Angular](https://raibledesigns.com/rd/entry/the_angular_mini_book_1) that might interest you too. It's called [The Angular Mini-Book](https://www.infoq.com/minibooks/angular-mini-book/) and is available as a free download from InfoQ. The book is written tutorial-style and shows you how to develop a bare-bones application, test it, and deploy it. Then you'll move on to adding Bootstrap, Angular Material, continuous integration, and authentication. You'll also learn how to integrate Angular with Spring Boot (a popular REST API framework) and use security best practices like HTTPS and a content security policy.

If you liked this tutorial, chances are you'll like others we publish. Please follow [Auth0](https://twitter.com/auth0) and [OktaDev](https://twitter.com/oktadev) on Twitter to get notified when we publish new developer tutorials.

Add OpenID Connect to Angular Apps Quickly

See how it's easy to manage your Angular application's state using NgRx and learn how you can use NgRx with Auth0's SDK to handle user-related functionalities.

State Management in Angular Using NgRx: Pt. 1

## 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 focus more on the Auth0 and NgRx integration.

The starter app is using the Auth0 SDK directly and managing the roles through the `RolesService`, this section of the tutorial will walk you through migrating to using Auth0's SDK through NgRx and managing the roles by using selectors.

### Create User State

Let's start with defining the interface for the user state object and its initial state. Open `user.state.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.state.ts

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

export interface UserState {
  userDetails: Auth0User;
}

export const initialState: UserState = {
  userDetails: undefined,
};
```

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

```typescript
// src/app/core/state/user/index.ts

export * from "./user.state";
```

#### Update Core State

To access `UserState` from your Store, you will need to add it to your `CoreState`'s state object. Open `core.state.ts` and add the following code 👇

```typescript
// src/app/core/state/core.state.ts

import { MenusState } from "./menus";
// ✨ New 👇
import { UserState } from "./user";

export interface State {
  menus: MenusState;
  // ✨ New 👇
  user: UserState;
}
```

### 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 👇

```typescript
// src/app/core/state/user/user.actions.ts

import { createAction, props } from "@ngrx/store";
import { User as Auth0User } from "@auth0/auth0-spa-js";

export const allNavbarActions = {
  loginFlowInitiated: createAction("[Navbar] Login Flow Initiated"),
  logoutFlowInitiated: createAction("[Navbar] Logout Flow Initiated"),
};

export const userChangedFromAuth0SDK = createAction(
  "[Auth0 SDK] User Changed",
  props<{ userDetails: Auth0User }>()
);
```

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

```typescript
// src/app/core/state/user/index.ts

export * from "./user.state";

// ✨ New 👇
export * from "./user.actions";
```

#### Update Application to Use User Actions

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

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

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";

// ✨ New 👇
import { Store } from "@ngrx/store";
import { allNavbarActions } from "src/app/core/state/user";

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,
    // ✨ New 👇
    private store: Store
  ) {}

  loginWithRedirect(): void {
    // ✨ New 👇
    this.store.dispatch(allNavbarActions.loginFlowInitiated());
  }

  logout(): void {
    // ✨ New 👇
    this.store.dispatch(allNavbarActions.logoutFlowInitiated());
  }
}
```

### Create User Selectors

Create two selectors, a feature selector and a selector that returns the `userDetails`. Open `user.selector.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.selector.ts

import { createFeatureSelector, createSelector } from "@ngrx/store";
import { UserState } from "./user.state";

export const selectUser = createFeatureSelector<UserState>("user");

export const selectUserDetails = createSelector(
  selectUser,
  (state: UserState) => state.userDetails
);
```

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

```typescript
// src/app/core/state/user/user.selector.ts

import { createFeatureSelector, createSelector } from "@ngrx/store";

// ✨ New 👇
import { environment } from "src/environments/environment";
import { UserState } from "./user.state";

// ✨ New 👇
export const USER_ROLES = {
  MENU_ADMIN: "menu-admin",
};

export const selectUser = createFeatureSelector<UserState>("user");

export const selectUserDetails = createSelector(
  selectUser,
  (state: UserState) => state.userDetails
);

// ✨ New 👇
export const selectIsLoggedIn = createSelector(
  selectUserDetails,
  (userDetails) => !!userDetails
);

// ✨ New 👇
export const selectUserRoles = createSelector(
  selectUserDetails,
  (userDetails) => userDetails[`${environment.auth.audience}/roles`]
);

// ✨ New 👇
export const selectIsAdmin = createSelector(selectUserRoles, (userRoles) =>
  userRoles?.includes(USER_ROLES.MENU_ADMIN)
);
```

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

```typescript
// src/app/core/state/user/index.ts

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

// ✨ New 👇
export * from "./user.selector";
```

#### Update Application to Use User Selectors

The user role route guard was previously using the value of the roles from `RolesService`. Since you now have a user roles Selector, you can replace the current implementation with an NgRx Selector. Open `user-role.guard.ts` and add the following code 👇

```typescript
// src/app/core/guards/user-role.guard.ts

import { Injectable } from "@angular/core";
import {
  CanActivate,
  Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
} from "@angular/router";

// ✨ New 👇
import { Store } from "@ngrx/store";

import { Observable, of } from "rxjs";
import { catchError, map } from "rxjs/operators";
import { selectUserRoles } from "../state/user";

@Injectable({ providedIn: "root" })
export class UserRoleGuard implements CanActivate {
  constructor(
    // ✨ New 👇
    private store: Store,
    private router: Router
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    // ✨ New 👇
    return this.store.select(selectUserRoles).pipe(
      map((roles) => {
        if (roles && roles.includes(route?.data?.role)) {
          return true;
        }

        // redirect the user to home
        this.router.navigate(["/home"]);
        return false;
      }),
      catchError((err) => {
        // redirect the user to home
        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 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

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 "@ngrx/store";

// ✨ New 👇
import {
  allNavbarActions,
  selectIsLoggedIn,
  selectUserDetails,
} from "src/app/core/state/user";

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;

  // ✨ New 👇
  isAuthenticated$ = this.store.select(selectIsLoggedIn);
  user$ = this.store.select(selectUserDetails);

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

  constructor(private store: Store) {}

  loginWithRedirect(): void {
    this.store.dispatch(allNavbarActions.loginFlowInitiated());
  }

  logout(): void {
    this.store.dispatch(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 `selectUserDetails` Selector. Open `profile.component.ts` and add the following code 👇

```typescript
// src/app/features/profile/profile.component.ts

import { Component } from "@angular/core";

// ✨ New 👇
import { Store } from "@ngrx/store";
import { selectUserDetails } from "src/app/core/state/user";

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

  // ✨ New 👇
  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](https://auth0.com/blog/developing-a-secure-api-with-nestjs-adding-role-based-access-control/#Get-User-Roles). Open `menu-items.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-items/menu-items.component.ts

import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { Store } from "@ngrx/store";
import { selectMenuItems } from "src/app/core/state/menus";
// ✨ New 👇
import { selectIsAdmin } from "src/app/core/state/user";

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

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

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

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

```typescript
// src/app/features/menu/menu-item/menu-item.component.ts

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 "@ngrx/store";
import { selectMenuItem } from "src/app/core/state/menus";

// ✨ New 👇
import { selectIsAdmin } from "src/app/core/state/user";

@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(selectMenuItem({ id: id })))
  );

  // ✨ New 👇
  isAdmin$ = this.store.select(selectIsAdmin);

  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 Reducer

The `userDetails` in the user Store will only be modified based on the `userChanged` event from Auth0's SDK to always keep them in sync. Open `user.reducer.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.reducer.ts

import { Action, createReducer, on } from "@ngrx/store";
import * as UserActions from "./user.actions";
import { initialState, UserState } from "./user.state";

const userReducer = createReducer(
  initialState,
  on(UserActions.userChangedFromAuth0SDK, (state, { userDetails }) => ({
    ...state,
    userDetails: userDetails,
  }))
);

export function reducer(state: UserState | undefined, action: Action) {
  return userReducer(state, action);
}
```

#### Update Core Reducer

Similar to what you did for the menus Reducer, you will need to add the reducer to the `ActionReducerMap` to use the user reducer. Open `core.reducer.ts` and add the following code 👇

```typescript
// src/app/core/state/core.reducers.ts

import { ActionReducerMap, MetaReducer } from "@ngrx/store";
import { State } from "./core.state";
import * as MenusReducer from "./menus/menus.reducer";
// ✨ New 👇
import * as UserReducer from "./user/user.reducer";

export const reducers: ActionReducerMap<State> = {
  menus: MenusReducer.reducer,
  // ✨ New 👇
  user: UserReducer.reducer,
};

export const metaReducers: MetaReducer<State>[] = [];
```

### Create User Effects

You will be interacting with Auth0's SDK through the user Effects, to log in and log out the user and listen to changes in the user's state. Open `user.effects.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";
import { AuthService } from "@auth0/auth0-angular";
import { Actions, createEffect, ofType } from "@ngrx/effects";
import { tap, map } from "rxjs/operators";
import * as UserActions from "./user.actions";

@Injectable()
export class UserEffects {
  constructor(
    private actions$: Actions<any>,
    private authService: AuthService
  ) {}

  login$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.loginFlowInitiated.type),
        tap(() => this.authService.loginWithRedirect())
      ),
    { dispatch: false }
  );

  logout$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.logoutFlowInitiated.type),
        tap(() => this.authService.logout())
      ),
    { dispatch: false }
  );
}
```

To keep the user observable from the Auth0's SDK and our user Store in sync, you can use an actionless effect that listens to an external observable (in our case `authService.user$`) and dispatches another action whenever that observable emits a new value. Open `user.effects.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";
import { AuthService } from "@auth0/auth0-angular";
import { Actions, createEffect, ofType } from "@ngrx/effects";
import { tap, map } from "rxjs/operators";
import * as UserActions from "./user.actions";

@Injectable()
export class UserEffects {
  constructor(
    private actions$: Actions<any>,
    private authService: AuthService
  ) {}

  // ✨ New 👇
  userChanged$ = createEffect(() =>
    this.authService.user$.pipe(
      map((userDetails) =>
        UserActions.userChangedFromAuth0SDK({ userDetails: userDetails })
      )
    )
  );

  login$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.loginFlowInitiated.type),
        tap(() => this.authService.loginWithRedirect())
      ),
    { dispatch: false }
  );

  logout$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.logoutFlowInitiated.type),
        tap(() => this.authService.logout())
      ),
    { dispatch: false }
  );
}
```

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

```typescript
// src/app/core/state/user/index.ts

export * from "./user.state";
export * from "./user.actions";
export * from "./user.selector";

// ✨ New 👇
export * from "./user.effects";
```

#### Update Effects Module

You will then need to add `UserEffects` to the `EffectsModule` initialization. Open `app.module.ts` and add the following code

```typescript
// src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { StoreModule } from "@ngrx/store";
import { EffectsModule } from "@ngrx/effects";
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 { reducers, metaReducers } from "./core/state";
import { MenusEffects } from "./core/state/menus";

// ✨ New 👇
import { UserEffects } from "./core/state/user";

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AuthModule.forRoot({
      ...environment.auth,
      httpInterceptor: {
        allowedList: [
          `${environment.serverUrl}/api/menu/items`,
          `${environment.serverUrl}/api/menu/items/*`,
        ],
      },
    }),
    AppRoutingModule,
    NavBarModule,

    // NgRx
    StoreModule.forRoot(reducers, {
      metaReducers,
    }),

    // ✨ New 👇
    EffectsModule.forRoot([MenusEffects, UserEffects]),
  ],
  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 current state of the app compared to the previous checkpoint is its underlying implementation. The app now uses NgRx 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 user. This is a relatively small demo application with a few Stores, Actions, and Reducers to show how you can use NgRx to manage your Application's state, and use NgRx with Auth0's SDK to handle user-related functionalities.

State Management in Angular Using NgRx: Pt. 2

matt-netkow

Matt leads the Developer Relations team at Ionic, an app development platform that helps companies ship powerful cross-platform apps using one codebase. A .NET developer for many years, he embraced the open web after realizing he should probably pay attention to an up-and-coming language called “JavaScript.” Today, he specializes in cross-platform hybrid apps built with web technologies. When not coding, you can find him traveling the world, hiking, and exploring the local sights and culture.

Head of Developer Relations

Matt Netkow

Learn how to secure your Ionic app by adding user authentication with Auth0 and Ionic Auth Connect.

Adding Auth0 to an Ionic Angular App Using Auth Connect

tadej-slamic

With over a decade in the software industry, I've helped startups launch their first product, assisted FTSE100 enterprises with digital transformation, been a part of the fintech boom, and helped particle accelerators cool down. I enjoy architecting and creating scalable backends and crafting modern mobile, web, and desktop apps.

CTO at Shortcut AS

Tadej Slamic

Learn how to use Spring Boot, Java, and Auth0 to secure a feature-complete API. Learn how to use Auth0 to implement authorization in Spring Boot.

Spring Boot Authorization Tutorial: Secure an API (Java)

philippederyck

Philippe De Ryck helps developers protect companies through better web security. His Ph.D. in web security from KU Leuven lies at the basis of his exceptional knowledge of the security landscape. As the founder of Pragmatic Web Security, Philippe delivers security training and security consulting to companies worldwide. His online course platform allows anyone to learn complex security topics at their own pace. Philippe is a Google Developer Expert and an Auth0 Ambassador/Expert for his community contributions on the security of web applications and APIs.

Web Security Expert, Founder of Pragmatic Web Security

Philippe De Ryck

Learn how Trusted Types help eradicate DOM-based XSS in frontend Angular and React applications.

Securing SPAs with Trusted Types

ravi_kiran

Guest Author

Ravi Kiran

Learn how to use Angular, D3, and Socket.IO to build an application that provides real-time charts to its users.

Real-Time Charts using Angular, D3, and Socket.IO

Improve the User Experience (UX) of an e-commerce application by implementing animations utilizing Angular animations, CSS animations, and Web Animation APIs.

Get Better Angular UX Using 4 Animation Techniques

Learn how to use Spring and Java to build a feature-complete API. Learn how to use Spring Boot to create, read, update, delete, and validate data.

Spring Boot Tutorial: Build a CRUD API (Java)

Learn how to use NestJS, a Node.js framework powered by TypeScript, to build a secure API.



<details>
<summary>Are you starting from this chapter?</summary>

Clone the application repo and check out the `creating-data-models-and-service` branch:

``` bash  
git clone git@github.com:auth0-blog/wab-menu-api-nestjs.git \
nest-restaurant-api \
--branch creating-data-models-and-service
```

Make the project folder your current directory:

``` bash  
cd nest-restaurant-api
```

Then, install the project dependencies:

``` bash  
npm i
```

Finally, create a `.env` hidden file:

``` bash  
touch .env
```

Populate `.env` with this:

``` bash  
PORT=7000
```

</details>

## Define the Endpoints

For this application, you'll create endpoints to access an `items` resource to perform read, write, update, and delete operations on menu items:

``` bash  
# get all items
GET items/
# get a single item using an id parameter
GET items/:id
# create an item
POST items/
# update an item
PUT items/
# delete an item using an id parameter
DELETE items/:id
```

Only the `GET` endpoints will be public, so let's start with those.

## Create a NestJS Controller

To create an `ItemsController`, execute the following command:

``` bash  
nest generate controller items --no-spec
```

Once executed, this command creates an `items.controller.ts` file under the `src/items` directory. The CLI automatically registers `ItemsController` as a controller of `ItemsModule` for you.

``` typescript  
// src/items/items.module.ts

import { Module } from '@nestjs/common';
import { ItemsService } from './items.service';
import { ItemsController } from './items.controller';

@Module({
  providers: [ItemsService],
  controllers: [ItemsController],
})
export class ItemsModule {}
```

Your application will only recognize `controllers` registered in the metadata object that the `@Module` decorator receives as argument.

Following the architectural conventions of other frameworks, [NestJS controllers](https://docs.nestjs.com/controllers) are responsible for mapping endpoints to functionality. Controllers are created using a class and a decorator as follows:

``` typescript  
@Controller('path')
export class NameController {}
```

The `@Controller` decorator takes as argument the resource path that it will handle.

Populate `src/items/items.controller.ts` as follows to create all of your application endpoints:

``` typescript  
import {
  Body,
  Controller,
  Delete,
  Get,
  Param,
  Post,
  Put,
} from '@nestjs/common';
import { ItemsService } from './items.service';
import { Items } from '../items';
import { Item } from '../item';

@Controller('items')
export class ItemsController {
  constructor(private readonly itemsService: ItemsService) {}

  @Get()
  async findAll(): Promise<Items> {
    return this.itemsService.findAll();
  }

  @Get(':id')
  async find(@Param('id') id: number): Promise<Item> {
    return this.itemsService.find(id);
  }

  @Post()
  async create(@Body('item') item: Item): Promise<void> {
    this.itemsService.create(item);
  }

  @Put()
  async update(@Body('item') item: Item): Promise<void> {
    this.itemsService.update(item);
  }

  @Delete(':id')
  async delete(@Param('id') id: number): Promise<void> {
    this.itemsService.delete(id);
  }
}
```

Let's explore in detail what's happening within `ItemsController`.

All of your endpoints share the same resource path: `items/`. You pass the path _without_ the trailing forward slash to the `@Controller` decorator as argument.

You import the `Item` and `Items` classes to add typings to your controller handlers as needed.

To handle specific HTTP requests that use the controller's path, like `GET` or `POST`, you create class methods for each one of them. These methods are called _route handlers_ and use HTTP request method decorators, like `@Get` or `@Post`, that match the type of request they handle:

``` typescript  
  @Post()
  async create(@Body('item') item: Item): Promise<void> {
    this.itemsService.create(item);
  }
```

The function name of the route handler is not relevant to how your API is consumed by clients, but it helps you to easily identify the method for code maintenance and debugging. 

Notice that the `findAll` handler is an `async` function. Why's that?

``` typescript  
  @Get()
  async findAll(): Promise<Items> {
    return this.itemsService.findAll();
  }
```

As mentioned in the [_Asynchronicity_ document](https://docs.nestjs.com/controllers#asynchronicity), data extraction is mostly asynchronous. For this reason, NestJS supports modern `async` functions, which must return a `Promise`. As such, you can return deferred values that NestJS will be able to resolve by itself.

In order to keep `ItemsController` lightweight, you delegate the business logic of each endpoint to methods from `ItemsService`. To access this service within your controller class, you inject an instance of the `ItemsService` class into it through its class constructor. The service instance is marked `private readonly` to make this instance unchangeable and only visible inside the controller class.

``` typescript  
constructor(private readonly itemsService: ItemsService) { }
```

## Make API Requests

With the service and controller in place, you can start the API and make a request to `GET items/`:

``` bash  
# start the development server
npm run start:dev

# make a request to GET items/
curl http://localhost:7000/items/
```

If the app is working as expected, you get an object containing items data as response. The `curl` command works on both macOS and Linux terminal apps as well as on Windows PowerShell.

> Developing on Windows? Learn more about [Windows PowerShell Commands for Web Developers](https://auth0.com/blog/powershell-commands-for-web-developers/#Marking-Server-Requests).

When handling requests that have a payload, you need to extract the payload data from the `body` property of the `request` object that the route handler receives. With that goal in mind, you use the `@Body()` parameter decorator to pluck properties from the `body` property. `@Body()` receives the name of the property that you want to pluck as an argument; in this case, you want the `item` property:

``` typescript  
@Post()
create(@Body('item') item: Item) {
  this.itemsService.create(item);
}
```

The argument passed to the `@Controller()` decorator defines the route path prefix, which is a path shared by all the endpoints defined within the controller. You can then create different path branches by using _route parameters_, such as `:id`. This allows you to create two distinct `GET` endpoints within the same controller:

``` bash  
GET items/
GET items/:id
```

You then pass the route parameter, `:id`, as an argument to the HTTP request decorators `@Get()`, `@Put()`, and `@Delete()` to define dynamic paths. Consequently, this route parameter lets you update, delete, and retrieve a single record.

Using the `@Param()` decorator, you can pluck properties from the `params` property of the `request` object and access the value of `id`:

``` typescript  
@Get(':id')
async find(@Param('id') id: number): Promise<Item> {
  return this.itemsService.find(id);
}
```

> `@Params()` and `@Body()` are both decorators that extract data from the `request` object.

Test the `POST items/` endpoint by executing the following command:

``` bash  
curl -X POST -H 'Content-Type: application/json' -d '{
  "item": {
    "name": "Salad",
    "price": 4.99,
    "description": "Fresh",
    "image": "https://cdn.auth0.com/blog/whatabyte/salad-sm.png"
  }
}' http://localhost:7000/items -i
```

> The `-i` flag includes protocol headers in the output.

You should get `HTTP/1.1 201 Created` as response.

Verify that an item named "Salad" has been added to the store:

``` bash  
curl http://localhost:7000/items -i
```

## Enable Data Validation in NestJS

As explained before, using classes to create custom types is recommended since they are persisted as JavaScript entities after TypeScript transpilation. During development, TypeScript's type system will help you catch errors and debug your code. However, during production, your API will face unpredictable request payloads. You can mitigate this point of failure by validating the data it receives as payload.

To validate incoming requests, you can add validators to your `Item` class properties and execute them by using the built-in NestJS validation pipe.

As it is, the application won't return an error status if you `POST` invalid data. For example, the following request should return a [`400 Bad Request`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/400) response status; but instead, it returns a [`201 Created`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/201) response status:

``` bash  
curl -X POST -H 'Content-Type: application/json' -d '{
  "item": {
    "name": 1.99,
    "price": "Salad",
    "description": "Fresh",
    "image": "https://cdn.auth0.com/blog/whatabyte/salad-sm.png"
  }
}' http://localhost:7000/items -i
```

_Output_:

``` bash  
HTTP/1.1 201 Created
X-Powered-By: Express
Date: Fri, 20 Sep 2019 23:48:46 GMT
Connection: keep-alive
Content-Length: 0
```

To solve this problem, you'll set up your app to automatically validate all incoming requests using the built-in `ValidatorPipe`. In NestJS, a pipe is a class used to transform input data to a desired output or to validate input data.

To enable auto-validation, install the following NPM packages that are leveraged by `ValidationPipe`:

``` bash  
npm install class-validator class-transformer
```

[`class-validator`](https://github.com/typestack/class-validator) makes validation easy by using TypeScript decorators. [`class-transformer`](https://github.com/typestack/class-transformer) offers proper decorator-based transformation, serialization, and deserialization of plain JavaScript objects to class constructors.

Once that's installed, update `src/main.ts` as follows:

``` typescript  
// src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as dotenv from 'dotenv';
import { ValidationPipe } from '@nestjs/common';

dotenv.config();

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(new ValidationPipe());
  await app.listen(process.env.PORT);
}
bootstrap();
```

Next, you need to add validation decorators to your `Item` class. Update `src/item.ts` like so:

``` typescript  
// src/item.ts

import { IsString, IsNumber, IsOptional } from 'class-validator';

export class Item {
  @IsNumber() @IsOptional() readonly id: number;
  @IsString() readonly name: string;
  @IsNumber() readonly price: number;
  @IsString() readonly description: string;
  @IsString() readonly image: string;
}
```

In essence, since you expect the payload to your endpoints to have the same structure of an `Item` object, the `Item` class is doubling as a type class and [a data transfer object (DTO) class](https://en.wikipedia.org/wiki/Data_transfer_object). As requirements change, you may need to create a separate class to define a data transfer object for a payload that includes more data than what the `Item` class provides. Increasing the data present in the payload is done to reduce the number of method calls needed for your application to fulfill a request.

The `id` property is marked as optional since the `POST items/` endpoint doesn't require an `id` as a route parameter or a payload property. Remember that the `id` of a new `Item` is created automatically by the `create` method of `ItemsService`.

Using this pipe, if the data is invalid, you throw an exception and return an error message to the client.

To test this, issue the following invalid `POST` request:

``` bash  
curl -X POST -H 'Content-Type: application/json' -d '{
  "item": {
    "name": 1.99,
    "price": "Salad",
    "description": "Fresh",
    "image": "https://cdn.auth0.com/blog/whatabyte/salad-sm.png"
  }
}' http://localhost:7000/items -i
```

This time, you do get a `400 Bad Request` response. The `message` property of the response object also reveals the payload type errors:

``` json  
{
  "statusCode": 400,
  "error": "Bad Request",
  "message": [
    {
      "target": {},
      "property": "name",
      "children": [],
      "constraints": {
        "isString": "name must be a string"
      }
    },
    {
      "target": {},
      "property": "price",
      "children": [],
      "constraints": {
        "isNumber": "price must be a number"
      }
    }
  ]
}
```

You can disable detailed validation error messages by passing an options object to the constructor of the `ValidationPipe` pipe if you need to:

``` typescript  
// Extract from src/main.ts

app.useGlobalPipes(
  new ValidationPipe({
    disableErrorMessages: true,
  }),
);
```

With error messages disabled, the response to an invalid payload looks like this:

``` bash  
{"statusCode":400,"error":"Bad Request"}
```

<include src="tutorial/NextButton" nextPart="developing-a-secure-api-with-nestjs-adding-authorization/" completedMessage="I've created endpoints with validation for my NestJS app"/>

<include src="tutorial/IssueButton" communityTopic="developing-a-secure-api-with-nestjs/33026"/>


Developing a Secure API with NestJS: Creating Endpoints

Developing a Secure API with NestJS: Managing Identity

Developing a Secure API with NestJS: Managing Roles



<details>
<summary>Are you starting from this chapter?</summary>

Clone the application repo and check out the `getting-started` branch:

``` bash  
git clone git@github.com:auth0-blog/wab-menu-api-nestjs.git \
nest-restaurant-api \
--branch getting-started
```

Make the project folder your current directory:

``` bash  
cd nest-restaurant-api
```

Then, install the project dependencies:

``` bash  
npm i
```

Finally, create a `.env` hidden file:

``` bash  
touch .env
```

Populate `.env` with this:

``` bash  
PORT=7000
```

</details>

## Organize NestJS Apps Using Modules

A project of large size is easier to maintain and grow when its architecture is predictable and well-organized instead of being a spaghetti-like mess. NestJS uses modules to help you organize your application logically and to establish clear feature boundaries.

![NestJS takes you from messy code to organized code](https://images.ctfassets.net/23aumh6u8s0i/7fZuSQuPAWZY5gt3hjFMMQ/7ca680157e8314b68a423751c8ae4b22/nest-js-modules)

Each application has at least one module, the **root module**, and any number of **feature modules** that encapsulate components related to a specific application feature. NestJS uses the root module as a data structure to track and resolve the relationships between all your application components. 

This application needs **three modules**: the **root module**, `AppModule`, and **two feature modules**: `ItemsModule` to encapsulate logic related to the `items` resource and `AuthModule` to handle anything related to API authorization.

Start by creating an `ItemsModule` using the NestJS CLI, which was installed as one of your `devDependencies` when you scaffolded your NestJS project:  

``` bash  
nest generate module items
```

Under the `src` directory, the CLI creates a new `items` directory to host your module files, which includes `items.module.ts` to define the `ItemsModule`. As you can see, a module is a class annotated with a `@Module()` decorator, which provides metadata that NestJS uses to organize the application structure.

Additionally, as you create new feature elements (such as classes, controllers, and services), the NestJS CLI updates the dependencies of your modules automatically. Open `src/app.module.ts` and notice how `AppModule` lists `ItemsModule` as an element of its `imports` array:

``` typescript  
// src/app.module.ts

import { Module } from '@nestjs/common';
import { ItemsModule } from './items/items.module';

@Module({
  imports: [ItemsModule],
  controllers: [],
  providers: [],
})
export class AppModule {}
```

<include src="TweetQuote" quoteText="As an architecture framework, NestJS takes the guesswork out of project structure and lets you focus on what matters the most: building robust applications"/>

## Create Data Models with TypeScript

Before creating any controllers and services, define the structure of the data you want to manage. A menu item has the following properties:

- `id`: (number) Unique identifier for the item record
- `name`: (string) Name of the item
- `price`: (number) Price of the item in dollars
- `description`: (string) Description of the item
- `image`: (string) URL pointing to the item's image

![WHATBYTE Dashboard full menu item](https://images.ctfassets.net/23aumh6u8s0i/wkMDo6PoCvR0u3QPD22BX/88843cd23660418920811bfdfc0aa08c/whatbyte-dashboard-full-menu-item)

With TypeScript, you can use either classes or interfaces to define and enforce the structure of objects during development. NestJS recommends using classes as these are preserved as real entities in the compiled JavaScript. Classes can also use decorators on its member variables to enhance them, which is quite helpful for data validation.

Using the CLI generate an `Item` class:

``` bash  
nest generate class item --no-spec
```

NestJS creates an `item.ts` file under the `src` directory for you. Open this file and populate it like so:

``` typescript  
// src/item.ts

export class Item {
  readonly id: number;
  readonly name: string;
  readonly price: number;
  readonly description: string;
  readonly image: string;
}
```

It would be best to put these objects of type `Item` in a key-value store with the `id` property serving as the key and the `Item` object as the value.

Using the CLI generate an `Items` class:

``` bash  
nest generate class items --no-spec
```

Update the newly created `src/items.ts` file as follows:

``` typescript  
// src/items.ts

import { Item } from './item';

export class Items {
    [key: number]: Item;
}
```

As you'll use these class definitions to type the methods of controllers and services that you'll create in the next sections, it's fine for these files to live under the `src` directory.

## Create a NestJS Service

Initially, you'll use an in-memory store to hold application data. Eventually, you'd want to persist those records in a [MongoDB](https://auth0.com/blog/auth0-tutorials-using-mongodb-atlas-as-a-custom-database/) or [PostgreSQL](https://auth0.com/blog/how-we-store-data-in-the-cloud-at-auth0/#PostgreSQL) store &mdash; or any other database. To migrate stores easily, you can use a pattern common to MVC architectures: lightweight controllers that delegate business logic to services. 

As such, you'll create a service to encapsulate all the business logic related to read and write operations on the menu items store. In turn, this service will expose an interface for your controllers to perform these data operations. You'll end up with a modular and reusable service that you can eventually modify to use different stores without changing the code of any of its consumers.

Use the NestJS CLI to create an `ItemsService` as follows:

``` bash  
nest generate service items --no-spec
```

> The `--no-spec` flag prevents the generation of files related to testing.

NestJS creates `items.service.ts` under the `src/items` directory. The newly defined `ItemsService` is also automatically registered as a provider of `ItemsModule`.

``` typescript  
// src/items/items.module.ts

import { Module } from '@nestjs/common';
import { ItemsService } from './items.service';

@Module({
  providers: [ItemsService],
})
export class ItemsModule {}
```

`ItemsService` will define an object to hold your store records along with methods to perform data operations on the store.

Update `src/items/items.service.ts` with the following code:

``` typescript  
// src/items/items.service.ts

import { Injectable } from '@nestjs/common';
import { Item } from '../item';
import { Items } from '../items';

@Injectable()
export class ItemsService {
  private readonly items: Items = {
    1: {
      id: 1,
      name: 'Burger',
      price: 5.99,
      description: 'Tasty',
      image: 'https://cdn.auth0.com/blog/whatabyte/burger-sm.png',
    },
    2: {
      id: 2,
      name: 'Pizza',
      price: 2.99,
      description: 'Cheesy',
      image: 'https://cdn.auth0.com/blog/whatabyte/pizza-sm.png',
    },
    3: {
      id: 3,
      name: 'Tea',
      price: 1.99,
      description: 'Informative',
      image: 'https://cdn.auth0.com/blog/whatabyte/tea-sm.png',
    },
  };

  findAll(): Items {
    return this.items;
  }

  create(newItem: Item): void {
    const id = new Date().valueOf();
    this.items[id] = {
      ...newItem,
      id,
    };
  }

  find(id: number): Item {
    const record: Item = this.items[id];

    if (record) {
      return record;
    }

    throw new Error('No record found');
  }

  update(updatedItem: Item): void {
    if (this.items[updatedItem.id]) {
      this.items[updatedItem.id] = updatedItem;
      return;
    }

    throw new Error('No record found to update');
  }

  delete(id: number):void {
    const record: Item = this.items[id];

    if (record) {
      delete this.items[id];
      return;
    }

    throw new Error('No record found to delete');
  }
}
```

Notice that the `create` method creates a unique `id` property automatically for you  when a new `Item` object is created using the [JavaScript Date API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date):

``` typescript  
const id = new Date().valueOf();
```

This `id` value is based on the number of milliseconds between `1 January 1970 00:00:00 UTC` and the current time.

<include src="tutorial/NextButton" nextPart="developing-a-secure-api-with-nestjs-creating-endpoints/" completedMessage="I've created my NestJS data models and a data service"/>

<include src="tutorial/IssueButton" communityTopic="developing-a-secure-api-with-nestjs/33026"/>


Developing a Secure API with NestJS: Creating Data Models and Services



<div class="alert alert-info alert-icon">
<i class="icon-budicon-500"></i>
<strong>
We tested this tutorial using NestJS <code>v7.0.0</code>, Node.js <code>v10.16.3</code>, and npm <code>v6.9.0</code>.
</strong>
</div>

NestJS is known as an architecture framework for Node.js, but what is an "architecture framework"?  Is this yet another buzzword? Nope! It's legit.

NestJS may feel like the [Laravel](https://auth0.com/blog/build-a-laravel-6-app-with-authentication/) or [Rails](https://auth0.com/blog/ruby-on-rails-killer-workflow-with-docker-part-1/) of the Node.js world as it favors convention over configuration. It offers you _opinionated_ guidelines and code conventions. So, instead of worrying about naming or organizing files and folders, you can focus on building features for your product.

On its mission to remove the guesswork out of API development, NestJS offers first-class support for [TypeScript](https://auth0.com/blog/typescript-practical-introduction/) to add static type-checking to your projects. Your API code becomes self-documented: you'll know if a method expects a `string`, a ` number`, a `Cat`, or a [`TwitterHotTake`](https://twitter.com/auth0/status/1123248195369353218).

Today, you'll learn how to build a secure API with [NestJS](https://docs.nestjs.com/) and create your _own opinion_ on the framework.

## What You Will Build

Your goal is to create and secure a feature-complete API, which lets clients perform data operations on a mock restaurant menu. To test, consume, and even try to hack your API, you'll use a demo client called ["WHATABYTE Dashboard"](https://dashboard-v1.whatabyte.app/).

![WHATBYTE Dashboard](https://images.ctfassets.net/23aumh6u8s0i/4lvQzkec18pvBbWjwGP87q/f4ce15742f30695af44a1811c7a4ec7d/whatabyte-dashboard)

![WHATBYTE Dashboard menu item](https://images.ctfassets.net/23aumh6u8s0i/8x6EQECtV02vPAebNC1XQ/645f7768ccb740dab396d77775f84038/whatabyte-dashboard-menu-item)

> This dashboard is inspired by the [sleek web player from Spotify](https://open.spotify.com/search).

We tested this tutorial using Node.js `v10.16.3` and NPM `v6.9.0`. If you need to install any of them, follow the [instructions provided by the Node.js Foundation for your operating system](https://nodejs.org/en/download/).

For **simplicity**, you'll store data in-memory and not in an external database.

For **security**, you'll limit API access by following these business rules:

- Anyone can read data.

- Only users with a `menu-admin` role are authorized to write data: create, update, or delete menu items.

## Get Started with NestJS

NestJS offers a powerful CLI tool to build your application. To generate a new project, use `npx` to run the NestJS CLI without installing it globally in your system:

``` bash  
npx @nestjs/cli new nest-restaurant-api
```

> The `npx` command is available with `npm v5.2.0` and higher.

The CLI asks you to choose a package manager, `npm` or `yarn`, and proceeds to install project dependencies using your selection. To follow this tutorial, choose `npm`.

![Using the NestJS CLI to scaffold a new project](https://images.ctfassets.net/23aumh6u8s0i/gT39eDyAeWwkFqmoO3IA7/b9821bf48f0b066b2b161b40e3fef23b/using-the-nestjs-cli-to-scaffold-a-new-project)

Once the installation is complete, you get a directory called `nest-restaurant-api`. Navigate to this directory:

``` bash  
# move into the project directory
cd nest-restaurant-api
```

## Clean Up the NestJS Starter

For simplicity, you won't be writing any tests in this tutorial. However, it would be best if you wrote robust tests for any production-ready application. As such, delete the `test` directory and the `src/app.controller.spec.ts` file from your project:

``` bash  
rm -rf test/
rm src/app.controller.spec.ts
```

> Refer to the [NestJS Testing documentation](https://docs.nestjs.com/fundamentals/testing) for details on how to perform automated tests.

After that, delete the files defining `AppController` and `AppService`:

``` bash  
rm src/app.controller.ts src/app.service.ts
```

Deleting these files breaks `AppModule` as it depends on `AppController` and `AppService`. To fix that, open the project in your preferred IDE and update `src/app.module.ts` as follows:

``` typescript  
// src/app.module.ts

import { Module } from '@nestjs/common';

@Module({
  imports: [],
  controllers: [],
  providers: [],
})
export class AppModule {}
```

## Use Environmental Variables

`src/main.ts` is the entry point of your application. However, this file uses a hard-coded port number to listen for incoming requests, `3000`, making your application less adaptable to different development and production environments.

To fix that, you can store environmental variables locally in a `.env` file and use a package like [`dotenv`](https://www.npmjs.com/package/dotenv) to load them into the global variable `process.env`.

To start, install `dotenv` in your project:

``` bash  
npm i dotenv
```

Then, create this hidden file under the root project directory:

``` bash  
touch .env
```

Open `.env` and populate it with the following data:

``` bash  
PORT=7000
``` 

To attach data from `.env` into `process.env`,  you need to call the `dotenv.config()` method at the top of each module that needs that data. As such, update `src/main.ts` to replace the hard-coded port number with `process.env.PORT` as follows:

``` typescript  
// src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as dotenv from 'dotenv';

dotenv.config();

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(process.env.PORT);
}
bootstrap();
```

Now when your application runs, it listens for requests on whatever the value of `process.env.PORT` may be &mdash; `7000` in this case.

> ⚠️ Caution: `.env` may eventually contain sensitive information, such as API keys or secrets. Add it to `.gitignore` before committing code to version control.

<include src="tutorial/NextButton" nextPart="developing-a-secure-api-with-nestjs-models-data-service/" completedMessage="I am ready to start building my NestJS app"/>

<include src="tutorial/IssueButton" communityTopic="developing-a-secure-api-with-nestjs/33026"/>

<include src="TweetQuote" quoteText="@nestframework is an architecture framework for @nodejs. Learn how to create scalable and maintainable server-side apps with it."/>


Developing a Secure API with NestJS: Getting Started

andrea-chiarelli

I have over 20 years of experience as a software engineer and technical author. Throughout my career, I've used several programming languages and technologies for the projects I was involved in, ranging from C# to JavaScript, ASP.NET to Node.js, Angular to React, SOAP to REST APIs, etc.

In the last few years, I've been focusing on simplifying the developer experience with Identity and related topics, especially in the .NET ecosystem.

Principal Developer Advocate

Andrea Chiarelli

A practical tutorial showing how to create Web Components using Stencil.

Creating Web Components with Stencil

Learn how to use Web Components technologies to build a login button that works in any JavaScript framework.

Beyond JavaScript Frameworks: Universal Login Button Component

john-papa

John Papa is a dedicated father and husband, a professional Web Developer, and avid OSS and community advocate. He currently is a Developer Advocate for Microsoft and has formerly worked for Disney on several web and mobile applications that you may have used. His passions are coding and teaching modern web technologies and enjoying everything Disney with his family. John is a co-host of the Real Talk JavaScript podcast, author of the Angular Style Guide, and many popular Pluralsight courses. You can reach John on Twitter at @john_papa.

Principal Developer Advocate Lead

John Papa

Find and report more errors than ever with Angular 9's Ivy compiler, strict template checking.



We have likely read about some of the benefits of the Ivy compiler and runtime. It's faster. It makes smaller bundle sizes. And it has [many other great new features that are introduced in Angular 9](https://auth0.com/blog/angular-9-whats-new/). Yet one of the most compelling and useful features is one we don't hear as often.

What if Angular could find bugs in our existing code? Hidden bugs that we may not notice. Subtle bugs that could cause problems? [Angular 9](https://angular.io) and the [Ivy](https://angular.io/guide/ivy) compiler do just that.

The new feature is known as strict template checking. Angular has been checking expressions and bindings within the templates of our applications for years. But with Angular 9, it finds and reports more errors than ever. It is pretty cool that we could have bugs in our templates right now, and this new feature reports them to us so we can fix them.

Seeing is believing, so let's see some examples. We'll kick things off using Angular 8, and we'll progress to Angular 9. We'll also adjust some compilation settings. These differences help us see where Angular 9 can detect additional errors that Angular 8 could not.

<include src="TweetQuote" quoteText="With Angular 9's new feature, strict template checking, we can find and report more errors than ever!"/>

## Compiling with Angular 8

Let's start with an example that we can all relate to, using Angular 8. 

We use a lot of `*ngFor` directives in our templates to iterate over arrays of objects. We reference an array and display the details of each object in the array in a template. The following component displays a list of heroes in the template.

``` html  

// app.component.ts

import { Component } from "@angular/core";
interface Hero {
  id: number;
  name: string;
}

@Component({
  selector: "app-root",
  template: `
      <div>{{ title }}</div>
      <ul>
        <li *ngFor="let hero of heroes; trackBy: trackByHero">
          <div>{{ hero.Id }} {{ hero.name }}</div>
        </li>
      </ul>
  `
})

export class AppComponent {
  heroes: Hero[] = [
    { id: 10, name: "Landon" },
    { id: 20, name: "Ella" },
    { id: 30, name: "Madelyn" },
    { id: 40, name: "Haley" }
  ];
  trackByHero(hero: Hero) { return hero.id; }
}

```

We're going to explore the `fullTemplateTypeCheck` setting in our `tsconfig.json` file, which, by default for our Angular 8 app, is set to `true`.

```json
{
  "compileOnSave": false,
  "compilerOptions": {
  …
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}
```

When we build this application with Angular 8 using `ng build` it compiles successfully. It even serves the application in the browser when we run `ng serve --open`. 

Now we can build the app with Angular 8 using AOT by running the command `ng build --prod`. Now we see Angular is reporting an error that the `title` does not exist in our component. When both AOT and the `fullTemplateTypeCheck` setting set to true, Angular can detect when we refer to a model that is missing from our component.

```text
ERROR in src/app/app.component.ts.AppComponent.html(3,12): Property' title' does not exist on type 'AppComponent'.
```

This error message is clear, but what is that filename `app.component.ts.AppComponent.html`? We can guess, correctly, that it means the `app.component.ts` file. But it would be nice if the filename was clear. We could fix this error now, but let's see what happens when we compile with Angular 9.

## Angular 9’s No Strict Templates

After upgrading to Angular 9 and its Ivy compiler, we can use a new setting in `tsconfig.json` for strict template checks. We'll open the file `tsconfig.json` and locate the `angularCompilerOptions` section. Let’s remove the `fullTemplateTypeCheck` entry and replace it with `strictTemplates: false`. Our `tsconfig.json` file should now have the following settings for the `angularCompilerOptions` with the strict templates checked disabled.

```json
{
  "compileOnSave": false,
  "compilerOptions": {
  …
  },
  "angularCompilerOptions": {
    "strictTemplates": false,
    "strictInjectionParameters": true
  }
}
```

When we build this application with Angular 9 using `ng build`, we immediately see an error for the missing `title` model. Also, the error is a little easier to read, as the Ivy compiler reports the file where the bug occurs.

```text
ERROR in src/app/app.component.ts:12:15 - error TS2339: Property 'title' does not exist on type 'AppComponent'.
```

We only had to run `ng build` to see this error with Angular 9, while in Angular 8 we did not see this error message when we ran `ng build`. This is because the AOT (Ahead of Time) compilation does not run in Angular 8 unless we explicitly tell it to run or we run `ng build --prod`. AOT compilation occurs with Angular 9 in `ng build` and `ng build --prod`. Having the AOT compilation in `ng build` is convenient because in Angular 8 we could have errors while we develop our application until we run a production build. Angular 9 tells us right away if we have this type of error.

Let's fix our error by adding a title model to our component. We'll add the following code inside of the `AppComponent`:

```javascript
  title = 'Heroes';
```

Now we can build successfully with `ng build` with Angular 9. So to recap what just happened, we upgraded to Angular 9 and disabled strict template checks, and the Ivy compiler tells us errors that were missed in a standard `ng build` in Angular 8.

Now let's ramp up the stakes a bit and see if we can get Angular 9 to show us any more hidden errors.

## Strict Templates

Let's change the setting in `tsconfig.json` to enable strict template checks. We'll open the file `tsconfig.json` and locate the `angularCompilerOptions` section. Let’s remove the `fullTemplateTypeCheck` entry and replace it with `strictTemplates: true`. Our `tsconfig.json` file should now have the following settings for the `angularCompilerOptions` with the strict templates checked enabled.

```json
{
  "compileOnSave": false,
  "compilerOptions": {
  …
  },
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInjectionParameters": true
  }
}
```

Now when we build and serve the application with `ng build` we are presented with a series of errors, as shown in the following image:

![Strict Template Check Find Several Errors in Angular 9](https://images.ctfassets.net/23aumh6u8s0i/6J00gz6V5dgxHbzkvhw1xf/e8836f9bfb60c45229ceffa729bda64f/strict-template-checking-errors)

If we tackle these one-by-one, we can see that the first error is complaining that something is wrong with the `*ngFor` statement. The real hint is how it references `TrackByFunction<Hero>`. Our function `trackByHero` only accepts a `hero` parameter. However, the implementation of a `TrackByFunction<T>` states that it should accept an index and a type T. This is why it is saying that `hero` and `index` are incompatible because we did not pass the `index`.

We can fix this error by refactoring our function to look like the following code:

```javascript
  // Old code
  // trackByHero(hero: Hero) {
  // return hero.id;
  // }
  // Refactored code
  trackByHero(index: number, hero: Hero): number {
    return hero.id;
  }
```

When we run `ng build` after refactoring the `trackByHero` function, we see fewer error messages.

![Strict Template Check Error for missing property on a model](https://images.ctfassets.net/23aumh6u8s0i/6wNVWwlV25Mm8nrKnE8UgM/40160e9f303349b737879a92592b9ce7/strict-template-check-model)

This last error reports that the property `Id` does not exist on the `hero` model. After closer examination in our component's code, we can see this is indeed an error. The code should be binding to `hero.id`. This minor typo was not detected in Angular 8 and can only be detected in Angular 9 with strict templates!

Now when we refactor the template to bind to `hero.id` and run `ng build` once again, we have success! 

Angular 9's Ivy compiler and the strict template check found these errors that Angular 8 could not detect.

## What Happened?

Angular 8 does check the templates for errors, but it had gaps in what it could not detect. For example, when using AOT and the `fullTemplateTypeCheck` setting, Angular 8 could detect missing models from a component. But it could not detect the properties of those models. This is why the properties of the `hero` could not be verified by Angular 8.

We explored a few different scenarios, so let's break this down a bit:

* When `fullTemplateTypeCheck` was false, Angular didn't check the bindings inside the `*ngFor` template. So the `<li>`'s bindings did not get checked.

* When `fullTemplateTypeCheck` was true, Angular checked that the `hero` is a valid model on the component, but it assumes the model is of type `any`.

* When `strictTemplates` is true, Angular 9 and the Ivy compiler verify that `hero` is a valid model of type `Hero`, and that the properties on that model (`hero.id` and `hero.name`) are also valid.

<include src="TweetQuote" quoteText="Angular 9's Ivy compiler and the strict template check finds errors that Angular 8 could not detect."/>

## Should We Use Strict Templates Now?

If we upgrade from Angular 8 to Angular 9 using [this excellent upgrade guide](https://update.angular.io/), the `strictTemplates` setting isn't applied to our app. Wait, if this helps our app detect bugs, why wouldn't we want it? Imagine how we might react if our app, which seems to work fine right now, produced compilation errors after an upgrade?  

By making this a manual change that we must opt into for Angular 9, we control the experience, and we control when we decide to ask Angular to look for template bugs that may exist. 

> Note: The Angular team intends to set `strictTemplates` to true in the next version, Angular 10. 

If we want to get to a point where we have strict templates slowly, there is a way we can do this more gradually. There are several additional checks that Angular 9's Ivy compiler can check for us. We can use [this guide in the Angular docs to gradually get to `strictTemplates`](https://angular.io/guide/template-typecheck#troubleshooting-template-errors) by turning on individual strict flags and fix newly revealed errors until none are remaining.

Whatever is decided, it is nice that Angular 9 and its Ivy compiler detect more errors than ever before, and we can gradually fix them at our own pace without disrupting our workflow.

## Other Angular Resources

If you want to learn more about these features, check out these great resources:

* [Angular 9 Template Type Checking](https://angular.io/guide/template-typecheck)
* [TypeScript configuration](https://angular.io/guide/typescript-configuration)
* [Angular Language Service for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template&wt.mc_id=auth0-blog-jopapa)

<include src="asides/AboutAuth0" />

---


Angular 9's Best Hidden Feature: Strict Template Checking

kapehe-jorgenson

Kapehe is an R&D Content Engineer for Auth0 with a passion for learning and teaching. With her primary focus on ReactJS and JavaScript, she is impressed with what code can create for the web. Technology and web development are constantly evolving and naturally bring that need for continual learning. She enjoys writing tutorials, hosting local meetups, and learning with others to expand coding knowledge.

R&D Content Engineer

Kapehe Jorgenson

Learn about the top seven features and upgrades we get with Angular 9


[Angular](https://angular.io/) [v9](https://github.com/angular/angular/releases/tag/9.0.0) is here! Along with it, we now get [Ivy](https://angular.io/guide/ivy), the default compiler that can reduce bundle size, improve debugging, and much more. It’s been almost three years since Angular released an update this large (ironic, since this update makes the code smaller!), and we can see it’s been worth the wait. 

![GitHub view of Angular v9](https://images.ctfassets.net/23aumh6u8s0i/5Vh6v8fQvKbKVPFL3QLRDi/81c0312083b87fd1ea130064e310a2c8/github-v9)

In this article, we are going to go over how to update from v8 to v9 and the **most Magnificent Seven things that Angular v9 has given us**. There are many things we can look forward to in this update, let’s talk about some of our favorites!

<include src="TweetQuote" quoteText="Angular v9 is here! Along with it, we now get Ivy!"/>

## Angular 9 is Ready for its Closeup

This upgrade has been through extensive testing. With more developers and projects using it, the bugs have been reported, and [over 300 have been fixed](https://github.com/angular/angular/issues?q=is%3Aissue+is%3Aclosed+label%3A%22comp%3A+ivy%22). Angular is used internally at Google for projects like [Google Domains](https://domains.google/) and [Firebase](https://firebase.google.com/). These projects will use new versions of Angular to test and validate before it goes beyond beta and RC. This upgrade is ready!

<include src="ebook-ads/Oauth2OidcGuide" />

Version 9 is more about changes to the framework, not the code that we wrote. This makes it easy for developers. To upgrade to v9, we won’t have to dive into individual files or components and update any code ourselves. The new Ivy renderer works with all our current code!

<include src="TweetQuote" quoteText="Angular v9 is more about changes to the framework, not the code that we wrote."/>

## How to Update from v8 to v9

We can find step-by-step instructions for updating from v8 to v9 on the [official update.angular.io](https://update.angular.io/). Let’s go over exactly what needs to happen to upgrade from Angular v8 to Angular v9.

> **Note:** Before starting the upgrade process, be sure to commit all changes to git. This will also be helpful to see how the upgrade modified certain files.

First, ensure we are using [Node v10.13 or later](https://nodejs.org/en/download/). It’s recommended to use the [Node 12.15.0 LTS](https://nodejs.org/en/) version since it will be supported!

Once we confirm our Node version, we will want to run the following command in our project’s directory:

```bash
ng update @angular/core@8 @angular/cli@8
```

This command will update our `@angular/core` and `@angular/cli` in our `package.json` for our project.

Once we run that, we will want to run:

```bash
ng update @angular/core @angular/cli
```

![Terminal - Updating to Angular 9 confirmation](https://images.ctfassets.net/23aumh6u8s0i/4DgcPvzI1DaT34ZVabV08M/044521f10274b02c4427e9737eb46aa1/terminal-updated-v9)

During the update process, we should see numerous messages telling us exactly what the CLI is updating. It will also tell us which files were modified. At a minimum, we should see the following files modified:

![VS Code view of files that were modified. tsconfig.app.json, angular.json, package-lock.json, package.json](https://images.ctfassets.net/23aumh6u8s0i/1u6tVi0ssjjkDaCFsmy7AP/2a99131ba3b1c095940be54dfc735865/files-modified)

We may see other files that get modified depending on where the project sits. For example, if the project has the older lazy load syntax or if the project is missing the `@injectable()` in a service file, those would also get updated.

Once complete, head to our `package.json`, and we will see that we are up-to-date with the latest Angular v9!

![View of package.json showing v9 updates](https://images.ctfassets.net/23aumh6u8s0i/2ju5ykqhOv1jioBXin99TJ/f1e495969baad55ddb8927b6e404a264/package-json-v9)

We have now updated from Angular v8 to Angular v9! Let’s explore more of the features.

## The Magnificent Seven

In this article, we are going to list the most “Magnificent Seven” features in Angular v9, all to the theme of movie titles. You get bonus points for spotting all the movie and television show references and listing them in the comments! 

## 1 - Honey I Shrunk Our App

It wasn’t accidental that the Angular team focused on helping our apps become smaller and making our apps faster than they were in previous versions of Angular. Our users expect the app experience to be fast. The Ivy compiler focuses on targeting our code with laser-beam accuracy to find and remove unneeded code.  

The Ivy compiler looks for parts of Angular that are not being used. It uses tree-shaking (a way of detecting unused code, also known as dead code removal), and it generates less code for each Angular component.

As the chart below shows, apps of all sizes can benefit from the Ivy compiler.

![Graph showing how Ivy improves app size](https://images.ctfassets.net/23aumh6u8s0i/56YEnzsya5yfLIBchND4Kz/51391832e85cf1fbd3b5302ff18b2f9b/ivy-size-improvements-2)
([Image credit](https://blog.angular.io/))

Once we update to Angular 9, we can run `ng build --prod` and notice how our file sizes shrink. 

## 2 - Ivy Knows What You Did Last Summer, in that Template

That’s right. Last summer, we wrote some pretty tragic code that we mostly forgot about. But Angular 9 hasn’t forgotten. We made poor choices in our templates and those errors are now detected by Angular 9. Fortunately, Angular is friendly enough to share those template errors with us in a clear and helpful way.

When we reference a component in a template, Angular expects that the component exists in the app. Imagine that we have this template:

``` html  

<div>
  <app-fake></app-fake>
  Hello {{hero.name}}
</div>

```

If no component exists that matches the `app-fake` selector, this is a problem. However, in Angular 9, when we run `ng build`, we get a very detailed error explaining that it knows exactly what we did wrong. 

![ng build error](https://images.ctfassets.net/23aumh6u8s0i/2PxhjJkLrkr942rXS2qCpM/38768b3bef6d50c8d43fd3b6b5699012/ng-build-error-2)

The error message very clearly tells us that it cannot find the component, shows us which component it is referring to, and it shows us exactly where this reference appears in the code! 

## 3 - Winter is Coming, and so is Our Angular Build

Ivy is so fast that we’ll have fewer opportunities to step away while waiting for our builds to complete. Prior to Angular 9, some of our app build times have felt like it would be a race to see what would come first: Winter or the completion of our Angular build.

Well, Ivy knows things about our apps and it always pays its debts. Ivy speeds up our build times significantly. Faster build times mean less stepping away from the computer while we build our apps. 

## 4 - Back to the Future, with AOT!

Remember that time before Angular 9 when we found out we had an [AOT](https://angular.io/guide/aot-compiler) error that surfaced only in Continuous Integration (CI) or, heaven forbid, in production? Hello McFly! That’s about when we want to go back in time and correct our mistakes by running `ng build --prod`. 

Why did this happen? Because prior to Angular 9, the AOT compilation step only ran when we executed using the production flag `ng build --prod`. It seems that AOT compilation would have made the dev builds too slow to be a good experience, so the Angular team opted (thankfully) to only put AOT compilation in the production builds. While this was fine as long as we remembered to run it before pushing or merging (or whatever your CI process is), it certainly had its flaws.

What we wish is that in the future, we can see the AOT errors in all builds. Well, that future is here!

The good news is that Angular 9 brings AOT to the dev build, too! The Ivy compiler makes our builds much faster. So fast that it makes it reasonable to pull AOT into the dev builds (and of course, `ng serve`) without causing significant delays in build times. 

The bottom line is that AOT is now dev and prod. Who cares? We do! AOT errors that never appeared in a dev build used to surprise us when we ran with a prod build. Now that dev and prod use AOT, we’ll find these errors early and we’ll see good error messages explaining how to fix them.

## 5 - The Phantom Template Variable Menace 

There once was a time when we could create phantom variables in our templates - variables that had never been referenced in the template’s associated component. Creating these phantom variables can menace our applications. All of this changes in Angular 9 as we now get a compiler error when we create a template variable that has not been defined in a component.

Let’s take a look at what this means. Imagine we have a template and we set a `villain` variable when a user clicks on a `<div>`. Now, we may have intended for them to set the `hero` model, which exists in the templates’ component. But we might have made a copy and paste error. Or maybe we really wanted to create a `villain` model, in which case we should have defined the model in the component file.

``` html  

<div (click)="villain = { id: 1, name: 'john' }">

```

When we build with Angular 9, this error will be displayed. Notice it tells us that the villain doesn’t exist in the component. It even shows us exactly where to find this code. 

![Error handling in Components](https://images.ctfassets.net/23aumh6u8s0i/7mXFNSasHpo4UbSt5BOXox/9e3ee6d379e6a035e2d346793a3a84b6/component-errors-2)

So what can we do about this? Well, if the intention was to set a hero, now we know we have to change it. If we really need to set the `villain` model in the template, just create the `villain` model in the component. Before Angular 9, this may have gone unnoticed, but now Ivy detects and alerts us about all template-only variables.

## 6 - Brave: An ng update Story

At times running `ng update` with Angular 8 (or previous) is amazingly easy and helpful. And other times, it felt like we were poking a sleeping bear. It’s almost like the magical wisps inside of the Angular CLI were playing games with us. 

Angular 9 now has a vastly improved `ng update` experience. It is more accurate, more consistent, and more transparent. Here are three key reasons why the Angular CLI is now more reliable than ever:

1. It now uses the latest version of the CLI to perform all updates.
2. Now displays a detailed diary depicting exactly what it is doing during the update.
3. Refactors our code where it detects a need to be compatible with the latest version.

Since a detailed diary of the update progress is displayed, we always know what code is being refactored. Plus, we can also check our git changes for any refactored code. Here are three examples of the scenarios that the Angular CLI will refactor for us:

* Update lazy loading syntax to use dynamic imports.
* Removes the `static` flag from dynamic queries. As of Angular 9, the "static" flag defaults to false and is no longer required for our view and content queries.
* Update our services without @Injectable to use `@Injectable`.

This is really convenient, so we do not have to know every new change in Angular 9 (and beyond). The Angular CLI knows these changes, reports to use what changes it is looking for, and then refactors when it finds any places in our code that need those changes.

## 7 - The Legendary Journey of Entry Components

A long time ago, in a time of myth and legend, only one person knew when we needed to define `entryComponents` in our NgModules. Ok, that’s not entirely accurate as many of us have used `entryComponents`. But do we always remember what they do and when they are needed?  Or was that knowledge lost in our mind? With no more hope of resurfacing than that of a lost soul in the Minotaur’s maze.

Lest we forget, this was needed when we used a component (perhaps in code), but it never appeared in a template. Prior to Angular 9, specifying the component in the `entryComponents` array was the recommended way to tell Angular, “Hey, we have a component here!”.

```typescript
@NgModule({
  // ...
  entryComponents: [ModalComponent]
})
export class AppModule {}
```

Here is a scenario where we might have a component that is not referenced in a template. Imagine that we create a `ModalComponent` which shows a modal dialog to the user, letting them select “yes” or “no”. When using Angular Material, we could use the `MatDialog.open()` function and pass it the `ModalComponent` to display to the user. This could be the only place in the app that the component is referenced. Prior to Angular 9, this must be set in the `entryComponents` array in a NgModule. Otherwise, Angular would not know what `ModalComponent` is.

Wow, this is something we probably don’t do that often. However, when we do need this feature, we often spend some time searching Google for how to solve it. 

The good news here is that in Angular 9 there have been changes to the compiler and runtime that make it so we no longer need to specify this in the `entryComponents` array. Angular will find the component on its own. 

The bad news, if we can call it bad news, is that Angular will not remove the component from the `entryComponents` array for us. So we should search our code after updating and manually remove them. Then test … always test. Just in case.

## Upgraded Tooling

One of the best things about Angular is the amazing and helpful ecosystem. When we upgrade to version 9 we really want to make sure we’re using the latest tools that go with Angular. Here are two tools we recommend installing or upgrading:

1. [VS Code](https://code.visualstudio.com/?wt.mc_id=angular9-blog-jopapa) editor
2. [Angular Essentials Extension](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials&wt.mc_id=angular9-blog-jopapa) for Visual VS Code

The Angular Essentials extension includes a set of useful extensions to enhance the development experience with Angular. The one that stands out most is the [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template&wt.mc_id=angular9-blog-jopapa), which adds a lot of features to VS Code, so it knows how to help us write our Angular code. Others include useful Angular snippets, ESLint, and debugging extensions.

<include src="asides/Angular" />

## That’s All Folks!

It looks like we have a lot to look forward to with Angular v9. We have faster build times, a more accurate `ng update`, and Ivy is making smaller bundle sizes, just to name a few! The Angular team has been working countless hours on this version and we can now reap the benefits!

Which is your favorite of those **Magnificent Seven**? Which one will help your project the most? Let us know in the comments below!

---


Angular 9: What’s New?

preston-lamb

Preston is a Software Developer at MotivHealth in Salt Lake City, UT, as well as a course author for Thinkster.io. His focus is mainly on Angular and JavaScript, and he loves to learn new things that help him to build better web applications. He also likes to share the things he learns through blog posts, video courses, and podcasts.

Software Developer at MotivHealth

Preston Lamb

Angular, Auth0, and Netlify are a perfect combination for creating, securing, and deploying your application.

Securing Angular Applications with Auth0 and Deploying to Netlify

oliver-mensah

Software Developer who loves software developer community programs. As a community-driven Software developer, he organizes, speaks and volunteers at tech events.

Software Developer at Agro Innova

Oliver Mensah

In this article, you will learn how to take advantage of Angular Material to create beautiful and modern Angular applications.

Creating Beautiful Apps with Angular Material

indermohan-singh

Indian expat living and working in Vienna, Austria. Besides programming,  I love Music. I sing Bollywood and Indian Classical Music. Perfect by Ed Sheeran is my Go to song for Karaoke. I also like to run and in the process of running a marathon. I am also the author of "Ionic 2 Blueprints" and co-authored "Ionic Cookbook". Apart from that, I am a GuestAuthor at Auth0 and LogRocket Blogs.

Mobile Developer

Indermohan Singh

Learn how to create an Audio Player app using Angular, Material Design and RxJS.

Building an Audio Player app with Angular and RxJS

sambiopic

I'm Director of Developer Relations and a Google Developer Expert for Angular and Web Technologies. I believe anyone who wants to learn to code should be able to learn code and I love teaching. When I'm not coding or writing, you'll find me outside hiking or camping in the beautiful Pacific Northwest.

Director of Developer Relations

Sam Julien

NgRx 8 features improved developer ergonomics, less boilerplate, runtime checks, and easier error handling.


**TL;DR:** NgRx 8 introduces a host of improvements, including `createAction`, `createReducer`, and `createEffect`. These helper functions drastically reduce (no pun intended) boilerplate, which boosts developer productivity.

## NgRx 8: A Massive Win
Shortly after the [release of Angular 8](https://auth0.com/blog/angular-8-differential-loading/), the NgRx team released their own version 8. It was a big release full of fantastic improvements to the library. While I'll let you read the [official release announcement](https://medium.com/ngrx/announcing-ngrx-version-8-ngrx-data-create-functions-runtime-checks-and-mock-selectors-a44fac112627) by [Tim Deschryver](https://twitter.com/tim_deschryver), here are the highlights:

- [`angular-ngrx-data`](https://github.com/johnpapa/angular-ngrx-data) by [John Papa](https://twitter.com/John_Papa) and [Ward Bell](https://twitter.com/wardbell) is now officially part of NgRx as [`@ngrx/data`](https://github.com/ngrx/platform/tree/master/modules/data)
- [Runtime checks](https://ngrx.io/guide/store/configuration/runtime-checks) are now available to check that state and actions aren't mutated and are serializable (these replace the `ngrx-store-freeze` package)
- Fully isolated unit tests are now available thanks to [mock selectors](https://ngrx.io/guide/store/testing#using-mock-selectors)
- There have been a couple of improvements to `@ngrx/router`, including a new [minimal `routerState` option](https://next.ngrx.io/guide/router-store/configuration)
- There are now NgRx snippets in John Papa's [Angular Snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) VS Code extension
-  [Alex Okrushko](https://twitter.com/AlexOkrushko) and [Wes Grimes](https://twitter.com/wesgrimes) have joined the NgRx team (well deserved!)
  
I've saved the best for last, though, and it's the subject of this article:

- `createAction`, `createReducer`, and `createEffect` helper methods *drastically* reduce boilerplate and improve development time

We're going to dig into what that means and how these functions will make your life better, but before we do that, we should make sure you know how to update to version 8 to take advantage of these new features.

<include src="TweetQuote" quoteText="NgRx 8 features improved developer ergonomics, less boilerplate, runtime checks, and easier error handling!"/>

## How to Update to NgRx 8
In order to update to NgRx 8, you'll need to be sure your project is updated to Angular 8. You can update your Angular CLI globally by running this command:

```bash
npm install -g @angular/cli
```

In a project that needs to be updated to Angular 8, you can run the following:

```bash
ng update @angular/cli @angular/core
```

You can then run the following to update to NgRx 8:

```bash
ng update @ngrx/store
```

When working on this article, I ran into a bit of a problem with the TypeScript version. It seems like there was a conflict between the required versions, so I had to manually lock in version `3.4.3`.

If you're using `ngrx-data`, you can easily migrate to `@ngrx/data` with this command:

```bash
ng add @ngrx/data --migrate
```

For a more thorough explanation of this process, Wes Grimes has written a great article on how to [upgrade to Angular 8 and NgRx 8](https://dev.to/angular/how-to-upgrade-your-angular-and-ngrx-apps-to-v8-4iip). For more specific details on migration to NgRx 8, check out the official [migration guide](https://ngrx.io/guide/migration/v8). Finally, don't forget that Angular has an [official update tool](https://update.angular.io) to help with moving to new versions of Angular.

With that out of the way, let's get to the fun stuff!

## createExcitement: The New NgRx 8 Helper Functions
One of the most common complaints about NgRx (and the Redux pattern in general) is that there is too much boilerplate. Once you dig into the library and the pattern, though, you start to understand that the initial setup is a completely worthwhile investment when you're managing state in large, complex applications (which is what NgRx is designed for!).

That being said, the NgRx team has listened to the developer community and made some huge improvements in "developer ergonomics" (a fancy way to say making it easier to write code) with version 8. Most of these improvements are due to a refactor of how actions, reducers, and effects are set up. There are now helper methods that are easy to understand and take less code to write. Let's take each of them in turn.

### createAction
As my friend [Mike Ryan](https://twitter.com/MikeRyanDev) says, "Actions are the gluten of the NgRx loaf." Indeed, they are the core of any NgRx application. Great care and attention are required in deciding what actions your app needs. Unfortunately, actions take a lot of code to set up. Just look at this excerpt from the application we built in my original [NgRx Authentication](https://auth0.com/blog/ngrx-authentication-tutorial/) tutorial:

```typescript
// src/auth/actions/auth.actions.ts (excerpt)
export enum AuthActionTypes {
  Login = '[Login Page] Login',
  LoginComplete = '[Login Page] Login Complete',
  LoginFailure = '[Auth API] Login Failure'
}

export class Login implements Action {
  readonly type = AuthActionTypes.Login;
}

export class LoginComplete implements Action {
  readonly type = AuthActionTypes.LoginComplete;
}

export class LoginFailure implements Action {
  readonly type = AuthActionTypes.LoginFailure;

  constructor(public payload: any) {}
}

export type AuthActions =
  | Login
  | LoginComplete
  | LoginFailure;
```

This excerpt only contains three of the eight actions in that application and it's a very small app! As Alex Okrushko points out in his excellent article on [the new action creators](https://blog.angularindepth.com/ngrx-action-creators-redesigned-d396960e46da), enums and strings also make it very difficult to see where actions are used. And don't get me started on those union types! You can see why a change was needed.

Enter the new `createAction` method. With `createAction`, you pass in the action name along with an optional `props` function with a specified argument type as a destructured object. 

Yikes, that's a lot of jargon. Let me explain that with an example. 

Let's say I have an action called `booksLoaded` that needs to receive an array of books (`books`) of type `Book[]` when created. My `props` function for `createAction` would be `props<{ books: Book[] }>()`. (With [destructuring](https://auth0.com/blog/a-rundown-of-es6-features/#ECMAScript-2015-Features), `{ books }` is the equivalent of `{ books: books }`.)  

```typescript
export const booksLoaded = createAction(
  '[Books API] Books Loaded', 
  props<{ books: Book[] }>()
  );
```

That way, when I create a new action of this type, I can directly pass the array of books into the constructor: `new booksLoaded({ booksFromServer })`.

So, the above authentication actions would be refactored like so:

```typescript
export const login = createAction('[Login Page] Login');

export const loginComplete = createAction('[Login Page] Login Complete');

export const loginFailure = createAction(
  '[Auth API] Login Failure', 
  props<{ error: any }>()
);
```

Mind-blowing, right?

There are two things to notice here. First, notice that the action constant names have gone from Pascal case (`LoginFailure`) to camel case (`loginFailure`). This is due to actions changing from classes to functions and is a standard JavaScript style convention. Don't let that trip you up, but be mindful of that in refactoring.

Second, notice that I renamed `payload` to `error` because it is more descriptive. (I could have also given it a new type like `Error`, but it doesn't matter much in this example). While this is a great new feature with the redesigned action creator function, be careful of doing this. Do a search through your code to avoid breaking other parts of the app relying on a `payload` property (a great reminder from [Gregor Woiwode](https://medium.com/@gregor.woiwode/ngrx-8-meet-the-new-upcoming-factory-methods-of-the-next-major-release-a97a079cc089)). If you rename `payload` in the action creator, be sure to change it everywhere.

There's one last great feature of the new action creators. You can now specify a default value of a `prop` argument. For example, in the above `loginFailure` action, I could provide a default error message:

```typescript
export const loginFailure = createAction(
  '[Auth API] Login Failure',
  (errorMessage = 'Error logging in') => ({ payload: { errorMessage }})
);
```

This would be a great backup in case the server fails to provide an error message for some reason.

To add one of these new action creators to your application, you can use the [updated action schematic](https://ngrx.io/guide/schematics/action):

```bash
ng generate @ngrx/schematics:action myNewAction --creators
```

This command will generate a new file called `my-new-action.actions.ts` containing a constant named `loadMyNewAction` using the `createAction` function.

<include src="TweetQuote" quoteText="The new action creators of NgRx 8 drastically reduce (no pun intended) development time when adding new features!"/>

### createReducer
The new way to create actions is incredible, but it doesn't stop there. Reducers are also now easier to write thanks to the `createReducer` method.

Here's a typical example of a reducer you might find in a burger restaurant app:

```typescript
export function reducer(
  state = initialState,
  action: BurgerApiActionsUnion
): State {
  switch (action.type) {
    case BurgerApiActionTypes.LoadBurgerCollection: {
      return { 
        ...state
        loading: true
      };
    }

    case BurgerApiActionTypes.LoadBurgersSuccess: {
      return { 
        loaded: true,
        loading: false,
        ids: action.payload.map(burger => burger.id)
      };
    }

    default: {
      return state;
    }
  }
}
```

This is a simple example, but as it scales up, you'll have a ton of case statements that will make understanding this code difficult. It gets messy fast (just like eating burgers, really).

With NgRx 8, you can use `createReducer` instead:

```typescript
const burgerReducer = createReducer(
  initialState,
  on(BurgerApiActionTypes.loadBurgerCollection, state => ({
    ...state,
    loading: true
  })),
  on(BurgerApiActionTypes.loadBurgersSuccess, (state, { burgers }) => ({
    loaded: true,
    loading: false,
    ids: burgers.map(burger => burger.id)
  }))
);
```

Much cleaner, isn't it? Each case uses the `on` function that receives the action and a function to modify state. 

The `on` function can also take multiple actions, making it easy to grow the reducer function. For example, it's common for the success of a record addition and the failure of a record deletion to result in the same state. An example of this is when an app state includes both a collection of data (which should match what's on the server) and an array of IDs for faster lookup (which is maintained in memory). In order to make sure the array of IDs always matches what's on the server, it's necessary to account for failures of adding or deleting records.

Here's an example of that with the burger application:

```typescript
const burgerReducer = createReducer(
  // ...other cases,
  on(
    CollectionApiActions.addBurgerSuccess,
    CollectionApiActions.removeBurgerFailure,
    (state, { burger }) => {
      if (state.ids.indexOf(burger.id) > -1) {
        return state;
      }
      return {
        ...state,
        ids: [...state.ids, burger.id],
      };
    }
  ),
  on(
    CollectionApiActions.removeBurgerSuccess,
    CollectionApiActions.addBurgerFailure,
    (state, { burger }) => ({
      ...state,
      ids: state.ids.filter(id => id !== burger.id),
    })
  )
);
```

Using the same reducer cases for multiple actions makes it easier to understand what's happening in this application in addition to ensuring the `ids` array doesn't get out of sync with the server.

One other important note on using `createReducer`. As of this writing, the Angular ahead-of-time (AOT) compiler (the compiler used for producing production builds) [does not support function expressions](https://angular.io/guide/aot-compiler#function-calls-are-not-supported). It's therefore necessary to wrap the `createReducer` function in an exported function like so:

```typescript
export function reducer(state: State | undefined, action: Action) {
  return burgerReducer(state, action);
}
```

Finally, as with `createAction`, there's a [schematic for the new reducer style](https://ngrx.io/guide/schematics/reducer):

```bash
ng generate @ngrx/schematics:reducer myNewReducer --creators
```

This schematic will generate a new file called `my-new-reducer.reducer.ts`. It will include both the `createReducer` constant and the exported `reducer` function for AOT.

### createEffect
Finally, `createEffect` is here to improve writing effects. Previously, effects used an `@Effect()` decorator. While this was fine, it was sort of the odd bird compared to all of the other more functional approaches NgRx takes.

Going back to the burger application, here's an example of the old style of effect: 

```ts
@Effect()
loadBurgerCollection$ = this.actions$.pipe(
  ofType(BurgerApiActionTypes.LoadBurgerCollection),
  switchMap(() =>
    this.burgerService.getAllBurgers().pipe(
      map((burgers: Burger[]) =>
        BurgerApiActions.LoadBurgersSuccess({ burgers })
      ),
      catchError(error =>
        of(BurgerApiActions.LoadBurgersFailure({ error }))
      )
    )
  )
);
```

The new `createEffect` helper simplifies this a bit and standardizes it to look more like creating actions, reducers, and selectors:

```typescript
loadBurgerCollection$ = createEffect(() =>
  this.actions$.pipe(
    ofType(BurgerApiActionTypes.loadBurgerCollection),
    switchMap(() =>
      this.burgerService.getCollection().pipe(
        map((burgers: Burger[]) =>
          BurgerApiActions.loadBooksSuccess({ burgers })
        ),
        catchError(error =>
          of(BurgerApiActions.loadBooksFailure({ error }))
        )
      )
    )
  )
);
```

> Remember, the actions have changed from Pascal case to camel case since they've changed from classes to functions.

There's also a small modification in effects that don't dispatch new actions. Here's an effect that fires after a burger is successfully ordered, which redirects back to the home page and doesn't dispatch a new action:

```typescript
@Effect({ dispatch: false })
orderBurgerSuccess$ = this.actions$.pipe(
  ofType(BurgerApiActions.OrderBurgerSuccess),
  tap(() => {
    this.router.navigate(['/']);
  })
);
```

Using the new `createEffect` function, you can refactor this code to the following:

```typescript
orderBurgerSuccess$ = createEffect(() => 
  this.actions$.pipe(
    ofType(BurgerApiActions.LoginSuccess),
    tap(() => this.router.navigate(['/']))
  ),
  { dispatch: false }
);
```

That second argument of the `createEffect` function is for passing in metadata to control how the effect operates.

One final word on effects in NgRx 8. Previously, the team found that developers were either forgetting to handle errors in their effects or handling them incorrectly. To help with this, effects now automatically resubscribe on errors (instead of completing) so they continue to listen to dispatched actions. This is extremely helpful but it can also be disabled if you start noticing weird behaviors. Simply pass `{ resubscribeOnError: false }` as the second argument of the `createEffect` function. 

As with the other two examples, there's a [schematic to add the new style of effect](https://ngrx.io/guide/schematics/effect) to your application:

```bash
ng generate @ngrx/schematics:effect myNewEffect --creators
```

This command will generate a new file called `my-new-effect.effects.ts` that imports `createEffect` and creates a class marked with the `Injectable` decorator.

## Aside: You Might Need Authentication (Even Though "You Might Not Need NgRx")
Most applications these days are going to need some sort of identity management to persist user profile information and handle authentication and authorization. To implement an identity management strategy in your NgRx application, some of the syntax has changed with version 8, but the core principles remain the same. You'll use actions for logging in and logging out and effects for calling your authentication service, while your reducer handles modifications to state like logged in status and profile attributes.

I cover this at length in my [NgRx authentication tutorial](https://auth0.com/blog/ngrx-authentication-tutorial/). Go ahead and <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free Auth0 account</a> and dig in to the tutorial to get started.

![Auth0's Lightweight Universal Login modal window](https://images.ctfassets.net/23aumh6u8s0i/54lZ5srDBAM0dqWSRkdxXk/f4260dcf2af6e7b5b4a52c62769e0745/lightweight-login)

By the way, I'd love to hear how it goes while using the new helper functions in version 8 of NgRx, so reach out on our [Community Forum](https://community.auth0.com/) any time.

## Conclusion
I don't know about you, but I couldn't be happier with NgRx 8. This is a team of volunteers who are making great software and even writing [phenomenal docs](https://ngrx.io/docs). With all of the improvements in this version, the future is looking bright. Give it a test drive and let me know how it goes!


Faster App Development with NgRx 8

Auth0 has a new SDK for securing single page applications with industry best practices.


We are excited to announce the release of our new JavaScript SDK for Single Page Applications (SPAs) called [auth0-spa-js](https://auth0.com/docs/libraries/auth0-spa-js).

## Why a New SDK?
The [`auth0.js`](https://github.com/auth0/auth0.js) library has been our default browser-based SDK for the last few years and has been a key part of our product and success. It has over 100K+ weekly downloads and is used by almost every Auth0 customer in one way or the other.

Over this time, we have developed a large set of capabilities in the core product. As the platform has moved forward, `auth0.js` has grown in size and capabilities. While `auth0.js` is an extremely powerful SDK that can handle a large number of different scenarios, this versatility comes at a price.

We went back to the drawing board and we re-imagined how a web platform SDK should work for the most common scenarios developers will be implementing. This new SDK:

- integrates with [Universal Login](https://auth0.com/docs/universal-login), our flagship login experience
- is much easier to integrate into Single Page Apps and requires less code
- abstracts the developer from standards and protocols
- frees the developer from having to specify the grant or other protocol details, manage token expiration and renewal, or store and cache tokens
- follows industry and service best practices and protects developers from security pitfalls
- weights around 7kb minified and gzipped

We're excited about these changes and hope our customers and [developer community](https://community.auth0.com/) find this new SDK easy to use yet still powerful and secure.

<include src="TweetQuote" quoteText=".@auth0 has a new SDK to keep SPAs secure called auth0-spa-js. Check it out!"/>

## When to Use `auth0-spa-js` (and When Not to)
The new SDK is designed for use in SPAs to keep them secured using industry best practices.

The OAuth2 working group has published a new general [best current practices document](https://tools.ietf.org/html/draft-ietf-oauth-security-topics-11) for using OAuth2 to invoke APIs from Single Page Applications. The recommendation is now to use the authorization code grant with Proof Key for Code Exchange (PKCE), as opposed to using the implicit grant as described in the original OAuth2 spec. You can find more details in [this blog post from our Principal Architect Vittorio Bertocci](https://auth0.com/blog/oauth2-implicit-grant-and-spa/).

This new JavaScript SDK implements the authorization code grant with PKCE for authentication, so by using this new library, you will be following the latest industry best practices when it comes to security in Single Page Applications.

Don't worry, we will not be discontinuing support of `auth0.js`. In fact, if you still use embedded login or need to call the [management API](https://auth0.com/docs/api/info#management-api-v2) or [authentication API](https://auth0.com/docs/api/info#authentication-api), you'll want to stick with `auth0.js`. We encourage you to switch to `auth0-spa-js` if you're using Universal Login in a SPA.

![Auth0's Lightweight Universal Login modal view](https://images.ctfassets.net/23aumh6u8s0i/54lZ5srDBAM0dqWSRkdxXk/f4260dcf2af6e7b5b4a52c62769e0745/lightweight-login)

## How to Use Auth0 SPA JS SDK
So how do you start using the new SDK? Here are some steps for vanilla JavaScript that can then be applied to the framework of your choice.

### Installation
To use the new SDK, first install it from npm:

```bash
npm install @auth0/auth0-spa-js
```

Alternatively, you can include it in your project using our CDN:

    
    <script src="https://cdn.auth0.com/js/auth0-spa-js/1.0/auth0-spa-js.production.js"></script>
     

### Create the client
Once `auth0-spa-js` is added to your project, you'll need to create an instance of the Auth0 client in your application. Ideally, you should have only one instance of the client. Do this before rendering or initializing your application.

You can do this using async/await:

```javascript
//with async/await
const auth0 = await createAuth0Client({
  domain: '<AUTH0_DOMAIN>',
  client_id: '<AUTH0_CLIENT_ID>'
});
```

Or with promises:

```javascript
//with promises
createAuth0Client({
  domain: '<AUTH0_DOMAIN>',
  client_id: '<AUTH0_CLIENT_ID>'
}).then(auth0 => {
  //...
});
```

### Logging in
Adding the ability to log in to your application is easy. Given the following button:

    
    <button id="login">Click to Log In</button>
    

You can add a click handler and then call the [`loginWithRedirect()`](https://auth0.github.io/auth0-spa-js/classes/auth0client.html#loginwithredirect) method:

```javascript
document.getElementById('login').addEventListener('click', () => {
  return auth0.loginWithRedirect();
});
```

Once the user is redirected back to the app after authenticating with Auth0, your app will need to call [`handleRedirectCallback()`](https://auth0.github.io/auth0-spa-js/classes/auth0client.html#handleredirectcallback): 

```javascript
await auth0.handleRedirectCallback();
```

This is what parses the result from Auth0, stores the tokens, and sets up the session. You'll then be able to get the user or token as needed:

```javascript
const user = await auth0.getUser();
const token = await auth0.getTokenSilently();
```

### Calling an API
You can also use the SDK to silently get a token and then use that token in a call to an API.

Given the following button:

    
    <button id="call-api">Call an API</button>
    

You'll add a click handler, call [`getTokenSilently()`](https://auth0.github.io/auth0-spa-js/classes/auth0client.html#gettokensilently), and then use the returned token in your API call.

Here it is with async/await:

```javascript
//with async/await
document.getElementById('call-api').addEventListener('click', async () => {
  const accessToken = await auth0.getTokenSilently();
  const result = await fetch('https://myapi.com', {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${accessToken}`
    }
  });
  const data = await result.json();
  console.log(data);
});
```

And with promises:

```javascript
//with promises
document.getElementById('call-api').addEventListener('click', () => {
  auth0
    .getTokenSilently()
    .then(accessToken =>
      fetch('https://myapi.com', {
        method: 'GET',
        headers: {
          Authorization: `Bearer ${accessToken}`
        }
      })
    )
    .then(result => result.json())
    .then(data => {
      console.log(data);
    });
});
```

If there's a valid token stored, `getTokenSilently` will return it. Otherwise, it opens an iframe with the `/authorize` URL using the parameters provided as arguments and returns the token.

### Logging out
Finally, logging out of your application is a matter of adding an event handler to your log out button and then calling Auth0's [`logout()`](https://auth0.github.io/auth0-spa-js/classes/auth0client.html#logout) method.

Here's the button:

    
    <button id="logout">Log Out</button>
    

And here is the click handler and the call to `logout()`:

```javascript
document.getElementById('logout').addEventListener('click', () => {
  auth0.logout();
});
```

## Behind the Curtain
Since many developers (myself included) are wary of black boxes, let's take a moment to look at the protocols behind the new SDK.

While our intent is to abstract away all the implementation details in this new SDK so you don't need to worry about them, identity geeks will be pleased to know that `auth0-spa-js` is compliant with OAuth 2.0 specifications:

* `loginWithRedirect` uses [authorization code with PKCE](https://tools.ietf.org/html/rfc7636)
* `loginWithPopup` uses authorization code with PKCE + [`web_message`](https://tools.ietf.org/html/draft-sakimura-oauth-wmrm-00)
* `getTokenSilently` uses authorization code with PKCE + `web_message`

Auth0 takes our commitment to security best practices seriously. Luckily, we do all the heavy lifting so you don't have to!

## Where to Go Next
To learn more about using `auth0-spa-js`, check out the Auth0 Single Page Applications [SDK introduction documentation](https://auth0.com/docs/libraries/auth0-spa-js), [repository](https://github.com/auth0/auth0-spa-js), and [the SDK's full documentation](https://auth0.github.io/auth0-spa-js/index.html). There are also [Quickstarts](https://auth0.com/docs/quickstarts) that will walk you through integration step-by-step for popular front-end frameworks like React and Angular. We hope you're as excited about this new SDK as we are, and look forward to hearing feedback from the [developer community](https://community.auth0.com/)!

<include src="asides/AboutAuth0" />



Announcing the General Availability of the Auth0 SPA JS SDK

Auth0’s Sam Julien and Kim Maida spoke at ngVikings 2019 in Copenhagen.

ngVikings 2019: A Great Time with the Nordic ngCommunity

Angular 8 now sends separate bundles to legacy browsers by default.


**TL;DR:** Angular 8 is here! Learn all about one of its coolest new features: differential loading. Differential loading lets you serve up different bundles to different browsers and make your application even faster!

Angular 8 has only been out for about a week at the time I’m writing this, but there’s already been 17,000 “What’s New” articles published. Rather than throw my own take on the pile, I’ll refer you to the [official Angular release announcement](https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27) but here are the high points:

- No, Ivy isn’t ready yet (it’s an opt-in preview).
- No, [Bazel](https://bazel.build/) isn’t ready yet (it’s an opt-in preview).
- [Builders](https://blog.angular.io/introducing-cli-builders-d012d4489f1b) allow you to extend and customize the CLI. For example, you’re now able to [deploy to Firebase](https://github.com/angular/angularfire2/pull/2046) and other providers from the CLI.
- There’s [improved support for web workers](https://v8.angular.io/guide/web-worker), such as the ability to generate them from the CLI and use them in your application.
- Rather than using the “magic string” syntax specific to Angular to do lazy loading, you’ll be able to use the [standard `import()` syntax](https://next.angular.io/guide/deprecations#loadchildren-string-syntax). You can even perform this automatically for your app with the [`angular-lazy-routes-fix`](https://github.com/phenomnomnominal/angular-lazy-routes-fix) tool.
- The new [unified location service](https://v8.angular.io/guide/upgrade#using-the-unified-angular-location-service) improves migration from the AngularJS `$location` service. 
- The Angular team has created a simplified [Getting Started Guide](https://next.angular.io/getting-started).
- There’s a new [Deprecation Guide](https://v8.angular.io/guide/deprecations) to assist users with updating Angular.
- [Differential loading](https://v8.angular.io/guide/deployment#differential-loading) is turned on in the CLI by default.

In this article, I want to dive into that last one: differential loading. What is that? Why does it matter? What do I need to do about it (if anything)?

<include src="TweetQuote" quoteText="Angular 8 is here! It features differential loading, better support for web workers, and much more."/>

## What is Differential Loading?
Like most buzzwords in tech, the term “differential loading” is completely opaque about what it actually *means*. In a nutshell, differential loading means to send newer, flashier code to newer browsers and stable legacy code to legacy browsers. This generally translates into two things: modern syntax and polyfills. On a newer browser that supports recent syntax changes in JavaScript (such as arrow functions in ES2015 or async functions in ES2017), it’d be great to ship to code as-is with as few polyfills as possible to keep download time low. On legacy browsers, we’ll need both transpiled code and more polyfills to make things work. This way, newer browsers aren’t punished for legacy browsers by having to load a massive bundle, but legacy browsers aren't left in the dust.

Sounds cool, right? How does this work?  Modern browsers have the ability to interpret a `module` type in the `script` HTML tag and to ignore a `nomodule` attribute. It looks like this:

    
    <script src="fancyModernBundle.js" type="module"></script>
    <script src="legacyBundle.js" nomodule></script>
    
    
When a modern browser (like a new version of Chrome) runs across this, it will know to only load `fancyModernBundle`. Likewise, when an older browser sees this, it won’t recognize the `module` type and only load `legacyBundle`.

![Diagram of how differential loading in Angular 8 works](https://images.ctfassets.net/23aumh6u8s0i/23llHk1LLwhZvAU9rFD1aJ/43ae43d1cfa8b4cce88534afa2ae00f2/differential-loading-2)
[Source](https://cdn.auth0.com/blog/blog/ng-conf-2019)


## How You Normally Set Up Differential Loading
You’ve probably surmised by now that, in order to take advantage of differential loading, you’ll need to divide up your JavaScript code based on browser support. “Easy,” you think, “I’ll just plug the transpiled code into the `nomodule` tag and the original into the `module` tag.” Well, it’s not quite that simple. Unfortunately, not all browsers support all the same features of JavaScript.  Beyond that, your users may not use the same browser you do. In fact, if your users are around the world, they may not even use browsers you’ve heard of &mdash; Opera Mini has over [100 million users in Africa](https://blogs.opera.com/news/2016/11/state-of-the-mobile-web-africa-2016/)!

It turns out that splitting up your bundle for differential loading is a combination of art and science. To pull this off, your bundler (like Webpack) and your transpiler or compiler (like Babel or TypeScript) must work together to divide up your code and add the correct polyfills in the right places. Luckily, there’s a configuration tool called [`browserslist`](https://github.com/browserslist/browserslist) that does nearly all of the heavy lifting for you.

Browserslist works with tools like Babel and is essentially a configuration tool that accepts query strings, which it runs against [Can I Use](https://caniuse.com/) data. Tools use Browserslist through either an entry in `package.json`:

```json
// package.json
"browserslist": [
  "last 1 version",
  "> 1%",
  "maintained node versions",
  "not dead"
]
```

Or in a separate config file called `.browserslistrc`:

```text
// .browserslistrc
# Browsers that we support

last 1 version
> 1%
maintained node versions
not dead
```

Both of these formats contain the same query:

- `last one version`: the last version for each browser
- `>1%`: browsers versions selected by global usage statistics
- `maintained node versions`: all Node.js versions, which are [still maintained](https://github.com/nodejs/Release) by Node.js Foundation
- `not dead`: excludes "dead" browsers, which are the same as those from a `last 2 versions` query, but with less than 0.5% in global usage statistics and without official support or updates for 24 months

Browserslist also has a `defaults` query that works for many people. They’ve got [great explanations of the queries on their GitHub repo](https://github.com/browserslist/browserslist#full-list) and there’s even a site called [browserl.ist](https://browserl.ist) that lets you plug in a query and see a visual list of supported browsers.  

![Testing browserslist defaults queries in the browser](https://images.ctfassets.net/23aumh6u8s0i/p8WJI1Fdo0orzJhcc5pSh/a72ff535d93481b8d7cab3a7dd3d7b6d/browserslist)

## Differential Loading in Angular 8
Ordinarily, you’d need to configure your bundler and Babel or TypeScript to use `browserslist` to split up your code into the correct bundles. With version 8 of the Angular CLI, you actually get this set up right out of the gate with nothing for you to do! This is awesome because differential loading saves on average 7-20% in bundle size for Angular applications in modern browsers. In fact, [angular.io](https://angular.io/) saved over 40kB of its initial bundle size for modern browsers when the team enabled differential loading.

Want to check this out for yourself? It’s really easy!

<include src="TweetQuote" quoteText="In Angular 8, differential loading saves on average 7-20% in bundle size in modern browsers!"/>

### Updating to Angular 8
First, make sure you have the latest version of the Angular CLI installed:

```bash
npm install -g @angular/cli
```

If you’d like to try this on an existing project, you can update it to Angular 8 by running:

```bash
ng update @angular/cli @angular/core
```

> Check out the [Angular Update Guide](https://update.angular.io/) if your app requires more heavy lifting to update, like if it’s currently in version 6 or lower.

Otherwise, you can create a new application:

```bash
ng new diff-loading
```

Follow the prompts about routing and styling and then you’re good to go!

### Configuration and building
If you open the new project in your favorite editor, you’ll notice a new file called `browserslist`. It contains the following by default:

```text
// browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.
```

You can adjust this list to match better with your own user demographics.

> **One very important note about this:** See that `not IE 9-11` part? If you need to support those browsers, you can remove the `not`, but it comes at a price. Those versions of Internet Explorer can’t take advantage of differential loading, so it will be disabled.

If you open `tsconfig.json`, you’ll see a particularly big change in the `target` property: it’s set to `es2015` by default instead of `es5`. 

Now that you’ve seen where the configuration lives, build the application with this command:

```bash
ng build --prod
```

After it’s done, open up `dist/index.html` and notice the `script` tags:

    
    <script src=“runtime-es2015.858f8dd898b75fe86926.js” type=“module”></script>
    <script src=“polyfills-es2015.e954256595c973372414.js” type=“module”></script>
    <script src=“runtime-es5.741402d1d47331ce975c.js” nomodule></script>
    <script src=“polyfills-es5.405730e5ac8f727bd7d7.js” nomodule></script>
    <script src=“main-es2015.63808232910db02f6170.js” type=“module”></script>
    <script src=“main-es5.2cc74ace5dd8b3ac2622.js” nomodule></script>
    

See all those `module` and `nomodule` instances? The Angular CLI did all that for you!

### Differential Loading in Angular, in action
Now you just need to see it in action. Install a simple server like `http-server`:

```bash
npm install -g http-server
```

Then, within your project folder, serve up the project inside the `dist` folder:

```bash
http-server dist/diff-loading/
```

Open Chrome or another modern browser and head to the address of the server (on my machine it’s `http://192.168.0.4:8080` but it may be different for you). Open up the network tab of the developer tools and refresh the page. You should see only the scripts that include `es2015` in the name!

![Angular differential loading success in Chrome in dev tools](https://images.ctfassets.net/23aumh6u8s0i/6DlabdkvNyGCaj7E7NH7ZT/d8aefdb68950a3af21681c2b18dab378/diff-loading-chrome2)

### Other settings
One quick note before I end this tutorial. If you change the different configurations, there are four different scenarios you could end up with:

- A single ES5 build (differential loading disabled, `target` is `es5`)
- Single ES5 build with conditional polyfills (differential loading enabled, `target` is `es5`)
- Single ES2015 build (differential loading disabled, `target` is `es2015`)
- Two builds with conditional polyfills (differential loading enabled, `target` is `es2015`)

To read more, check out the [official documentation](https://angular.io/guide/deployment#differential-loading).

## Conclusion
Angular 8 brings lots of great new stuff to Angular, including differential loading. I hope you’ve enjoyed this look into what differential loading is, how it works, and how to use it in Angular 8. See you next time!

<include src="asides/Angular" />


A Guide to Angular 8's Differential Loading

ana-ribeiro

Ana Ribeiro

This series shows how to create a simple, full-stack web application with Angular, TypeScript, and Nest.js. Part 1: Developing the backend API with Nest.js.

Full-Stack TypeScript Apps - Part 1: Developing Backend APIs with Nest.js

Auth0’s Sam Julien and Kim Maida spoke at ng-conf 2019 in Salt Lake City.

The State of Angular: ng-conf 2019

725ee191354be8a85ea104735c7f9264

Software Engineer, Open Source Enthusiast, Tactical & Stealth Gamer, Sport Shooter, Motor Biker, interested in InfoSec, AppSec, Linux, Cyberpunk.

Enterprise Solutions Engineer

Mathias Conradt

Discover how to set up and use German identity provider netID and integrate it using Custom Connections



## Purpose

The purpose of this sample project is to demonstrate how a web developer, using Auth0, can add the identity provider netID as an option for their end users to signup and login to their web applications.

![netID and Auth0 identity and authentication integration](https://images.ctfassets.net/23aumh6u8s0i/2rCEM5yhY3xoh4uYavsT0x/928c2056500c7ab57e2eb496577290e3/netid_splash-02)

[Photo by Daria Nepriakhina on Unsplash](https://unsplash.com/photos/_XR5rkprHQU)

## About netID

_**netID**_ is a European identity provider.

The European netID Foundation was founded in March 2018 by Mediengruppe RTL Deutschland, ProSiebenSat.1 and United Internet. Its aim is to establish the netID single sign-on as a European alternative to US providers. With netID, users can organize their consent to the use of internet services (opt-ins) transparently and in compliance with data protection regulations. To this end, the foundation has developed an open standard that enables users from all sectors to access all internet services of partners of the European netID Foundation with the same log-in. Right from the start which focuses the initial core market Germany, 38 million accounts covering roughly about 60% of the Germany online population are ready to be used.

- [https://netid.de/](https://netid.de/)
- [https://enid.foundation/](https://enid.foundation/)

Auth0 customers can add netID as a custom social connection alongside other social logins. netID is primarily an identity provider (IdP) focused on frictionless and secure login, rather than on bundling several services into one platform. This has security benefits, and gives consumers more visibility over how and where their data is shared. For these reasons, netID is an especially great option for companies in the DACH region (Germany, Austria, Switzerland) where consumers demand greater control of their personal information online.

## Creating a netID Service

### Prerequisites

We assume that you already have registered an Auth0 account and set up a tenant. If not, <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free Auth0 account here</a>.

Also, we assume that you already have a client app setup in Auth0. If not, you can refer to the steps and screenshots [further below](#auth0-backend).

Furthermore, we assume that you have already registered a service provider account at netID. If not, [register a netID account here](https://developer.netid.de/register).

### netID configuration

To start, log in into the [netID Developer Portal](https://developerzone.netid.de/developerportal/index.html). Create a **Dienst** (service) for which you want to leverage the netID single sign-on. Select **Dienst** in the menu, click **Dienst hinzufügen** (Add service) and fill in the required details in the following screen. [Read the detailed documentation here](https://developerzone.netid.de/developerportal/dienste/dienst-anlegen.html#indexlink_help_developerportal_dienste) if you need further information.

A sample service could look like this, where the service domain (**Dienst Domain**) is the domain of your customer facing website. Also, links to data privacy information (**URL Datenrichtlinien**) and terms of usage (**URL AGB / Benutzungsbedingungen**) should be supplied:

![Creating a new netID service](https://images.ctfassets.net/23aumh6u8s0i/613X7O0cY0b684t0TopGDl/b2d30ff2f515fbb826ab06cb96437687/netid_create-service-00)

> Note: for testing purposes, you can actually enter any domain and URL values into this form, as they are not technically relevant in order to get the netID integration in Auth0 running

In the end, it should look similar to this:

![Reviewing the details in the netID developer](https://images.ctfassets.net/23aumh6u8s0i/2i1Ql13ESYhb8ZuNHHSTD8/f7625c39badb7588defa49a7ad65dfc7/netid_create-service-01)

Create a **Client** for this service by clicking on **Client hinzufügen** (Add client). [Detailed documation on how to do this](https://developerzone.netid.de/developerportal/clients/client-anlegen.html#indexlink_help_developerportal_clients) is available in the [netID Developer Portal](https://developerzone.netid.de/developerportal/index.html). It's critical to set the proper Auth0 callback URL for your tenant. The Auth0 Callback URL is `https://<tenant>.auth0.com/login/callback` where `<tenant>` needs to be replaced with your Auth0 tenant name.

Sample configuration:

![Sample configuration for a netID client](https://images.ctfassets.net/23aumh6u8s0i/4gDaCj5Acfwb2lrLi0PhVP/97d9dd32937d8247b16d0c80d5bd7abb/netid_create-client-sample)

> Note: the values here should be adjusted to your needs, especially "Callback URL", which needs to point to your Auth0 tenant and region

In the end, it should look similar to this:

![Creating a new netID client](https://images.ctfassets.net/23aumh6u8s0i/7J55Z734Wk0pArNqPALqPF/7129e9937cef20e4614fe972bc962406/netid_create-client-02-new)

Once the client is created it will initially run in a sandboxed mode, which means it can only be used with whitelisted netID-Accounts (email addresses).

In order to successfully run through the initial integration add a test user (email address) to the whitelist by selecting **Testnutzer hinzufügen** (Add Test-Account), outlined [on the developer portal](https://developerzone.netid.de/developerportal/testnutzer/testnutzer-anlegen.html). Up to 10 accounts can be whitelisted per sandboxed client.

Finally, find the **Client ID** and **netID Token - Sandbox** (later referred to as **client secret**) for the Auth0 configuration by expanding the client details, as shown in the following image:

![Viewing the client details of the netID app](https://images.ctfassets.net/23aumh6u8s0i/5yvbhrEWwtzyJFNnIQJlRk/5b8a29361be8247ef3f3e49618c6e765/netid_client-details-01-new)

## Creating a Custom Social Connection in Auth0

To configure Auth0, start by logging in to the [Auth0 Dashboard](https://manage.auth0.com/dashboard). Then, go to **Connections > Social** in the Auth0 Dashboard, scroll to the bottom, and click **Create Custom**.

Next, enter the following values into the configuration screen that appears:

**Connection Name**: `netID`

**Authorization URL**:

```
https://broker.netid.de/authorize?claims={"userinfo":{"birthdate":{"essential":true},"gender":{"essential":true},"email": {"essential":true},"email_verified": {"essential":true},"given_name": {"essential":true},"family_name":{"essential":true}}}
```

> Note: In this URL, you notice the explicit parameter `claims`. This parameter tells Auth0 which claims to ask for from netID. **Please note** &mdash; netID will ignore any data requested via standard scopes (_name, address, ..._) as well as optional/voluntary claims.

netID supports the following claims:

- `gender` &mdash; the gender of the end user
- `given_name` &mdash; first name(s) of the end user
- `family_name` &mdash; Last name(s) of the end user
- `birthdate` &mdash; Date of birth of the end user
- `email` &mdash; email address of the end user
- `email_verified` &mdash; verification status of the email address of the end user
- `address` &mdash; the end user's address
- `country` &mdash; country of the end user's address

You can adjust the claims parameter according to your needs.

**Token URL**: `https://broker.netid.de/token`

**Scope**: `openid`

**Client ID**: `<enter the ClientID you retrieved from netID>`

**Client Secret**: `<enter the Client Secret you retrieved from netID>` (previously referred to as **netID Token - sandbox**)

Copy the following JavaScript snippet into the **Fetch User Profile Script** box:

```javascript
function(accessToken, ctx, cb) {
  request.get('https://broker.netid.de/userinfo', {
    headers: {
      'Authorization': 'Bearer ' + accessToken
    }
  }, function(e, r, b) {
    if (e) return cb(e);
    if (r.statusCode !== 200) return cb(new Error('StatusCode: ' + r.statusCode));
    var profile = JSON.parse(b);
    cb(null, {
      name: profile.given_name + ' ' + profile.family_name,
      family_name: profile.family_name,
      given_name: profile.given_name,
      email: profile.email,
      email_verified: profile.email_verified,
      birthdate: profile.birthdate,
      gender: profile.gender,
      user_id: profile.sub
    });
  });
}
```

### Authorization header

Since netID requires _Basic Authentication_ for authentication, but custom social connections submit the credentials via post body per default, we need to create a custom header for the Authorization and add it to the configuration.

The hash is created by base64-encoding the `clientID` and `clientSecret` concatenated with a `:`. So the pseudo code to generate this would be:

`base64encode(clientId + ":" + clientSecret)`

An [online base64 encoding tool](https://www.base64encode.org/) can also be used to construct this value.

The full header is then constructed as per the [standard authorization header format](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization), setting the type to `Bearer`:

```
{
  "Authorization": "Basic <your base64-encoded token string>"
}
```

You can try out the connection by pressing the **Try Connection** button and, upon success, get a screen like this:

![Testing out the custom social connection](https://images.ctfassets.net/23aumh6u8s0i/2al4mPP0I9ZPMCwdJfSXRP/a82ea4c443fb069b2c4abe18aa57e3b4/netid_config-02)

Under the **Applications** tab, make sure that your client/application is enabled for this custom social connection.

Finally, adjust the **Universal Login Page** configuration and add a few lines of custom CSS to make the netID button appear with the respective logo and coloring. To do this, navigate to the [**Universal Login Page > Login Page** configuration](https://manage.auth0.com/#/login_page) and enable the **Customize Login Page** checkbox. Adjust the source code of the login page replacing the `theme` section in the JSON object with the following lines:

```js
theme: {
  logo:            config.icon,
  primaryColor:    colors.primary ? colors.primary : 'green',
  authButtons: {
    "netID": {
      displayName: "netID",
      primaryColor: "#74b82b",
      foregroundColor: "#fff",
      icon: "https://raw.githubusercontent.com/auth0-blog/auth0-netid-sample/master/img/favicon_trans.png"
    }
  }
},
```

Before:

![The code for the custom login page, before the change is made](https://images.ctfassets.net/23aumh6u8s0i/4fAXiCwgsRc8AdCzv5zd8u/5da7ab28832578872f1002b2877df832/netid_login-page-before)

After:

![The code for the custom login page, after the change is made](https://images.ctfassets.net/23aumh6u8s0i/4uEXHaZk1nO2mQUJ70TytY/6f0baed1947dbb2f54d3df46fdad68d3/netid_login-page-after)

## The Authentication Flow

### Screencast

For more context, you can view the following screencast of the authentication flow to get a better idea of how the integration with netID works:

<iframe width="560" height="315" src="https://www.youtube.com/embed/kY5Wu9FNQ8Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### Authentication

When pressing the login button within the client application, Auth0 provides a login/signup widget with options to login/signup via username and password or via social logins, such as netID.

![Auth0 login screen with netID as a custom social connection](https://images.ctfassets.net/23aumh6u8s0i/69Cyef57ukleYtPp26FrjK/1281c86c93ee9548640695c354c5a037/netid_auth-01)

When choosing netID (we're assuming the end user already has an account at netID), the user will be asked to log in at netID, providing an email address.

> Note: if your client is running in sandboxed mode, as described here, it will only function with the whitelisted email addresses

![The netID login screen](https://images.ctfassets.net/23aumh6u8s0i/7bIMhHWXIhALpVi6cmO5Gl/4340eab10878885b503439f1c11efa37/netid_auth-02)

They will also need to provide their password:

![The netID password entry screen](https://images.ctfassets.net/23aumh6u8s0i/6jS5kZLe5rByfns4J11Ua2/f3f46538668e11338ce89e64792524be/netid_auth-03)

Upon successful login, they will be asked to give consent to netID to grant Auth0 access to their personal information:

![The netID personal information consent screen](https://images.ctfassets.net/23aumh6u8s0i/6qpyibpxShK5AYj03M9p6W/5dbdb7de076d3e8c35e37756dfc9dd60/netid_auth-04)

Furthermore, the demo client asks for consent to access the Auth0 tenant:

![The Auth0 consent screen](https://images.ctfassets.net/23aumh6u8s0i/48oJiahShr5bVO2fTNZ093/1694a5b2c38d2813393be6158efcda25/netid_auth-05)

After consent is given, the browser redirects to the application, having received an ID token and information about the user:

![Logged into a demo app using netID](https://images.ctfassets.net/23aumh6u8s0i/7k0wipMlKPaMB8wXYaZn36/be3ae0e27ac33ad6b9a4993d4ee24a71/netid_auth-06)

## Client App Creation in Auth0

In our example, we chose a **Single Page Application (SPA)** based on **Angular** delivered from a Node.js web server. You can choose any other technology stack as well though. In our case, the client application is created and configured as follows in the Auth0 backend:

1. Create the application by going to the **Applications** section in the dashboard and click the **+ Create Application** button.
   ![Creating a new Auth0 application](https://images.ctfassets.net/23aumh6u8s0i/1axrPu0RywAPmw2XW1zvEn/cee0b91b909cb19d95e62c9f97e8af65/netid_applications-create)
2. Next, give the application any name you like and choose **Single Page Web Application** as the type.
   ![Choosing an Auth0 application type](https://images.ctfassets.net/23aumh6u8s0i/i4uUaBNPyAx2QMlQ8TNhy/b611109b1917096e704310d3a0f4fd2a/netid_app-quickstart-01)
3. Next, choose **Angular** as the technology.
   ![Choosing a technology type](https://images.ctfassets.net/23aumh6u8s0i/1aeo8vqDfCu4JXWYN4q5DL/0a5705bc7ea5c5a772b874b46775af16/netid_app-quickstart-02)
4. Afterwards, you're given the choice to either integrate Auth0 into an existing app, or download a complete sample. Choose the latter and download the ZIP file.
   ![Angular quickstart page](https://images.ctfassets.net/23aumh6u8s0i/4kWcfmuXfKbJNiolIwRlf8/6faae6c438a390dc2fd5c6424ac709d7/netid_app-quickstart-03)
5. Download and unzip the file anywhere on your computer. Then, enter a local terminal window and switch to the folder where you extracted the project into.

To build and run the project, enter:

`npm install`

followed by

`npm start`

This should spin up a local Node.js web server, making the application available at [`http://localhost:3000`](http://localhost:3000).

Returning to the Auth0 dashboard, click the **Settings** tab of the app.

In the application settings:

- set **Application Type** to "Single Page Application".
- set **Allowed Callback URLs** to `http://localhost:3000/callback`
- set **Allowed Logout URLs** to `http://localhost:3000`

![Configuring the Auth0 application](https://images.ctfassets.net/23aumh6u8s0i/6WcPdXxzG1gT067PmKFR6p/f463cd808e252fd69991c5a1a353abe7/netid_auth0-app-settings)

As for the connections, click the **Connections** tab at the top of this page to enable any (other) connections that you want enabled besides **netID**. Note that custom social connections don't show on this screen, they are configured and within the **Custom Social Connections** extension itself. In our example, we chose to also offer authentication via **Username-Password-Authentication**, **facebook** and **google-oauth2**, besides **netID**, thus the respective switches are enabled.

![Configuring app connections](https://images.ctfassets.net/23aumh6u8s0i/3G3jKZ5VPR0n51YZjjQtGo/2e51513ac148e30f1b6e26f4aad9786c/netid_auth0-app-connections)

In the end, the application is listed in the **Applications** overview:

![The Auth0 application registered in the dashboard](https://images.ctfassets.net/23aumh6u8s0i/6J44Uf75tIp0ZE5UQdLUnZ/03232fb39dfeaf774eee2ca9cb59c711/netid_auth-07)

Once a user has gone through the process of logging into their app using Auth0 and netID, the user information can be inspected within the Auth0 dashboard by expanding the **Users & Roles** menu item on the left, and then choosing **Users**:

![The users that have registered with the sample app](https://images.ctfassets.net/23aumh6u8s0i/6GrJ1shfzzbpKC0W08NrWn/0740be76057ce5f10f68b2397fffa321/netid_users-01)

The user's primary identity provider is shown as `oauth2`:

![Viewing detailed information about the registered user](https://images.ctfassets.net/23aumh6u8s0i/4zCj9DeRH9QOM5fjKyg2hQ/b6f66034b30ae57d7ba7a6f2326dafb8/netid_users-02)

and the raw JSON of this user contains the netID identity of the user:

![Viewing raw JSON information about the registered user](https://images.ctfassets.net/23aumh6u8s0i/1LGS9ZCwgbvyIynjppoEun/652a08cfe203d9c80791aba0e459f495/netid_users-03)

### netID backend

The **Meine Daten** (My Data) section for the user within the netID backend:

![The netID "My Data" page](https://images.ctfassets.net/23aumh6u8s0i/4hDziEEJ8yVEk4ZmVfeqlV/5c5b2a949b0d99be1eab946efad11708/netid_my-data)

The user can see an overview of the approved applications/services under **Meine Dienste** (My Services):

![The netID "My Services" page](https://images.ctfassets.net/23aumh6u8s0i/7Ltkxj0vykjZ8PSxvSLVdV/6ecf9bba29b7a901611bb643f836b935/netid_my-services)

The user can always review and revoke their consent that grants the service access to their personal information:

![Revoking consent for the service to access personal information](https://images.ctfassets.net/23aumh6u8s0i/1PJXEAhS2ZOiIKvLOX3L2k/1a4c0e65c7adba9859df446496bd55ea/netid_revoke-service)

## Recap

In this post, you learned how Auth0 can help you add the German identity provider netID as an option for your end users to sign up and login to your web application. You saw how to configure netID as an Auth0 Custom Social Connection and supply all the necessary details to integrate with a netID application. Finally, we showed you a sample login process, and how user data can be inspected both on the Auth0 side, and within the netID portal.


netID Integration Using Custom Connections

Auth0’s Sam Julien spoke at The Big Hangout, a mini-conference hosted by Angular Finland.


![Sani Yusuf dancing at Angular Finland](https://images.ctfassets.net/23aumh6u8s0i/73KEi5mDUUm7O0Sboplgkc/3e23df4cb4b5dd28b78a8e760568b03d/sani-dancing-2)
([Source](https://twitter.com/AngularFI/status/1106592529280106498))

I was honored to get to speak at [The Big Hangout 2019](https://www.angular.fi/events/conferences/2019/home), a mini-conference put on by [Angular Finland](https://www.angular.fi/) on March 14, 2019. The conference was hosted by [Tieto](https://www.tieto.com/) in Espoo, just next to Helsinki.  It was also sponsored by other Finnish tech companies like [Frantic](https://www.frantic.com/), [Finitec](https://www.finitec.fi/), [Gofore](https://www.gofore.com/) (who hosted the after party), and [Innofactor](https://www.innofactor.com/) (who graciously sponsored my travel other there!).

<include src="TweetQuote" quoteText="#TheBigHangout was a mini @angular conference organized by @AngularFI featuring seven international speakers."/>

## The Talks
The Big Hangout featured seven international speakers on different topics.

Kicking off the conference as keynote speaker, who doesn’t love **[Sani Yusuf](https://twitter.com/saniyusuf)**? If you’re not familiar with Sani, he’s a Google Developer Expert based in London. Always the right balance of entertainment and education, Sani gave the perfectly-titled talk “Let’s Get Your Angular App To React.” Sani covered the reasons why forms are so important to business, the basics of Angular’s [reactive forms](https://auth0.com/blog/real-world-angular-series-part-6), and some advanced validation techniques. Learn more on [Sani's slides](https://slides.com/saniyusuf/lets-build-a-form#/).

![Sani Yusuf speaking about reactive forms at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/NJLYQwp3ghJEnYGqg9p0T/73a92f4d10bcc031d3f2a5afbd658364/sani-forms-2)

Next was **[Nadia Törnroos](https://twitter.com/NadiaTornroos)** on “Digital Accessibility as a Mindset.” Nadia moved to Finland from Moscow about four years ago and is a senior software developer at Tieto.  Nadia’s talk was in the format of a fireside chat with Angular Finland organizer [Richard Farkas](https://twitter.com/richardfarkas). Nadia made the case for accessibility and covered tools and resources for making sites more accessible. Accessibility is not just the right thing to do to help folks with disabilities, it’s also better for building brand, following best practices, and minimizing legal risk. One tool Nadia mentioned that I had not come across before is the [WAVE Web Accessibility Tool](http://wave.webaim.org/). This tool lets you input a site and see an interactive map of accessibility errors. You can check out [Nadia's slides](https://drive.google.com/file/d/1rH9zGWIPD9vjWZ817DItEf8lXscAteZ4/view) for even more resources.

![Nadia Törnroos discussing accessibility at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/11eaa3Bl4VxGs33UCmENfT/4442616f62dfc89ef7aea33df7843ac9/nadia-accessibility-2)

We took a quick happy hour break after Nadia but dived back in with **[Akseli Virtanen](https://twitter.com/_akseliv)** and a talk called “Thinking in Web Components,” which was about both why you should care about web components and how to start using them. Akseli is a senior developer at Frantic. He’s also a proud Finn and gave me lots of great cultural and historical insights during my trip! Askeli’s talk focused on [Angular Elements](https://angular.io/guide/elements), which allows you to create custom elements using web components.  I loved Askeli’s explanation of web components as an abstraction layer between the browser APIs and whatever technology is controlling the underlying logic or function of the custom element. Akseli's [slides](https://drive.google.com/file/d/10v6_pz4BIUl2cxRTTnDNXVO3uR5JdL3E/view) have more information and some helpful diagrams.

<AmpContent>

</AmpContent>

<NonAmpContent>

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Our senior dev <a href="https://twitter.com/_akseliv?ref_src=twsrc%5Etfw">@_akseliv</a> onstage, talking about using one’s imagination and <a href="https://twitter.com/hashtag/Angular?src=hash&amp;ref_src=twsrc%5Etfw">#Angular</a> Elements. 💡 <a href="https://twitter.com/hashtag/BigHangout?src=hash&amp;ref_src=twsrc%5Etfw">#BigHangout</a> <a href="https://t.co/soT9ohql0d">pic.twitter.com/soT9ohql0d</a></p>&mdash; Frantic (@franticcom) <a href="https://twitter.com/franticcom/status/1106208100833550338?ref_src=twsrc%5Etfw">March 14, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</NonAmpContent>

I followed Askeli with a talk on “Finding the Right Path from AngularJS to Angular.”  I went over the four migration paths and how to determine which one is right for your application by looking at your team and your codebase. I also recommended a few different resources, like the [ngMigration forum and wiki](https://github.com/angular/ngMigration-Forum). You can [follow me on Twitter](https://twitter.com/samjulien) and check out my [slides and resources](http://samj.im/finland) to learn more.

![Sam Julien discussing ngUpgrade at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/HEjjrYvofqKyeT3guiSu0/722679d7fe1aaf848335c2c1f1ed49b7/sam-julien-finland-2)
([Source](https://twitter.com/StanimiraVlaeva/status/1106220184061263872))

After a lovely dinner break, **[Sallar Kaboli](https://twitter.com/sallar)**, a principal software engineer at Tieto, presented on “Achieving Performance in Heavy Applications with Angular and WebAssembly.” Sallar moved to Finland from Iran and is both super knowledgable and incredibly friendly. After covering the basics of [WebAssembly](https://webassembly.org/), Sallar gave a truly remarkable demo. Using the [Rust programming language](https://www.rust-lang.org/) on the backend with WebAssembly and Angular on the frontend, Sallar recreated [Conway’s Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life).  You can check out [his code](https://github.com/sallar/ng-game-of-life) and [his slides](https://sallar.github.io/talks/ng-wasm/#0) to see more. Here’s a quick video of the demo:

<AmpContent>
<amp-video controls
  layout="responsive"
  width="480" height="270">
  <source src="https://cdn.auth0.com/blog/angular-finland/sallar-wasm-demo-compressed.mp4"
    type="video/webm" />
</amp-video>

</AmpContent>

<NonAmpContent>

<video controls="controls">
  <source src="https://cdn.auth0.com/blog/angular-finland/sallar-wasm-demo-compressed.mp4">
</video>

</NonAmpContent>

You can also play a [deployed version](https://sallar.github.io/ng-game-of-life/) of the game! *Hint: you can command-click and shift-click while the game is running to shoot gliders and spaceships!*

<include src="TweetQuote" quoteText="I'm reading about @sallar's amazing WASM demo with @rustlang and @angular at @AngularFI!"/>

Next, **[Stanimira Vlaeva](https://twitter.com/StanimiraVlaeva)** gave a talk called “Frictionless Breaking Changes Migration with `ng update` and Schematics.” Stanimira is a GDE from Bulgaria, a developer for Progress, and a core team member of NativeScript. We met at [NgAtlanta](https://auth0.com/blog/ngatlanta-is-changing-tech/) this year and it’s been great to get to know her! Her talk was all about using custom schematics to mitigate the risk of updating dependencies. You can [look at her slides](http://bit.ly/update-ng-fi) to see her examples and more resources on schematics.

![Stanimira Vlaeva discussing Angular schematics at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/5L0SZrzHJ59aaJdXA3kBFd/e8f12308afd61706cfdcae281c48c43e/stanimira-schematics-2)

**[Michael Hladky](https://twitter.com/Michael_Hladky)** wrapped up the day with a presentation titled “The Ease of Using Higher Order Operators.” Michael is a GDE from Austria who does training and consulting. He was originally scheduled to do a different talk, but one of the software providers he used in his presentation was having technical issues. I was super impressed by how quickly Michael was able to swap out his talk! He went over the nuts and bolts of several RxJS operators and you can [view his slides](https://docs.google.com/presentation/d/1N26PPQmsUaZUnSGMMiRuPdc9GxNMS2Eij8qqKSx4OhI/edit#slide=id.g5053e61ac8_0_1315) to see all of helpful diagrams and animations. If you’ve been following Michael lately, he’s been devoting a lot of his time to the RxJS ecosystem, particularly to the [marble diagram design system](http://bit.ly/marble-design-system). He’s producing a lot of fantastic content for the RxJS community.

![Michael Hladky talking about RxJS operators at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/6wCzah5VnGEuz8nygebCag/539bfd1a1b9b8ef5e5c1406bcb5f474d/michael-hladky)
([Source](https://twitter.com/AngularFI/status/1106613728114556929))

After the event, we were bussed over to the Gofore office for a very fun, very low-key after party with good food, good beer, and great conversation. I really appreciated how chill the whole day was. I am often exhausted after American conferences due to how intense and involved they are (even if they’re a lot of fun). Hanging out with the Finns was very laid back and not at all stressful!

## Conclusion
The Big Hangout was a small but very well-run and enjoyable conference. I had a great time getting to know friends in the Angular Finland community and hearing about what they’re currently working on. My favorite thing was how international the group was &mdash; I got to make new friends who were not only native Finns, but who also had moved from Turkey, Iran, Bangladesh, India, and more. The global Angular community truly amazes me!

<include src="asides/AboutAuth0" />


Angular Finland: The Big Hangout

Learn how to create workspaces, generate code, run tasks, and install extensions with Angular Console.

A Tour of Angular Console

Learn about the facade pattern, why you may or may not want to use one with NgRx, and how to create a facade.

NgRx Facades: Pros and Cons

Learn how to create apps, libs, and custom workspace schematics with the enterprise Angular tool Nx.

Create Your First Custom Angular CLI Schematic with Nx

ramiro

I am an internet guy who loves reading and asking questions—those are the two things that helped me the most as an autodidact 🤓. If I am not learning about the latest trends in digital marketing or listening to house music, you can probably find me watching a tennis tournament. And also, I manage Social Media at Auth0 ✌️

Manager, Social Media

Ramiro Nunez Dosio

Our 10 most-popular developer posts in 2018 ranging from front-end development to open source contributions.



Time flies when you are having fun. It's December already and we are getting ready to wrap up this year. 2018 was a prolific year for the Auth0 blog: we published more than 200 posts (😱) where we tackled a diverse amount of topics: frontend and backend technologies, data breaches, GDPR, Cybersecurity, Company Culture, and of course, Identity.

We believe looking back is key to look ahead. That is why this week, we are going to take a look back at the best and most impactful posts we have published in 2018.

One article wouldn't be enough to review this amazing year, that's why we have decided to split this year in review into 3 parts: Developer Posts, [Security Posts](https://auth0.com/blog/10-most-popular-security-posts-in-2018/), and [Identity Posts](https://auth0.com/blog/10-most-popular-identity-posts-in-2018/).

Without much further ado, here's the roundup of our 10 most-popular developer posts this year!

![Auth0's 10 Most-Popular Developer Posts](https://images.ctfassets.net/23aumh6u8s0i/6d6NAZbouw2Vm6KKuUxGkp/332d039ec84578561690ab2702ec30bf/auth0-blog-best-of-2018-developer-posts)

## <a name="Auth0s10Most-PopularDeveloperPostsin2018-How-tosTutorialsandMor"></a>Auth0's 10 Most-Popular Developer Posts in 2018 - How-to's, Tutorials, and More

> The following posts are not listed in any particular order.

1. <a href="#TheCompleteGuideToDeployingJavaScriptApplications-Part1" target="_self">The Complete Guide To Deploying JavaScript Applications - Part 1: Database, and API Deployment</a>
2. <a href="#ReactiveProgramminginPythonhttps" target="_self">Reactive Programming in Python</a>
3. <a href="#ReactTutorial" target="_self">React Tutorial: Building and Securing Your First App</a>
4. <a href="#DevelopingWebAppswithASP.NETCore2.0andReact-Part1https" target="_self">Developing Web Apps with ASP.NET Core 2.0 and React - Part 1</a>
5. <a href="#UsingPythonFlaskandAngulartoBuildModernWebApps-Part1https" target="_self">Using Python, Flask, and Angular to Build Modern Web Apps - Part 1</a>
6. <a href="#Vue.jsKanbanBoard" target="_self">Vue.js Kanban Board: The Development Process</a>
7. <a href="#BestPracticesinAndroidDevelopmenthttps" target="_self">Best Practices in Android Development</a>
8. <a href="#Real-TimeChartsusingAngularD3andSocket.IOhttps" target="_self">Real-Time Charts using Angular, D3, and Socket.IO</a>
9. <a href="#DevelopingReal-TimeWebApplicationswithServer-SentEventshttps" target="_self">Developing Real-Time Web Applications with Server-Sent Events</a>
10. <a href="#AFirstTimersGuidetoanOpenSourceProjecthttps" target="_self">A First Timers Guide to an Open Source Project</a>

## <a name="TheCompleteGuideToDeployingJavaScriptApplications-Part1"></a>1. [The Complete Guide To Deploying JavaScript Applications - Part 1: Database, and API Deployment](https://auth0.com/blog/the-complete-guide-to-deploying-javascript-applications-part-1/)

Atwood's law states that _Any application that can be written in JavaScript, will eventually be written in JavaScript._ In 2018, eleven years after this law was proposed, JavaScript is now the most popular language in the world. In this tutorial, you'll learn how to deploy your JavaScript applications to different cloud platforms such as Google Cloud, Microsoft Azure, Netlify, and others.

<AmpContent>
<a href="https://auth0.com/blog/the-complete-guide-to-deploying-javascript-applications-part-1/">
  <amp-img width="1.5" height="1" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/53GC5Ijur7QUmJR6wFiEOr/168205ab0c6003fa00829e1155e70236/awscreatetable" alt="Amazon DynamoDB"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/the-complete-guide-to-deploying-javascript-applications-part-1/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/jsdeploy/awscreatetable.png" alt="Amazon DynamoDB"/>
  </a>
</div>

</NonAmpContent>

## <a name="ReactiveProgramminginPythonhttps"></a>2. [Reactive Programming in Python](https://auth0.com/blog/reactive-programming-in-python/)

In this tutorial, you’ll be learning how to use the RxPy library to create asynchronous and event-based programs by implementing observables, observers/subscribers, and subjects. You will start by getting our data stream from the GitHub API with a Tornado web socket and then you will filter and process it asynchronously. [In this GitHub repository](https://github.com/valerybriz/RxGithubSearcher), you can find the code that we are going to create in this tutorial.

<AmpContent>
<a href="https://auth0.com/blog/reactive-programming-in-python/">
  <amp-img width="1.5" height="0.7" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/4nxuqP7IqV1gHEsO9abqjL/9a49e46dab847b8f010d9b3ed92d0609/combine-latest" alt="RxPy combineLatest marble diagram"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/reactive-programming-in-python/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/10-most-read-technical-articles-in-2018/combine-latest.png" alt="RxPy combineLatest marble diagram"/>
  </a>
</div>

</NonAmpContent>

## <a name="ReactTutorial"></a>3. [React Tutorial: Building and Securing Your First App](https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/)

In this article, you will learn the basic concepts of React. After that, you will have the chance to see React in action while creating a simple Q&A (Questions & Answers) app that relies on a backend API. If needed, you can check [this GitHub repository to check the code that supports this article](https://github.com/auth0-blog/react-tutorial). Have fun!

<AmpContent>
<a href="https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/">
  <amp-img width="1.5" height="0.95" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/SMBzTsEDRhGQGjRdfOXat/abf9d57a0f2163d77c95c30aaaf0204c/q-and-a-app" alt="React Q&A app"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/react-tutorial/q-and-a-app.png" alt="React Q&A app"/>
  </a>
</div>

</NonAmpContent>

## <a name="DevelopingWebAppswithASP.NETCore2.0andReact-Part1https"></a>4. [Developing Web Apps with ASP.NET Core 2.0 and React - Part 1](https://auth0.com/blog/developing-web-apps-with-asp-dot-net-core-2-dot-0-and-react-part-1/)

In this series of posts, you will build a Web application based on ASP.NET Core 2.0 and React. To solve the identity management feature, you will integrate this stack with [Auth0](https://auth0.com/). In this first part of the series, you are going to use ASP.NET Core 2.0 to develop the APIs of your application. [The final code can be found in this GitHub repository](https://github.com/andychiare/netcore2-auth0).

<AmpContent>
<a href="https://auth0.com/blog/developing-web-apps-with-asp-dot-net-core-2-dot-0-and-react-part-1/">
  <amp-img width="1.5" height="1" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/3VdEYdUZjg1dZ8CjKW7FFy/e6dacc131f59c2ab0459cb72a6addb6a/creating-project" alt="Creating an ASP.NET Core Web App with Visual Studio"> </amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/developing-web-apps-with-asp-dot-net-core-2-dot-0-and-react-part-1/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/dotnet-core-react/creating-project.png" alt="Creating an ASP.NET Core Web App with Visual Studio"/>
  </a>
</div>

</NonAmpContent>

## <a name="UsingPythonFlaskandAngulartoBuildModernWebApps-Part1https"></a>5. [Using Python, Flask, and Angular to Build Modern Web Apps - Part 1](https://auth0.com/blog/using-python-flask-and-angular-to-build-modern-apps-part-1/)

In this series, you will learn how to create modern web applications with Python, Flask, and Angular. You will use this stack to build a single-page application (SPA) and a backend API to expose exams and questions so users can test their knowledge regarding different technologies. [In this GitHub repository](https://github.com/auth0-blog/python-flask-angular-1), you can find the final code created throughout the first part of the series.

<AmpContent>
<a href="https://auth0.com/blog/using-python-flask-and-angular-to-build-modern-apps-part-1/">
  <amp-img width="1.5" height="0.75" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/1IfSLdFZd6LkXpiDgD6GWX/30ef9e44980a5b9fd549b8115db508d3/fetching-data" alt="Using Angular to fetch data from a Flask application"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/using-python-flask-and-angular-to-build-modern-apps-part-1/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/flask-angular/fetching-data.png" alt="Using Angular to fetch data from a Flask application"/>
  </a>
</div>

</NonAmpContent>

## <a name="Vue.jsKanbanBoard"></a>6. [Vue.js Kanban Board: The Development Process](https://auth0.com/blog/vuejs-kanban-board-the-development-process/)

In this article, you will use Vue.js (the progressive
JavaScript framework) to build an interactive Kanban board in the browser. The complete source code for [this project is available on a GitHub repository](https://github.com/elkdanger/kanban-board) and [there is a demo available online](https://kanban.elkdanger.co.uk) of the finished project.

<AmpContent>
<a href="https://auth0.com/blog/vuejs-kanban-board-the-development-process/">
  <amp-img width="2" height="1" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/34JnBo0Yc1RwsWU3fPhGgy/68881fae75371f2ef43ba9cf3b6913ac/new-item-component" alt="Kanban board preview"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/vuejs-kanban-board-the-development-process/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/vuejs-kanban/new-item-component.png" alt="Kanban board preview"/>
  </a>
</div>

</NonAmpContent>

## <a name="BestPracticesinAndroidDevelopmenthttps"></a>7. [Best Practices in Android Development](https://auth0.com/blog/best-practices-in-android-development/)

Best practices are simply professional standards that are acceptable in a field. In this post, you will look at such practices as it relates to Android development.

<AmpContent>
<a href="https://auth0.com/blog/best-practices-in-android-development/">
  <amp-img width="1" height="0.96" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/xUNLk6pd2SlY3RpC03DxS/aea85be3d402071f014e2f1aa1149106/viewmodel-lifecycle" alt="The lifecycle of an Activity as compared to that of a ViewModel"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/best-practices-in-android-development/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/android-best-practices/viewmodel-lifecycle.png" alt="The lifecycle of an Activity as compared to that of a ViewModel"/>
  </a>
</div>

</NonAmpContent>

## <a name="Real-TimeChartsusingAngularD3andSocket.IOhttps"></a>8. [Real-Time Charts using Angular, D3, and Socket.IO](https://auth0.com/blog/real-time-charts-using-angular-d3-and-socket-io/)

Charts create some of the most catchy sections on any business applications. A chart that updates in real time is even more catchy/useful and adds huge value to users. Here, you will see how to create real-time charts using Angular, D3, and Socket.IO. You can find the final code produced throughout this article in [this GitHub repository](https://github.com/auth0-blog/angular-d3-socketio).

<AmpContent>
<a href="https://auth0.com/blog/real-time-charts-using-angular-d3-and-socket-io/">
  <amp-img width="1.6" height="1" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/5KHFbR84G0MCW5LuWqjRkl/0eef204a5b72bb81cf017ed7c08766b2/d3-charts-with-static-data" alt="Showing a D3 chart with static data in an Angular application."></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/real-time-charts-using-angular-d3-and-socket-io/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/angular-d3-socketio/d3-charts-with-static-data.png" alt="Showing a D3 chart with static data in an Angular application."/>
  </a>
</div>

</NonAmpContent>

## <a name="DevelopingReal-TimeWebApplicationswithServer-SentEventshttps"></a>9. [Developing Real-Time Web Applications with Server-Sent Events](https://auth0.com/blog/developing-real-time-web-applications-with-server-sent-events/)

Server-Sent Events (SSE) is a standard that enables Web servers to push data in real time to clients. In this article, we will learn how to use this standard by building a flight timetable demo application with React and Node.js. However, the concepts you will learn following this tutorial are applicable to any programming language and technology. [You can find the final code of the application in this GitHub repository](https://github.com/andychiare/server-sent-events).

<AmpContent>
<a href="https://auth0.com/blog/developing-real-time-web-applications-with-server-sent-events/">
  <amp-img width="2.1" height="1" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/7MwSxNH2e21wVVivNZQZlk/4355791a943ddbaeaf02a8fd4a9bb9a9/developing-real-time-web-applications" alt="Real-time flights tracker timetable"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/developing-real-time-web-applications-with-server-sent-events/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/server-sent-events/developing-real-time-web-applications.png" alt="Real-time flights tracker timetable"/>
  </a>
</div>

</NonAmpContent>

## <a name="AFirstTimersGuidetoanOpenSourceProjecthttps"></a>10. [A First Timers Guide to an Open Source Project](https://auth0.com/blog/a-first-timers-guide-to-an-open-source-project/)

On open source in general, contributions by first-timers and code newbies are encouraged, because that is the essence of open source: Learning and collaboration, together, for the benefit of everyone. It can be scary and a little overwhelming the first time, but there are projects and [events like Hacktoberfest](https://auth0.com/blog/celebrate-hacktoberfest-with-auth0/) out there tailored to helping you to get involved and gain confidence in making your first contribution.

<AmpContent>
<a href="https://auth0.com/blog/a-first-timers-guide-to-an-open-source-project/">
  <amp-img width="1.86" height="1" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/2gqWE52GkPXd9SGFSNWjnC/95fd686c507fb7e58d3ce19975b68c87/step-2-github-generates-a-fork-repository-for-you" alt="GitHub will generate a copy of the repository"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/a-first-timers-guide-to-an-open-source-project/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/a-first-timers-guide-to-an-open-source-project/step-2-github-generates-a-fork-repository-for-you.png" alt="GitHub will generate a copy of the repository"/>
  </a>
</div>

</NonAmpContent>

## <a name="WhatsNex"></a>What's Next?

We are already preparing our content pipeline for 2019. The world of technology keeps evolving very fast and it's our duty to keep our blog fresh and updated with all its upcoming trends and changes. We have a commitment to keep improving the quality of our products, services, and content. We'd like to take this opportunity to thank all of our readers for their consistent support and feedback.

Is there anything that you'd like us to cover in 2019? Any particular trend, topic, or technique? Please let us know in the comments below or through social media ([Twitter](https://twitter.com/auth0), [LinkedIn](https://www.linkedin.com/company/auth0)). As always, you can subscribe to our newsletter to receive a weekly digest of our blog content.

Happy Holiday Season!

<include src="asides/AboutAuth0" />


10 Most-Popular Developer Posts in 2018

Auth0's Sam Julien had the opportunity to speak at AngularConnect 2018 in London.


**TL;DR:** In this post, we take a look at a few of the can't-miss talks from [AngularConnect 2018](http://www.angularconnect.com/), covering topics like Ivy, Bazel, and why you might not need NgRx after all.

I had the incredible opportunity this year to speak at [AngularConnect 2018](http://www.angularconnect.com/), held November 6-7 at ExCel London.

![AngularConnect Day One Opening](https://images.ctfassets.net/23aumh6u8s0i/hYaUzjJNQqND5cb4m15m5/1933125ab1170ff2291f4ecd38292bef/connect-opening)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45244428804/in/album-72157697939547280/)

This conference was organized by [White October Events](https://www.whiteoctoberevents.co.uk/) and was amazingly well run.  Both as a speaker and as an attendee, I was blown away by how great this conference was. There was excellent content, an emphasis on giving back to the community, and mindfulness towards accessibility like live-captioning of every talk. On top of all that, the logistics for speakers were flawless. My only complaint is that I couldn’t clone myself to watch all of the talks&mdash;I can’t recommend this conference enough!

This year’s AngularConnect featured two main tracks, as well as mini-workshops, office hours, and Q&A panels on subjects like AngularJS migration, UI, tooling, and architecture. All of the talks from the two main tracks were streamed live and recorded and [all of the videos have been uploaded](https://www.youtube.com/watch?v=rbFLorQWlOQ&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl).

<br/>
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">2 days of amazing talks with an amazing community <a href="https://twitter.com/AngularConnect?ref_src=twsrc%5Etfw">@AngularConnect</a> 😀 <a href="https://twitter.com/hashtag/AngularConnect?src=hash&amp;ref_src=twsrc%5Etfw">#AngularConnect</a> <a href="https://twitter.com/hashtag/Frontend?src=hash&amp;ref_src=twsrc%5Etfw">#Frontend</a> <a href="https://twitter.com/hashtag/evtech?src=hash&amp;ref_src=twsrc%5Etfw">#evtech</a> <a href="https://t.co/glfQ9JlbFG">pic.twitter.com/glfQ9JlbFG</a></p>&mdash; Hassen Hichri (@Hassen91Hassen) <a href="https://twitter.com/Hassen91Hassen/status/1060491046528933888?ref_src=twsrc%5Etfw">November 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Highlights from AngularConnect
Let’s look at some highlights from the conference and some talks you definitely don’t want to miss.

### The Keynote
Since [AngularMix](https://auth0.com/blog/top-takeaways-from-angularmix-2018/) was just a few weeks prior to AngularConnect, most of the themes of the conference were the same. Angular team lead [Igor Minar](https://twitter.com/IgorMinar) gave the [Day One Keynote](https://www.youtube.com/watch?v=rbFLorQWlOQ&index=1&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl) and it covered much of the same ground as Brad Green’s keynote in Orlando at AngularMix. Igor talked about the history of Angular from when he joined Google, the current community efforts, and what’s happening right now in the Angular ecosystem. His keynote really set the stage for the rest of the talks in the conference, highlighting Ivy, Bazel, Angular Elements, and other tools in the Angular ecosystem like the [Material CDK](https://material.angular.io/cdk/categories). Check out [Igor’s slides](http://g.co/ng/ac2018) for more.

![Igor Minar delivering the opening Keynote at AngularConnect](https://images.ctfassets.net/23aumh6u8s0i/5yaJj5ZPLw16J7FBxCsF86/da9d28ad0856da0d127a7270f15970f6/igor-minar)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45056872205/in/album-72157697939547280/)

<include src="TweetQuote" quoteText="We are trying to create excellent interactions in the @angular community. - @igorminar @angularconnect"/>

### All About Ivy
Perhaps the number one buzzword these days in the Angular community is “Ivy.” Ivy is the eagerly anticipated new render engine that will be faster and produce smaller builds due to its use of tree-shaking. Only the parts of Angular you use will be shipped to the browser! At AngularConnect, there were two really awesome talks about Ivy given by folks from Google:

* Google engineer [Alex Rickabaugh](http://twitter.com/synalx) opened day two of AngularConnect with  his fascinating talk about [The Theory of Angular Ivy](https://www.youtube.com/watch?v=isb5Ef6yI48&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=2).  Alex talked about how Ivy’s overarching purpose is to simplify compilation, deployment, and managing dependencies. To illustrate this, Alex walked us through how the same application gets compiled with the Angular 2.0 renderer, the Angular 4+ View Engine, and Ivy. You definitely want to see this one!

![Alex Rickabaugh talking about Ivy](https://images.ctfassets.net/23aumh6u8s0i/5h7c6CkEDBO94RRbVUk6ir/33cf9c39880c1809eb57703bc5c949ba/alex-rickabaugh)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45986219891/in/album-72157697939547280/)

* After Alex, Google engineer [Jason Aden](http://twitter.com/jasonaden1) showed us [Angular Ivy by Example](https://www.youtube.com/watch?v=MMPl9wHzmS4&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=24). Jason dove right into debugging and coding with Ivy, demonstrating the simpler stack traces and new debugging APIs. He also demonstrated changes to dynamic components, lazy loading, and routing due to Ivy that look really awesome.

### A Bit of Bazel
[Martin Probst](https://twitter.com/martin_probst), another software engineer at Google, gave a really fascinating talk about [Why You Should Use Bazel](https://www.youtube.com/watch?v=Qb3tykleV_g&index=28&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl). I learned a lot about Bazel from this talk, especially what makes Bazel different from other bundlers or task runners. For example, in one of Martin’s [slides](https://docs.google.com/presentation/d/1Q0S4ee49PoEoIxRydp3JgIdfAnGanbPCuMTJuz37Nk0/preview?slide=id.g26d86d3325_0_0), he notes that builds in Bazel are pure functions. They have no side effects and only depend on their inputs. This makes Bazel builds not only easier to analyze, but also easier to debug and run in parallel. This was a great talk for folks who want to dig a little deeper into Bazel.

![Bazel builds are functional.](https://images.ctfassets.net/23aumh6u8s0i/7IY4WBwaEx3SWkIprJOn2e/ede13340122359431d9b52e944704cab/bazel-builds)
[Source](https://docs.google.com/presentation/d/1Q0S4ee49PoEoIxRydp3JgIdfAnGanbPCuMTJuz37Nk0/preview?slide=id.g44208fb040_5_55)

<include src="TweetQuote" quoteText="With Bazel, builds are functional and thus easy to analyze and debug."/>

### More on Migration
With [Pete Bacon Darwin](https://twitter.com/petebd), who created the [ngUpgrade library](https://github.com/angular/angular/tree/master/packages/upgrade), as one of the conference organizers, it makes sense that migration from AngularJS to Angular was a big focus at this year’s AngularConnect. There’s still a ton of legacy AngularJS code out there and the Angular community wants to be sure those folks feel supported in their migration. There were three main talks on migration:

- I gave a talk the first day about [How to Save Time and Money by Planning Your ngUpgrade](https://www.youtube.com/watch?v=495KHr966e0&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=32). I went over the four main migration strategies and walked the audience through helping two fictional companies decide which path makes the most sense for them. These example companies were based on my own experiences, as well as answering questions from the students of [my ngUpgrade course](http://www.upgradingangularjs.com). Check out [my slides](http://www.upgradingangularjs.com/angularconnect) for more resources.
- Later on the first day, [Erin Coughlan](https://twitter.com/ErinCoughlan16) gave a fascinating talk on [Upgrading to Angular without ngUpgrade](https://www.youtube.com/watch?v=aXOYa4S96OM&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=31). Erin is a front end engineer at Google and her talk focused on using Angular Elements to migrate from AngularJS. She created a really useful library called [create-ng1-wrapper](https://github.com/ErinCoughlan/create-ng1-wrapper) and demonstrated how to use it with Angular Elements.
- On the second day, [Elana Olson](https://twitter.com/elanathellama) went further in depth on the four recommended paths for [Migrating from AngularJS to Angular](https://www.youtube.com/watch?v=fFLKEtIqZeY&index=23&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl). She also talked about some amazing tools she’s created through her internship with Google, including the [ngMigration Assistant](https://github.com/ellamaolson/ngMigration-Assistant) and the [ngMigration Forum and Wiki](https://github.com/angular/ngMigration-Forum/wiki).

![Elana Olson discussing ngMigration Assistant](https://images.ctfassets.net/23aumh6u8s0i/6J2YLXqaOxX5cWq1vLLFj4/81fbbbdc8993a580185639dbdefc6df3/elana-olson)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45074320625/in/album-72157697939547280/)

In addition to these talks, there was also an upgrade panel and office hours with Elana, Erin, and myself.

## Even More Talks You Don’t Want to Miss
I wish I could highlight every single talk and workshop at AngularConnect — there were so many great ones! Here are a few more you need to be sure to watch (but really, just watch all of them):

- With NgRx feeling omnipresent these days, it’s easy to feel like you’re doing something wrong by not using it in your Angular project. Luckily, Mr. NgRx himself, [Mike Ryan](https://twitter.com/MikeRyanDev), gave a fantastic talk this year on why [You Might Not Need NgRx](https://www.youtube.com/watch?v=omnwu_etHTY&index=30&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl). Mike covers the use cases for when it’s a great idea to use NgRx and when you’re better off managing state on your own.
- [Max Koretskyi](https://twitter.com/maxim_koretskyi) has quickly made a name for himself as the go-to person for [in-depth breakdowns of source code](http://www.angularindepth.com). In his phenomenal talk [Optimize and Debug Change Detection Like a Pro](https://www.youtube.com/watch?v=DsBy9O0c6eo&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=17), Max explains why the infamous `ExpressionChangedAfterItHasBeenCheckedError` happens, how change detection really works, and how you can debug it yourself. Excellent work from Max, as always!
- One exceptionally effective talk this year came from [Uri Shaked](https://twitter.com/UriShaked) and [Kapunahele Wong](https://twitter.com/kapunahele). Their talk [Climbing up Injector Trees](https://www.youtube.com/watch?v=F6rF16TmB0E&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=40) explored dependency injection through lots of live-coding. Their ability to break down a complex subject with simple examples was just amazing.

![Uri Shaked and Kapunahele Wong talking about dependency injection.](https://images.ctfassets.net/23aumh6u8s0i/3BgvwE1ahbDkh8TUSyNll/7834f7fa5b14d4d5b78528f325c3952a/uri-and-kapunahele)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45074330685/in/album-72157697939547280/)

- You can’t help but love [Sani Yusuf](https://twitter.com/saniyusuf). He could talk about just about anything and capture an audience, but this year he gave a talk called [Crossing Across Platforms](https://www.youtube.com/watch?v=G39uEEa2hxo&index=7&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl). It was all about how to structure your Angular application to be used on the web, desktop, and mobile with minimal code duplication. You can also check out [Sani’s slides](https://slides.com/saniyusuf/crossing-across-platforms) for reference.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/saniyusuf?ref_src=twsrc%5Etfw">@saniyusuf</a> - I enjoyed your ionic class very much but your “Crossing Across Platforms” was hands down my favorite talk at <a href="https://twitter.com/hashtag/AngularConnect?src=hash&amp;ref_src=twsrc%5Etfw">#AngularConnect</a></p>&mdash; Lisa Copeland (@Lisacope1) <a href="https://twitter.com/Lisacope1/status/1060304729866190848?ref_src=twsrc%5Etfw">November 7, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

- Last but not least, something a bit different. [Jo Pearce](https://twitter.com/jdpearce) gave a fantastic, unique lightning talk called [Speaker Ballads](https://youtu.be/Fd_MkhU3JUU?t=955). These two poems do a wonderful job of capturing what it’s like to be a technical speaker. Don’t forget to check out Jo’s website for the [written poems](https://jopearce.co.uk/poetry/speaker-ballads/).

...And I haven't even talked about [Asim Hussain](https://www.youtube.com/watch?v=_H2NNofisA0&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=29), [Shmuela Jacobs](https://www.youtube.com/watch?v=q2Exs-82tkw&index=15&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl), or [Michael Hladky](https://www.youtube.com/watch?v=S1eDh7MonbI&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=19)! Seriously, just watch all of the talks.

<include src="asides/AboutAuth0" />

## See you next year!
I hope to see you at AngularConnect next year, so save the date: September 19-20, 2019. In the meantime, if you’re looking to become part of the Angular community, check out this great [Angular Conferences site](https://angularconferences.com/). It was built by the team at [Ultimate Courses](https://ultimatecourses.com), especially [Ana Cidre](https://twitter.com/AnaCidre_), who gave a [great talk on component architecture](https://youtu.be/fLNERt19FTs?list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl) with [Sheri List](https://twitter.com/sherrrylst). At the site, you’ll find Angular conferences, meetups, and workshops all over the world. Come join the Angular family!

<br/>
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">We had a ROAR-some time at <a href="https://twitter.com/hashtag/AngularConnect?src=hash&amp;ref_src=twsrc%5Etfw">#AngularConnect</a> 2018 🦖 Catch up on all the action below and get ready for next year!<br><br>📺 Videos: <a href="https://t.co/gIPABaEfAI">https://t.co/gIPABaEfAI</a><br>📸 Photos: <a href="https://t.co/saINRnHuS4">https://t.co/saINRnHuS4</a><br>✉️ Newsletter: <a href="https://t.co/ZaM5ezw3rn">https://t.co/ZaM5ezw3rn</a><br>🗓 19 &amp; 20 September 2019 <a href="https://t.co/poxCyNl72Z">pic.twitter.com/poxCyNl72Z</a></p>&mdash; AngularConnect (@AngularConnect) <a href="https://twitter.com/AngularConnect/status/1065588831783739392?ref_src=twsrc%5Etfw">November 22, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


Must-See Talks from AngularConnect 2018

Auth0's Kim Maida and Sam Julien spoke at AngularMix 2018 in Orlando, Florida. Learn what's new in the Angular ecosystem and what's coming soon.

Top Takeaways from AngularMix 2018

Learn what is coming next on Ionic 4 and start using it right now.

Ionic 4 Beta: What’s New and Building a Sample App

Learn how to use CLI schematics, effects, Auth0, and more to secure your NgRx application.

NgRx Authentication Tutorial: Secure an App



**TL;DR:** In this article, we’ll get a quick refresher on NgRx basics and get up to speed on more features of the NgRx ecosystem. We'll then walk through how to add Auth0 authentication to an NgRx app. You can access the finished code for this tutorial on the [ngrx-auth GitHub repository](https://github.com/auth0-blog/ngrx-auth).

## Adding Authentication to an NgRx Project

We’re caught up on the latest and greatest with NgRx, so let’s learn how to implement authentication in NgRx.

Authentication is a perfect example of shared state in an application. Authentication affects everything from being able to access client-side routes, get data from private API endpoints, and even what UI a user might see. It can be incredibly frustrating to keep track of authentication state in all these places. Luckily, this is exactly the kind of problem NgRx solves. Let’s walk through the steps. (We’ll be following the best practices Brandon Roberts describes in his ng-conf 2018 talk [Authentication in NgRx](https://www.youtube.com/watch?v=46IRQgNtCGw).)


### Our Sample App
We’re going to use a heavily simplified version of the official [ngrx/platform book collection app](https://github.com/ngrx/platform/tree/master/projects/example-app) to learn the basics of authentication in NgRx. To save time, most of the app is done, but we’ll be adding Auth0 to protect our book collection through an Auth0 login page.

You can access the code for this tutorial at the [Auth0 Blog repository](https://github.com/auth0-blog/ngrx-auth). To get started with the application, you'll need to clone the app, install the dependencies, and check out the "Starting point" commit in order to follow along. You can also run the application using the Angular CLI. You can do all of that with these commands:

```bash
git clone https://github.com/auth0-blog/ngrx-auth.git
cd ngrx-auth
git checkout 23c1b25
npm install
ng serve
```

You can now visit `http://localhost:4200` to see the running application.

We'll also be taking advantage of NgRx schematics to help us set up authentication in this app, so I've added them to the project and set them as the default.

Our app currently has the book library (found in the `books` folder), as well as some basic setup of NgRx already done. We also have the very beginnings of the `AuthModule`. The `UserHomeComponent` just lets us go to the book collection. This is what we'll protect with authentication.

The first phase of this task will be the basic scaffolding of the authentication state, reducer, and selectors. Then, we’ll add Auth0 to the application, create our UI components, and finally set up effects to make it all work.

### Two Quick Asides
Before we get started, I need to make a couple of side notes.

First, because this article is focused on how to set up authentication in an NgRx app, we're going to abstract away and over-simplify things that aren't specific to NgRx. You'll learn the mechanics of adding the necessary state setup, adding actions and reducers to handle the flow of logging in, and using effects to retrieve and process a token.

Second, almost all NgRx tutorials need a caveat. In the real world, if you had an application this simple, you most likely wouldn't use NgRx. NgRx is extremely powerful, but the setup and learning curve involved prevent it from being a fit for every application, especially super simple ones.

## Define Global Authentication State

The first step to adding authentication to an NgRx app is to define the piece of your state related to authentication. Do you need to keep track of a user profile, or whether there is a token stored in memory? Often the presence of a token or profile is enough to derive a “logged in” state. In any case, this is what you’ll want to attach to your main state.

We’re going to keep it very simple for this example and just detect the presence of a valid token. If we have a valid token, we'll toggle a global piece of state called `isLoggedIn`.

To get started, let’s use a schematic to create a reducer in the main `state` folder:

```bash
ng g reducer state/auth --no-spec
```

This is where we’ll define our authentication state, reducer, and selector functions. We can go ahead and update the state interface and initial state like this:

```typescript
// src/app/state/auth.reducer.ts
// ...

// Leave everything else and update the following:
export interface State {
  isLoggedIn: boolean;
}

export const initialState: State = {
  isLoggedIn: false
};

// ...
```

We'll come back to the reducer in this file once we've defined our actions in the next section.

Next, import everything from the auth reducer file into the `index.ts` file. That way we can add the authentication state to the overall application state and the authentication reducer to our action reducer map. The complete file will look like this right now:

```typescript
// src/app/state/index.ts
import {
  ActionReducerMap,
  createFeatureSelector,
  createSelector,
  MetaReducer
} from '@ngrx/store';
import { environment } from '../../environments/environment';
import * as fromAuth from './auth.reducer';

export interface State {
  auth: fromAuth.State;
}

export const reducers: ActionReducerMap<State> = {
  auth: fromAuth.reducer
};

export const metaReducers: MetaReducer<State>[] = !environment.production
  ? []
  : [];
```

In a more complex application, you’ll need to think through the state of other pages that use authentication in addition to your overall authentication state. For example, it’s common for login pages to need pending or error states. In our example, we’ll be using Auth0’s [login page](https://auth0.com/docs/hosted-pages/login), which will redirect our application to a login screen to authenticate, then back to the application. Because of this, we won’t need to keep track of our login page state in this example.

### Define Authentication Actions
Before we write our authentication reducer, let’s take Mike Ryan’s advice and write our actions first. Let’s walk through the flow of authentication in our example:

1. User clicks the “Log In” button to trigger the Auth0 login screen.
2. After going through the Auth0 authentication process, the user will be redirected to a `callback` route in our application.
3. That `CallbackComponent` will need to trigger an action to parse the hash fragment and set the user session. (Hint: this is where we’re altering our application state.)
4. Once that’s done, the user should be redirected to a `home` route.
5. If the user refreshes while logged in, the authentication state should persist.

I can identify several actions here:

- **Login** — to trigger the Auth0 login screen.
- **LoginComplete** — to handle the Auth0 callback.
- **LoginSuccess** — to update our authentication state `isLoggedIn` to `true` and navigate to the `home` route.
- **LoginFailure** — to handle errors.
- **CheckLogin** - to see if the user is still logged in on the server and update the state accordingly.

Notice that only the **LoginSuccess** action will modify our application state, which means that one will need to be in our reducers. The rest of these actions will use effects.

The logout process is similar:

1. User clicks “Log Out” button to trigger a confirmation dialog.
2. If the user clicks “Cancel,” the dialog will close.
3. If the user clicks “Okay,” we’ll trigger the Auth0 logout process.
4. Once logged out, Auth0 will redirect the user back to the application, which should default to the `login` route when not authenticated.

Can you think of what actions we’ll need? I spotted these:

- **Logout** — to trigger the logout confirmation dialog
- **LogoutCancelled** — to close the logout dialog.
- **LogoutConfirmed** — to tell Auth0 to log out and redirect home.

We’ll use the **LogoutConfirmed** action to reset our authentication state in a reducer in addition to telling Auth0 to log out. The rest will be handled with effects.

### Add the Auth NgRx Feature
We've defined our actions and identified which will be handled by the reducer and which will be handled with effects. We'll need to add some new files to the `AuthModule` and wire them up to our main application. Luckily, we can use schematics to make this much easier for us:

```bash
ng g feature auth/auth --group --no-spec --module auth
```

Let's break this command down to understand what's happening:
- `g` is short for `generate` in the CLI
- `feature` is the NgRx schematic that generates actions, effects, and reducers for a new feature
- `auth/auth` tells the CLI to put these files under the `auth` folder and name them `auth`
- `group` is an NgRx schematic option that groups all the files under respective folders (e.g. actions go in an `actions` folder)
- `no-spec` skips generation of test files
- Finally, `module auth` wires up the feature in the `AuthModule`

We should end up with `actions`, `effects`, and `reducers` folders inside of `src/app/auth` with corresponding TypeScript files prefixed with `auth` (e.g. `auth.actions.ts`).

We actually won't be using the module-specific `reducers`, so we can delete that file and folder (`src/app/auth/reducers`) and the references to the auth reducer in `auth.module.ts`. We'll need to delete the import of the reducer on line 9 and the reducer registration from the `imports` array on line 22:

```typescript
// src/app/auth/auth.module.ts
import * as fromAuth from './reducers/auth.reducer'; // remove this line
// ...
StoreModule.forFeature(‘auth’, fromAuth.reducer), // remove this line
// ...
```

It's helpful to stop and re-run `ng serve` to prevent getting some errors at this stage.

### Adding the Auth Actions
Let's create the actions we defined earlier in our newly created `/auth/auth.actions.ts` file. We can delete the generated code, but we’ll follow the same pattern in our code: creating an enum with the action type strings, defining each action and optional payload, and finally defining an `AuthActions` type that we can use throughout the application. The finished result will look like this:

```typescript
// src/app/auth/actions/auth.actions.ts
// Finished:
import { Action } from '@ngrx/store';

export enum AuthActionTypes {
  Login = '[Login Page] Login',
  LoginComplete = '[Login Page] Login Complete',
  LoginSuccess = '[Auth API] Login Success',
  LoginFailure = '[Auth API] Login Failure',
  CheckLogin = '[Auth] Check Login',
  Logout = '[Auth] Confirm Logout',
  LogoutCancelled = '[Auth] Logout Cancelled',
  LogoutConfirmed = '[Auth] Logout Confirmed'
}

export class Login implements Action {
  readonly type = AuthActionTypes.Login;
}

export class LoginComplete implements Action {
  readonly type = AuthActionTypes.LoginComplete;
}

export class LoginSuccess implements Action {
  readonly type = AuthActionTypes.LoginSuccess;
}

export class LoginFailure implements Action {
  readonly type = AuthActionTypes.LoginFailure;

  constructor(public payload: any) {}
}

export class CheckLogin implements Action {
  readonly type = AuthActionTypes.CheckLogin;
}

export class Logout implements Action {
  readonly type = AuthActionTypes.Logout;
}

export class LogoutConfirmed implements Action {
  readonly type = AuthActionTypes.LogoutConfirmed;
}

export class LogoutCancelled implements Action {
  readonly type = AuthActionTypes.LogoutCancelled;
}

export type AuthActions =
  | Login
  | LoginComplete
  | LoginSuccess
  | LoginFailure
  | CheckLogin
  | Logout
  | LogoutCancelled
  | LogoutConfirmed;
```

You can see that, in our example, we’re only using a payload for the `LoginFailure` action to pass in an error message. If we were using a user profile, we’d need to define a payload in `LoginComplete` in order to handle it in the reducer. Instead, we'll just be handling the token through an effect and an `AuthService` we'll create later.

Do you notice how thinking through the actions in a feature also helps us identify our use cases? This keeps us from cluttering our reducers and application state because we shift most of the heavy lifting to effects.

> Quick aside: if you'd like your application to continue to build at this step, you'll need to comment out the generated code in `auth.effects.ts`, since it now references the deleted schematic-generated action. Comment out lines 8 and 9:

```typescript
// src/app/auth/effects/auth.effects.ts

// ...

// @Effect()
// loadFoos$ = this.actions$.pipe(ofType(AuthActionTypes.LoadAuths));

// ...
```

### Define Authentication Reducer

Now let’s circle back to authentication reducer (`state/auth.reducer.ts`). Since we’ve figured out what our actions are, we know that we’ll only need to change the state of our application when the login is successful and when the logout dialog is confirmed.

First, import the `AuthActions` and `AuthActionTypes` at the top of the file so we can use them in our reducer:

```typescript
import { AuthActions, AuthActionTypes } from '@app/auth/actions/auth.actions';
```

Next, replace the current reducer function with this:

```typescript
// /state/auth.reducer.ts
export function reducer(state = initialState, action: AuthActions): State {
  switch (action.type) {
    case AuthActionTypes.LoginSuccess:
      return { ...state, isLoggedIn: true };

    case AuthActionTypes.LogoutConfirmed:
      return initialState; // the initial state has isLoggedIn set to false

    default:
      return state;
  }
}
```

Notice that the `LoginSuccess` case toggles the global `isLoggedIn` state to `true`, while the `LogoutConfirmed` case returns us to our initial state, where `isLoggedIn` is `false`.

We’ll handle the rest of our actions using effects later on.

### Define Authentication Selector
We've defined our `isLoggedIn` state, actions related to our login process, and a reducer to modify our application state. But how do we access the status of `isLoggedIn` throughout our application? For example, we’ll need to know whether we're authenticated in a route guard to control access to the `home` and `books` routes.

This is exactly what **selectors** are for. To create a selector, we’ll first define the pure function in `/state/auth.reducer.ts` and then register the selector in `index.ts`. Underneath our reducer function, we can add this pure function:

```typescript
// src/app/state/auth.reducer.ts
// ...all previous code remains the same
export const selectIsLoggedIn = (state: State) => state.isLoggedIn;
```

We can then define our selectors at the bottom of `state/index.ts`:

```typescript
// src/app/state/index.ts
// ...all previous code remains the same
export const selectAuthState = createFeatureSelector<fromAuth.State>('auth');
export const selectIsLoggedIn = createSelector(
  selectAuthState,
  fromAuth.selectIsLoggedIn
);
```

We’ve now got all the basic scaffolding set up for an authenticated state. Let's start setting up our authentication process.



NgRx Authentication Tutorial: Build an App



**TL;DR:** In this article, we’ll get a quick refresher on NgRx basics and get up to speed on more features of the NgRx ecosystem. We'll then walk through how to add Auth0 authentication to an NgRx app. You can access the finished code for this tutorial on the [ngrx-auth GitHub repository](https://github.com/auth0-blog/ngrx-auth).

## NgRx: From Humble Beginnings to a New Ecosystem

I remember when [Rob Wormald](https://twitter.com/robwormald), an Angular Core Team member, [first wrote ngrx/store](https://github.com/ngrx/store/commit/c7c562cc447416ce6c386b1522f301064af43a95) at the end of 2015. It was a tiny library implementing Redux in Angular (`store.ts` was a single file with 66 lines of code!). Fast forward a few years and [NgRx](https://github.com/ngrx) is much more than a simple library — it’s an entire ecosystem with over 120 contributors! Learning to think in the Redux pattern, while also keeping up with the various structures and pieces of NgRx, can be a challenge at first. Don’t worry, though &mdash; we’ve got your back.

In this article, we’ll do a quick refresher on NgRx concepts and learn about what has changed in its ecosystem in the last year. Then, we’ll look at how authentication works in NgRx and how to add Auth0 to an NgRx application.

Let’s get started!

<include src="TweetQuote" quoteText="I'm learning about adding authentication to an NgRx application."/>

## Basics of NgRx - A Recap

While we have a great tutorial [on managing state with `ngrx/store`](https://auth0.com/blog/managing-state-in-angular-with-ngrx-store/) and implementing Auth0, a lot has changed with NgRx since then. Let’s do a quick recap of what hasn't changed &mdash; the fundamental concepts of NgRx and the Redux pattern.

**State** is an immutable data structure describing the current status of parts of your application. This could be in the UI or in the business logic. State can represent a range of different things, from whether to show a navigation menu to whether a user is logged in.

You can access that state through the **store**. You can think of the store as the main brain of your application. It’s the hub of anything that needs to change. Since we’re using Angular, the store is implemented using an [RxJS subject](https://rxjs-dev.firebaseapp.com/guide/subject), which basically means it’s both an observable and an observer. The store is an observable of state, which you can subscribe to, but what is it observing?

The store is an observer of **actions**. Actions are information payloads that describe state changes. You send (or **dispatch**) actions to the store, and that’s the only way the store receives data or instructions on how to update your application’s state. An action has a _type_ (like “Add Book”) and an optional **payload** (like an object containing the title and description for the book **Return of the King**).

Actions are the bedrock of an NgRx application, so it’s important to follow best practices with them. Here are some pro tips on actions from Mike Ryan’s ng-conf talk [Good Action Hygiene](https://www.youtube.com/watch?v=JmnsEvoy-gY):

- Write your actions first. This lets you plan out the different use cases of your application before you write too much code.
- Don’t reuse actions or use action sub-types. Instead, focus on clarity over brevity. Be specific with your actions and use descriptive action types. Use actions like `[Login Page] Load User Profile` and `[Feature Page] Load User Profile`. You can then use the switch statement in your reducer to modify the state in the same way for multiple actions.
- Remember: good actions are actions you can read after a year and tell where they are being dispatched.

Once the store receives an action to change the state, pure functions called **reducers** use those actions along with the previous state to compute the new state.

If you’re feeling lost on the basics of the Redux pattern, one of my favorite introductory resources is Dan Abramov’s [Egghead course on getting started with Redux](https://egghead.io/courses/getting-started-with-redux).

## Going Further with NgRx

With the basics covered, let’s look at some additional concepts in NgRx we'll need for this tutorial.

### Selectors
Selectors are pure functions that are used to get simple and complex pieces of state. They act as queries to your store and can make your life a lot easier. Instead of having to hold onto different filtered versions of data in your store, you can just use selectors.

For example, to get your current user, you’d set up a selector by first exporting this function:

```typescript
export const selectAuthUser = (state: AuthState) => state.user;
```

You typically put these pure functions in the same file as your feature’s reducer functions and then register both the feature selectors and individual state piece selectors in the `index.ts` file where you register your reducers with NgRx. For example:

```typescript
// state.index.ts
// Feature selectors get registered first.
export const selectAuthState = createFeatureSelector<fromAuth.State>('auth');

// Then you can use that feature selector to select a piece of state.
export const selectAuthUser = createSelector(
  selectAuthState,
  fromAuth.selectUser, // the pure function that returns the user from our auth state
);
```

You can then easily use that selector in your component or your route guards:

```typescript
this.user = this.store.pipe(select(fromAuth.selectAuthUser));
```

To learn more, check out [this talk from ng-conf 2018 on selectors by David East and Todd Motto](https://www.youtube.com/watch?v=Y4McLi9scfc).

### Effects
Effects (used with the library [`@ngrx/effects`](https://github.com/ngrx/platform/tree/master/modules/effects)) are where you connect actions to side effects or external requests. Effects can listen for actions, then perform a side effect. That effect can then (optionally) dispatch a new action to the store. For example, if you need to load data from an API, you might dispatch a `LOAD_DATA` action. That action could trigger an effect that calls your API and then dispatches either a `LOAD_DATA_SUCCESS` or `LOAD_DATA_FAILURE` action to handle the result. Here’s how that looks:

```typescript
@Effect()
loadData$ = this.actions$.ofType(LOAD_DATA)
  .pipe(switchMap(() => {
    return this.apiService.getData().pipe(
      map(data => new LOAD_DATA_SUCCESS(data)),
      catchError(error => of(new LOAD_DATA_FAILURE(error)))
    );
});
```

You can see that the effect is listening for the `LOAD_DATA` action, and then calls the `ApiService` to get the data and return a new action.

Using effects ensures that your reducers aren’t containing too many implementation details and that your state isn’t full of temporary clutter. For more information, check out [this tutorial from Todd Motto on using effects](https://www.youtube.com/watch?v=xkUOQeGqIGI).

### NgRx Schematics
One of the most common complaints about NgRx is the amount of repetitive code that it takes to set up an application and add new features (never say "boilerplate" around NgRx Core Team member [Brandon Roberts](https://twitter.com/brandontroberts)!). Part of this is due to the NgRx philosophy to focus on clarity over brevity, and to front-load the work of app architecture so that future feature additions are easy and straightforward. At the same time, there can be a lot of repetition in the code you write — adding a new reducer, set of actions, effects, and selectors for each new feature. Luckily, Angular CLI *schematics* are here to help.

Schematics for the Angular CLI are blueprints to generate new code quickly and are a huge time-saver. NgRx has its own set of schematics that you can take advantage of when writing your application. These schematics follow best practices and cut out lots of repetitive tasks. They also automatically register your feature states, wire up your effects, and integrate into NgModules. Awesome!

There are NgRx schematics for:

- [Action](https://github.com/ngrx/platform/blob/master/docs/schematics/action.md)
- [Container](https://github.com/ngrx/platform/blob/master/docs/schematics/container.md)
- [Effect](https://github.com/ngrx/platform/blob/master/docs/schematics/effect.md)
- [Entity](https://github.com/ngrx/platform/blob/master/docs/schematics/entity.md)
- [Feature](https://github.com/ngrx/platform/blob/master/docs/schematics/feature.md) (generate an action, reducer, and an effect and automatically wire them up to a module!)
- [Reducer](https://github.com/ngrx/platform/blob/master/docs/schematics/reducer.md)
- [Store](https://github.com/ngrx/platform/blob/master/docs/schematics/store.md)

To get started with schematics, first install them in your project:

```bash
npm install @ngrx/schematics --save-dev
```

Then, set the NgRx schematics as your defaults in your CLI configuration:

```bash
ng config cli.defaultCollection @ngrx/schematics
```

Once that’s done, you can simply run CLI commands to generate new NgRx items. For example, to generate the initial state for your application, you can run:

```bash
ng generate store --name State --root -m app
```

This will generate a store for you at the root of your application and register it in your `AppModule`. Pretty cool!

For more information on NgRx schematics, check out the [repository readme](https://github.com/ngrx/platform/blob/master/docs/schematics/README.md) and [this excellent ng-conf talk](https://www.youtube.com/watch?v=q3UcqG72Zl4&t=1031s) by Vitalii Bobrov.


NgRx Authentication Tutorial: Quick Intro

lasse-marting

Lasse Martin Jakobsen

A series that will show you how to develop modern applications with Golang and Angular.

Golang & Angular Series - Part 2: Developing and Securing Angular Apps

Golang & Angular Series - Part 1: Developing and Securing Golang APIs

Learn how TypeScript 3.0, a typed superset of JavaScript, improves tuples type and introduces a new 'unknown' top type!

TypeScript 3.0: Exploring Tuples and the Unknown Type

Learn how to create Angular applications secured by Auth0 using StackBlitz, an online cloud IDE for Angular and React web applications powered by Visual Studio Code.

Create Secure Angular Apps in the Cloud with StackBlitz and Auth0

This series shows how to create a simple, full-stack web application with Angular, TypeScript, and Nest.js. Part 2: Developing frontend Angular apps.

Full-Stack TypeScript Apps - Part 2: Developing Frontend Angular Apps

Learn how to develop modern mobile apps with Angular, Ionic, RxJS and NgRx. Follow this tutorial to create a mobile audio player app.

Building An Audio Player App with Ionic, Angular, RxJS, and NgRx

Learn about upgrading an application from AngularJS to the new Angular. As well as how to upgrade AngularJS authentication strategies to Angular.

Upgrade Your AngularJS Authentication Service

1097492785caf9ffeebffeb624202d8f?s=200 avatar

1097492785caf9ffeebffeb624202d8f?s=200

Prosper is a great speaker, community leader, open source hacker, technical consultant, and a fervent Developer Advocate. He is a full-stack software engineer who has worked on biometric, health and developer tools. Prosper recently co-founded a startup called Eden that’s focused on improving the quality of lives in Nigeria and currently leads the engineering team. He also co-founded forloop, the largest developer community in Africa.

Former Auth0 Employee

Prosper Otemuyiwa

Fresh out the oven is Angular 6. It brings some new features and enhancement to one of the most popular JavaScript frameworks for crafting mobile, desktop and web applications. Learn what's new in Angular!



---

**TL;DR:** In this article, I'll cover the new features in Angular 6 and several other changes and deprecations.

---

Angular is a very popular framework that is actively [maintained by Google](https://developers.google.com/experts/all/technology/angular). Its popularity and wide adoption have been driven by how it keeps evolving and getting better by the day. Angular powers a lot of web platforms such as _Google Adwords_, _Google Fiber_, _Adsense_, and _Winc_.

The previous major Angular version was Angular 5. We covered the [major features and bug fixes that shipped with Angular 5 before](https://auth0.com/blog/whats-new-in-angular5/). Now, we are going to cover the latest major release, Angular 6, which focuses on making Angular smaller and faster to use.

Let's go through the major changes in Angular 6.


## 1. Improved Service Worker Support

Angular 6 now supports the configuration of navigation URLs in Service Workers. The service worker will redirect navigation requests that don't match any `asset` or `data` group to the specified index file.

<include src="TweetQuote" quoteText="Angular 6 now supports configuration of navigation URLs in Service Workers."/>

By default, a navigation request can have any URL except for those containing `__` and URLs containing a file extension (i.e a `.`) in the last path segment. Sometimes it is great to be able to configure different rules for the URLs of navigation requests (e.g. ignore specific URLs and pass them through to the server).

Now, you can specify an optional `navigationUrls` list in `ngsw-config.json`. which contains URLs or simple globs. Only requests whose URLs match any of the positive URLs/patterns and
none of the negative ones (i.e. URLs/patterns starting with `!`) will be
considered navigation requests and handled the right way by the service worker.

Before now, the service worker would enter a degrade mode where only existing clients would be served if either the client or server was offline while trying to fetch `ngsw.json`. In Angular 6, the service worker remains in the current mode until connectivity to the server is restored.

Furthermore, a helper script, `safety-worker.js`, has been added to the service worker package to enable easy deactivation of an existing service worker in production.

_packages/service-worker/safety-worker.js_

```js
self.addEventListener('install', event => { self.skipWaiting(); });

self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim());
  self.registration.unregister().then(
      () => { console.log('NGSW Safety Worker - unregistered old service worker'); });
});
```

## 2. Goodbye Template Element

The `<template>` element was deprecated long ago, precisely in Angular 4. It has been removed completely in Angular 6.

The `<ng-template>` element should be used instead.

**Before:**

``` html  

  <template>some template content</template>

```

**Now:**

``` html  

  <ng-template>some template content</ng-template>

```

## 3. Better URL Serialization

Before now, there were issues around routes and URL serialization such as this below:

![What's new in Angular 6 - URL Serialization](https://images.ctfassets.net/23aumh6u8s0i/3IBqTAJniLXU1hZBFJz3em/249f3d8e3460446f7475fb2630207abb/urlissues)
_What's new in Angular 6 - URL Serialization_

In Angular 6, issues like the one above have been fixed and:

* URI fragments will now serialize the same as query strings.
* In the URL path, (portion prior to the query string and/or fragment), the plus sign (`+`) and ampersand (`&`) will appear decoded.
* In the URL path, parentheses values (`(` and `)`) will now appear percent-encoded as `%28` and `%29` respectively.
* In the URL path, semicolons will be encoded in their percent encoding `%3B`.

It's also important to know that parentheses and semicolons denoting auxiliary routes will, in any case, show up in their decoded shape except for parentheses and semicolons used as values in a segment or key/value pair for matrix params which will show up encoded.

## 4. Support Added for Custom Elements

This is crazy. When I discovered this, I jumped! Let me explain before you get too excited.

The support is currently experimental and unstable. It's targeted to land and become stable in the Angular 6.x release cycle.

With this support, developers can simply register Angular Components as Custom Elements. Once registered, these components can be used just like built-in HTML elements. They are HTML Elements, so why not?

So, Angular developers can do something like this:


```js

//my-name.ts

import { Component, Input, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';

@Component({
  selector: 'my-name',
  template: `<h1>Hello my name is {{name}}</h1>`
})

export class MyName {
  @Input() name: string = 'Prosper!';
}

@NgModule({
  declarations: [ MyName ],
  entryComponents: [ MyName ]
})

export class MyNameModule {}

```

```ts
//app.component.ts
import { Component, NgModuleRef } from '@angular/core';
import { createCustomElement } from '@angular/elements';

import { MyName } from './my-name.ngfactory';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  constructor(private injector: Injector, ngModuleRef: NgModuleRef) {
    const ngElementConfig = createCustomElement(MyName, injector);
    customElements.define('my-name', NgElementConfig);
  }
}
```

### 5. Forms Validation in Angular 6

Before now, `ngModelChange` was always emitted before the underlying form control was updated.

If you had a handler for the `ngModelChange` event that checked the value through the control, the old value would be logged instead of the updated value. This is not the case if you pass the value through the `$event` keyword directly.

Check out this example:

_Passing the value through the $event keyword directly_

``` html  

  <input [(ngModel)]="name" (ngModelChange)="onChange($event)">

```

```js
onChange(value) {
   console.log(value); // logs updated value
}
```

_Using a Handler_


``` html  

  <input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">

```

```js
onChange(ngModel: ngModel) {
   console.log(ngModel.value); // logs old value
}
```

In Angular 6, `ngModelChange` is now emitted after the value is updated on its form control.

<include src="TweetQuote" quoteText="In Angular 6, ngModelChange is now emitted after the value is updated on its form control."/>

```js
onChange(ngModel: NgModel) {
   console.log(ngModel.value); // logs updated value
}
```

## 6. Multiple Validators for Form Builder Array

In previous versions of Angular, you could set only one validator on a `FormArray` field with the `FormBuilder.array` method.

In Angular 6, you can set multiple validators with the `FormBuilder.array` method:

```js
...
ngOnInit() {
  this.speakerForm = this.formBuilder.group({
    text: ['', Validators.required],
    options: this.formBuilder.array([], [MyValidators.correctProposalCount, MyValidators.totalProposals])
  });
}
```

## 7. Token Marking for Runtime Animation Context

In Angular 6, it's now possible to determine which animation context is used for a component at runtime. A token is provided as a marker to determine whether the component is running a `BrowserAnimationsModule` or `NoopAnimationsModule` context at runtime.

## 8. Hello Schematics

**Schematics** is a new scaffolding library that's used by the Angular CLI to generate custom templates. The Angular team has always been keen on improving developer productivity, which explains the birth of **schematics**.

With Schematics, you can easily create Angular libraries like so:

First, install the necessary schematic tools:

```bash
npm i -g  ng-lib-schematics  @angular-devkit/core @angular-devkit/schematics-cli
```

Next, create a new `angular-cli` project:

```bash
ng new avengers --skip-install // avengers is the name of the new library I'm trying to create
```

Finally, you can just run `schematics` like so:

```bash
schematics ng-lib-schematics:lib-standalone --name avengers
```

A new `lib` directory will be generated for you inside the `src` folder. The `lib` directory ships with a sample demo and the build tools necessary for a typical Angular package.

Check out this [deep and excellent guide to Schematics](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2).

## Deprecations and Other Updates

* Angular 6 ships with [Rxjs 6.0.0.](https://github.com/ReactiveX/rxjs)
* `@Injectable` now supports tree-shakeable tokens.
* Service workers now properly handle invalid hashes in all scenarios.
* The router sometimes hits a race condition while a route is being instantiated and a new navigation request arrives. This issue has been solved in Angular 6.
* Avoid overriding `ngInjectableDef` in the decorator if present on the type.

Check out other [Angular 6 updates here](https://github.com/angular/angular/blob/master/CHANGELOG.md).

## Upgrading to Angular 6

The Angular team built an [awesome tool](https://angular-update-guide.firebaseapp.com/) to make upgrading as easy as possible.

![Angular 6 Upgrade](https://images.ctfassets.net/23aumh6u8s0i/6YATIYgiYoEPc8YKmQf71g/08ee8023c2ff4df81ff0758c93a3e4f8/upgrade)
_Angular 6 upgrade tool_

<include src="asides/Angular" />

## Conclusion

**Angular 6** came loaded with new features and significant improvements. Kudos to the Angular team on making Angular faster and better to use.

Have you upgraded to Angular 6 yet? What are your thoughts? Did you notice any significant improvement? Let me know in the comments section! 😊


Angular 6 Release: What’s New?

Learn how to develop applications in AngularJS  using a component-based architecture.

New Features for Developing AngularJS Applications - Part 2: Build An App

Learn how to develop applications in AngularJS using a component-based architecture.



**TL;DR:** AngularJS 1.5+ has undergone major updates. In this article, you'll learn how to develop AngularJS applications using a component-based architecture and leverage the API changes that will help you write your AngularJS applications in an Angular(v2+) style.

The Component-based Architecture is prevalent in frontend development today. JavaScript Client-side frameworks such as React, Preact, Ember, Vue.js all advocate building applications in components. _Angular_ also popularly known as _Angular(v2+)_ which is a major rewrite of AngularJS is completely component-based.

<include src="TweetQuote" quoteText="The Component-based Architecture is prevalent in frontend development today."/>

A typical example of an application built applying the component architecture involves developing several features of the application as modules with reusable components.

For example, let's use a Music Player application. A required feature for this product could be a Music Player widget. A developer designing their app in a component-based architecture style can model this feature as a *Module*.

Let's call it the _Music Player Widget_ Module. Inside the module, we can have the following components:

- _Music Search_ Component, `<music-search>`.
- _Music Playlist_ Component, `<music-playlist>`.
- _Currently Playing Song_ Component, `<music-currently-playing>`.

In a Component-based Architecture, we usually have _Parent_ and _Child_ components. The three individual components mentioned above can be referred to as _Child_ components wrapped up into a big component that will be known as the _Parent Component_ or _Root_ component.

## The AngularJS .component() method

The Angular team introduced the `.component()` method in AngularJS 1.5. This method allows developers to write their applications using the component-based architecture. How do we use the `.component()` ?

Before Angular 1.5, we only had directives, Angular directives such as `ngHide`, `ngHref`, `ngRepeat`, and custom directives.

Directives are a unique and powerful feature that allows you create custom HTML-like tags, specific to your application. In this article, we'll examine a directive, and convert it to a component using the `.component()` method.

<include src="TweetQuote" quoteText="Directives are a unique and powerful feature that allows you create custom HTML-like tags, specific to your application"/>

```js
angular.module('tutorial', [])
  .directive('abacus', function abacus() {
    return {
      scope: {},
      bindToController: {
        count: '='
      },
      controller: function () {
        function increment() {
          this.count++;
        }
        function decrement() {
          this.count--;
        }
        this.increment = increment;
        this.decrement = decrement;
      },
      controllerAs: 'abacus',
      template: `
        <div>
          <input type="text" ng-model="$ctrl.count">
          <button type="button" ng-click="$ctrl.decrement();">-</button>
          <button type="button" ng-click="$ctrl.increment();">+</button>
        </div>
      `
    };
  });
```

The first step in converting the directive to a component is to change `.directive()` to `.component()`.

_directive_

```js
.directive('abacus', function abacus() {
  return {

  };
});
```

_component_

```js
.component('abacus', function abacus() {

});
```

Nice and simple. Essentially the return `{};` statement inside the `.directive()` becomes the Object definition inside `.component()`. Awesome!

## Bindings

In a `.directive()`, the scope property allows us to define whether we want to isolate the `$scope` or inherit it, this has now become a sensible default to always make our directives have isolated scope. So repeating ourselves each time just creates excess boilerplate.

With the introduction of `bindToController`, we can explicitly define which properties we want to pass into our isolate scope and bind directly to the Controller.

With the bindings property on `.component()` we can remove this boilerplate and simply define what we want to pass down to the component, under the assumption that the component will have an isolated scope.

```js
// before
.directive('abacus', function abacus() {
  return {
    scope: {},
    bindToController: {
      count: '='
    }
  };
});

// after
.component('abacus', {
  bindings: {
    count: '='
  }
});
```

## Refactoring Controller Function

Nothing has changed in the way we declare controller, however it’s now a little smarter and has a default `controllerAs` value of `$ctrl`.

If we’re using a controller local to the component, we’ll do this:

```js
  // 1.4
  {
    ...
    controller: function () {}
    ...
  }
```

If we’re using another controller defined elsewhere, we’ll do this:

```js
// 1.4
{
  ...
  controller: 'SomeCtrl'
  ...
}
```

If we want to define `controllerAs` at this stage, we’ll need to create a new property and define the instance alias:

```js
// 1.4
{
  ...
  controller: 'SomeCtrl',
  controllerAs: 'vm'
  ...
}
```

This then allows us to use something like `vm.title` inside our template to talk to the instance of the controller. In AngularJS 1.5, we can do the following inside `.component()`:

```js
// 1.5
{
  ...
  controller: 'SomeCtrl as vm'
  ...
}
```

This helps us minimize our code by preventing the use of `controllerAs` property. However, we can add the `controllerAs` property to maintain backwards compatibility or keep it if that’s within your style for writing directives or components.

There is another option that completely eliminates the need for `controllerAs`, and Angular automatically uses the property, `$ctrl`. For instance:

```js
.component('bet', {
  controller: function () {
    this.betNumber = 777;
  }
});
```

In the code above, there is no `controllerAs` property. In our template, controller defaults to `$ctrl`, so we can get the value of `777` in our template using `$ctrl.betNumber`.

Since there is no need for the `controllerAs` property, we can just have our directive refactored to a component like so:

```js
// before
.directive('abacus', function abacus() {
  return {
    scope: {},
    bindToController: {
      count: '='
    },
    controller: function () {
      function increment() {
        this.count++;
      }
      function decrement() {
        this.count--;
      }
      this.increment = increment;
      this.decrement = decrement;
    },
    controllerAs: 'abacus'
  };
});

// after
.component('abacus', {
  bindings: {
    count: '='
  },
  controller: function () {
    function increment() {
      this.count++;
    }

    function decrement() {
      this.count--;
    }

    this.increment = increment;
    this.decrement = decrement;
  }
});
```

## Templating Changes

Look at the code below, and how the template property is defined.

```js
.component('abacus', {
  bindings: {
    count: '='
  },
  controller: function () {
    function increment() {
      this.count++;
    }
    function decrement() {
      this.count--;
    }
    this.increment = increment;
    this.decrement = decrement;
  },
  template: `
    <div>
      <input type="text" ng-model="$ctrl.count">
      <button type="button" ng-click="$ctrl.decrement();">-</button>
      <button type="button" ng-click="$ctrl.increment();">+</button>
    </div>
  `
});
```

The template property can be defined as a function injected with `$element` and `$attrs` parameters. If the template property is a function then it needs to return a String representing the HTML to compile:

```js
{
  ...
  template: function ($element, $attrs) {
    // access to $element and $attrs
    return `
      <div>
        <input type="text" ng-model="$ctrl.count">
        <button type="button" ng-click="$ctrl.decrement();">-</button>
        <button type="button" ng-click="$ctrl.increment();">+</button>
      </div>
    `
  }
  ...
}
```

## One Way Data Binding

If you have been using AngularJS long enough, you will be accustomed to the two-data way binding it provides. However, in AngularJS 1.5+, there is a new one-way data binding that we can explore and also use to improve the performance of our AngularJS applications.

A new syntax expression for the one-way data binding is the use of `<` notation. For two-way data bindings, the `=` notation is used instead.

```js
{
  ...
  bindings: {
    firstObj: '<',
    secondObj: '='
  },
  ...
}
```

Check out a good example of one-way data binding below:

```js

var sample = {
  bindings: {
    firstObj: '<',
    secondObj: '<'
  },
  template: `
    <div class="section">
      <h4>
        One way Data binding Example
      </h4>
      <p>First Object: {{ $ctrl.firstObj }}</p>
      <p>Second Object: {{ $ctrl.secondObj }}</p>
      <a href="" ng-click="$ctrl.testDataBinding();">
        Change Values
      </a>
    </div>
  `,
  controller: function () {
    this.testDataBinding = function () {
      this.firstObj = 10;
      this.secondObj = {
        maxwell: {
          language: 'PHP',
          name: 'Jack Maxwell'
        }
      };
    };
  }
};

function ExampleController() {
  this.exfirstObj = 99;
  this.exSecondObj = {
    unicodeveloper: {
      language: 'JavaScript',
      name: 'Prosper Otemuyiwa'
    }
  };
  this.testDataBinding = function () {
    this.exfirstObj = 33;
    this.exSecondObj = {
      lesasote: {
        language: 'Scala',
        name: 'Shitta Kalesaso'
      }
    };
  };
}

angular
  .module('app', [])
  .component('sample', sample)
  .controller('ExampleController', ExampleController);

```

``` html  

<div ng-app="app">
  <div ng-controller="ExampleController as example">
    <h3>
      One way data-binding
    </h3>
    <div class="section">
      <h4>
        Parent
      </h4>
      <p>
        First Object: {{ example.exfirstObj }}
      </p>
      <p>
        Second Object: {{ example.exSecondObj }}
      </p>
      <a href="" ng-click="example.testDataBinding();">
        Change Parent Values
      </a>
    </div>
    <sample firstObj="example.exfirstObj" secondObj="example.exSecondObj"></sample>
  </div>
</div>

```

One-way data binding allows changes to propagate down and flow into the component to update it with new data.

## LifeCycle Hooks

Lifecycle hooks shipped alongside the `.component()` method in AngularJS 1.5. These hooks are functions that can be invoked at different stages of a component's life in AngularJS apps. These hooks are:

- **$onInit()**
- **$onChanges()**
- **$onDestroy()**
- **$postLink()**


### $onInit()

The `$onInit()` hook is invoked when controllers have been constructed. It is used for initialization work for controllers. A typical example is populating a table or some form of list once a controller has been loaded.

```js
function MyController() {
  this.$onInit = function () {
    this.players = [{
        "name": "Lionel Messi",
        "club": "Barcelona",
        "jerseyNumber": 10,
        "position": "Forward",
      },
      ...

    ];
  };
}
```

``` html  

  <div ng-repeat="player in players">
    <td>{{ player.name }}</td>
    <td>{{ player.club }}</td>
    <td>{{ player.jerseyNumber }}</td>
    <td>{{ player.position }}</td>
  </div>

```

### $onChanges()

Remember the old way of detecting changes with `$scope.$watch()`. In Angular 1.5, changes can be detected with the `$onChanges()` hook. When building components at one point you will have data coming into your component from an external source e.g parent component. With `$onChanges()`, we can react to this changes and update the child component data effectively.

Before we go ahead into examples it is important for us to understand, how, why and when this hook is called. `$onChanges` hook is called in two scenarios, one being during component initialization, it passes down the initial changes that can be used right away through `isFirstChange` method.

```js
$ctrl.onChanges = function (changes) {
    if (changes.commit) {
        $ctrl.issues = openIssues(changes.commit.currentValue);
        $ctrl.repo = createdRepos(changes.commit.currentValue);
    }
}
```

### $onDestroy()

This hook is called when its containing scope is destroyed. We can use this hook to release external resources, watches and event handlers. This is basically the same as `$scope.on($destroy, fn)` when used in controllers.

```js
function MyController($element) {

  var eventHandler = function () {
    /**
     * Write code here
     */
  };

  /**
   * [$onInit: Attach our eventHandler when the element is clicked]
   */
  this.$onPostLink = function () {
    // When the component DOM has been compiled attach you eventHandler.
  };

  /**
   * [$onDestroy: Destroy the eventHandler once the component is destroyed]
   */
  this.$onDestroy = function () {
    // Destroy all custom events or bindings when the component scope is destroyed.
  };
}
```

When our component is constructed, we attach a click event to the component element that does something to it when clicked, it can be wherever we want let's say show alert box saying I am clicked.

In the duration when this component is active we would be happy to have this event, but when this component is inactive, we don't need this event anymore it has to go. Since this is our custom event and it's not native to Angular, it will not be detached from our app along with the component, but it will be left snooping around for an element which does not exist.

We need to tell Angular through the `$onDestroy` hook that when this component is destroyed, the event should be detached too.

### $postLink()

This hook is called after the controller's element and its children have been linked. When the component elements have been compiled and ready to go, this hook will be fired.

```js
function MyController($element) {
  /**
   * When the element and its child nodes have been compiled
   */

  this.$postLink = function () {
    /**
     * Engineer something epic here
     */
  };

}
```

This hook can help us to implement some functionalities that depend on the component elements to be fully compiled. It is important to note that this is not a complete replacement for DOM manipulation, this functionality should be handled by decorator directives.


## Stateless components

There’s now the ability to create `stateless` components. This is essentially a component with no controller attribute.

```js

var Person = {
  bindings: {
    name: '<',
    age: '<',
    sex: '<'
  },
  template: `
    <div>
      <p>Name: {{ ::$ctrl.name }}</p>
      <p>Age: {{ ::$ctrl.age }}</p>
      <p>Age: {{ ::$ctrl.sex }}</p>
    </div>
  `
};

angular
  .module('app', [])
  .component('person', Person);

```

Use in a html file like so:

``` html  

  <person name="prosper" age="14" sex="male"></person>

```


## Stateful Components

Stateful components are components that perform stateful tasks such as handling form data, making HTTP requests and generally manipulating data. In a stateful component, you can have a controller that loads a list of car items to display from an external service (API).

```js
var CarItems = {
  template: './car.html',
  controller: function($http) {
    var ctrl = this;
    // Initialising the component
    ctrl.$onInit = function() {
      $http.get('/api/carlistings').then(function (data) {
        ctrl.items = data;
      });
    };
  }
};

angular
  .module('app', [])
  .component('carItems', CarItems);
});
```

## Multi-slot Transclusions

In AngularJS, **transclusion** simply allows you to include content from one place into another template. In basic computer science definition, **transclusion** refers to the inclusion of part or all of an electronic document into one or more other documents by reference.

Multi-slot transclusions was one of the features included in Angular 1.5. How does this work? AngularJS 1.5+ allows us define multiple slots. A good case study is trying to create a generic `card` component. Something like:

``` html  

  <card>
    <card-title>Great Title</card-title>
    <card-body>
      This is the body of the card component.
    </card-body>
  </card>

```

In the definition of the `<card>` component, the `<card-title>` and `<card-body>` elements are the transclusion slots that will be present in the component.

```js
app.component('card', {
  template: [
      '<div style="border: 1px solid black;">'
      '<div ng-transclude="title"></div>',
      '<div ng-transclude="body"></div>',
      '</div>'
  ].join(''),
  transclude: {
    title: 'cardTitle',
    body: '?cardBody'
  },
  controller: function() {
    // Render the component as a card
  }
});
```

**Note:** `?` signifies that the slot is optional.


## Conclusion

As we can see, AngularJS applications can be better with these features listed above. Much work has gone in to the project from the team to make it very similar to the way we write Angular apps using the component archictecture.

In the next and final part of this series, we'll build a sample application with AngularJS 1.5+ that harnesses somes of these features. Stay tuned!


"angular"