Vue 3 Authentication with Node.js JWT API
In this tutorial we'll go through how to implement authentication with a Vue front-end app and Node.js back-end API
The result is a simple full-stack login application with the front-end built with Vue 3 and the back-end built with Node.js and Express 4.
Tutorial Contents
- Vue 3 App Overview
- Node API Overview
- Download and Start the Vue 3 App
- Download and Start the Node API
- Connect the Front-End to the Back-End
Vue 3 Front-End App Overview
Front-end authentication app built with Vue 3.2.33 and Pinia 2.0.14
The Vue 3 app is pretty minimal and contains just 2 pages to demonstrate JWT authentication:
/login- public login page with username and password fields, on submit the page sends a POST request to the API to authenticate user credentials, on success the API returns a JWT token to make authenticated requests to secure API routes./- secure home page that displays a list of users fetched from a secure API endpoint using the JWT token received after successful login.
Complete documentation is available at Vue 3 + Pinia - JWT Authentication Tutorial & Example.
Node.js Back-End API Overview
Authentication API built with Node.js and Express.js 4.18.2
The Node.js API has just two endpoints/routes to demonstrate authentication with JWT and accessing a restricted route with JWT:
/users/authenticate- public route that accepts HTTP POST requests containing the username and password in the body. If the username and password are correct then a JWT authentication token and the user details are returned./users- secure route that accepts HTTP GET requests and returns a list of all the users in the application if the HTTP Authorization header contains a valid JWT token. If there is no auth token or the token is invalid then a 401 Unauthorized response is returned.
Complete documentation is available at Node.js + Express 4 - JWT Authentication Tutorial with Example API.
Download and Start the Vue 3 Auth App
Follow these steps to run the Vue 3 front-end authentication app:
- Install Node.js and npm from https://nodejs.org.
- Download or clone the project source code from https://github.com/cornflourblue/vue-3-pinia-jwt-authentication-example
- Install all required npm packages by running
npm installfrom the command line in the project root folder (where the package.json is located). - Start the application by running
npm run devfrom the command line in the project root folder. - Open a browser and go to the application at
http://localhost:3000
Fake backand API by default
The Vue 3 authentication app runs with a fake backend by default to enable it to run completely in the browser without a real API, we'll switch to connect to the Node.js API below once it's up and running.
Download and Start the Node.js Auth API
Follow these steps to run the Node.js + Express 4 backend API:
- Download or clone the project source code from https://github.com/cornflourblue/node-jwt-authentication-api
- Start the api by running
npm startfrom the command line in the project root folder, you should see the messageServer listening on port 4000.
Connect the Front-End with the Back-End
- In the Vue 3 auth app, remove or comment out the 2 lines below the comment
// setup fake backendlocated in the/src/main.jsfile, then restart the Vue app and and it will now send requests to the Node.js authentication API.
That's it! You now have a full stack Vue 3 + Node.js authentication application running.
Need Some Vue 3 Help?
Search fiverr for freelance Vue 3 developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!