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.
- 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
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.
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.
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
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.
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 message
Server listening on port 4000.
- 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 to find help quickly from experienced Vue 3 freelance developers.
Follow me for updates
When I'm not coding
My wife and I are attempting to ride motorcycles around Australia and vlog about it on YouTube.