Costanza JWT Token Explorer

A local JWT Token Explorer running in a Docker container, powered by React. This application allows users to decode, verify, and sign JSON Web Tokens (JWTs) through a user-friendly interface. Built with a React frontend and an Express backend, it’s designed for developers to test and explore JWTs locally.

Table of Contents

• Features
• Prerequisites
• Installation
• Usage
• Project Structure
• Docker Setup
• Testing
• Contributing
• License
• Contact

Features

• Decode JWTs: View the header, payload, and signature of a JWT.
• Verify JWTs: Validate a JWT using a provided secret key.
• Sign JWTs: Generate a new JWT with a sample payload and custom secret.
• Responsive UI: Built with React and Material-UI, featuring a clean interface with a logo (client/public/logo.png).
• Dockerized: Run the app in a single container using Docker Compose.
• CORS Support: Seamless development with separate frontend (http://localhost:3001) and backend (http://localhost:3000).

Prerequisites

• Node.js (v20 or higher)
• Docker and Docker Compose (for containerized deployment)
• Git (to clone the repository)
• IntelliJ IDEA (optional, for development and debugging)

Installation

1. Clone the Repository:

   git clone https://github.com/ChristianPacifici/costanza-jwt-token-explorer.git
   cd costanza-jwt-token-explorer

2. Install Backend Dependencies:

   cd backend
   npm install

3. Install Frontend Dependencies:

   cd client
   npm install

4. Add Logo (if not already present):

   • Place a logo.png file in client/public/ (e.g., a 300x60px image).
   • The logo is displayed in the app header and this README.

Usage

Running Locally (Development)

1. Start the Backend:

   cd backend
   npm start

   • Runs the Express server on http://localhost:3000.

2. Start the Frontend:

   cd client
   npm start

   • Runs the React app on http://localhost:3001.

3. Access the App:

   • Open http://localhost:3001 in your browser.
   • Use the interface to decode, verify, or sign JWTs.

Running with Docker Compose

1. Build and Run:

   docker-compose up --build

   • Builds the Docker image and starts the container.
   • The app is available at http://localhost:3000.

2. Stop the Container:

   docker-compose down

Project Structure

costanza-jwt-token-explorer/
├── backend/                    # Express backend
│   ├── node_modules/
│   ├── package.json           # Backend dependencies
│   └── server.js              # Express server with JWT logic
├── client/                     # React frontend
│   ├── node_modules/
│   ├── public/
│   │   └── logo.png           # Application logo
│   ├── src/
│   │   ├── App.jsx            # Main React component
│   │   ├── components/
│   │   │   └── JwtForm.jsx    # JWT input and processing component
│   │   └── index.jsx          # React entry point
│   ├── package.json
├── .dockerignore              # Ignores node_modules, etc.
├── .gitignore                 # Ignores build artifacts
├── Dockerfile                 # Builds backend and frontend
├── docker-compose.yml         # Docker Compose configuration
└── README.md                  # Project documentation

Docker Setup

The app is containerized using a single Docker image, defined in Dockerfile and orchestrated with docker-compose.yml. The React frontend is built and served by the Express backend on port 3000.

• Dockerfile: Builds the React app (client/) and copies the backend (backend/), then runs node backend/server.js.
• docker-compose.yml: Defines a single service (jwt-explorer) with port mapping 3000:3000.

To customize:

• Update docker-compose.yml for environment variables (e.g., port changes).
• Ensure client/public/logo.png is present for the logo to display.

Testing

Test the app with the following JWT token:

• Token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjE3MTYyMzkwMjJ9.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
• Secret: your-256-bit-secret

Steps

1. Open http://localhost:3000 (Docker) or http://localhost:3001 (development).
2. Enter the JWT in the “JWT Token” field.
3. Decode: Click “Decode” to view the header and payload.
4. Verify: Enter the secret and click “Verify” to validate the signature.
5. Sign: Enter a secret (or use default) and click “Sign Example” to generate a new token.

Expected Decode Output

{
  "header": {
    "alg": "HS256",
    "typ": "JWT"
  },
  "payload": {
    "sub": "1234567890",
    "name": "John Doe",
    "iat": 1516239022,
    "exp": 1716239022
  },
  "signature": "SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
}

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/YourFeature).
3. Commit changes (git commit -m 'Add YourFeature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a Pull Request.

License

MIT License

Copyright (c) 2025 Christian Pacifici

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Contact

• Author: Christian Pacifici
• GitHub: ChristianPacifici
• Issues: Report issues here