Apply backend filter into MongoDB charts using Injected function on Embedd → Authenticated section

I am trying to implement MongoDB Charts into my react project , using MongoDB app service Email/Password - CUSTOM USER DATA - for user Authentication .
What I am trying to do now is apply backend filter using Injected function on Embedd → Authenticated section
(I have added Atlas App Services as type into Authentication Providers option not jwt)
This is how my frontend code look like :

import React, { useEffect, useRef, useState } from “react”;
import ChartsEmbedSDK from “@mongodb-js/charts-embed-dom”;

import realmApp from “…/…/providers/realmConfig”;

const ChartComponent = () => {
const dashboardContainerRef = useRef(null);

// Fetch the access token
const getUserToken = async () => {
if (!realmApp.currentUser) {
console.log(“No user logged in”);
return null;
}
try {
await realmApp.currentUser.refreshCustomData();
return realmApp.currentUser.accessToken;
} catch (error) {
console.error(“Failed to get the user token”, error);
return null;
}
};

useEffect(() => {
const renderDashboard = async () => {
const token = await getUserToken();
console.log("Token: ", token);

`
  if (!token || !dashboardContainerRef.current) return; // Ensure user is logged in and token is available

  const sdk = new ChartsEmbedSDK({
    baseUrl: "my_base_URL",
    getUserToken: () => token, // Use the fetched token
  });

  const dashboard = await sdk.createDashboard({
    dashboardId: "my_dashboard_Id",
  });

  dashboard
    .render(dashboardContainerRef.current)
    .catch((e) => window.alert("Error rendering dashboard: " + e.message));
};

renderDashboard();
``

}, ); 

return (
<div
ref={dashboardContainerRef}
style={{ height: “80vh”, marginTop: 20 }}
></div>
);
};

export default ChartComponent;

this is my decoded access_token :
{
“user_data”: {
“_id”: “661d2356033eb4974fe4866b”,
“email”: “klajdi.tolis08@gmail.com”,
“hierarchy”: {
“$numberLong”: “2”
},
“role”: “admin”,
“tenantID”: {
“$oid”: “661d235639be21b1d6fc089b”
},
“user_account_id”: “661d23ec2a639a4a20892d11”
}
}

and this is Injected function :
// Return a filter based on token attributes, e.g:
return { tenantID: { “$oid” : context.token.custom_data.tenantID} };

Hi @Klajdi_Tolis1, what behaviour are you seeing?

Looking at your code, one possible issue is that you are double-wrapping the tenantId in $oid. It looks like the value in the token is inside $oid and then you are adding a second one in the injected filter?

Tom

@tomhollander Thank you for your message but it was a problem related to data source ,