Use mfa context in api calls.

Author: Joerger

web/packages/teleport/src/MFAContext/MFAContext.tsx

@@ -1,18 +1,19 @@
 import { PropsWithChildren, createContext, useCallback, useRef } from 'react';
 import AuthnDialog from 'teleport/components/AuthnDialog';
 import { useMfa } from 'teleport/lib/useMfa';
+import api from 'teleport/services/api';
 import { MfaChallengeScope } from 'teleport/services/auth/auth';
 import { MfaChallengeResponse } from 'teleport/services/mfa';
 
 import { useTeleport } from '..';
 
-export interface MFAContextValue {
+export interface MfaContextValue {
   getAdminActionMfaResponse(reusable?: boolean): Promise<MfaChallengeResponse>;
 }
 
-export const MFAContext = createContext<MFAContextValue>(null);
+export const MfaContext = createContext<MfaContextValue>(null);
 
-export const MFAContextProvider = ({ children }: PropsWithChildren) => {
+export const MfaContextProvider = ({ children }: PropsWithChildren) => {
   const allowReuse = useRef(false);
   const adminMfa = useMfa({
     req: {
@@ -36,11 +37,12 @@ export const MFAContextProvider = ({ children }: PropsWithChildren) => {
 
   const ctx = useTeleport();
   ctx.joinTokenService.setMfaContext(mfaCtx);
+  api.setMfaContext(mfaCtx);
 
   return (
-    <MFAContext.Provider value={mfaCtx}>
+    <MfaContext.Provider value={mfaCtx}>
       <AuthnDialog {...adminMfa}></AuthnDialog>
       {children}
-    </MFAContext.Provider>
+    </MfaContext.Provider>
   );
 };

web/packages/teleport/src/Teleport.tsx

@@ -43,7 +43,7 @@ import { Welcome } from './Welcome';
 
 import { Player } from './Player';
 
-import { MFAContextProvider } from './MFAContext/MFAContext';
+import { MfaContextProvider } from './MFAContext/MFAContext';
 
 import { Main } from './Main';
 import TeleportContext from './teleportContext';
@@ -90,15 +90,15 @@ const Teleport: React.FC<Props> = props => {
                   <Authenticated>
                     <UserContextProvider>
                       <TeleportContextProvider ctx={ctx}>
-                        <MFAContextProvider>
+                        <MfaContextProvider>
                           <Switch>
                             <Route
                               path={cfg.routes.appLauncher}
                               component={AppLauncher}
                             />
                             <Route>{createPrivateRoutes()}</Route>
                           </Switch>
-                        </MFAContextProvider>
+                        </MfaContextProvider>
                       </TeleportContextProvider>
                     </UserContextProvider>
                   </Authenticated>

web/packages/teleport/src/services/api/api.ts

@@ -18,16 +18,25 @@
 
 import 'whatwg-fetch';
 
-import auth, { MfaChallengeScope } from 'teleport/services/auth/auth';
 import websession from 'teleport/services/websession';
+import 'whatwg-fetch';
+
+import { MfaContextValue } from 'teleport/MFAContext/MFAContext';
 
 import { MfaChallengeResponse } from '../mfa';
 import { storageService } from '../storageService';
+
 import parseError, { ApiError } from './parseError';
 
 export const MFA_HEADER = 'Teleport-Mfa-Response';
 
+let mfaContext: MfaContextValue;
+
 const api = {
+  setMfaContext(mfa: MfaContextValue) {
+    mfaContext = mfa;
+  },
+
   get(
     url: string,
     abortSignal?: AbortSignal,
@@ -189,10 +198,7 @@ const api = {
 
     let mfaResponseForRetry;
     try {
-      const challenge = await auth.getMfaChallenge({
-        scope: MfaChallengeScope.ADMIN_ACTION,
-      });
-      mfaResponseForRetry = await auth.getMfaChallengeResponse(challenge);
+      mfaResponseForRetry = await mfaContext.getAdminActionMfaResponse();
     } catch {
       throw new Error(
         'Failed to fetch MFA challenge. Please connect a registered hardware key and try again. If you do not have a hardware key registered, you can add one from your account settings page.'

web/packages/teleport/src/services/joinToken/joinToken.ts

@@ -17,7 +17,7 @@
  */
 
 import cfg from 'teleport/config';
-import { MFAContextValue } from 'teleport/MFAContext/MFAContext';
+import { MfaContextValue } from 'teleport/MFAContext/MFAContext';
 import api from 'teleport/services/api';
 
 import { makeLabelMapOfStrArrs } from '../agents/make';
@@ -29,8 +29,8 @@ const TeleportTokenNameHeader = 'X-Teleport-TokenName';
 
 class JoinTokenService {
   // MFA context is set late by the MFA Context provider.
-  mfa: MFAContextValue;
-  setMfaContext(mfa: MFAContextValue) {
+  mfa: MfaContextValue;
+  setMfaContext(mfa: MfaContextValue) {
     this.mfa = mfa;
   }