Security hardening: authentication, input validation, OWASP compliance, architecture improvements, and CSP fixes for browser mode (#942)

app/src/index.tsx

@@ -8,6 +8,7 @@ import { applyMiddleware, compose, createStore } from 'redux'
 import { batchDispatchMiddleware } from 'redux-batched-actions'
 import { connect, Provider } from 'react-redux'
 import { ThemeProvider } from '@mui/material/styles'
+import { ThemeProvider as LegacyThemeProvider } from '@mui/styles'
 import './utils/tracking'
 import { themes } from './theme'
 import { BrowserAuthWrapper } from './components/BrowserAuthWrapper'
@@ -16,10 +17,13 @@ const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ||
 const store = createStore(reducers, composeEnhancers(applyMiddleware(reduxThunk, batchDispatchMiddleware)))
 
 function ApplicationRenderer(props: { theme: 'light' | 'dark' }) {
+  const theme = props.theme === 'light' ? themes.lightTheme : themes.darkTheme
   return (
-    <ThemeProvider theme={props.theme === 'light' ? themes.lightTheme : themes.darkTheme}>
-      <App />
-      <Demo />
+    <ThemeProvider theme={theme}>
+      <LegacyThemeProvider theme={theme}>
+        <App />
+        <Demo />
+      </LegacyThemeProvider>
     </ThemeProvider>
   )
 }