Description
We are actively working on a new version of the JWT Debugger, the application you've been using on jwt.io. We'd like to share insights with the community that uses this tool on the app's current state and future.
My name is Dan. I work at Okta in the Auth0 DevRel team as an engineer who helps build and ship digital experiences and tools for developers. I'd like to start by sharing with y'all the current state of the jwt.io app.
The Present of JWT.io
The current state of the tool allows developers to:
- Decode a JWT
- Encode and sign a JWT
- Verify the signature of a JWT
- Specify if the secret for signature verification of HMAC-signed JWTs was encoded or not using base64.
- Learn about JWTs using the introduction page.
- Explore JWT libraries using the libraries page.
The introduction and libraries pages work well. So we don't foresee major changes other than stylistic ones happening to those pages. As such, let's focus on the home page, which has the JWT Debugger Tool.
During my UX research, I spotted the following pain points in the tool:
- Decoding, encoding, and signature verification operations are mashed together in the same widget, which can create confusion about which operation is taking place and which one had any failures or errors.
- There's no clarity on the role or significance of using a "secret base64 encoded" input for the signature verification of JWTs signed with HMAC algorithms.
- Some operation errors are too generic to be helpful, and some simply never surface to the user. Error handling needs work!
- Passing a token to the site via the URL query parameters has created concerns about the token's privacy.
We'd like to address these pain points in the next version of the site.
The Future of JWT.io
What we'd like to offer in the next version to improve the UI/UX of the site is as follows:
- The Debugger would feature three widgets to handle each JWT operation: Decode JWT, Verify JWT Signature, and Encode and Sign JWT.
- Each operation widget will have its error handling and clear instructions, allowing you to better understand why each operation may have failed and giving you insights on how to resolve the error.
- The signature verification widget will provide you encoding options for the shared secret or format options for the public key, allowing you to determine if there are formatting issues on any of the inputs to verify a JWT signature.
- We'd also like to improve the documentation around why anyone should need or want to encode the shared secret of JWTs signed with HMAC algorithms.
- By having discrete widgets per operation, we can have cleaner business logic that allows us to focus on surfacing better errors to the end user and to handle more errors to make the tool even more helpful.
- We'd like to migrate from using URL query parameters to provide input to the JWT decoder to using URL fragments, which would be functional and available in the context of the client side only.
Let's take a peek at what these widgets could look like :)
JWT Decoder
The decoder gives you a table with the decoded data along with a description.
If you click on the "JSON" option, you can also see the JSON representation of the decoded JWT parts:
JWT Signature Verification
This widget gives you the option to verify the signature of the token:
There are two encoding formats you can specify for shared secret input:
There are two formats you can specify for public keys:
JWT Encoder
This widget allows you to create a JWT by providing JSON input for the header and payload. You can then sign the token using any of the available algorithms and providing a shared secret or private key:
Share Your Feedback
We'd love to hear from you on what has worked and not worked so far for you about using jwt.io and what your thoughts are on this future version.