Running the Notes application with user authentication

We have created the user information REST service, created a module to access that service from Notes, modified the router modules to correctly access the user information service, and changed other things required to support login/logout.

The final task that is necessary is to change the scripts section of package.json, as follows:

“scripts”: {

“start”: “cross-env DEBUG=notes:*

SEQUELIZE_CONNECT=models/sequelize-

sqlite.yaml NOTES_MODEL=sequelize

USER_SERVICE_URL=http://localhost:5858

node ./app.mjs“,

“dl-minty”: “mkdir -p minty && npm run dl-minty-css && npm run dl- minty-min-css”,

“dl-minty-css”: “wget https://bootswatch.com/4/minty/bootstrap.css

-O minty/bootstrap.css”, “dl-minty-min-css”: “wget

https://bootswatch.com/4/minty/bootstrap.min.css

-O minty/bootstrap.min.css”

},

In the previous chapters, we built up quite a few combinations of models and databases for running the Notes application. Since we don’t need those, we can strip most of them out from package.json. This leaves us with one, configured to use the Sequelize model for Notes, using the SQLite3 database, and to use the new user authentication service that we wrote earlier. All the other Notes data models are still available, just by setting the environment variables appropriately.

USER_SERVICE_URL needs to match the port number that we designated for that service.

In one window, start the user authentication service, as follows:

$ cd users

$ npm start

> user-auth-server@0.0.1 start /Users/david/chap08/users

> DEBUG=users:* PORT=5858 SEQUELIZE_CONNECT=sequelize-sqlite.yaml node 

user-server

users:server User-Auth-Service listening at http://127.0.0.1:5858 +0ms 

Then, in another window, start the Notes application, as follows:

$ cd notes

$ DEBUG=notes:* npm start

> notes@0.0.0 start /Users/david/chap08/notes

> cross-env DEBUG=notes:* SEQUELIZE_CONNECT=models/sequelize-

 sqlite.yaml NOTES_MODEL=sequelize

USER_SERVICE_URL=http://localhost:5858 node ./app.mjs notes:server Listening on port 3000 +0ms

You’ll be greeted with the following message:

Notice the new button, Log in, and the lack of an ADD Note button. We’re not logged in, and so partials/header.hbs is rigged to show only the Log in button.

Click on the Log in button, and you will see the login screen, as shown in the following screenshot:

This is our login form from views/login.hbs. You can now log in, create a note or three, and you might end up with the following messages on the home page:

You now have both Log Out and ADD Note buttons. You’ll notice that the Log Out button has the username (me) shown. After some thought and consideration, this seemed the most compact way to show whether the user is logged in, and which user is logged in. This might drive the user experience team nuts, and you won’t know whether this user interface design works until it’s tested with users, but it’s good enough for our purpose at the moment.

In this section, we’ve learned how to set up a basic login/logout functionality using locally stored user information. This is fairly good, but many web applications find it useful to allow folks to log in using their Twitter or other social media accounts for authentication. In the next section, we’ll learn about that by setting up Twitter authentication.

Source: Herron David (2020), Node.js Web Development: Server-side web development made easy with Node 14 using practical examples, Packt Publishing.

Leave a Reply

Your email address will not be published. Required fields are marked *