diff --git a/studio/hooks/misc/withAuth.tsx b/studio/hooks/misc/withAuth.tsx index e4168d8914a..1502592d36a 100644 --- a/studio/hooks/misc/withAuth.tsx +++ b/studio/hooks/misc/withAuth.tsx @@ -20,8 +20,21 @@ const PLATFORM_ONLY_PAGES = [ 'auth/url-configuration', ] -export function withAuth(WrappedComponent: ComponentType | NextPageWithLayout) { - const WithAuthHOC: ComponentType = (props: any) => { +export function withAuth( + WrappedComponent: ComponentType | NextPageWithLayout, + options: { + /** + * The auth level used to check the user credentials. In most cases, if the user has MFA enabled + * we want the highest level (which is 2) for all pages. For certain pages, the user should be + * able to access them even if he didn't finished his login (typed in his MFA code), for example + * the support page: We want the user to be able to submit a ticket even if he's not fully + * signed in. + * @default true + */ + useHighestAAL: boolean + } = { useHighestAAL: true } +) { + const WithAuthHOC: ComponentType = (props: T) => { const router = useRouter() const { basePath } = router const { ref } = useParams() @@ -45,7 +58,9 @@ export function withAuth(WrappedComponent: ComponentType | NextPageWithLay }) const isLoggedIn = Boolean(session) - const isCorrectLevel = aalData?.currentLevel === aalData?.nextLevel + const isCorrectLevel = options.useHighestAAL + ? aalData?.currentLevel === aalData?.nextLevel + : true const isAccessingBlockedPage = !IS_PLATFORM && diff --git a/studio/pages/support/new.tsx b/studio/pages/support/new.tsx index 159151dc291..bfee176efd2 100644 --- a/studio/pages/support/new.tsx +++ b/studio/pages/support/new.tsx @@ -1,15 +1,15 @@ -import SVG from 'react-inlinesvg' +import * as Tooltip from '@radix-ui/react-tooltip' +import { observer } from 'mobx-react-lite' import Link from 'next/link' import { useState } from 'react' -import { observer } from 'mobx-react-lite' +import SVG from 'react-inlinesvg' import { Button, IconLoader, IconTool } from 'ui' -import * as Tooltip from '@radix-ui/react-tooltip' -import { withAuth, useFlag } from 'hooks' -import { BASE_PATH } from 'lib/constants' -import { usePlatformStatusQuery } from 'data/platform/platform-status-query' import Success from 'components/interfaces/Support/Success' import SupportForm from 'components/interfaces/Support/SupportForm' +import { usePlatformStatusQuery } from 'data/platform/platform-status-query' +import { useFlag, withAuth } from 'hooks' +import { BASE_PATH } from 'lib/constants' const SupportPage = () => { const [sentCategory, setSentCategory] = useState() @@ -100,4 +100,4 @@ const SupportPage = () => { ) } -export default withAuth(observer(SupportPage)) +export default withAuth(observer(SupportPage), { useHighestAAL: false })