Growth or above plan is required.

The All-In-One widget supports authenticating your users via SSO.

Here’s what you need to do:

  1. Log in to acquire your private key from SSO settings. Ensure that you store this key securely on your server and prevent unauthorized access.

  2. When a user visits the widget, send a request to your server to generate a JWT token.

  3. Generate a token on your server with customer data using the provided snippet.

  4. Pass the generated JWT token to the Supahub widget for authentication.

​
SSO Setup

1

Install JWT packages

Install the required packages for JWT token generation on your server.

npm install --save jsonwebtoken
2

Generate the JWT token

Copy and use the “Private Key” from SSO settings to generate a JWT token on your server.

var jwt = require("jsonwebtoken");
const SSO_KEY = "YOUR_PRIVATE_SSO_KEY";

function generateJWTToken(user) {
    var userData = {
        email: user.email, // Required
        name: user.name, // Required
        id: user.id, // Required
    };

    // The userData object can include any additional details you wish to provide about a user to Supahub. Ensure to follow the same format shown in the Supahub.identify method, as outlined at https://docs.supahub.com/identify/user

    return jwt.sign(userData, SSO_KEY, {
        algorithm: "HS256",
    });
}

Private Key should be kept secure and not to be shared. Add it in your .env file.

To enhance security measures, Single Sign-On (SSO) tokens are restricted from authenticating users with administrative privileges within any Supahub workspace. Instead, these users will need to log in using the dedicated portal at workspace.supahub.com

3

Pass the token back to your app and into our widget

The token will be used for user authentication.

<script id="supahub" type="text/javascript">
  !(function (s, u, p, a) {
    function supahub() {
      var g = u.createElement(p),
        h = u.getElementsByTagName(p)[0];
      (g.id = a),
        (g.src = "https://widget.supahub.com/sdk.js"),
        h.parentNode.insertBefore(g, h);
      g.onload = function () {
        window.SupahubWidget("portal", {
          workspaceName: "workspace-name", // Required: Copy your workspace name from 'workspace-name.supahub.com'
          theme: "light", // Required: Options ("dark" | "light")
          displayType: "popover", // Required: Options ("popover" | "popup")
          position: "right", // Optional: Options ("right" | "left")
          jwtToken: "Generated_JWT_Token", // Optional: Replace with the token generated from your server
        });
      };
    }
    "function" != typeof s.SupahubWidget &&
      (s.SupahubWidget = function () {
        (s.SupahubWidget.q = s.SupahubWidget.q || []).push(arguments);
      }),
      "complete" === u.readyState || "interactive" === u.readyState
        ? supahub()
        : s.addEventListener("DOMContentLoaded", supahub);
  })(window, document, "script", "supahub-sdk");
</script>
Setup Popover/PopupEmbed on Mobile