Vue 3 Express JWT Authentication
Description
A full-stack authentication system built with Vue 3, Express.js, JSON Web Tokens (JWT), and MySQL. This project provides user registration (sign-up) and authentication (sign-in) features, ensuring secure access to your application.
Prerequisites
Before you begin, ensure you have met the following requirements:
-
MySQL: You need to have MySQL installed on your local machine. If you haven’t installed it yet, you can download and install MySQL from the official website.
Ensure that you have the MySQL server up and running, and you can access it using a MySQL client.
-
Node.js: This project requires Node.js. If you don’t have Node.js installed, you can download it from the official website.
-
npm (Node Package Manager): npm comes bundled with Node.js. You can verify your npm installation by running
npm -v
in your terminal.
Getting Started
To run this project locally, follow these steps:
-
Clone the repository to your local machine:
git clone https://github.com/Hackersgoddest/vue3-express-jwt-auth.git
-
Navigate to the project directory:
cd vue3-express-jwt-auth
-
Install the required dependencies for the client and server:
cd client npm install cd ../server npm install
-
Configure the environment variables:
- Create a
.env
file in theserver
directory and set your JWT secret key and database connection details:DB_NAME=database_name DB_USER=database_user DB_PASSWORD=database_password DB_HOST=127.0.0.1 DB_PORT=3306 PORT=3000 JWT_SECRET_KEY=your_jwt_key
- Create a
-
Start the client and server:
-
Start the Vue 3 client:
cd client npm run dev
-
Start the Express.js server:
cd server npm run migrate npm run dev
-
-
Access the application in your web browser at http://localhost:8080.
Usage
-
This project provides user authentication functionality, including:
- User registration (sign-up) with validation
- User authentication (sign-in) with JWT token generation
- Secure routes that require authentication
- Error handling for authentication failures
-
You can use this project as a starting point for building authentication features in your Vue 3 and Express.js applications.
Contributing
- Contributions to this project are welcome! If you have ideas for improvements or bug fixes, please submit an issue or a pull request.
Images