https://github.com/apsarawitharana/se10-jwt-token-frontend

A Spring-based project for generating and validating JSON Web Tokens (JWTs) Front End using HTML ,CSS, JS , Bootstrap, and Ajax
https://github.com/apsarawitharana/se10-jwt-token-frontend

ajax bootstrap css html js

Last synced: 21 days ago
JSON representation

A Spring-based project for generating and validating JSON Web Tokens (JWTs) Front End using HTML ,CSS, JS , Bootstrap, and Ajax

• Host: GitHub
• URL: https://github.com/apsarawitharana/se10-jwt-token-frontend
• Owner: ApsaraWitharana
• Created: 2024-08-28T05:06:24.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-08-28T12:21:40.000Z (5 months ago)
• Last Synced: 2024-11-11T11:50:08.389Z (3 months ago)
• Topics: ajax, bootstrap, css, html, js
• Language: HTML
• Homepage:
• Size: 832 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# JWT Authentication Frontend

## Overview

This project is a frontend implementation for user authentication using JSON Web Tokens (JWT). It is built with HTML, CSS, JavaScript, Bootstrap, and AJAX. The frontend interacts with a backend service that generates and verifies JWT tokens.

## Features

- User login form

- JWT token storage in `localStorage`

- Protected routes that require JWT authentication

- AJAX requests to the backend with JWT tokens

## Technology Stack

- **HTML**: Structure of the web pages.

- **CSS & Bootstrap**: Styling and responsive design.

- **JavaScript**: Handling user interactions and making AJAX requests.

- **AJAX**: Communicating with the backend API for authentication and data retrieval.

## Getting Started

1. Clone the repository:

    ```bash

    git clone https://github.com/ApsaraWitharana/SE10-JWT-Token-FrontEnd.git

    ```

2. Open the project in your code editor.

3. Set up your backend server to issue JWT tokens on successful login.

4. Link your frontend with the backend by setting the correct API endpoint in the JavaScript file.

## Usage

### Login

1. Fill in the login form with your credentials.

2. On successful login, the JWT token will be stored in `localStorage`.

3. This token will be included in the `Authorization` header for all subsequent requests to protected routes.

### Signin Form - ![WhatsApp Image 2024-08-28 at 17 49 14_d044cae2](https://github.com/user-attachments/assets/48172131-d55f-4bf2-a54c-a0747514d78f)

### Signup Form - ![WhatsApp Image 2024-08-28 at 17 49 57_f88b74a2](https://github.com/user-attachments/assets/b3b6599a-4b80-487d-aa84-66a2a3814b83)

### Example AJAX Request with JWT

### Architecture to Authentication Backend - Frontend  : ![WhatsApp Image 2024-08-28 at 13 49 18_9f38b14e](https://github.com/user-attachments/assets/ea6a0f09-2c0d-420d-a844-9bb3483ec553)