3. 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 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

2. Making API Requests to your Application

Next - Your Application

4. Setup the frontend CLI to make frontend edits locally and faster

Last modified 9h 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: