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”: “[email protected]”,
“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} };