1 / 1
Apr 2024

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();

}, ); // Rerun effect when country changes or user logs in

return (


Dashboard


<div
ref={dashboardContainerRef}
style={{ height: “80vh”, marginTop: 20 }}
>


);
};

export default ChartComponent;

this is my 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} };