A full-stack authentication system built with Vue 3 and MySQL

by Vue.js Examples

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:

  1. Clone the repository to your local machine:

    git clone https://github.com/Hackersgoddest/vue3-express-jwt-auth.git

  2. Navigate to the project directory:

    cd vue3-express-jwt-auth

  3. Install the required dependencies for the client and server:

    cd client
npm install
cd ../server
npm install

  4. Configure the environment variables:

    • Create a .env file in the server 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

  5. 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

  6. 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

GitHub

View Github