Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Role of Effects in NgRx Authentication

The Role of Effects in NgRx Authentication

Building token authentication into an NgRx application can be overwhelming and confusing. Authentication is already a big, scary subject and so is NgRx. When you put them together, things get confusing fast. In this talk, we’ll do a comparison of how authentication in a vanilla Angular app differs from auth in an NgRx app. We’ll then see how the central nervous system of authentication shifts from a service in regular Angular to Effects in NgRx.

This talk will be practical and code-driven, leaving you equipped to tackle adding this feature to your NgRx application at work on Monday. You’ll learn how Effects can handle loading authentication state, navigate users to protected routes, and process tokens received from an identity provider. By the end, you’ll feel way better about tackling auth in NgRx!

Sam Julien

April 03, 2020
Tweet

More Decks by Sam Julien

Other Decks in Technology

Transcript

  1. Effects are powerful and can do many things. @samjulien Effects

    aren’t as concrete as Actions or Reducers.
  2. The Role of Effects in NgRx Auth @samjulien Effects are

    the DJ of NgRx Common Struggles with Effects
  3. The Role of Effects in NgRx Auth @samjulien Effects are

    the DJ of NgRx Common Struggles with Effects Effects in the Log In Flow
  4. @samjulien Sam Julien @samjulien Sr. Developer Advocate Engineer at Auth0

    GDE & Angular Collaborator UpgradingAngularJS.com, Thinkster, & egghead
  5. The Role of Effects in NgRx Auth @samjulien Effects are

    the DJ of NgRx Common Struggles with Effects Effects in the Log In Flow
  6. The Role of Effects in NgRx Auth @samjulien Effects are

    the DJ of NgRx Common Struggles with Effects Effects in the Log In Flow
  7. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  8. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  9. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  10. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  11. The Role of Effects in NgRx Auth @samjulien Effects are

    the DJ of NgRx Common Struggles with Effects Effects in the Log In Flow
  12. @samjulien Store token and user in memory Interact with auth

    SDK Handle all redirect logic Auth Service
  13. export class AuthService { // other methods hidden logIn() {

    this.authClient.loginWithRedirect(); } } @samjulien
  14. export class AuthService { // other methods hidden logIn() {

    this.authClient.loginWithRedirect(); } } @samjulien
  15. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  16. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  17. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  18. “Hey app, log me in!” @samjulien Call the auth service

    to log in Handle the redirect flow Update the store
  19. “Hey app, log me in!” @samjulien Call the auth service

    to log in Handle the redirect flow Update the store
  20. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    { // Set the user & token somewhere?? // Navigate to the redirectUrl?? return AuthActions.handleRedirectSuccess(); }), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) );
  21. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    { // Set the user & token somewhere?? // Navigate to the redirectUrl?? return AuthActions.handleRedirectSuccess(); }), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) );
  22. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    { // Set the user & token somewhere?? // Navigate to the redirectUrl?? return AuthActions.handleRedirectSuccess(); }), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) ); Calls Auth SDK to get *
  23. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    { // Set the user & token somewhere?? // Navigate to the redirectUrl?? return AuthActions.handleRedirectSuccess(); }), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) );
  24. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    { // Set the user & token somewhere?? // Navigate to the redirectUrl?? return AuthActions.handleRedirectSuccess(); }), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) );
  25. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    { // Set the user & token somewhere?? // Navigate to the redirectUrl?? return AuthActions.handleRedirectSuccess(); }), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) );
  26. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    { // Set the user & token somewhere?? // Navigate to the redirectUrl?? return AuthActions.handleRedirectSuccess(); }), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) );
  27. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    { // Set the user & token somewhere?? // Navigate to the redirectUrl?? return AuthActions.handleRedirectSuccess(); }), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) );
  28. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    { // Set the user & token somewhere?? // Navigate to the redirectUrl?? return AuthActions.handleRedirectSuccess(); }), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) );
  29. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    { // Set the user & token somewhere?? // Navigate to the redirectUrl?? return AuthActions.handleRedirectSuccess(); }), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) );
  30. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    { // Set the user & token somewhere?? // Navigate to the redirectUrl?? return AuthActions.handleRedirectSuccess(); }), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) );
  31. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  32. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  33. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    { // Set the user & token somewhere?? // Navigate to the redirectUrl?? return AuthActions.handleRedirectSuccess(); }), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) );
  34. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    { // Set the user & token somewhere?? // Navigate to the redirectUrl?? return AuthActions.handleRedirectSuccess(); }), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) );
  35. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    { // Set the user & token somewhere?? // Navigate to the redirectUrl?? return AuthActions.handleRedirectSuccess(); }), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) );
  36. exhaustMap(() => { @samjulien this.authService.handleRedirect.pipe( map(({ payload, redirectUrl }) =>

    AuthActions.handleRedirectSuccess( { payload, redirectUrl } )), catchError(({ error }) => AuthActions.handleRedirectFailure( { error } )) );
  37. on(AuthActions.handleRedirectSuccess, (state, { payload }) => { return { ...state,

    token: payload.accessToken, user: payload.userProfile }; }); @samjulien
  38. on(AuthActions.handleRedirectSuccess, (state, { payload }) => { return { ...state,

    token: payload.accessToken, user: payload.userProfile }; }); @samjulien
  39. on(AuthActions.handleRedirectSuccess, (state, { payload }) => { return { ...state,

    token: payload.accessToken, user: payload.userProfile }; }); @samjulien
  40. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  41. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects ✅
  42. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects ✅ ✅
  43. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects ✅ ✅ ✅
  44. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  45. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  46. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  47. “Hey app, log me in!” @samjulien Call the auth service

    to log in Handle the redirect flow Update the store
  48. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  49. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects
  50. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects ✅
  51. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects ✅ ✅
  52. Effects in NgRx Auth @samjulien Actions that only trigger Effects

    Non-dispatching Effects Writing complex Effects ✅ ✅ ✅
  53. @samjulien NgRx Conf November 5-6, 2020 U.S. Space & Rocket

    Center, Huntsville, AL https://ti.to/ngrx-conf/2020/discount/ngconf