Session 13 – Node.js III - Building a "secure" App - JWT
Our App includes:
- A front-end (Vue.js App) offers:
- A home page (protected), only authenticated users can reach.
- Login and signup pages.
- A logout button
- A backend (Node.js App) allows: (1) Verify authenticated users; (2) Register new users; (3) Login registered users; and (4) Sign-out logged-in users.
- A database (Postgres) contains the user’s data (id, email, password).
A simplified representation of the App is shown in Fig. 1, and a more detailed representation of the App sequence diagram is shown in Fig.2
Fig. 1 A simplified representation of the App
Fig. 2 A simplified representation of the sequence diagram of the App
1. Backend (Node.js and Postgres)
1. Clone the following repository Repo.
2. Navigate to the project directory
3. Install dependencies
> npm install
4. Run the project
> node server Or > nodemon server
2. Frontend (Vue.js)
1. Clone the following repository Repo.
2. Install dependencies
> npm install
3. Compiles and hot-reloads for development
> npm run serve
3. Test your App (front-end and back-end)
1. visit http://localhost:8080/ (both the back-end and front-end should be running), you will be directed to the login page.
2. Since you did not register yet, you can go ahead and navigate to the signup page. Enter the credentials for the user (Email and Password). On successful registration, you will be redirected to the homepage again but this time you will be allowed access and you will see the posts.
3. While on the homepage, open devTool, navigate to the Application tab, then choose “Cookies”, under which you should find the JWT.
4. Press on the logout button, you will redirected to the login page, and the JWT token will disappear.
5. Try to login using the same credentials, you will have access and the token will appear in the devTool again.
4. The code (front-end and back-end)
1. Inspect the code in the database.js file, there is nothing new except the use of UUID.
2. Inspect the code in the server.js file and try to understand it, everything is annotated to facilitate your understanding.
3. Inspect the code in the front-end (vue.js), starting with ../router/index.js and try to understand how the navigation guard works, then check the authenticated() function in s../auth.js that is used by the navigation guard. After that, check the code in both SignUp.vue and Login.vue and try to understand how they work. Finally. check the code related to the logout button.