2 / 3
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(); `` }, ); 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