Token Based Authentication 🔐

Token-Based Authentication app offers a secure and efficient way to register and authenticate users. It leverages the power of access and refresh tokens to ensure a seamless user experience and robust security.

- Prerequisites
- Tech Stack
- Getting Started
  - HTTPS:
  - SSH:
- Testing
- Storybook
- Git rules
  - Semantic Commit types
  - Branches
- Setting up Eslint & Prettier
  - Visual Studio Code
  - WebStorm
- Project Structure
- Live URIs

Prerequisites

Tech Stack

[react @18.2.0] - A JavaScript library for building user interfaces
[typescript @5.0.2] - Strongly typed programming language that builds on JavaScript
[tailwindcss @3.3.3] - Utility-first CSS framework for rapidly building modern websites
[cypress @13.3.0] - E2E testing framework
[vite @4.4.5] - Vite is a frontend tool that is used for building fast and optimized web applications
[react-query @4.36.1] - Hooks for fetching, caching and updating asynchronous data in React
[react-hook-form @7.47.0] - Performant, flexible and extensible forms with easy-to-use validation.
[storybook @7.4.6] - Frontend workshop for building UI components and pages in isolation
[@reduxjs/toolkit @1.9.7] - A set of tools that helps simplify Redux development
[axios @1.5.1] - Promise based HTTP client for the browser and node.js
[react-i18next @23.5.1] - Internationalization-framework
🐶 [husky @8.0.0] - Tool that allows us to run scripts especially while using version control like git
[react-router @6.16.0] - Routing library for React
React-toastify [react-toastify @9.1.3] - React-Toastify allows you to add notifications to your app with ease
Yup [yup @1.3.2] - Schema builder for runtime value parsing and validation

Getting Started

1. First of all you need to clone repository from github

HTTPS:

git clone https://github.com/Saba-Var/Token-Based-Authentication.git

SSH:

git clone [email protected]:Saba-Var/Token-Based-Authentication.git

2. Navigate to the repository

cd Token-Based-Authentication

3. Next step requires to install all the dependencies

npm install

4. copy .env.example and create .env file.

cp .env.example .env

5. Run application locally from the terminal:

npm run dev

Open localhost:3000 to view it in your browser.

Testing

In order to run tests you need start development server with the npm run dev command. After that you can run tests with the one of those options:

1. Run E2E tests using the Cypress GUI

npm run cypress:open

2. Run E2E tests in the terminal

npm run cypress:test

Storybook

In order to run Storybook you need to execute the following command in the terminal

npm run storybook

You will be redirected automatically to localhost:6006

Git rules

Semantic Commit types

type	Description
feat	add new functionality
chore	minor changes
fix	fix any bugs
refactor	the code quality has been improved without changing the functionality
docs	improvement/addition of documentation
tests	write new tests or refactor the existing ones
wip	working in progress

Commit example - chore: rename test workflow

chore: rename test workflow
┌───── ┌───────────────────
│      │
│      └──> Commit message in present tense.
│
└─────────> Commit type: chore, docs, feat, fix, etc.

Branches

Branch names are quite the similar to commit types but with different syntax. Example feature branch name fix/password_change_request_redirect_uri

fix/password_change_request_redirect_uri
┌── ┌───────────────────────────────────
│   │
│   └─────> Feature branch name written in camel_case
│
└─────────> Feature branch type

Setting up Eslint & Prettier

Visual Studio Code

1. You need to install following extensions in VS Code Prettier - Code formatter and ESLint

WebStorm

1. open settings Ctrl + comma

2. search for Prettier and then select on save. Don't forget to choose Prettier package

3. search for Eslint and make sure it is not disabled

4. go to Keymap and search Eslint

5. change the shortcut of FixEslintProblems

Project Structure

┌─── .github
│     └── workflows
├─── .husky
├─── .storybook
├─── cypress
│    ├── e2e
│    ├── fixtures
│    └── support
├─── public 
│    └── assets
│        └── locales
│            ├── en
│            └── ka
├─── readme
│    └── assets
├─── src
│    ├── assets
│    │   └── images
│    ├── components
│    │   ├── icons
│    │   ├── layout
│    │   ├── shared
│    │   └── storybook
│    ├── config
│    ├── data
│    ├── hooks
│    ├── pages
│    │   ├── 404
│    │   ├── account-activation
│    │   ├── home
│    │   ├── log-in
│    │   ├── new-password
│    │   ├── profile
│    │   ├── request-password-reset
│    │   └── sign-up
│    ├── router
│    ├── services
│    ├── store
│    │   ├── slices
│    │   └── store.ts
│    ├── types
│    ├── utils
│    ├── validation
│    ├── env.d.ts
│    ├── index.css
│    └── main.tsx
│── .env
│── .env.example
│── .eslintrc
│── .gitignore
│── .prettierrc
│── cypress.config.ts
│── i18n.ts
│── index.html
│── package-lock.json
│── package.json
│── postcss.config.js
│── README.md
│── tailwind.config.js
│── tsconfig.json
│── tsconfig.node.json
│── vercel.json
└── vite.config.ts

Live URIs

Production: token-based-authentication-demo.vercel.app
Backend API base uri: token-based-authentication-api.vercel.app

saba-var / token-based-authentication Goto Github PK