JWT payload examples

As part of the embedding process, you’ll need to construct a payload to be included within your JWT. The payload contains information about when the JWT itself and the dashboard you’re trying to display. You also use the payload to pass information to Chartio to display the appropriate information for that dashboard. In this article, we’ll provide examples for different scenarios where the env parameter of your payload would change. The env parameter is where you pass values for any Dashboard Controls in your embedded dashboard or variables held in your application.

The following examples use Node.js syntax, and you can use either single or double quotes in your payload:

Basic (no env variables)

If you don’t have any Dashboard Controls on your embedded dashboard or env variables on your web page, the payload looks pretty simple since you don’t need to include the env parameter.

Example payload:

const payload = {
  "iat": parseInt(new Date().getTime() / 1000),
  "nbf": parseInt(new Date().getTime() / 1000),
  "exp": parseInt(new Date().getTime() / 1000) + (60 * 15),
  "dashboard": 231,
  "organization": 1
};

Static Control values

Now, you have a Dashboard Control–for instance, an email Dropdown called EMAIL_DROPDOWN–and you want to set the default value from your application rather than in Chartio. What do you need to do? Add the env parameter to your payload to pass the static value to your Control.

Example payload:

const payload = {
	"iat": parseInt(new Date().getTime() / 1000),
	"nbf": parseInt(new Date().getTime() / 1000),
	"exp": parseInt(new Date().getTime() / 1000) + (60 * 15),
	"dashboard": 231,
	"organization": 1,
	"env": {
		"EMAIL_DROPDOWN": "john.doe@email.com"
	}
};

Dynamic Control values

What if you want the end user to only view data relevant to them on the embedded dashboard? One option would be to use the end user’s login email within a Hidden Variable so the end user cannot alter this Control’s value. How would you do that?

Let’s say in your application, you save the user’s email to a variable called userEmail, and you have a function to generate your JWT. You’d pass that userEmail variable into your JWT function so you can use it as the value for your Hidden Variable in the payload. In this example, the Hidden Variable is called HIDDEN_EMAIL.

Example:

function getEmbedToken(userEmail) {
	...

	const payload = {
		"iat": parseInt(new Date().getTime() / 1000),
		"nbf": parseInt(new Date().getTime() / 1000),
		"exp": parseInt(new Date().getTime() / 1000) + (60 * 15),
		"dashboard": 231,
		"organization": 1,
		"env": {
			"HIDDEN_EMAIL": user_email
		}
	};
}