diff --git a/web/packages/teleport/src/DesktopSession/DesktopSession.story.tsx b/web/packages/teleport/src/DesktopSession/DesktopSession.story.tsx
index 97606b1ea3b86..e401ab43de9f1 100644
--- a/web/packages/teleport/src/DesktopSession/DesktopSession.story.tsx
+++ b/web/packages/teleport/src/DesktopSession/DesktopSession.story.tsx
@@ -16,16 +16,16 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { useState } from 'react';
 import { ButtonPrimary } from 'design/Button';
+import { useState } from 'react';
 import { NotificationItem } from 'shared/components/Notification';
 import { throttle } from 'shared/utils/highbar';
 
 import { TdpClient, TdpClientEvent } from 'teleport/lib/tdp';
 import { makeDefaultMfaState } from 'teleport/lib/useMfa';
 
-import { State } from './useDesktopSession';
 import { DesktopSession } from './DesktopSession';
+import { State } from './useDesktopSession';
 
 export default {
   title: 'Teleport/DesktopSession',
@@ -261,14 +261,17 @@ export const WebAuthnPrompt = () => (
     }}
     wsConnection={{ status: 'open' }}
     mfa={{
-      errorText: '',
-      requested: true,
-      setErrorText: () => null,
-      addMfaToScpUrls: false,
-      onWebauthnAuthenticate: () => null,
-      onSsoAuthenticate: () => null,
-      webauthnPublicKey: null,
-      ssoChallenge: null,
+      ...makeDefaultMfaState(),
+      attempt: {
+        status: 'processing',
+        statusText: '',
+        data: null,
+      },
+      challenge: {
+        webauthnPublicKey: {
+          challenge: new ArrayBuffer(1),
+        },
+      },
     }}
   />
 );
diff --git a/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.story.tsx b/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.story.tsx
index a73971043c5b3..fa83076935274 100644
--- a/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.story.tsx
+++ b/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.story.tsx
@@ -27,23 +27,25 @@ export default {
 export const LoadedWithMultipleOptions = () => {
   const props: Props = {
     ...defaultProps,
-    mfa: {
-      ...defaultProps.mfa,
-      mfaChallenge: {
-        ssoChallenge: {
-          redirectUrl: 'hi',
-          requestId: '123',
-          channelId: '123',
-          device: {
-            connectorId: '123',
-            connectorType: 'saml',
-            displayName: 'Okta',
-          },
-        },
-        webauthnPublicKey: {
-          challenge: new ArrayBuffer(1),
+    attempt: {
+      status: 'processing',
+      statusText: '',
+      data: null,
+    },
+    challenge: {
+      ssoChallenge: {
+        redirectUrl: 'hi',
+        requestId: '123',
+        channelId: '123',
+        device: {
+          connectorId: '123',
+          connectorType: 'saml',
+          displayName: 'Okta',
         },
       },
+      webauthnPublicKey: {
+        challenge: new ArrayBuffer(1),
+      },
     },
   };
   return <AuthnDialog {...props} />;
@@ -52,33 +54,32 @@ export const LoadedWithMultipleOptions = () => {
 export const LoadedWithSingleOption = () => {
   const props: Props = {
     ...defaultProps,
-    mfa: {
-      ...defaultProps.mfa,
-      mfaChallenge: {
-        webauthnPublicKey: {
-          challenge: new ArrayBuffer(1),
-        },
+    attempt: {
+      status: 'processing',
+      statusText: '',
+      data: null,
+    },
+    challenge: {
+      webauthnPublicKey: {
+        challenge: new ArrayBuffer(1),
       },
     },
   };
   return <AuthnDialog {...props} />;
 };
 
-export const Error = () => {
+export const LoadedWithError = () => {
+  const err = new Error('Something went wrong');
   const props: Props = {
     ...defaultProps,
-    mfa: {
-      ...defaultProps.mfa,
-      submitAttempt: {
-        status: 'failed',
-        statusText: 'Something went wrong',
-      },
+    attempt: {
+      status: 'error',
+      statusText: err.message,
+      error: err,
+      data: null,
     },
   };
   return <AuthnDialog {...props} />;
 };
 
-const defaultProps: Props = {
-  mfa: makeDefaultMfaState(),
-  onCancel: () => null,
-};
+const defaultProps: Props = makeDefaultMfaState();
diff --git a/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.tsx b/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.tsx
index 3bb5ea4442838..3b28751f46af8 100644
--- a/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.tsx
+++ b/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.tsx
@@ -25,11 +25,9 @@ import { ButtonIcon, ButtonSecondary, Flex, H2, Text } from 'design';
 import { guessProviderType } from 'shared/components/ButtonSso';
 import { SSOIcon } from 'shared/components/ButtonSso/ButtonSso';
 
-import { Attempt } from 'shared/hooks/useAsync';
 import { MfaState } from 'teleport/lib/useMfa';
-import { DeviceType, MfaAuthenticateChallenge } from 'teleport/services/mfa';
 
-type AuthnDialogProps = MfaState & {
+export type Props = MfaState & {
   replaceErrorText?: string;
 };
 
@@ -40,7 +38,7 @@ export default function AuthnDialog({
   attempt,
   resetAttempt,
   replaceErrorText,
-}: AuthnDialogProps) {
+}: Props) {
   // Only show the dialog when we are in a processing or error state.
   if (attempt.status === '' || attempt.status === 'success') return;
 
@@ -110,10 +108,3 @@ export default function AuthnDialog({
     </Dialog>
   );
 }
-
-export type Props = {
-  mfaChallenge: MfaAuthenticateChallenge;
-  submitMfa: (mfaType?: DeviceType) => Promise<any>;
-  submitAttempt: Attempt<any>;
-  onCancel: () => void;
-};