Demystifying NgRx Authentication (AngularMix)

Level: 200

So, you've got a shiny new Angular application and you're thrilled to be managing your state with NgRx. You've got your store, reducers, and actions set up, but your boss asks you an innocent question during your first demo: "How do I log in?" You stare blankly, realizing that you've completely forgotten about authentication. Isn't it the same as in a regular Angular application? How does real-world authentication in NgRx work, anyway?

I've got your back in this talk. You'll learn not only the HOW of token-based authentication in NgRx, but also the WHY. We'll talk about managing app-wide authentication state through the store, how to determine what should end up in state, maintaining Good Action Hygiene with authentication, and keeping your application safe using authentication best practices.

Transcript

1. Demystifying Token
   Authentication in NgRx
   

   View Slide

2. @samjulien
   

   View Slide

3. "Great, but how do I log in?”
   @samjulien
   

   View Slide

4. View Slide

5. View Slide

6. Authentication is a Big Scary Subject.
   @samjulien
   

   View Slide

7. …with lots of jargon.
   @samjulien
   

   View Slide

8. …with lots of jargon vocab.
   @samjulien
   

   View Slide

9. NgRx is a Big Scary Subject.
   @samjulien
   

   View Slide

10. …with lots of jargon.
    @samjulien
    

    View Slide

11. …with lots of jargon vocab.
    @samjulien
    

    View Slide

12. View Slide

13. Auth in NgRx looks different
    than auth in vanilla Angular.
    @samjulien
    

    View Slide

14. Feature development in NgRx
    looks different than feature
    development in vanilla Angular.
    @samjulien
    

    View Slide

15. @samjulien
    Auth in NgRx requires a
    different mental model than
    auth in vanilla Angular.
    

    View Slide

16. @samjulien
    Sam Julien
    @samjulien
    @samjulien
    

    View Slide

17. @samjulien
    Sam Julien
    @samjulien
    Developer Advocate Engineer at Auth0
    @samjulien
    

    View Slide

18. @samjulien
    Sam Julien
    @samjulien
    Developer Advocate Engineer at Auth0
    GDE & Angular Collaborator
    @samjulien
    

    View Slide

19. @samjulien
    Sam Julien
    @samjulien
    Developer Advocate Engineer at Auth0
    GDE & Angular Collaborator
    UpgradingAngularJS.com, Thinkster, & Egghead
    @samjulien
    

    View Slide

20. Auth in NgRx looks different
    than auth in vanilla Angular.
    @samjulien
    

    View Slide

21. Feature development in NgRx
    looks different than feature
    development in vanilla Angular.
    @samjulien
    

    View Slide

22. View Slide

23. @samjulien
    Auth in NgRx requires a
    different mental model than
    auth in vanilla Angular.
    

    View Slide

24. View Slide

25. Start login
    Handle redirect
    Log in to provider
    @samjulien
    

    View Slide

26. Handle redirect
    Success
    Error
    @samjulien
    

    View Slide

27. @samjulien
    

    View Slide

28. Auth Service
    @samjulien
    

    View Slide

29. Auth Service
    Components
    @samjulien
    

    View Slide

30. Auth Service
    Components
    Data Services
    @samjulien
    

    View Slide

31. @samjulien
    

    View Slide

32. Auth Service
    Components
    Data Services
    @samjulien
    

    View Slide

33. Reducers
    Components
    Effects
    Auth Service
    @samjulien
    

    View Slide

34. Auth Service
    Components
    Data Services
    @samjulien
    

    View Slide

35. Reducers
    Components
    Effects
    Auth Service
    @samjulien
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. State Side Effects
    @samjulien
    

    View Slide

41. State
    Side Effects
    @samjulien
    

    View Slide

42. State What do I need to keep track of?
    Side Effects
    @samjulien
    

    View Slide

43. State What do I need to keep track of?
    Side Effects What events don’t directly change state?
    @samjulien
    

    View Slide

44. State
    Side Effects
    @samjulien
    

    View Slide

45. State Video Game Collection
    Side Effects
    @samjulien
    

    View Slide

46. State Video Game Collection
    Side Effects Call the API to get the collection.
    @samjulien
    

    View Slide

47. State
    Side Effects
    @samjulien
    

    View Slide

48. State Game Ownership
    Side Effects
    @samjulien
    

    View Slide

49. State Game Ownership
    Side Effects Call the API to add to the collection.
    @samjulien
    

    View Slide

50. State
    @samjulien
    

    View Slide

51. What do I need to keep track of?
    @samjulien
    

    View Slide

52. Where do I keep it?
    @samjulien
    

    View Slide

53. The Store
    

    View Slide

54. What goes in the store?
    @samjulien
    

    View Slide

55. Start login
    Handle redirect
    Log in to provider
    @samjulien
    

    View Slide

56. Handle redirect
    Success
    Error
    @samjulien
    

    View Slide

57. Success
    @samjulien
    

    View Slide

58. Success
    User Token
    Authenticated
    @samjulien
    

    View Slide

59. Success
    User Token
    Authenticated
    Redirect
    @samjulien
    

    View Slide

60. @samjulien
    

    View Slide

61. Auth Service
    @samjulien
    

    View Slide

62. export class AuthService {
    isAuthenticated: boolean = null;
    private userProfileSubject$ = new
    BehaviorSubject(null);
    userProfile$ = this.userProfileSubject$.asObservable();
    private tokenSubject$ = new
    BehaviorSubject(null);
    accessToken$ = this.userProfileSubject$.asObservable();
    }
    @samjulien
    

    View Slide

63. export class AuthService {
    isAuthenticated: boolean = null;
    private userProfileSubject$ = new
    BehaviorSubject(null);
    userProfile$ = this.userProfileSubject$.asObservable();
    private tokenSubject$ = new
    BehaviorSubject(null);
    accessToken$ = this.userProfileSubject$.asObservable();
    }
    @samjulien
    

    View Slide

64. export class AuthService {
    isAuthenticated: boolean = null;
    private userProfileSubject$ = new
    BehaviorSubject(null);
    userProfile$ = this.userProfileSubject$.asObservable();
    private tokenSubject$ = new
    BehaviorSubject(null);
    accessToken$ = this.userProfileSubject$.asObservable();
    }
    @samjulien
    

    View Slide

65. export class AuthService {
    isAuthenticated: boolean = null;
    private userProfileSubject$ = new
    BehaviorSubject(null);
    userProfile$ = this.userProfileSubject$.asObservable();
    private tokenSubject$ = new
    BehaviorSubject(null);
    accessToken$ = this.userProfileSubject$.asObservable();
    }
    @samjulien
    

    View Slide

66. export class AuthService {
    isAuthenticated: boolean = null;
    private userProfileSubject$ = new
    BehaviorSubject(null);
    userProfile$ = this.userProfileSubject$.asObservable();
    private tokenSubject$ = new
    BehaviorSubject(null);
    accessToken$ = this.userProfileSubject$.asObservable();
    }
    @samjulien
    

    View Slide

67. export class AuthService {
    isAuthenticated: boolean = null;
    private userProfileSubject$ = new
    BehaviorSubject(null);
    userProfile$ = this.userProfileSubject$.asObservable();
    private tokenSubject$ = new
    BehaviorSubject(null);
    accessToken$ = this.userProfileSubject$.asObservable();
    }
    @samjulien
    

    View Slide

68. @samjulien
    

    View Slide

69. export interface State {
    isAuthenticated: boolean;
    userProfile: UserProfile;
    accessToken: AccessToken;
    }
    @samjulien
    

    View Slide

70. export interface State {
    isAuthenticated: boolean;
    userProfile: UserProfile;
    accessToken: AccessToken;
    }
    @samjulien
    

    View Slide

71. export interface State {
    isAuthenticated: boolean;
    userProfile: UserProfile;
    accessToken: AccessToken;
    }
    @samjulien
    

    View Slide

72. export interface State {
    isAuthenticated: boolean;
    userProfile: UserProfile;
    accessToken: AccessToken;
    }
    @samjulien
    

    View Slide

73. Don’t keep access tokens in local storage!
    @samjulien
    

    View Slide

74. export interface State {
    isAuthenticated: boolean;
    userProfile: UserProfile;
    accessToken: AccessToken;
    }
    @samjulien
    

    View Slide

75. What messages do we need about state?
    @samjulien
    

    View Slide

76. What actions do we need?
    @samjulien
    

    View Slide

77. Actions
    

    View Slide

78. @samjulien
    

    View Slide

79. @samjulien
    

    View Slide

80. Events State Changes
    @samjulien
    

    View Slide

81. Events
    @samjulien
    

    View Slide

82. Start login
    Handle redirect
    Log in to provider
    @samjulien
    

    View Slide

83. Handle redirect
    Success
    Error
    @samjulien
    

    View Slide

84. Success
    @samjulien
    

    View Slide

85. Success
    User Token
    Authenticated
    @samjulien
    

    View Slide

86. Success
    User Token
    Authenticated
    Redirect
    @samjulien
    

    View Slide

87. export const logIn = createAction(
    ‘[Auth] Start Log In’
    );
    @samjulien
    export const logOut = createAction(
    '[Auth] Log out'
    );
    

    View Slide

88. export const handleRedirect = createAction(
    ‘[Auth] Handle redirect’
    );
    @samjulien
    

    View Slide

89. export const handleRedirectSuccess = createAction(
    '[Auth] Handle redirect success',
    props<{ targetRoute: string }>()
    );
    @samjulien
    export const handleRedirectError = createAction(
    '[Auth] Handle redirect error’,
    props<{ error: string }>()
    );
    

    View Slide

90. Events State Changes
    @samjulien
    

    View Slide

91. State Changes
    @samjulien
    

    View Slide

92. Start login
    Handle redirect
    Log in to provider
    @samjulien
    

    View Slide

93. Handle redirect
    Success
    Error
    @samjulien
    

    View Slide

94. Success
    @samjulien
    

    View Slide

95. Success
    User Token
    Authenticated
    @samjulien
    

    View Slide

96. Success
    User Token
    Authenticated
    Redirect
    @samjulien
    

    View Slide

97. export interface State {
    isAuthenticated: boolean;
    userProfile: UserProfile;
    accessToken: AccessToken;
    }
    @samjulien
    

    View Slide

98. export const loadUser = createAction(
    '[Auth] Load user’
    );
    export const loadUserSuccess = createAction(
    '[Auth] Load user success',
    props<{ user: User }>()
    );
    @samjulien
    

    View Slide

99. export const loadUser = createAction(
    '[Auth] Load user’
    );
    export const loadUserSuccess = createAction(
    '[Auth] Load user success',
    props<{ user: User }>()
    );
    @samjulien
    

    View Slide

100. export const loadUser = createAction(
     '[Auth] Load user’
     );
     export const loadUserSuccess = createAction(
     '[Auth] Load user success',
     props<{ user: User }>()
     );
     @samjulien
     

     View Slide

101. export const checkAuth = createAction('[Auth] Check auth’);
     export const checkAuthSuccess = createAction(
     '[Auth] Check auth success',
     props<{ isAuthenticated: boolean }>()
     );
     export const setNotAuthenticated = createAction(
     '[Auth] Not authenticated',
     props<{ isAuthenticated: boolean }>()
     );
     @samjulien
     

     View Slide

102. export const checkAuth = createAction('[Auth] Check auth’);
     export const checkAuthSuccess = createAction(
     '[Auth] Check auth success',
     props<{ isAuthenticated: boolean }>()
     );
     export const setNotAuthenticated = createAction(
     '[Auth] Not authenticated',
     props<{ isAuthenticated: boolean }>()
     );
     @samjulien
     

     View Slide

103. export const checkAuth = createAction('[Auth] Check auth’);
     export const checkAuthSuccess = createAction(
     '[Auth] Check auth success',
     props<{ isAuthenticated: boolean }>()
     );
     export const setNotAuthenticated = createAction(
     '[Auth] Not authenticated',
     props<{ isAuthenticated: boolean }>()
     );
     @samjulien
     

     View Slide

104. export const checkAuth = createAction('[Auth] Check auth’);
     export const checkAuthSuccess = createAction(
     '[Auth] Check auth success',
     props<{ isAuthenticated: boolean }>()
     );
     export const setNotAuthenticated = createAction(
     '[Auth] Not authenticated',
     props<{ isAuthenticated: boolean }>()
     );
     @samjulien
     

     View Slide

105. export const getToken = createAction('[Auth] Get token’);
     export const getTokenSuccess = createAction(
     '[Auth] Get token success',
     props<{ accessToken: Token }>()
     );
     export const getTokenFailure = createAction(
     '[Auth] Get token failure',
     props<{ error: string }>()
     );
     @samjulien
     

     View Slide

106. export const getToken = createAction('[Auth] Get token’);
     export const getTokenSuccess = createAction(
     '[Auth] Get token success',
     props<{ accessToken: Token }>()
     );
     export const getTokenFailure = createAction(
     '[Auth] Get token failure',
     props<{ error: string }>()
     );
     @samjulien
     

     View Slide

107. export const getToken = createAction('[Auth] Get token’);
     export const getTokenSuccess = createAction(
     '[Auth] Get token success',
     props<{ accessToken: Token }>()
     );
     export const getTokenFailure = createAction(
     '[Auth] Get token failure',
     props<{ error: string }>()
     );
     @samjulien
     

     View Slide

108. export const getToken = createAction('[Auth] Get token’);
     export const getTokenSuccess = createAction(
     '[Auth] Get token success',
     props<{ accessToken: Token }>()
     );
     export const getTokenFailure = createAction(
     '[Auth] Get token failure',
     props<{ error: string }>()
     );
     @samjulien
     

     View Slide

109. Where does state change?
     @samjulien
     

     View Slide

110. Reducers
     

     View Slide

111. Defining Reducers
     @samjulien
     

     View Slide

112. export const reducer = createReducer(
     initialState,
     // on()...
     );
     @samjulien
     

     View Slide

113. on(
     AuthActions.checkAuthSuccess,
     AuthActions.setNotAuthenticated,
     (state, { isAuthenticated }) => {
     return {
     ...state,
     isAuthenticated,
     };
     }
     )
     @samjulien
     

     View Slide

114. on(
     AuthActions.loadUserSuccess,
     (state, { user }) => {
     return {
     ...state,
     user,
     };
     }),
     @samjulien
     

     View Slide

115. on(
     AuthActions.getTokenSuccess,
     (state, { accessToken }) => {
     return {
     ...state,
     accessToken,
     };
     }
     )
     @samjulien
     

     View Slide

116. How do I read state in components?
     @samjulien
     

     View Slide

117. Selectors
     

     View Slide

118. @samjulien
     

     View Slide

119. Auth Service
     Components
     @samjulien
     

     View Slide

120. @samjulien
     

     View Slide

121. Reducers
     Components
     Effects
     Auth Service
     @samjulien
     

     View Slide

122. Reducers
     Components
     Effects
     Auth Service
     @samjulien
     Selectors
     

     View Slide

123. Defining Selectors
     @samjulien
     

     View Slide

124. @samjulien
     export const selectUser =
     (state: State) => state.user;
     export const selectIsAuthenticated =
     (state: State) => state.isAuthenticated;
     export const selectAccessToken =
     (state: State) => state.accessToken;
     

     View Slide

125. @samjulien
     export const selectUser =
     (state: State) => state.user;
     export const selectIsAuthenticated =
     (state: State) => state.isAuthenticated;
     export const selectAccessToken =
     (state: State) => state.accessToken;
     

     View Slide

126. @samjulien
     export const selectUser =
     (state: State) => state.user;
     export const selectIsAuthenticated =
     (state: State) => state.isAuthenticated;
     export const selectAccessToken =
     (state: State) => state.accessToken;
     

     View Slide

127. @samjulien
     export const selectUser =
     (state: State) => state.user;
     export const selectIsAuthenticated =
     (state: State) => state.isAuthenticated;
     export const selectAccessToken =
     (state: State) => state.accessToken;
     

     View Slide

128. @samjulien
     export const selectUser = createSelector(
     selectAuthStatus,
     fromAuthStatus.selectUser
     );
     export const selectAccessToken =
     createSelector(
     selectAuthStatus,
     fromAuthStatus.selectAccessToken
     );
     

     View Slide

129. @samjulien
     export const selectUser = createSelector(
     selectAuthStatus,
     fromAuthStatus.selectUser
     );
     export const selectAccessToken =
     createSelector(
     selectAuthStatus,
     fromAuthStatus.selectAccessToken
     );
     

     View Slide

130. @samjulien
     export const selectUser = createSelector(
     selectAuthStatus,
     fromAuthStatus.selectUser
     );
     export const selectAccessToken =
     createSelector(
     selectAuthStatus,
     fromAuthStatus.selectAccessToken
     );
     

     View Slide

131. @samjulien
     export const selectIsAuthenticated =
     createSelector(
     selectAuthStatus,
     fromAuthStatus.selectIsAuthenticated
     );
     

     View Slide

132. Okay, but what about the auth calls?
     @samjulien
     

     View Slide

133. Auth Service
     

     View Slide

134. State Side Effects
     @samjulien
     

     View Slide

135. View Slide

136. Reducers
     Components
     Effects
     Auth Service
     @samjulien
     

     View Slide

137. @samjulien
     

     View Slide

138. export class AuthService {
     handleRedirectCallback$ =
     from(this.authClient.handleRedirectCallback());
     }
     @samjulien
     

     View Slide

139. export class AuthService {⠀
     handleRedirect() {⠀
     }⠀
     }⠀
     @samjulien
     

     View Slide

140. export class AuthService {
     handleRedirect() {
     if (weHaveACode) {
     let targetRoute: string;
     const authComplete$ = this.handleRedirectCallback$.pipe(
     tap(response => {
     targetRoute = this.processUrl(response);
     }),
     concatMap(() => {
     return combineLatest([
     this.getUser$(),
     this.isAuthenticated$
     ]);
     })
     );
     authComplete$.subscribe(([user, loggedIn]) => {
     this.router.navigate([targetRoute]);
     });
     }
     }
     }
     @samjulien
     

     View Slide

141. export class AuthService {
     handleRedirect() {
     if (weHaveACode) {
     let targetRoute: string;
     const authComplete$ = this.handleRedirectCallback$.pipe(
     tap(response => {
     targetRoute = this.processUrl(response);
     }),
     concatMap(() => {
     return combineLatest([
     this.getUser$(),
     this.isAuthenticated$
     ]);
     })
     );
     authComplete$.subscribe(([user, loggedIn]) => {
     this.router.navigate([targetRoute]);
     });
     }
     }
     }
     @samjulien
     

     View Slide

142. export class AuthService {
     handleRedirect() {
     if (weHaveACode) {
     let targetRoute: string;
     const authComplete$ = this.handleRedirectCallback$.pipe(
     tap(response => {
     targetRoute = this.processUrl(response);
     }),
     concatMap(() => {
     return combineLatest([
     this.getUser$(),
     this.isAuthenticated$
     ]);
     })
     );
     authComplete$.subscribe(([user, loggedIn]) => {
     this.router.navigate([targetRoute]);
     });
     }
     }
     }
     @samjulien
     

     View Slide

143. export class AuthService {
     handleRedirect() {
     if (weHaveACode) {
     let targetRoute: string;
     const authComplete$ = this.handleRedirectCallback$.pipe(
     tap(response => {
     targetRoute = this.processUrl(response);
     }),
     concatMap(() => {
     return combineLatest([
     this.getUser$(),
     this.isAuthenticated$
     ]);
     })
     );
     authComplete$.subscribe(([user, loggedIn]) => {
     this.router.navigate([targetRoute]);
     });
     }
     }
     }
     @samjulien
     

     View Slide

144. export class AuthService {
     handleRedirect() {
     if (weHaveACode) {
     let targetRoute: string;
     const authComplete$ = this.handleRedirectCallback$.pipe(
     tap(response => {
     targetRoute = this.processUrl(response);
     }),
     concatMap(() => {
     return combineLatest([
     this.getUser$(),
     this.isAuthenticated$
     ]);
     })
     );
     authComplete$.subscribe(([user, loggedIn]) => {
     this.router.navigate([targetRoute]);
     });
     }
     }
     }
     @samjulien
     

     View Slide

145. export class AuthService {
     handleRedirect() {
     if (weHaveACode) {
     let targetRoute: string;
     const authComplete$ = this.handleRedirectCallback$.pipe(
     tap(response => {
     targetRoute = this.processUrl(response);
     }),
     concatMap(() => {
     return combineLatest([
     this.getUser$(),
     this.isAuthenticated$
     ]);
     })
     );
     authComplete$.subscribe(([user, loggedIn]) => {
     this.router.navigate([targetRoute]);
     });
     }
     }
     }
     @samjulien
     

     View Slide

146. export class AuthService {
     handleRedirect() {
     if (weHaveACode) {
     let targetRoute: string;
     const authComplete$ = this.handleRedirectCallback$.pipe(
     tap(response => {
     targetRoute = this.processUrl(response);
     }),
     concatMap(() => {
     return combineLatest([
     this.getUser$(),
     this.isAuthenticated$
     ]);
     })
     );
     authComplete$.subscribe(([user, loggedIn]) => {
     this.router.navigate([targetRoute]);
     });
     }
     }
     }
     @samjulien
     

     View Slide

147. export class AuthService {
     handleRedirect() {
     if (weHaveACode) {
     let targetRoute: string;
     const authComplete$ = this.handleRedirectCallback$.pipe(
     tap(response => {
     targetRoute = this.processUrl(response);
     }),
     concatMap(() => {
     return combineLatest([
     this.getUser$(),
     this.isAuthenticated$
     ]);
     })
     );
     authComplete$.subscribe(([user, loggedIn]) => {
     this.router.navigate([targetRoute]);
     });
     }
     }
     }
     @samjulien
     

     View Slide

148. @samjulien
     

     View Slide

149. export class AuthService {
     handleRedirectCallback$ =
     from(this.authClient.handleRedirectCallback());
     }
     @samjulien
     

     View Slide

150. export class AuthService {
     handleRedirectCallback$ =
     from(this.authClient.handleRedirectCallback());
     getUser$(options) {
     return from(this.authClient.getUser(options));
     }
     login() {
     this.authClient.loginWithRedirect();
     }
     logout() {
     this.authClient$.logout();
     }
     } @samjulien
     

     View Slide

151. export class AuthService {
     handleRedirectCallback$ =
     from(this.authClient.handleRedirectCallback());
     getUser$(options) {
     return from(this.authClient.getUser(options));
     }
     login() {
     this.authClient.loginWithRedirect();
     }
     logout() {
     this.authClient$.logout();
     }
     } @samjulien
     

     View Slide

152. export class AuthService {
     handleRedirectCallback$ =
     from(this.authClient.handleRedirectCallback());
     getUser$(options) {
     return from(this.authClient.getUser(options));
     }
     login() {
     this.authClient.loginWithRedirect();
     }
     logout() {
     this.authClient$.logout();
     }
     } @samjulien
     

     View Slide

153. export class AuthService {
     handleRedirectCallback$ =
     from(this.authClient.handleRedirectCallback());
     getUser$(options) {
     return from(this.authClient.getUser(options));
     }
     login() {
     this.authClient.loginWithRedirect();
     }
     logout() {
     this.authClient$.logout();
     }
     } @samjulien
     

     View Slide

154. export class AuthService {
     handleRedirectCallback$ =
     from(this.authClient.handleRedirectCallback());
     getUser$(options) {
     return from(this.authClient.getUser(options));
     }
     login() {
     this.authClient.loginWithRedirect();
     }
     logout() {
     this.authClient$.logout();
     }
     } @samjulien
     

     View Slide

155. Authentication service will be very thin.
     @samjulien
     

     View Slide

156. View Slide

157. State Side Effects
     @samjulien
     

     View Slide

158. Side Effects
     @samjulien
     

     View Slide

159. How do we handle events don’t
     directly change state?
     @samjulien
     

     View Slide

160. Effects
     

     View Slide

161. Start login
     Handle redirect
     Log in to provider
     @samjulien
     

     View Slide

162. Handle redirect
     Success
     Error
     @samjulien
     

     View Slide

163. Success
     @samjulien
     

     View Slide

164. Success
     User Token
     Authenticated
     @samjulien
     

     View Slide

165. Success
     User Token
     Authenticated
     Redirect
     @samjulien
     

     View Slide

166. login$ = createEffect(
     () =>
     this.actions$.pipe(
     ofType(AuthActions.login),
     tap(() => this.authService.login())
     ),
     { dispatch: false }
     );
     @samjulien
     

     View Slide

167. login$ = createEffect(
     () =>
     this.actions$.pipe(
     ofType(AuthActions.login),
     tap(() => this.authService.login())
     ),
     { dispatch: false }
     );
     @samjulien
     

     View Slide

168. login$ = createEffect(
     () =>
     this.actions$.pipe(
     ofType(AuthActions.login),
     tap(() => this.authService.login())
     ),
     { dispatch: false }
     );
     @samjulien
     

     View Slide

169. login$ = createEffect(
     () =>
     this.actions$.pipe(
     ofType(AuthActions.login),
     tap(() => this.authService.login())
     ),
     { dispatch: false }
     );
     @samjulien
     

     View Slide

170. handleRedirect$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.handleRedirect),
     exhaustMap(() => {
     @samjulien
     )
     );
     ... })
     

     View Slide

171. handleRedirect$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.handleRedirect),
     exhaustMap(() => {
     @samjulien
     )
     );
     ... })
     

     View Slide

172. handleRedirect$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.handleRedirect),
     exhaustMap(() => {
     @samjulien
     )
     );
     ... })
     

     View Slide

173. handleRedirect$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.handleRedirect),
     exhaustMap(() => {
     @samjulien
     )
     );
     ... })
     

     View Slide

174. exhaustMap(() => {
     @samjulien
     ...
     

     View Slide

175. exhaustMap(() => {
     @samjulien
     // handle redirect and process tokens
     this.authService.handleRedirect.pipe(
     map(({ redirectUrl }) =>
     AuthActions.handleRedirectSuccess(
     { redirectUrl }
     )),
     catchError(({ error }) =>
     AuthActions.handleRedirectFailure(
     { error }
     ))
     );
     

     View Slide

176. exhaustMap(() => {
     @samjulien
     // handle redirect and process tokens
     this.authService.handleRedirect.pipe(
     map(({ redirectUrl }) =>
     AuthActions.handleRedirectSuccess(
     { redirectUrl }
     )),
     catchError(({ error }) =>
     AuthActions.handleRedirectFailure(
     { error }
     ))
     );
     

     View Slide

177. exhaustMap(() => {
     @samjulien
     // handle redirect and process tokens
     this.authService.handleRedirect.pipe(
     map(({ redirectUrl }) =>
     AuthActions.handleRedirectSuccess(
     { redirectUrl }
     )),
     catchError(({ error }) =>
     AuthActions.handleRedirectFailure(
     { error }
     ))
     );
     

     View Slide

178. exhaustMap(() => {
     @samjulien
     // handle redirect and process tokens
     this.authService.handleRedirect.pipe(
     map(({ redirectUrl }) =>
     AuthActions.handleRedirectSuccess(
     { redirectUrl }
     )),
     catchError(({ error }) =>
     AuthActions.handleRedirectFailure(
     { error }
     ))
     );
     

     View Slide

179. exhaustMap(() => {
     @samjulien
     // handle redirect and process tokens
     this.authService.handleRedirect.pipe(
     map(({ redirectUrl }) =>
     AuthActions.handleRedirectSuccess(
     { redirectUrl }
     )),
     catchError(({ error }) =>
     AuthActions.handleRedirectFailure(
     { error }
     ))
     );
     

     View Slide

180. exhaustMap(() => {
     @samjulien
     // handle redirect and process tokens
     this.authService.handleRedirect.pipe(
     map(({ redirectUrl }) =>
     AuthActions.handleRedirectSuccess(
     { redirectUrl }
     )),
     catchError(({ error }) =>
     AuthActions.handleRedirectFailure(
     { error }
     ))
     );
     

     View Slide

181. handleRedirectSuccess$ = createEffect(
     () =>
     this.actions$.pipe(
     ofType(AuthActions.handleRedirectSucess),
     tap(({ redirectUrl }) =>
     this.router.navigate([redirectUrl]))
     ),
     { dispatch: false }
     );
     @samjulien
     

     View Slide

182. handleRedirectSuccess$ = createEffect(
     () =>
     this.actions$.pipe(
     ofType(AuthActions.handleRedirectSucess),
     tap(({ redirectUrl }) =>
     this.router.navigate([redirectUrl]))
     ),
     { dispatch: false }
     );
     @samjulien
     

     View Slide

183. handleRedirectSuccess$ = createEffect(
     () =>
     this.actions$.pipe(
     ofType(AuthActions.handleRedirectSucess),
     tap(({ redirectUrl }) =>
     this.router.navigate([redirectUrl]))
     ),
     { dispatch: false }
     );
     @samjulien
     

     View Slide

184. handleRedirectSuccess$ = createEffect(
     () =>
     this.actions$.pipe(
     ofType(AuthActions.handleRedirectSucess),
     tap(({ redirectUrl }) =>
     this.router.navigate([redirectUrl]))
     ),
     { dispatch: false }
     );
     @samjulien
     

     View Slide

185. checkAuth$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.checkAuth, AuthActions.handleRedirectSuccess),
     concatMap(() =>
     this.authService.isAuthenticated$.pipe(
     map(isAuthenticated =>
     isAuthenticated
     ? AuthActions.checkAuthSuccess({ isAuthenticated })
     : AuthActions.setNotAuthenticated({ isAuthenticated })
     )
     )
     )
     )
     );
     @samjulien
     

     View Slide

186. checkAuth$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.checkAuth, AuthActions.handleRedirectSuccess),
     concatMap(() =>
     this.authService.isAuthenticated$.pipe(
     map(isAuthenticated =>
     isAuthenticated
     ? AuthActions.checkAuthSuccess({ isAuthenticated })
     : AuthActions.setNotAuthenticated({ isAuthenticated })
     )
     )
     )
     )
     );
     @samjulien
     

     View Slide

187. checkAuth$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.checkAuth, AuthActions.handleRedirectSuccess),
     concatMap(() =>
     this.authService.isAuthenticated$.pipe(
     map(isAuthenticated =>
     isAuthenticated
     ? AuthActions.checkAuthSuccess({ isAuthenticated })
     : AuthActions.setNotAuthenticated({ isAuthenticated })
     )
     )
     )
     )
     );
     @samjulien
     

     View Slide

188. checkAuth$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.checkAuth, AuthActions.handleRedirectSuccess),
     concatMap(() =>
     this.authService.isAuthenticated$.pipe(
     map(isAuthenticated =>
     isAuthenticated
     ? AuthActions.checkAuthSuccess({ isAuthenticated })
     : AuthActions.setNotAuthenticated({ isAuthenticated })
     )
     )
     )
     )
     );
     @samjulien
     

     View Slide

189. checkAuth$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.checkAuth, AuthActions.handleRedirectSuccess),
     concatMap(() =>
     this.authService.isAuthenticated$.pipe(
     map(isAuthenticated =>
     isAuthenticated
     ? AuthActions.checkAuthSuccess({ isAuthenticated })
     : AuthActions.setNotAuthenticated({ isAuthenticated })
     )
     )
     )
     )
     );
     @samjulien
     

     View Slide

190. checkAuth$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.checkAuth, AuthActions.handleRedirectSuccess),
     concatMap(() =>
     this.authService.isAuthenticated$.pipe(
     map(isAuthenticated =>
     isAuthenticated
     ? AuthActions.checkAuthSuccess({ isAuthenticated })
     : AuthActions.setNotAuthenticated({ isAuthenticated })
     )
     )
     )
     )
     );
     @samjulien
     

     View Slide

191. loadUser$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.loadUser, AuthActions.checkAuthSuccess),
     exhaustMap(() =>
     this.authService.getUser$().pipe(
     map(user => {
     return AuthActions.loadUserSuccess({ user });
     })
     )
     )
     )
     );
     @samjulien
     

     View Slide

192. loadUser$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.loadUser, AuthActions.checkAuthSuccess),
     exhaustMap(() =>
     this.authService.getUser$().pipe(
     map(user => {
     return AuthActions.loadUserSuccess({ user });
     })
     )
     )
     )
     );
     @samjulien
     

     View Slide

193. loadUser$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.loadUser, AuthActions.checkAuthSuccess),
     exhaustMap(() =>
     this.authService.getUser$().pipe(
     map(user => {
     return AuthActions.loadUserSuccess({ user });
     })
     )
     )
     )
     );
     @samjulien
     

     View Slide

194. loadUser$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.loadUser, AuthActions.checkAuthSuccess),
     exhaustMap(() =>
     this.authService.getUser$().pipe(
     map(user => {
     return AuthActions.loadUserSuccess({ user });
     })
     )
     )
     )
     );
     @samjulien
     

     View Slide

195. loadUser$ = createEffect(() =>
     this.actions$.pipe(
     ofType(AuthActions.loadUser, AuthActions.checkAuthSuccess),
     exhaustMap(() =>
     this.authService.getUser$().pipe(
     map(user => {
     return AuthActions.loadUserSuccess({ user });
     })
     )
     )
     )
     );
     @samjulien
     

     View Slide

196. Success
     User Token
     Authenticated
     @samjulien
     

     View Slide

197. User
     Token
     Authenticated
     @samjulien
     

     View Slide

198. User
     Token
     Authenticated
     @samjulien
     

     View Slide

199. Reducers
     Components
     Effects
     Auth Service
     @samjulien
     

     View Slide

200. Effects are the brain of the authentication flow.
     @samjulien
     

     View Slide

201. View Slide

202. Let’s Review
     

     View Slide

203. Auth in NgRx looks different
     than auth in vanilla Angular.
     @samjulien
     

     View Slide

204. View Slide

205. View Slide

206. Feature development in NgRx
     looks different than feature
     development in vanilla Angular.
     @samjulien
     

     View Slide

207. View Slide

208. Start login
     Handle redirect
     Log in to provider
     @samjulien
     

     View Slide

209. Handle redirect
     Success
     Error
     @samjulien
     

     View Slide

210. @samjulien
     

     View Slide

211. Auth Service
     @samjulien
     

     View Slide

212. Auth Service
     Components
     Data Services
     @samjulien
     

     View Slide

213. @samjulien
     

     View Slide

214. State Side Effects
     @samjulien
     

     View Slide

215. Auth Service
     Components
     Data Services
     @samjulien
     

     View Slide

216. Reducers
     Components
     Effects
     Auth Service
     @samjulien
     

     View Slide

217. View Slide

218. View Slide

219. View Slide

220. View Slide

221. Reducers
     Components
     Effects
     Auth Service
     @samjulien
     

     View Slide

222. View Slide

223. View Slide

224. samj.im/ngrx-auth
     @samjulien
     

     View Slide

225. samj.im/ngrx-auth
     Thank you!
     @samjulien
     

     View Slide