JWT Encoder | Ping Identity Developer Portal (2024)

A JSON Web Token (JWT, pronounced “jot”) is a token for sharing claims. Claims are encoded JSON objects that include some information about a subject and are often used in identity security applications to transfer information about a user. A JWT is an open-standards approach to securely sharing information between a client and a server in a compact, self-contained way that provides stateless authentication.

For example, after you sign in to a website, information about your account is encoded and passed around to the relevant parties in a JWT. This can enable single sign-on (SSO), which means you do not have to sign in again to another domain owned by the same company. Instead, your information can be passed between domains in the JWT, so the second domain knows who you are and that you have already been authenticated by a trusted party.

The main benefits of using a JWT are:

• Compact representation of information about a subject or user
• They can be encrypted or digitally signed so the information can be passed around securely

Components of a JWT

Technically, a JWT is represented as a JWS (JSON Web Signature) object or a JWE (JSON Web Encryption) object. However, the entire string is often referred to as a JWT if the payload is an encoded JWT object. [JWTs are always represented using the JWS Compact Serialization or the JWE Compact Serialization](https://tools.ietf.org/html/rfc7519#section-1).

There are three main parts of a JWS or JWE that include a JWT claim:

1. Header: The type of encoded object in the payload and any extra encoding
2. Payload: The JWT claims set
3. Signature: An encoding of the header and payload

The main parts are encoded then concatenated with a “.” separating them, so that it looks like

 {header}.{payload}.{signature}

This is your JWS or JWE object.

The commponents are described below.

Header

The header includes information about how the JWT claims set, the payload, is encoded. For example, take a look at the following header:

{ "typ": "JWT", "alg": "HS256"}

This tells us that we have a JWT that is integrity protected with the HMAC SHA-256 algorithm. The payload with a JWE including this header will be of a JWT signed and encrypted with the HMAC SHA-256 algorithm. The type may be left out if the JWSs and JWEs used by the application are JWT types. It’s intended to avoid confusion when different types are being used.

Payload

The payload contains the JWT object itself, and the JWT itself is just a set of claims. For example, take a look at the following payload:

{ "aud": "https://api.pingone.com", "iss": "https://auth.pingone.com/abcdefg12345/as", "exp": "1300819380”}

This payload has an audience (“aud”) of the PingOne for Customers API, an issuer (“iss”) of the PingOne for Customers Authorization Server, and has a set expiration date (“exp”). These are some common claim names, but they will vary depending on the application and service being used.

Signature

The signature is the header and payload (JWT claims set) encoded using the algorithm specified in the header. In our example above it would be the encoded header concatenated with the encoded JWT claims set encoded with the HMAC SHA-256 algorithm.

JWT Encoder Tool

Use the tool by following these steps:

1. First, remember that JWTs are tokens that are often used as the credentials for SSO applications (mostly for OAuth 2.0). The token is entirely decoded client side in the browser, so make sure to take proper precautions to protect your token
2. Fill out the header. A common usecase is supplied as an example to work off of or to use. The tool currently supports the algorithms of RS256 and HS256
3. Fill out the payload. Use custom claims or predefined ones like the ones listed at the start
4. Fill out the signature with either an RSA Private Key for RS56 or HS256 passcode.* The RSA Private key should have the header and footer shown in the example.
5. Press the Encode button
6. Enjoy your newly created JWT. Try out the JWT Decoder tool to verify the contents of the JWT.

*These should be kept private! All calculations happen within the browser, but you should still be careful with sharing these values for production apps. Suggested use is for testing only.

Sign up for a free trial of PingOne to play around with OAuth 2.0 apps and learn the flow and how JWTs fit into an SSO scenario.

For more information

• Ping Identity Developer Resources
• Ping Identity Glossary

": '),a&&(d="true"===a||"false"===a?d+f+a+"":d+('"'===a[0]?c:u)+a+""),d+(o||"")},t.propTypes={data:s.any,json:s.any,replacer:s.func,silent:s.bool,space:s.oneOfType([s.number,s.string]),theme:s.object,themeClassName:s.string,onJSONPrettyError:s.func},t.defaultProps={data:"",json:"",silent:!0,space:2,themeClassName:"__json-pretty__"},t}(u.Component);e.exports=f},function(e,t,n){"use strict";var r=n(1),i=n(2),a=n(0),o=(n(5),n(3)),s=n(4),u=n(7),l={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",subtitle1:"h6",subtitle2:"h6",body1:"p",body2:"p"},c=a.forwardRef(function(e,t){var n=e.align,s=void 0===n?"inherit":n,c=e.classes,f=e.className,d=e.color,h=void 0===d?"initial":d,p=e.component,g=e.display,m=void 0===g?"initial":g,v=e.gutterBottom,y=void 0!==v&&v,b=e.noWrap,x=void 0!==b&&b,w=e.paragraph,S=void 0!==w&&w,E=e.variant,F=void 0===E?"body1":E,A=e.variantMapping,C=void 0===A?l:A,T=Object(i.a)(e,["align","classes","className","color","component","display","gutterBottom","noWrap","paragraph","variant","variantMapping"]),P=p||(S?"p":C[F]||l[F])||"span";return a.createElement(P,Object(r.a)({className:Object(o.a)(c.root,f,"inherit"!==F&&c[F],"initial"!==h&&c["color".concat(Object(u.a)(h))],x&&c.noWrap,y&&c.gutterBottom,S&&c.paragraph,"inherit"!==s&&c["align".concat(Object(u.a)(s))],"initial"!==m&&c["display".concat(Object(u.a)(m))]),ref:t},T))});t.a=Object(s.a)(function(e){return{root:{margin:0},body2:e.typography.body2,body1:e.typography.body1,caption:e.typography.caption,button:e.typography.button,h1:e.typography.h1,h2:e.typography.h2,h3:e.typography.h3,h4:e.typography.h4,h5:e.typography.h5,h6:e.typography.h6,subtitle1:e.typography.subtitle1,subtitle2:e.typography.subtitle2,overline:e.typography.overline,srOnly:{position:"absolute",height:1,width:1,overflow:"hidden"},alignLeft:{textAlign:"left"},alignCenter:{textAlign:"center"},alignRight:{textAlign:"right"},alignJustify:{textAlign:"justify"},noWrap:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},gutterBottom:{marginBottom:"0.35em"},paragraph:{marginBottom:16},colorInherit:{color:"inherit"},colorPrimary:{color:e.palette.primary.main},colorSecondary:{color:e.palette.secondary.main},colorTextPrimary:{color:e.palette.text.primary},colorTextSecondary:{color:e.palette.text.secondary},colorError:{color:e.palette.error.main},displayInline:{display:"inline"},displayBlock:{display:"block"}}},{name:"MuiTypography"})(c)},,,function(e,t,n){"use strict";var r=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(i){return!1}}()?Object.assign:function(e,t){for(var n,o,s=function(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),u=1;u