diff --git a/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx b/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
index 34b3ef7a6..a94674780 100644
--- a/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
+++ b/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
@@ -241,7 +241,13 @@ const ChallengeModal: FunctionComponent<Props> = ({
   })
 
   return (
-    <ModalOverlay isOpen={true} key={challenge.id} ref={setModalElement} close={cancelChallenge}>
+    <ModalOverlay
+      isOpen={true}
+      key={challenge.id}
+      ref={setModalElement}
+      close={cancelChallenge}
+      hideOnInteractOutside={false}
+    >
       <Modal
         title="Authenticate"
         close={cancelChallenge}
diff --git a/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx b/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
index a7618ed02..f34429a06 100644
--- a/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
+++ b/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
@@ -1,5 +1,5 @@
 import { mergeRefs } from '@/Hooks/mergeRefs'
-import { Dialog, useDialogStore } from '@ariakit/react'
+import { Dialog, DialogOptions, useDialogStore } from '@ariakit/react'
 import { ForwardedRef, forwardRef, ReactNode } from 'react'
 import { useModalAnimation } from '../Modal/useModalAnimation'
 
@@ -11,7 +11,10 @@ type Props = {
 }
 
 const ModalOverlay = forwardRef(
-  ({ isOpen, children, animationVariant, close, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
+  (
+    { isOpen, children, animationVariant, close, ...props }: Props & Partial<DialogOptions>,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => {
     const [isMounted, setElement] = useModalAnimation(isOpen, animationVariant)
     const dialog = useDialogStore({
       open: isMounted,