Add a flag to enable some pages to not require the highest AA level.

studio/hooks/misc/withAuth.tsx

@@ -20,8 +20,21 @@ const PLATFORM_ONLY_PAGES = [
   'auth/url-configuration',
 ]
 
-export function withAuth<T>(WrappedComponent: ComponentType<T> | NextPageWithLayout<T, T>) {
-  const WithAuthHOC: ComponentType<T> = (props: any) => {
+export function withAuth<T>(
+  WrappedComponent: ComponentType<T> | NextPageWithLayout<T, T>,
+  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<T> = (props: T) => {
     const router = useRouter()
     const { basePath } = router
     const { ref } = useParams()
@@ -45,7 +58,9 @@ export function withAuth<T>(WrappedComponent: ComponentType<T> | NextPageWithLay
     })
 
     const isLoggedIn = Boolean(session)
-    const isCorrectLevel = aalData?.currentLevel === aalData?.nextLevel
+    const isCorrectLevel = options.useHighestAAL
+      ? aalData?.currentLevel === aalData?.nextLevel
+      : true
 
     const isAccessingBlockedPage =
       !IS_PLATFORM &&

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<string>()
@@ -100,4 +100,4 @@ const SupportPage = () => {
   )
 }
 
-export default withAuth(observer(SupportPage))
+export default withAuth(observer(SupportPage), { useHighestAAL: false })