Block API access when 2FA is required on account; closes #2791

resources/scripts/api/interceptors.ts

@@ -0,0 +1,16 @@
+import http from '@/api/http';
+import { AxiosError } from 'axios';
+import { History } from 'history';
+
+export const setupInterceptors = (history: History) => {
+    http.interceptors.response.use(resp => resp, (error: AxiosError) => {
+        if (error.response?.status === 400) {
+            if (error.response?.data.errors?.[0].code === 'TwoFactorAuthRequiredException') {
+                if (!window.location.pathname.startsWith('/account')) {
+                    history.replace('/account', { twoFactorRedirect: true });
+                }
+            }
+        }
+        throw error;
+    });
+};

resources/scripts/components/App.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import ReactGA from 'react-ga';
 import { hot } from 'react-hot-loader/root';
-import { BrowserRouter, Route, Switch, useLocation } from 'react-router-dom';
+import { Route, Router, Switch, useLocation } from 'react-router-dom';
 import { StoreProvider } from 'easy-peasy';
 import { store } from '@/state';
 import DashboardRouter from '@/routers/DashboardRouter';
@@ -13,6 +13,8 @@ import ProgressBar from '@/components/elements/ProgressBar';
 import NotFound from '@/components/screens/NotFound';
 import tw from 'twin.macro';
 import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
+import { createBrowserHistory } from 'history';
+import { setupInterceptors } from '@/api/interceptors';
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;
@@ -30,6 +32,10 @@ interface ExtendedWindow extends Window {
     };
 }
 
+const history = createBrowserHistory({ basename: '/' });
+
+setupInterceptors(history);
+
 const Pageview = () => {
     const { pathname } = useLocation();
 
@@ -72,7 +78,7 @@ const App = () => {
                 <Provider store={store}>
                     <ProgressBar/>
                     <div css={tw`mx-auto w-auto`}>
-                        <BrowserRouter basename={'/'} key={'root-router'}>
+                        <Router history={history}>
                             {SiteConfiguration?.analytics && <Pageview/>}
                             <Switch>
                                 <Route path="/server/:id" component={ServerRouter}/>
@@ -80,7 +86,7 @@ const App = () => {
                                 <Route path="/" component={DashboardRouter}/>
                                 <Route path={'*'} component={NotFound}/>
                             </Switch>
-                        </BrowserRouter>
+                        </Router>
                     </div>
                 </Provider>
             </StoreProvider>

resources/scripts/components/dashboard/AccountOverviewContainer.tsx

@@ -7,9 +7,11 @@ import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
 import { breakpoint } from '@/theme';
 import styled from 'styled-components/macro';
+import { RouteComponentProps } from 'react-router';
+import MessageBox from '@/components/MessageBox';
 
 const Container = styled.div`
-    ${tw`flex flex-wrap my-10`};
+    ${tw`flex flex-wrap`};
 
     & > div {
         ${tw`w-full`};
@@ -24,10 +26,15 @@ const Container = styled.div`
     }
 `;
 
-export default () => {
+export default ({ location: { state } }: RouteComponentProps) => {
     return (
         <PageContentBlock title={'Account Overview'}>
-            <Container>
+            {state?.twoFactorRedirect &&
+            <MessageBox title={'2-Factor Required'} type={'error'}>
+                Your account must have two-factor authentication enabled in order to continue.
+            </MessageBox>
+            }
+            <Container css={[ tw`mb-10`, state?.twoFactorRedirect ? tw`mt-4` : tw`mt-10` ]}>
                 <ContentBox title={'Update Password'} showFlashes={'account:password'}>
                     <UpdatePasswordForm/>
                 </ContentBox>