Embedding Authenticated Mongo Charts in ReactJS

Question

I am trying to embed Mongo Charts in Reactjs in an Authenticated manner using Python3 Flask for creating JWT.

BAckend - Python Flask

header = {
  "alg": "HS256",
  "typ": "JWT"
}
forToken = {}
forToken["firstname"] = user["firstname"]
forToken["exp"] = ((datetime.utcnow() + timedelta(hours=10)))
jwtapp = jwt.encode(forToken, SECRET_KEY, algorithm='HS256', headers=header)
// SECRET_KEY is same as that provided in Mongo Atlast Auth Provider section
hyphenuser["token"] = jwtapp

ReactJS code - loginVerify.js As soon as user login, token is fetched from backend api and is stored in localStorage

localStorage.setItem("token", (response?.token))

ReactJS code - chart.js

const sdk2 = new ChartsEmbedSDK ( {
       baseUrl: "https://charts.mongodb.com/charts-mythila-bang-ihtjk",
       getUserToken: () => localStorage.getItem("token"),
       filter: {
          "organization": { "$eq": response?.organization }
       }    
  });

...........
...........
return (

   <div id="SOA_chart2" class="column chartMongo"> </div>  
);

In the Mongo Atlas, I have created the chart by enabling Authentication

Authentication Provider

Enabled Authentication and added Auth Provider

However when I access the application, I receive the following error message and chart does not load

Error loading data for this chart (error code: 10). JWT has no matching providers. See https://dochub.mongodb.org/core/charts-embedding-error-codes for details.

host.js:330 Uncaught (in promise) Error: {"errorCode":10,"simple":"Error loading data for this chart (error code: 10).","verbose":"Error loading data for this chart (error code: 10). JWT has no matching providers.

Embedding Authenticated Mongo Charts in ReactJS

0 Answers0