Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sharjeel-siddiqui12/intro-to-jwt
This project gives the basics implementation of JSON Web Tokens (JWT) for authentication and the use of Context API for state management in a React application.
https://github.com/sharjeel-siddiqui12/intro-to-jwt
Last synced: 12 days ago
JSON representation
This project gives the basics implementation of JSON Web Tokens (JWT) for authentication and the use of Context API for state management in a React application.
- Host: GitHub
- URL: https://github.com/sharjeel-siddiqui12/intro-to-jwt
- Owner: sharjeel-siddiqui12
- License: mit
- Created: 2024-09-27T11:08:54.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-25T00:40:12.000Z (3 months ago)
- Last Synced: 2024-10-25T12:02:06.320Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 176 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Introduction to JWT
This project gives the basics of implementation of JSON Web Tokens (JWT) for authentication and the use of Context API for state management in a React application.
## Table of Contents
- [Introduction](#introduction)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [JWT Authentication](#jwt-authentication)
- [Context API](#context-api)
- [Contributing](#contributing)
- [License](#license)
## Features
- User authentication using JWT
- State management using Context API
- Secure routes based on user authentication
- Simple and clean UI
## Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/intro-to-JWT.git
```
2. Navigate to the project directory:
```bash
cd intro-to-JWT
```
3. Install dependencies:
```bash
npm install
```
## Usage
1. Start the development server:
```bash
npm run dev
```
2. Start the react application:
```bash
npm run dev
```
3. Open your browser and navigate to `http://localhost:5173`.
## JWT Authentication
JSON Web Tokens (JWT) are used to securely transmit information between the client and the server. In this project, JWT is used for user authentication. Upon successful login, a token is generated and sent to the client. This token is then stored in local storage and included in the headers of subsequent requests to access protected routes.
### Key Points:
- **Token Generation**: The server generates a JWT upon successful login.
- **Token Storage**: The client stores the JWT in local storage.
- **Token Validation**: The server validates the JWT on each request to protected routes.
## Context API
The Context API is used for state management in this project. It allows us to share state across the entire application without having to pass props down manually at every level.
### Key Points:
- **Global State**: The Context API provides a way to create global state that can be accessed by any component.
- **Provider Component**: A provider component is used to wrap the part of the application that needs access to the global state.
- **Consumer Component**: Any component that needs access to the global state can use the `useContext` hook to consume the context.
## Contributing
Contributions are welcome! Please open an issue or submit a pull request for any changes.
## License
This project is licensed under the MIT License.