Implementing Custom Auth for Server JS

Maintaining data security is paramount when handling sensitive organizational structures.

We’ve made this easier by introducing a new setting to OrgChart JS: REQUEST_CUSTOM_HEADERS. This setting allows you to inject custom HTTP headers (like Bearer tokens or Tenant IDs) into every server-side request the library executes.

Here is how you can set up custom authorization between your client-side chart and your Server JS backend:

1. Configure the Endpoint

In your Server JS appsettings.json, define the URL that will handle the authorization check:

"ExternalAutorizationEndPoint": "[your autorization end point]"

[your autorization end point] is your own application (not Server JS) where you can implement logic for athorization

2. Create the Authorization Logic inside [your autorization end point]

For example if you are using .NET Core create something like:

[HttpGet]
public IActionResult Authorize()
{
    Request.Headers.TryGetValue("My-Access-Key", out var value);
    return (value == "ExpectedKeyValue") ? Ok() : new UnauthorizedResult();
}

You can use your favorite framework instead of .NET Core, for example python, node js etc.

3. Set the Client-Side Headers

Finally, use the new REQUEST_CUSTOM_HEADERS dictionary to pass your credentials before initializing the chart:

OrgChart.REQUEST_CUSTOM_HEADERS["My-Access-Key"] = "ExpectedKeyValue";

var chart = new OrgChart(document.getElementById("tree"), {
    serverUrl: "https://your-server-js-endpoint.com",
});

This functionallity is added in version 9.00.57

Download the latest version