Standard Authentication

Learn how to embed MicroStrategy use cases in your React application using standard username and password authentication.

Using DashboardEmbedWithAuth Component

The simplest way to implement standard authentication is using the DashboardEmbedWithAuth component:

import { DashboardEmbedWithAuth } from "embed-dossier-mstr-react"

function DashboardWithStandardAuth() {
  return (
    <DashboardEmbedWithAuth
      dossierUrl="https://your-mstr-server/MicroStrategyLibrary/app/projectId/dossierId"
      loginMode="standard"
      username="your-username"
      password="your-password"
      className="dashboard-container"
      style={{ height: "600px" }}
      // Optional custom loading component
      loadingComponent={<div>Authenticating...</div>}
      // Optional custom error component
      errorComponent={(error) => (
        <div className="error-container">
          <h3>Authentication Failed</h3>
          <p>{error}</p>
        </div>
      )}
      // Additional dashboard configuration
      config={{
        containerHeight: "600px",
        containerWidth: "100%",
        enableResponsive: true,
      }}
    />
  )
}

Props

The DashboardEmbedWithAuth component accepts the following props for standard authentication:

  • dossierUrl (required): The full URL of your MicroStrategy dossier
  • loginMode (required): Set to "standard" for username/password authentication
  • username (required): MicroStrategy username
  • password (required): MicroStrategy password
  • className (optional): CSS class names for the container
  • style (optional): React inline styles for the container
  • loadingComponent (optional): Custom component to show during authentication
  • errorComponent (optional): Custom component or function to render error states
  • config (optional): Additional dashboard configuration options

Using useCreateDashboardWithAuth Hook

For more control over the authentication process, you can use the useCreateDashboardWithAuth hook directly:

import { useRef } from "react"
import { useCreateDashboardWithAuth } from "embed-dossier-mstr-react"

function CustomDashboardWithStandardAuth() {
  const divRef = useRef<HTMLDivElement>(null)

  const { dashboard, isAuthenticating, isAuthenticated, error } =
    useCreateDashboardWithAuth({
      serverUrlLibrary: "https://your-mstr-server/MicroStrategyLibrary",
      placeholder: divRef.current,
      loginMode: "standard",
      username: "your-username",
      password: "your-password",
      config: {
        url: "https://your-mstr-server/MicroStrategyLibrary/app/projectId/dossierId",
        enableResponsive: true,
        containerHeight: "600px",
        containerWidth: "100%",
      },
    })

  if (isAuthenticating) {
    return <div>Authenticating...</div>
  }

  if (error) {
    return (
      <div className="error-container">
        <h3>Authentication Failed</h3>
        <p>{error}</p>
      </div>
    )
  }

  return (
    <div>
      <div ref={divRef} className="dashboard-container" />
      {isAuthenticated && dashboard && (
        <div className="controls">
          <button onClick={() => dashboard.refresh()}>Refresh Dashboard</button>
        </div>
      )}
    </div>
  )
}

Hook Return Values

The useCreateDashboardWithAuth hook returns an object with the following properties:

  • dashboard: The MicroStrategy dashboard instance (null until loaded)
  • isAuthenticating: Boolean indicating if authentication is in progress
  • isAuthenticated: Boolean indicating if authentication was successful
  • error: Error message if authentication failed

Example Use Case Implementation

Here's a live example of how to implement standard authentication in a real-world scenario:

Or you can see the code on StackBlitz:

See the code on StackBlitz

API Reference

For detailed information about all available configuration options and methods, please refer to the API Reference Documentation.