SaaSBox
Search…
Parsing User and Plan Capabilities

Step 3: Passing the user token and processing in your API

The dashboard always loads a JWT token for the current logged in user, containing information about the user and the plan.

User & Plan Token Data Structure:

1
let user = {
2
firstname:
3
lastname:
4
is_admin: <true|false> // Is this a SaaS admin, or regular user?
5
is_customer: <true|false> // Is this a paid user?
6
id: <uuid> // Unique user identifier
7
email: "[email protected]" // User email string
8
plan: (plan == null) ? null : { // Admins have a null plan.
9
id: <uuid> // Unique plan identifier
10
name: "premium" // Plan name, e.g. starter, middle tier, or premium
11
description: "string" // Plan description
12
limits: plan.limits, // An array of key-value pairs on plan limits.
13
features: plan.features // An array of marketing features of the plan.
14
}
15
};
Copied!

Getting the token embedded in the the dashboard

The JWT token signed with your secret key is stored in a hidden div as follows, in your user dashboard pages. If you don't see it in your dashboard page, add this div yourself:
1
div(hidden, id="token", data-token=token)
Copied!

Passing the user token to your API from the dashboard:

Use the "Bearer" field in the Authorization headers to pass the JWT token to your API server. Here is an example that replaces the 'fetch' call we have shown in Step 2, Making API Requests with an AJAX call:
1
script.
2
function fetchEmbedUrl() {
3
var session;
4
var containerDiv = document.getElementById("embeddingContainer");
5
//
6
// Retrieve the token from the hidden div into javascript
7
//
8
let token = $("#token").attr("data-token");
9
$.ajax({
10
url: "https://<your-server-url>/get-embed-url",
11
contentType: 'application/json; charset=utf-8',
12
dataType: 'json',
13
// Pass the token in the Authorization header Bearer field
14
// with an empty ' ' space inbetween:
15
beforeSend: function (xhr) {
16
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
17
xhr.withCredentials = true;
18
},
19
type: 'GET',
20
success: ((data) => {
21
console.log("Response:", data);
22
var options = {
23
// replace this dummy url with the one generated via embedding API
24
url: data.EmbedUrl,
25
container: containerDiv,
26
scrolling: "no",
27
height: "1200px",
28
width: "1000px",
29
locale: "en-US",
30
footerPaddingEnabled: true,
31
sheetId: '<sheet-id>', // use this option to specify initial sheet id to load for the embedded dashboard
32
sheetTabsDisabled: false, // use this option to enable or disable sheet tab controls
33
undoRedoDisabled: false, // use this option to disable undo and redo buttons
34
resetDisabled: false // use this option to disable reset button
35
};
36
session = QuickSightEmbedding.embedSession(options);
37
}),
38
error: ((error) => {
39
console.log(error);
40
})
41
});
42
}
43
$(document).ready (function(){
44
fetchEmbedUrl();
45
})
Copied!

Processing the token on your SaaS Backend:

Here we cover the NodeJS / ExpressJS example. You would typically require the JWT library for your backend server , in NodeJS, here is what you need:
1
npm install jsonwebtoken --save
Copied!

Generate and add your JWT secret as an environment variable:

Press the Generate JWT Secret to create your secret

Store your secret in an environment variable:

1
// Your .env or environment file:
2
jwt_secret=eb8bcbfdc57e0bc393f80ef14a9d06c50465
Copied!

Decode and process user token information (NodeJS/ExpressJS Example):

1
const jwt = require('jsonwebtoken');
2
3
const jwt_secret = process.env.jwt_secret;
4
5
// Fetch token from Auth header Bearer field
6
// Decode the token using JWT secret saved earlier:
7
const jwtTokenData = function(req, res, next) {
8
const token = req.header('Authorization').replace('Bearer', '').trim();
9
// TODO: Call this async, e.g. by passing a callback, then wrapping in promise.
10
const decoded = jwt.verify(token, jwt_secret);
11
12
return decoded;
13
}
14
15
//
16
exports.get_anon_embed_url = function(req, res, next) {
17
let user_info = jwtTokenData(req, res, next);
18
19
console.log("User Info:", user_info);
20
21
// [...]
22
}
23
24
// Console output:
25
/*
26
User Info: {
27
firstname: 'Team',
28
lastname: 'SaaSBox',
29
is_admin: true,
30
is_customer: false,
31
id: 'cb2931f2-c315-42a5-9ace-1023748b4953',
32
33
plan: null,
34
}
35
*/
Copied!

Basic dashboard integration is complete at this step.

Last modified 1mo ago