Correct Approach to Use JWT Tokens for Embedded Dashboards in Bold BI

For embedding Bold BI dashboards, the supported and recommended approach is to generate an embed access token (JWT) on your backend and pass it to the Bold BI Embed SDK.
Manually injecting an Authorization: Bearer header from the browser is not recommended for standard embedding scenarios.
This article explains the correct token-first embedding approach, along with common issues and resolutions observed in real-world support cases.

Recommended Architecture: Token‑First Embedding

• Bold BI follows a token-first model, where:
  • The backend generates an embed access token (JWT)
  • The frontend passes the token to the Embed SDK
  • The SDK handles all authorization requests internally
  • User identity is resolved securely from the token

Step-by-Step Implementation

Step 1: Do not expose embedSecret to the browser

• The Embed Secret must be kept only on your backend.

• It should never be included in frontend JavaScript or exposed through browser developer tools.

  • Store embedSecret securely (environment variables or server configuration)
  • Use it only when calling Bold BI authorization APIs from the backend
    Embed Settings page showing Embed Secret location:
    
    

Step 2: Generate the Bold BI embed access token (JWT) from your backend

• Generate the embed access token using the supported backend‑to‑Bold BI token generation flow.
  Key points:
• Call the Bold BI embed authorization API from your backend
• Include:
  • Dashboard ID
  • User email
  • Embed Secret
• Example:
  Backend payload sent to the Bold BI authorization API

var tokenRequest = new
{
   email = embedDetails.UserEmail,
   serverurl = serverUrl,
   siteidentifier = siteIdentifier,
   embedsecret = embedDetails.EmbedSecret,
   expirationtime = embedDetails.ExpirationTime > 0 ? embedDetails.ExpirationTime : 10000,
   dashboard = new
   {
       id = embedDetails.DashboardId
   }
}; 

• Return only the access_token to the client

var tokenResponse = JsonConvert.DeserializeObject<dynamic>(resultContent);
var token = tokenResponse?.Data?.access_token?.ToString();

if (string.IsNullOrWhiteSpace(token))
{
   return StatusCode(StatusCodes.Status500InternalServerError,
       "Bold BI authorization response did not contain an access token.");
}

return Content(token, "text/plain"); 

The browser should not call Bold BI token APIs directly.

Example: Backend endpoint returning access_token to client:

Step 3: Pass the token received from your backend to the Embed SDK using the embedToken property.

On the frontend, pass the token received from your backend to the Embed SDK using the token property.

Example:
Frontend code passing token to BoldBI.create()

async renderDashboard(data) {
 try {
   const accessToken = await this.getEmbedToken();

   const dashboard = BoldBI.create({
     serverUrl: `${data.ServerUrl.replace(/\/+$/, '')}/${data.SiteIdentifier.replace(/^\/+|\/+$/g, '')}`,
     dashboardId: data.DashboardId,
     embedContainerId: 'dashboard',
     embedToken: accessToken,
     embedType: data.EmbedType,
     environment: data.Environment,
     height: '100%',
     width: '100%',
   });

   dashboard.loadDashboard();
   this.setState({ loading: false });
 } 

Step 4: Embed the dashboard

• Embed the dashboard by providing serverUrl, dashboardId, and embedToken in BoldBI.create().

The SDK uses the token automatically to authorize requests and render the dashboard for the authenticated user.

Sample Code:

const dashboard = BoldBI.create({
   serverUrl: `${data.ServerUrl.replace(/\/+$/, '')}/${data.SiteIdentifier.replace(/^\/+|\/+$/g, '')}`,
   dashboardId: data.DashboardId,
   embedContainerId: 'dashboard',
   embedToken: accessToken,
   embedType: data.EmbedType,
   environment: data.Environment,
   height: '100%',
   width: '100%',
});

dashboard.loadDashboard(); 

• Once initialized, the dashboard loads using the user identity resolved from the token.
  Example: Embedded dashboard loaded successfully in the application
  
  

When Is Authorization: Bearer Used?

• Using the Authorization header directly is applicable only for server‑to‑server API calls, such as:

GET /bi/api/site/site1/v4.0/dashboards
Authorization: Bearer <access_token> 

Common Issues and Resolutions

401 Unauthorized / 400 Bad Request

• Cause: Incorrect or outdated embed secret
• Resolution: Verify and update the embed secret used in backend token generation

Same Dashboard for All Users

• Cause: Token generated without user context
• Resolution: Generate embed token per logged‑in user with correct email

Works in .NET but Not in Angular

• Cause: Inconsistent token handling
• Clarification: Not framework‑specific; related to token flow

Outcome

• Following this approach ensures:

  • Secure embedding
  • Correct user‑specific dashboard access
  • Avoidance of authorization errors
  • Alignment with Bold BI supported embedding architecture

Related Articles

• How to embed dashboards without Authorization Server REST API in JavaScript embedding?
• Token generation (Embed SDK)
• Embed with token