As user to refresh page on 401 (#65)

* As user to refresh page on 401

* replace status code string

.github/workflows/build_and_push.yml

@@ -5,6 +5,7 @@ on:
       - main
     tags:
       - "**"
+  pull_request:
 
 jobs:
   build_n_push:

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+/node_modules.bkp
 /.pnp
 .pnp.js
 
@@ -26,3 +27,5 @@ src/auth_config.json
 .idea
 .eslintcache
 src/.local-config.json
+/public/OidcServiceWorker.js
+/public/OidcTrustedDomains.js

docker/init_react_envs.sh

@@ -24,7 +24,7 @@ fi
 AUTH0_DOMAIN=${AUTH0_DOMAIN}
 AUTH0_CLIENT_ID=${AUTH0_CLIENT_ID}
 AUTH0_AUDIENCE=${AUTH0_AUDIENCE}
-NETBIRD_MGMT_API_ENDPOINT=${NETBIRD_MGMT_API_ENDPOINT}
+NETBIRD_MGMT_API_ENDPOINT=$(echo $NETBIRD_MGMT_API_ENDPOINT | sed -E 's/(:80|:443)$//')
 NETBIRD_MGMT_GRPC_API_ENDPOINT=${NETBIRD_MGMT_GRPC_API_ENDPOINT}
 
 REPO="https://github.com/netbirdio/netbird/"
@@ -35,9 +35,8 @@ echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"
 # replace ENVs in the config
 ENV_STR="\$\$AUTH0_DOMAIN \$\$AUTH0_CLIENT_ID \$\$AUTH0_AUDIENCE \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_LATEST_VERSION"
 MAIN_JS=$(find /usr/share/nginx/html/static/js/main.*js)
+OIDC_TRUSTED_DOMAINS="/usr/share/nginx/html/OidcTrustedDomains.js"
 cp "$MAIN_JS" "$MAIN_JS".copy
 envsubst "$ENV_STR" < "$MAIN_JS".copy > "$MAIN_JS"
-rm "$MAIN_JS".copy
-
-
-
+envsubst "$ENV_STR" < "$OIDC_TRUSTED_DOMAINS".tmpl > "$OIDC_TRUSTED_DOMAINS"
+rm "$MAIN_JS".copy

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@auth0/auth0-react": "^1.6.0",
+    "@axa-fr/react-oidc": "^5.14.0",
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.4",
     "@testing-library/jest-dom": "^5.11.4",
@@ -21,18 +21,20 @@
     "antd": "^4.20.6",
     "autoprefixer": "^10.4.4",
     "axios": "^0.27.2",
+    "copyfiles": "^2.4.1",
     "heroicons": "^1.0.6",
     "highlight.js": "^11.2.0",
     "history": "^5.0.1",
     "lodash": "^4.17.21",
     "postcss": "^8.4.12",
     "prop-types": "^15.7.2",
-    "react": "^18.1.0",
+    "rc-overflow": "^1.2.8",
+    "react": "^18.2.0",
     "react-dom": "^18.1.0",
-    "react-highlight": "^0.14.0",
     "react-redux": "^8.0.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.3",
     "react-scripts": "^5.0.1",
+    "react-syntax-highlighter": "^15.5.0",
     "react-table": "^7.7.0",
     "redux": "^4.2.0",
     "redux-devtools-extension": "^2.13.9",
@@ -44,6 +46,8 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "copy": "copyfiles -f ./node_modules/@axa-fr/react-oidc/dist/OidcServiceWorker.js ./public",
+    "copytrusted": "copyfiles -f ./public/local/OidcTrustedDomains.js ./public",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -68,6 +72,6 @@
     ]
   },
   "devDependencies": {
-    "@types/react-highlight": "^0.12.5"
+    "@types/react-syntax-highlighter": "^15.5.3"
   }
 }

public/OidcTrustedDomains.js.tmpl

@@ -0,0 +1,6 @@
+
+// Add here trusted domains, access tokens will be send to 
+const trustedDomains = {
+    default:["$NETBIRD_MGMT_API_ENDPOINT"],
+    auth0:[]
+};  

public/local/OidcTrustedDomains.js

@@ -0,0 +1,6 @@
+
+// Add here trusted domains, access tokens will be send to 
+const trustedDomains = {
+    default:["http://localhost:3001","http://127.0.0.1:3001", "http://0.0.0.0:33071"],
+    auth0:[]
+};  

src/App.tsx

@@ -1,40 +1,25 @@
 import React, {useEffect, useState} from 'react';
 import {Provider} from "react-redux";
-import {Link, Redirect, Route, Switch} from 'react-router-dom';
-import {useAuth0} from "@auth0/auth0-react";
+import {Redirect, Route, Switch} from 'react-router-dom';
 import Navbar from './components/Navbar';
 import Peers from './views/Peers';
 import FooterComponent from './components/FooterComponent';
-import Loading from "./components/Loading";
 import SetupKeys from "./views/SetupKeys";
 import AddPeer from "./views/AddPeer";
 import Users from './views/Users';
 import AccessControl from './views/AccessControl';
-// import Activity from './views/Activity';
 import Banner from "./components/Banner";
 import {store} from "./store";
-
-import {Button, Col, Layout, Result, Row} from 'antd';
+import { Col, Layout, Row} from 'antd';
 import {Container} from "./components/Container";
+import {withOidcSecure} from '@axa-fr/react-oidc';
 
 const {Header, Content} = Layout;
 
 function App() {
 
-    const {
-        isLoading,
-        isAuthenticated,
-        loginWithRedirect,
-        logout,
-        error
-    } = useAuth0();
-
     const [isOpen, setIsOpen] = useState(false);
 
-    const toggle = () => {
-        setIsOpen(!isOpen);
-    };
-
     useEffect(() => {
         const hideMenu = () => {
             if (window.innerWidth > 768 && isOpen) {
@@ -50,41 +35,10 @@ function App() {
         };
     });
 
-    if (error) {
-        return <Result
-            status="warning"
-            title={error.message}
-            extra={<>
-                <a href={window.location.origin}>
-                    <Button type="primary">
-                        Try again
-                    </Button>
-                </a>
-                <Button type="primary" onClick={function () {
-                    logout({
-                        returnTo: window.location.origin,
-                    })
-                }}>
-                    Log out
-                </Button>
-            </>
-            }
-        />
-    }
-
-    if (isLoading) {
-        return <Loading padding="3em" width="50px" height="50px"/>;
-    }
-
-    if (!isAuthenticated) {
-        loginWithRedirect({})
-    }
-
     return (
         <Provider store={store}>
-            {isAuthenticated &&
                 <Layout>
-                    <Banner/>
+                    {/*<Banner/>*/}
                     <Header className="header" style={{
                         display: "flex",
                         flexDirection: "column",
@@ -110,17 +64,15 @@ function App() {
                                     )
                                 }}
                             />
-                            <Route path='/peers' exact component={Peers}/>
-                            <Route path="/add-peer" component={AddPeer}/>
-                            <Route path="/setup-keys" component={SetupKeys}/>
-                            <Route path="/acls" component={AccessControl}/>
-                            {/*<Route path="/activity" component={Activity}/>*/}
-                            <Route path="/users" component={Users}/>
+                            <Route path='/peers' exact component={withOidcSecure(Peers)}/>
+                            <Route path="/add-peer" component={withOidcSecure(AddPeer)}/>
+                            <Route path="/setup-keys" component={withOidcSecure(SetupKeys)}/>
+                            <Route path="/acls" component={withOidcSecure(AccessControl)}/>
+                            <Route path="/users" component={withOidcSecure(Users)}/>
                         </Switch>
                     </Content>
                     <FooterComponent/>
                 </Layout>
-            }
         </Provider>
     );
 }

src/components/AccessControlModalGroups.tsx

@@ -1,8 +1,4 @@
 import React, {useEffect, useState} from 'react';
-import {useDispatch, useSelector} from "react-redux";
-import {RootState} from "typesafe-actions";
-import { actions as ruleActions } from '../store/rule';
-import {string} from "prop-types";
 import {Avatar, List, Modal} from "antd";
 import {Group} from "../store/group/types";
 

src/components/AccessControlNew.tsx

@@ -14,10 +14,10 @@ import {
 import {ArrowRightOutlined, CheckOutlined, CloseOutlined, FlagFilled, QuestionCircleFilled} from "@ant-design/icons";
 import type { CustomTagProps } from 'rc-select/lib/BaseSelect'
 import {Rule, RuleToSave} from "../store/rule/types";
-import {useAuth0} from "@auth0/auth0-react";
 import { uniq } from "lodash"
 import {Header} from "antd/es/layout/layout";
 import {RuleObject} from "antd/lib/form";
+import {useOidcAccessToken} from "@axa-fr/react-oidc";
 
 const { Paragraph } = Typography;
 const { Option } = Select;
@@ -28,7 +28,7 @@ interface FormRule extends Rule {
 }
 
 const AccessControlNew = () => {
-    const { getAccessTokenSilently } = useAuth0()
+    const {accessToken} = useOidcAccessToken()
     const dispatch = useDispatch()
     const setupNewRuleVisible = useSelector((state: RootState) => state.rule.setupNewRuleVisible)
     const groups =  useSelector((state: RootState) => state.group.data)
@@ -96,7 +96,7 @@ const AccessControlNew = () => {
         form.validateFields()
             .then((values) => {
                 const ruleToSave = createRuleToSave()
-                dispatch(ruleActions.saveRule.request({getAccessTokenSilently, payload: ruleToSave}))
+                dispatch(ruleActions.saveRule.request({getAccessTokenSilently:accessToken, payload: ruleToSave}))
             })
             .catch((errorInfo) => {
                 console.log('errorInfo', errorInfo)

src/components/LoginError.tsx

@@ -0,0 +1,35 @@
+import {OidcUserStatus, useOidc, useOidcUser} from "@axa-fr/react-oidc";
+import {Button, Result} from "antd";
+import React from "react";
+import {getConfig} from "../config";
+
+function LoginError() {
+    const { logout } = useOidc();
+    const config = getConfig();
+    const { oidcUserLoadingState } = useOidcUser();
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+
+    if (urlParams.get("error") === "access_denied") {
+        return <Result
+            status="warning"
+            title={urlParams.get("error_description")}
+            extra={<>
+                <a href={window.location.origin}>
+                    <Button type="primary">
+                        Try again
+                    </Button>
+                </a>
+                <Button type="primary" onClick={function () {
+                    logout("",{client_id:config.clientId})
+                }}>
+                    Log out
+                </Button>
+            </>
+            }
+        />
+    }
+    return <div>{"Login Error: User state: "+oidcUserLoadingState}</div>
+}
+
+export default LoginError;

src/components/Navbar.tsx

@@ -1,23 +1,26 @@
 import React, {useEffect, useState} from 'react';
 import {Link} from 'react-router-dom';
 import logo from "../assets/logo.png";
-import {useAuth0} from "@auth0/auth0-react";
 import {useLocation} from 'react-router-dom';
 import {Menu, Row, Col, Grid, Dropdown, Avatar, Button, Typography, Space} from 'antd'
 import {ItemType} from "antd/lib/menu/hooks/useItems";
 import {AvatarSize} from "antd/es/avatar/SizeContext";
 import { UserOutlined } from '@ant-design/icons';
-
+import { useOidc,useOidcUser } from '@axa-fr/react-oidc';
+import {getConfig} from "../config";
 const { Text } = Typography
 const { useBreakpoint } = Grid;
 
 const Navbar = () => {
     let location = useLocation();
+    const config = getConfig();
     const {
-        user,
         isAuthenticated,
         logout,
-    } = useAuth0();
+    } = useOidc();
+
+    const { oidcUser } = useOidcUser();
+    const user = oidcUser;
 
     const screens = useBreakpoint();
 
@@ -31,10 +34,10 @@ const Navbar = () => {
         { label: (<Link  to="/add-peer">Add Peer</Link>), key: '/add-peer' },
         { label: (<Link  to="/setup-keys">Setup Keys</Link>), key: '/setup-keys' },
         { label: (<Link  to="/acls">Access Control</Link>), key: '/acls' },
-        // { label: (<Link  to="/activity">Activity</Link>), key: '/activity' },
         { label: (<Link  to="/users">Users</Link>), key: '/users' }
     ] as ItemType[])
-
+    const logoutWithRedirect = () =>
+        logout("",{client_id:config.clientId});
     useEffect(() => {
         const fs = menuItems.filter(m => m?.key !== userEmailKey && m?.key !== userLogoutKey && m?.key !== userDividerKey)
         if (screens.xs === true) {
@@ -63,21 +66,13 @@ const Navbar = () => {
                     key: '0',
                 },
                 {
-                    label: <a onClick={e => {
-                        logoutWithRedirect()
-                        e.preventDefault()}
-                    }>Logout</a>,
+                    label: (<Link  to="/logout" onClick={logoutWithRedirect}>Logout</Link>),
                     key: '1',
                 }
             ]}
         />
     );
 
-    const logoutWithRedirect = () =>
-        logout({
-            returnTo: window.location.origin,
-        });
-
     const createAvatar = (size:AvatarSize) => {
         return user?.picture ? (
             <Avatar size={size} src={user?.picture} icon={<UserOutlined />} />

src/components/PeerUpdate.tsx

@@ -5,17 +5,16 @@ import {actions as peerActions} from '../store/peer';
 import {Button, Col, Divider, Drawer, Form, Input, Row, Select, Space, Tag, Typography} from "antd";
 import {Header} from "antd/es/layout/layout";
 import type {CustomTagProps} from 'rc-select/lib/BaseSelect'
-import {useAuth0} from "@auth0/auth0-react";
 import {Peer, PeerGroupsToSave} from "../store/peer/types";
 import {Group, GroupPeer} from "../store/group/types";
 import {CloseOutlined, EditOutlined, FlagFilled} from "@ant-design/icons";
 import {RuleObject} from 'antd/lib/form';
-
+import { useOidcAccessToken } from '@axa-fr/react-oidc';
 const { Paragraph } = Typography;
 const { Option } = Select;
 
 const PeerUpdate = () => {
-    const { getAccessTokenSilently } = useAuth0()
+    const { accessToken } = useOidcAccessToken()
     const dispatch = useDispatch()
     const groups =  useSelector((state: RootState) => state.group.data)
     const peer =   useSelector((state: RootState) => state.peer.peer)
@@ -214,11 +213,11 @@ const PeerUpdate = () => {
                 if (!noUpdateToName()) {
                     const peerUpdate = createPeerToSave()
                     setCallingPeerAPI(true)
-                    dispatch(peerActions.updatePeer.request({getAccessTokenSilently, payload: peerUpdate}))
+                    dispatch(peerActions.updatePeer.request({getAccessTokenSilently:accessToken, payload: peerUpdate}))
                 }
                 if (peerGroupsToSave.groupsToRemove.length || peerGroupsToSave.groupsToAdd.length || peerGroupsToSave.groupsNoId.length) {
                     setCallingGroupAPI(true)
-                    dispatch(peerActions.saveGroups.request({getAccessTokenSilently, payload: peerGroupsToSave}))
+                    dispatch(peerActions.saveGroups.request({getAccessTokenSilently:accessToken, payload: peerGroupsToSave}))
                 }
             })
             .catch((errorInfo) => {

src/components/SetupKeyNew.tsx

@@ -13,11 +13,11 @@ import {
 import {RootState} from "typesafe-actions";
 import {QuestionCircleFilled} from "@ant-design/icons";
 import {SetupKey} from "../store/setup-key/types";
-import {useAuth0} from "@auth0/auth0-react";
+import {useOidcAccessToken} from "@axa-fr/react-oidc";
 const { Text } = Typography;
 
 const SetupKeyNew = () => {
-    const { getAccessTokenSilently } = useAuth0()
+    const {accessToken} = useOidcAccessToken()
     const dispatch = useDispatch()
     const setupNewKeyVisible = useSelector((state: RootState) => state.setupKey.setupNewKeyVisible)
     const setupKey =  useSelector((state: RootState) => state.setupKey.setupKey)
@@ -34,7 +34,7 @@ const SetupKeyNew = () => {
     const handleFormSubmit = () => {
         form.validateFields()
             .then((values) => {
-                dispatch(setupKeyActions.createSetupKey.request({getAccessTokenSilently, payload: formSetupKey}))
+                dispatch(setupKeyActions.createSetupKey.request({getAccessTokenSilently:accessToken, payload: formSetupKey}))
             })
             .catch((errorInfo) => {
                 console.log('errorInfo', errorInfo)

src/components/addpeer/TabSteps.tsx

@@ -1,9 +1,8 @@
-import {useDispatch, useSelector} from "react-redux";
-import Highlight from 'react-highlight';
 import "highlight.js/styles/mono-blue.css";
 import "highlight.js/lib/languages/bash";
 import { StepCommand } from './types'
-
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { monoBlue } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import {
     Typography,
     Space,
@@ -12,8 +11,6 @@ import {
 import {copyToClipboard} from "../../utils/common";
 import {CheckOutlined, CopyOutlined} from "@ant-design/icons";
 import React, {useEffect, useState} from "react";
-
-const { Title, Text } = Typography;
 const { Step } = Steps;
 
 type Props = {
@@ -48,10 +45,10 @@ const TabSteps:React.FC<Props> = ({stepsItems}) => {
                     title={c.title}
                     description={
                         <Space className="nb-code" direction="vertical" size="small" style={{display: "flex"}}>
-                            { (c.commands && (typeof c.commands === 'string' || c.commands instanceof String)) ? (
-                            <Highlight className='bash'>
+                            { (c.commands && (typeof c.commands === 'string')) ? (
+                            <SyntaxHighlighter language="bash" style={monoBlue}>
                                 {c.commands}
-                            </Highlight>
+                            </SyntaxHighlighter>
                             ) : (
                                 c.commands
                             )}

src/index.tsx

@@ -5,39 +5,61 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import history from "./utils/history";
 import { getConfig } from "./config";
-import {Auth0Provider} from "@auth0/auth0-react";
+import {OidcProvider, useOidc} from '@axa-fr/react-oidc';
 import {BrowserRouter} from "react-router-dom";
-
-const onRedirectCallback = (appState:any) => {
-    history.push(
-        appState && appState.returnTo ? appState.returnTo : window.location.pathname
-    );
-};
+import Loading from "./components/Loading";
+import LoginError from "./components/LoginError";
 
 const config = getConfig();
 
+const authority = 'https://' + config.domain
 const providerConfig = {
-    domain: config.domain,
-    clientId: config.clientId,
-    ...(config.audience ? { audience: config.audience } : null),
-    redirectUri: window.location.origin,
-    useRefreshTokens: true,
-    onRedirectCallback,
+    authority: authority,
+    client_id: config.clientId,
+    redirect_uri: window.location.origin+'#callback',
+    refresh_time_before_tokens_expiration_in_second: 30,
+    silent_redirect_uri: window.location.origin + '#silent-callback',
+    scope: 'openid profile email api offline_access email_verified',
+    // disabling service worker
+    // service_worker_relative_url:'/OidcServiceWorker.js',
+    service_worker_only: false,
+    authority_configuration: {
+        authorization_endpoint: authority + "/authorize",
+        token_endpoint: authority + "/oauth/token",
+        revocation_endpoint: authority + "/oauth/revoke",
+        end_session_endpoint: authority + "/v2/logout",
+        userinfo_endpoint: authority + "/userinfo"
+    },
+    ...(config.audience ? {extras:{ audience: config.audience}} : null)
 };
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
 );
 
+const loadingComponent = () => <Loading padding="3em" width="50px" height="50px"/>
+
 root.render(
-    <BrowserRouter>
-        <Auth0Provider {...providerConfig}>
-            <App/>
-        </Auth0Provider>
-    </BrowserRouter>
+
+        <OidcProvider
+            configuration={providerConfig}
+            callbackSuccessComponent={loadingComponent}
+            authenticatingErrorComponent={LoginError}
+            authenticatingComponent={loadingComponent}
+            sessionLostComponent={loadingComponent}
+            loadingComponent={loadingComponent}
+            onSessionLost={()=>{
+                history.push("/peers")
+            }}
+        >
+            <BrowserRouter>
+              <App/>
+            </BrowserRouter>
+        </OidcProvider>
+
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals();

src/services/api-client/api-request.ts

@@ -35,7 +35,12 @@ async function apiRequest<T>(params: ApiRequestParams): Promise<ApiResponse<T>>
       data: (err && err.response) ? err.response.data : null,
       statusCode: (err && err.response) ? err.response.status : -1,
     };
-
+    if (error.statusCode === 401) {
+      let old = error.message
+      error.message = old + ". Please refresh the page if the issue continues."
+      error.code = 'ERR_UNAUTHORIZED'
+    }
+    console.log(error)
     throw error;
   }
 

src/services/api-client/header-factory.ts

@@ -11,7 +11,8 @@ const headersFactory = async (getAccessTokenSilently:any): Promise<RequestHeader
 
   //const token = await getLocalItem<string>(StorageKey.token);
   //const token = ''
-  const token = await getAccessTokenSilently()
+  // const token = await getAccessTokenSilently()
+  const token = getAccessTokenSilently
 
   if (token) {
     headers.authorization = `Bearer ${token}`;

src/services/api-client/types.ts

@@ -1,7 +1,7 @@
 import { Method } from 'axios';
 
 export interface RequestPayload<T> {
-  getAccessTokenSilently: any;
+  getAccessTokenSilently: any | null;
   payload:T;
 }
 

src/views/AccessControl.tsx

@@ -1,5 +1,4 @@
 import React, {useEffect, useState} from 'react';
-import {useAuth0, withAuthenticationRequired} from "@auth0/auth0-react";
 import {
     Alert,
     Button, Card,
@@ -8,7 +7,6 @@ import {
     Typography
 } from "antd";
 import {Container} from "../components/Container";
-import Loading from "../components/Loading";
 import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "typesafe-actions";
 import {Rule} from "../store/rule/types";
@@ -23,7 +21,7 @@ import AccessControlNew from "../components/AccessControlNew";
 import {Group} from "../store/group/types";
 import AccessControlModalGroups from "../components/AccessControlModalGroups";
 import tableSpin from "../components/Spin";
-
+import {useOidcAccessToken} from '@axa-fr/react-oidc';
 const { Title, Paragraph } = Typography;
 const { Column } = Table;
 const { confirm } = Modal;
@@ -43,7 +41,7 @@ interface GroupsToShow {
 }
 
 export const AccessControl = () => {
-    const { getAccessTokenSilently } = useAuth0()
+    const {accessToken} = useOidcAccessToken()
     const dispatch = useDispatch()
 
     const rules = useSelector((state: RootState) => state.rule.data);
@@ -108,8 +106,8 @@ export const AccessControl = () => {
     }
 
     useEffect(() => {
-        dispatch(ruleActions.getRules.request({getAccessTokenSilently, payload: null}));
-        dispatch(groupActions.getGroups.request({getAccessTokenSilently, payload: null}));
+        dispatch(ruleActions.getRules.request({getAccessTokenSilently:accessToken, payload: null}));
+        dispatch(groupActions.getGroups.request({getAccessTokenSilently:accessToken, payload: null}));
     }, [])
 
     useEffect(() => {
@@ -184,7 +182,7 @@ export const AccessControl = () => {
             </Space>,
             okType: 'danger',
             onOk() {
-                dispatch(ruleActions.deleteRule.request({getAccessTokenSilently, payload: ruleToAction?.id || ''}));
+                dispatch(ruleActions.deleteRule.request({getAccessTokenSilently:accessToken, payload: ruleToAction?.id || ''}));
             },
             onCancel() {
                 setRuleToAction(null);
@@ -417,8 +415,4 @@ export const AccessControl = () => {
     )
 }
 
-export default withAuthenticationRequired(AccessControl,
-    {
-        onRedirecting: () => <Loading/>,
-    }
-);
+export default AccessControl;