JWT Signer & Verifier

A simple, fast, and SEO-friendly web application to generate (sign) and verify JSON Web Tokens (JWTs) directly in your browser. Built with vanilla HTML, CSS, and JavaScript, using crypto-js for cryptographic operations and PrismJS for syntax highlighting.

Live Demo: [Link to your deployed GitHub Pages site here]

✨ Features

• Sign JWTs:
  • Provide custom Header (JSON)
  • Provide custom Payload (JSON)
  • Enter a Secret Key (kept client-side)
  • Select Algorithm: HS256, HS384, HS512
  • Real-time JSON validation and syntax highlighting.
  • Header alg property automatically updated based on selection.
• Verify JWTs:
  • Input a JWT string.
  • Provide the Secret Key used for signing.
  • Displays decoded Header and Payload with syntax highlighting.
  • Shows clear verification status (Valid / Invalid).
• Secure: All operations (signing, verification, secret handling) happen entirely within your browser. Secrets are never sent to any server.
• Fast & Lightweight: No heavy frameworks, just plain web technologies.
• SEO Friendly: Includes relevant meta tags for search engines.
• Responsive: Basic responsiveness for use on different screen sizes.
• Toggle Secret Visibility: Option to show/hide secret keys.

🚀 Usage

1. Clone or download this repository.
2. Open the index.html file directly in your web browser. No build step or server needed for local use.

OR

1. Deploy the contents (index.html, styles.css, app.js) to a web server or static hosting platform like GitHub Pages.

Signing a JWT

1. Navigate to the "Sign JWT" tab.
2. Modify the default Header JSON or enter your own. Ensure it's valid JSON. The alg property will be automatically set based on the dropdown selection.
3. Enter your Payload JSON. Ensure it's valid JSON.
4. Enter your Secret Key in the designated input field.
5. Select the desired signing algorithm (HS256, HS384, HS512) from the dropdown.
6. Click "Generate JWT".
7. The generated JWT will appear in the output box below.

Verifying a JWT

1. Navigate to the "Verify JWT" tab.
2. Paste the JWT string you want to verify into the "JWT Token" input field.
3. Enter the Secret Key that was originally used to sign the JWT.
4. Click "Verify JWT".
5. The verification status (Valid/Invalid) and the decoded Header and Payload will be displayed below.

📦 Deployment (GitHub Pages)

This project is ready to be deployed on GitHub Pages:

1. Create a new repository on GitHub (e.g., jwt-signer-verifier).
2. Push the index.html, styles.css, and app.js files to the main branch of your repository.
3. Go to your repository settings on GitHub.
4. Navigate to the Pages section (usually under "Code and automation").
5. Under "Build and deployment", select Deploy from a branch as the source.
6. Choose the main branch (or whichever branch you pushed to) and the / (root) folder. Click Save.
7. GitHub Pages will build and deploy your site. The URL will be provided in the Pages settings (usually https://yourgithubusername.github.io/repository-name/).
8. (Optional but Recommended): Update the og:url and og:image meta tags in index.html to point to your live GitHub Pages URL and potentially an image hosted in the repo. You might also want to add a favicon.ico.

📚 Libraries Used

• crypto-js: For HMAC-SHA signing and verification logic.
• PrismJS: For JSON syntax highlighting.

📄 License

This project is open source. Feel free to use, modify, and distribute. (Consider adding a specific license like MIT if desired).