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
   email: '[email protected]',
33
   plan: null,
34
}
35
*/
Copied!
Basic dashboard integration is complete at this step.

Your Application - Previous

Making API Requests to your Application

Next - Your Application

Setup the frontend CLI to make frontend edits locally and faster

Last modified 2mo ago

Copy link

Contents

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

User & Plan Token Data Structure:

Getting the token embedded in the the dashboard

Passing the user token to your API from the dashboard:

Processing the token on your SaaS Backend: