diff --git a/ui/src/app.tsx b/ui/src/app.tsx
index 066426899..25107c0d2 100644
--- a/ui/src/app.tsx
+++ b/ui/src/app.tsx
@@ -1,7 +1,5 @@
 import React from 'react'
 
-import { InteractionType } from '@azure/msal-browser'
-import { MsalAuthenticationTemplate, MsalProvider } from '@azure/msal-react'
 import { Layout } from 'antd'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
@@ -20,54 +18,53 @@ import Projects from '@/pages/Projects'
 import ResponseErrors from '@/pages/ResponseErrors'
 import RoleManagement from '@/pages/RoleManagement'
 
+import AzureMsal from './components/AzureMsal'
 import Header from './components/HeaderBar/header'
 import SideMenu from './components/SiderMenu/siteMenu'
-import { getMsalConfig } from './utils/utils'
 
 const queryClient = new QueryClient()
 
-const msalClient = getMsalConfig()
+const enableRBAC = window.environment?.enableRBAC
+const authEnable: boolean = (enableRBAC ? enableRBAC : process.env.REACT_APP_ENABLE_RBAC) === 'true'
 
 const App = () => {
   return (
-    <MsalProvider instance={msalClient}>
-      <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
-        <QueryClientProvider client={queryClient}>
-          <BrowserRouter>
-            <Layout style={{ minHeight: '100vh', position: 'relative' }}>
-              <SideMenu />
-              <Layout style={{ position: 'relative' }}>
-                <Header />
-                <Layout.Content>
-                  <Routes>
-                    <Route index element={<Home />} />
-                    <Route path="/home" element={<Home />} />
-                    <Route path="/projects" element={<Projects />} />
-                    <Route path="/dataSources" element={<DataSources />} />
-                    <Route path="/features" element={<Features />} />
-                    <Route path="/new-feature" element={<NewFeature />} />
-                    <Route
-                      path="/projects/:project/features/:featureId"
-                      element={<FeatureDetails />}
-                    />
-                    <Route
-                      path="/projects/:project/dataSources/:dataSourceId"
-                      element={<DataSourceDetails />}
-                    />
-                    <Route path="/projects/:project/lineage" element={<ProjectLineage />} />
-                    <Route path="/jobs" element={<Jobs />} />
-                    <Route path="/monitoring" element={<Monitoring />} />
-                    <Route path="/management" element={<Management />} />
-                    <Route path="/role-management" element={<RoleManagement />} />
-                    <Route path="/responseErrors/:status/:detail" element={<ResponseErrors />} />
-                  </Routes>
-                </Layout.Content>
-              </Layout>
+    <AzureMsal enable={authEnable}>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <Layout style={{ minHeight: '100vh', position: 'relative' }}>
+            <SideMenu />
+            <Layout style={{ position: 'relative' }}>
+              <Header />
+              <Layout.Content>
+                <Routes>
+                  <Route index element={<Home />} />
+                  <Route path="/home" element={<Home />} />
+                  <Route path="/projects" element={<Projects />} />
+                  <Route path="/dataSources" element={<DataSources />} />
+                  <Route path="/features" element={<Features />} />
+                  <Route path="/new-feature" element={<NewFeature />} />
+                  <Route
+                    path="/projects/:project/features/:featureId"
+                    element={<FeatureDetails />}
+                  />
+                  <Route
+                    path="/projects/:project/dataSources/:dataSourceId"
+                    element={<DataSourceDetails />}
+                  />
+                  <Route path="/projects/:project/lineage" element={<ProjectLineage />} />
+                  <Route path="/jobs" element={<Jobs />} />
+                  <Route path="/monitoring" element={<Monitoring />} />
+                  <Route path="/management" element={<Management />} />
+                  <Route path="/role-management" element={<RoleManagement />} />
+                  <Route path="/responseErrors/:status/:detail" element={<ResponseErrors />} />
+                </Routes>
+              </Layout.Content>
             </Layout>
-          </BrowserRouter>
-        </QueryClientProvider>
-      </MsalAuthenticationTemplate>
-    </MsalProvider>
+          </Layout>
+        </BrowserRouter>
+      </QueryClientProvider>
+    </AzureMsal>
   )
 }
 
diff --git a/ui/src/components/AzureMsal/index.tsx b/ui/src/components/AzureMsal/index.tsx
new file mode 100644
index 000000000..2166c30c0
--- /dev/null
+++ b/ui/src/components/AzureMsal/index.tsx
@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react'
+
+import { InteractionType } from '@azure/msal-browser'
+import { MsalAuthenticationTemplate, MsalProvider } from '@azure/msal-react'
+
+import { getMsalConfig } from '@/utils/utils'
+
+const msalInstance = getMsalConfig()
+
+export interface AzureMsalProps {
+  children?: ReactNode
+  enable?: boolean
+}
+
+const AzureMsal = (props: AzureMsalProps) => {
+  const { children, enable } = props
+  return enable ? (
+    <MsalProvider instance={msalInstance}>
+      <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
+        {children}
+      </MsalAuthenticationTemplate>
+    </MsalProvider>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default AzureMsal