I want to create a Dash dashboard where a subset of graphs are displayed only if a user is authorized to view that data in those graphs.
The first step I took was to create a custom component that does a Script call (based on https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx), where in the script it grabs a token, sends a request back to Flask to authenticate and gets an authorization flag. The script works fine, and I can hide/unhide the graphs in the script based on the returned authentication flag (by toggling document.getElementById(“eg dash-div-id”).style.display=“none” or “block”). However that doesn’t keep a user from getting to the data if they want by manually setting the display to block.
My initial though is that I could do something clever with an @app.callback() to check my authorization flag from my Script component, and if the authorization flag is suitable, append some extra layout (e.g., following this example: More sliders! (help with button callback example)). But i’m not sure how I would get the authorization flag from my javascript as a value in my component to pass to app.callback().
Has anyone worked up an approach to do this type of authorization of graphs directly in the browser?
Thanks