Authentication System

screenshot of Authentication System
express
vue
scss
tailwind

Custom Authentication Boilerplate with JWT, ExpressJS, TypeScript and VueJS.

Overview:

This product is a full stack boilerplate for authentication using a JWT (JSON Web Token) strategy. It utilizes NodeJS with TypeScript in the back-end and VueJS with JavaScript in the front-end. The product features various pages such as a register page, log in page, log out page, profile page, dashboard page, and custom 404 page. It also includes Vue route guards for protecting private routes, user information stored in Pinia for persistence, responsive design with Tailwind CSS, modern notifications, error handling, input validation, and JWT authentication as an HTTP only cookie in the browser.

Features:

  • Register Page: Allows users to register for an account.
  • Log in Page: Allows users to log in to their account.
  • Log out Page: Allows users to log out of their account.
  • Profile Page: Displays user information and allows for editing.
  • Dashboard Page: Provides a dashboard for users to view relevant information.
  • Custom 404 Page: Displays a customized page for 404 errors.
  • Vue Route Guards: Protects private and protected routes.
  • User information stored persisted in Pinia: Ensures user information is stored persistently using Pinia.
  • Responsive Design with Tailwind CSS: Provides a responsive design that adapts to different screen sizes using Tailwind CSS.
  • Modern Notifications: Utilizes modern notification techniques for improved user experience.
  • Error Handler: Handles errors gracefully and provides appropriate feedback to users.
  • Input Validation: Performs validation of user inputs to ensure data integrity.
  • JWT authentication as an HTTP only cookie in the browser: Implements a JWT authentication strategy using HTTP only cookies for improved security.

Server:

  1. Clone the repository to your local machine.
  2. Navigate to the server directory.
  3. Install the dependencies by running the command npm install.
  4. Create a .env file and add the necessary environment variables.
  5. Start the server by running the command npm start.

Client:

  1. Navigate to the client directory.
  2. Install the dependencies by running the command npm install.
  3. Create a .env file and add the necessary environment variables.
  4. Start the client by running the command npm run serve.

Summary:

This full stack boilerplate provides a secure and efficient solution for implementing authentication using a JWT strategy. With features such as user registration, log in, log out, profile management, and a responsive dashboard, it offers a comprehensive solution for managing user authentication in a web application. The use of modern technologies such as TypeScript, VueJS, and Tailwind CSS ensures a robust and user-friendly experience. The installation process is relatively straightforward, making it easy for developers to set up and customize the boilerplate according to their requirements.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

pinia
Pinia

Pinia is the official state management library for Vue.js. It provides a simple and intuitive API with full TypeScript support, devtools integration, and modular design. Pinia replaces Vuex as the recommended state management solution for Vue 3.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.