Table of Contents for
Node.js 8 the Right Way

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Node.js 8 the Right Way by Jim Wilson Published by Pragmatic Bookshelf, 2018
  1. Title Page
  2. Node.js 8 the Right Way
  3. Node.js 8 the Right Way
  4. Node.js 8 the Right Way
  5. Node.js 8 the Right Way
  6.  Acknowledgments
  7.  Preface
  8. Why Node.js the Right Way?
  9. What’s in This Book
  10. What This Book Is Not
  11. Code Examples and Conventions
  12. Online Resources
  13. Part I. Getting Up to Speed on Node.js 8
  14. 1. Getting Started
  15. Thinking Beyond the web
  16. Node.js’s Niche
  17. How Node.js Applications Work
  18. Aspects of Node.js Development
  19. Installing Node.js
  20. 2. Wrangling the File System
  21. Programming for the Node.js Event Loop
  22. Spawning a Child Process
  23. Capturing Data from an EventEmitter
  24. Reading and Writing Files Asynchronously
  25. The Two Phases of a Node.js Program
  26. Wrapping Up
  27. 3. Networking with Sockets
  28. Listening for Socket Connections
  29. Implementing a Messaging Protocol
  30. Creating Socket Client Connections
  31. Testing Network Application Functionality
  32. Extending Core Classes in Custom Modules
  33. Developing Unit Tests with Mocha
  34. Wrapping Up
  35. 4. Connecting Robust Microservices
  36. Installing ØMQ
  37. Publishing and Subscribing to Messages
  38. Responding to Requests
  39. Routing and Dealing Messages
  40. Clustering Node.js Processes
  41. Pushing and Pulling Messages
  42. Wrapping Up
  43. Node.js 8 the Right Way
  44. Part II. Working with Data
  45. 5. Transforming Data and Testing Continuously
  46. Procuring External Data
  47. Behavior-Driven Development with Mocha and Chai
  48. Extracting Data from XML with Cheerio
  49. Processing Data Files Sequentially
  50. Debugging Tests with Chrome DevTools
  51. Wrapping Up
  52. 6. Commanding Databases
  53. Introducing Elasticsearch
  54. Creating a Command-Line Program in Node.js with Commander
  55. Using request to Fetch JSON over HTTP
  56. Shaping JSON with jq
  57. Inserting Elasticsearch Documents in Bulk
  58. Implementing an Elasticsearch Query Command
  59. Wrapping Up
  60. Node.js 8 the Right Way
  61. Part III. Creating an Application from the Ground Up
  62. 7. Developing RESTful Web Services
  63. Advantages of Express
  64. Serving APIs with Express
  65. Writing Modular Express Services
  66. Keeping Services Running with nodemon
  67. Adding Search APIs
  68. Simplifying Code Flows with Promises
  69. Manipulating Documents RESTfully
  70. Emulating Synchronous Style with async and await
  71. Providing an Async Handler Function to Express
  72. Wrapping Up
  73. 8. Creating a Beautiful User Experience
  74. Getting Started with webpack
  75. Generating Your First webpack Bundle
  76. Sprucing Up Your UI with Bootstrap
  77. Bringing in Bootstrap JavaScript and jQuery
  78. Transpiling with TypeScript
  79. Templating HTML with Handlebars
  80. Implementing hashChange Navigation
  81. Listing Objects in a View
  82. Saving Data with a Form
  83. Wrapping Up
  84. 9. Fortifying Your Application
  85. Setting Up the Initial Project
  86. Managing User Sessions in Express
  87. Adding Authentication UI Elements
  88. Setting Up Passport
  89. Authenticating with Facebook, Twitter, and Google
  90. Composing an Express Router
  91. Bringing in the Book Bundle UI
  92. Serving in Production
  93. Wrapping Up
  94. Node.js 8 the Right Way
  95. 10. BONUS: Developing Flows with Node-RED
  96. Setting Up Node-RED
  97. Securing Node-RED
  98. Developing a Node-RED Flow
  99. Creating HTTP APIs with Node-RED
  100. Handling Errors in Node-RED Flows
  101. Wrapping Up
  102. A1. Setting Up Angular
  103. A2. Setting Up React
  104. Node.js 8 the Right Way

Adding Authentication UI Elements

At this point, your skeleton B4 application has session support, but no way to sign in. There are two parts to implementing the authentication flow—the front end and the back end.

On the front end, we need to add buttons so the user can choose the service with which to authenticate. The first step is to install the social buttons for Bootstrap so we can insert them into a template.[90] This module depends on Font Awesome for its icons,[91] so you’ll need to install that too. Use npm for both.

​ ​$ ​​npm​​ ​​install​​ ​​--save​​ ​​-E​​ ​​bootstrap-social@5.1.1​​ ​​font-awesome@4.7.0​

Next, for webpack to find and use these you’ll need to import them into your index.ts file. Add these lines at the top, right after the import line for Bootstrap, then save the file:

fortify/b4/app/index.ts
​ ​import​ ​'../node_modules/bootstrap-social/bootstrap-social.css'​;
​ ​import​ ​'../node_modules/font-awesome/css/font-awesome.min.css'​;

Now we can add the social sign-in buttons. Open your templates.ts file and update the welcome template by inserting the following to the end of the .jumbotron div:

fortify/b4/app/templates.ts
​ {{#if session.auth}}
​ <p>View your <a href=​"#list-bundles"​>bundles</a>.</p>
​ {{else}}
​ <p>Sign in with any of these services to begin.</p>
​ <div class=​"row"​>
​  <div class=​"col-sm-6"​>
​  <a href=​"/auth/facebook"​ class=​"btn btn-block btn-social btn-facebook"​>
​  Sign in with Facebook
​  <span class=​"fa fa-facebook"​></span>
​  </a>
​  <a href=​"/auth/twitter"​ class=​"btn btn-block btn-social btn-twitter"​>
​  Sign in with Twitter
​  <span class=​"fa fa-twitter"​></span>
​  </a>
​  <a href=​"/auth/google"​ class=​"btn btn-block btn-social btn-google"​>
​  Sign in with Google
​  <span class=​"fa fa-google"​></span>
​  </a>
​  </div>
​ </div>
​ {{/if}}

This code uses a Handlebars {{#if}} block to check if the passed-in session object has auth set to true. Recall that Handlebars is a templating language we introduced for rendering HTML in ​Templating HTML with Handlebars​. If session.auth is true, then we show users a link to where they can view and edit their book bundles. Otherwise, we show the social sign-in buttons.

Note that our code currently doesn’t pass an empty session object to the welcome Handlebars template. We’ll need an API that the browser can hit to return a session object; we’ll implement that shortly. But for now, Handlebars will evaluate the expression session.auth to be falsey.

Also, the links for the Facebook, Twitter, and Google social sign-in buttons go to /auth/facebook, /auth/twitter, and /auth/google. Our server.js currently implements none of these endpoints, so we’ll need to do that as well.

After you save this file, head back to http://b4.example.com:60900. It should now look like the figure.

images/fortify-b4-welcome-social.png

While you have templates.ts open for editing, let’s make one more quick change. When a user is signed in, there are a couple of links that would be helpful to show in the nav bar up top: a link to their book bundles, and a Sign Out link.

To add those, find the main Handlebars template and update it to look as follows by adding the {{#if}} block to the end of the .container-fluid div.

fortify/b4/app/templates.ts
​ {{#if session.auth}}
​ <div class=​"collapse navbar-collapse"​>
​  <ul class=​"nav navbar-nav navbar-right"​>
​  <li><a href=​"#list-bundles"​>My Bundles</a></li>
​  <li><a href=​"/auth/signout"​>Sign Out</a></li>
​  </ul>
​ </div>​<!-- /.navbar-collapse -->​
​ {{/if}}

Here again, we’re using {{#if}} to perform an auth check. If the user is signed in, then we’ll show links to My Bundles and Sign Out.

When you save this file, there won’t be any visible changes in your rendered page as yet. But once we finish the auth flow, these links will show up. Let’s implement the auth flow now.