diff --git a/packages/@magic-ext/oauth2/src/index.ts b/packages/@magic-ext/oauth2/src/index.ts
index 519877049..da60a5f02 100644
--- a/packages/@magic-ext/oauth2/src/index.ts
+++ b/packages/@magic-ext/oauth2/src/index.ts
@@ -9,8 +9,15 @@ import {
   OAuthPopupConfiguration,
   OAuthVerificationConfiguration,
 } from './types';
+import {
+  OAuthMFAEventEmit,
+  OAuthMFAEventOnReceived,
+  OAuthPopupEventEmit,
+  OAuthPopupEventHandlers,
+  OAuthPopupEventOnReceived,
+  OAuthGetResultEventHandlers,
+} from '@magic-sdk/types';
 import { createCryptoChallenge } from './crypto';
-import { OAuthPopupEventEmit, OAuthPopupEventHandlers, OAuthPopupEventOnReceived } from '@magic-sdk/types';
 
 const PKCE_STORAGE_KEY = 'magic_oauth_pkce_verifier';
 
@@ -70,10 +77,7 @@ export class OAuthExtension extends Extension.Internal<'oauth2'> {
       if (successResult?.pkceMetadata) {
         // New path: store codeVerifier + all OAuth metadata at the SDK (parent page) level.
         // sessionStorage persists across same-tab redirects but never enters the iframe.
-        sessionStorage.setItem(
-          PKCE_STORAGE_KEY,
-          JSON.stringify({ codeVerifier, ...successResult.pkceMetadata }),
-        );
+        sessionStorage.setItem(PKCE_STORAGE_KEY, JSON.stringify({ codeVerifier, ...successResult.pkceMetadata }));
       }
 
       if (successResult?.oauthAuthoriationURI) {
@@ -100,13 +104,15 @@ export class OAuthExtension extends Extension.Internal<'oauth2'> {
     const urlWithoutQuery = window.location.origin + window.location.pathname;
     window.history.replaceState(null, '', urlWithoutQuery);
 
-    return getResult.call(this, configuration, queryString);
+    return this.getResult(configuration, queryString);
   }
 
   public loginWithPopup(configuration: OAuthPopupConfiguration) {
+    const { showMfaModal } = configuration;
     const requestPayload = this.utils.createJsonRpcRequestPayload(OAuthPayloadMethods.Popup, [
       {
         ...configuration,
+        showUI: showMfaModal,
         returnTo: window.location.href,
         apiKey: this.sdk.apiKey,
         platform: 'web',
@@ -119,33 +125,158 @@ export class OAuthExtension extends Extension.Internal<'oauth2'> {
           requestPayload,
         );
 
+        /**
+         * Attach Event listeners
+         */
         const redirectEvent = (event: MessageEvent) => {
           this.createIntermediaryEvent(OAuthPopupEventEmit.PopupEvent, requestPayload.id as string)(event.data);
         };
 
-        if (configuration.shouldReturnURI) {
+        if (configuration.shouldReturnURI && oauthPopupRequest) {
           oauthPopupRequest.on(OAuthPopupEventOnReceived.PopupUrl, popupUrl => {
             window.addEventListener('message', redirectEvent);
             promiEvent.emit(OAuthPopupEventOnReceived.PopupUrl, popupUrl);
           });
         }
 
+        if (!showMfaModal) {
+          oauthPopupRequest.on(OAuthMFAEventOnReceived.MfaSentHandle, () => {
+            promiEvent.emit(OAuthMFAEventOnReceived.MfaSentHandle);
+          });
+          oauthPopupRequest.on(OAuthMFAEventOnReceived.InvalidMfaOtp, () => {
+            promiEvent.emit(OAuthMFAEventOnReceived.InvalidMfaOtp);
+          });
+          oauthPopupRequest.on(OAuthMFAEventOnReceived.RecoveryCodeSentHandle, () => {
+            promiEvent.emit(OAuthMFAEventOnReceived.RecoveryCodeSentHandle);
+          });
+          oauthPopupRequest.on(OAuthMFAEventOnReceived.InvalidRecoveryCode, () => {
+            promiEvent.emit(OAuthMFAEventOnReceived.InvalidRecoveryCode);
+          });
+          oauthPopupRequest.on(OAuthMFAEventOnReceived.RecoveryCodeSuccess, () => {
+            promiEvent.emit(OAuthMFAEventOnReceived.RecoveryCodeSuccess);
+          });
+        }
+
         const result = await oauthPopupRequest;
         window.removeEventListener('message', redirectEvent);
 
-        if ((result as OAuthRedirectError).error) {
-          reject(result);
+        const maybeResult = result as OAuthRedirectResult;
+        const maybeError = result as OAuthRedirectError;
+
+        if (maybeError.error) {
+          reject(
+            this.createError<OAuthErrorData>(maybeError.error, maybeError.error_description ?? 'An error occurred.', {
+              errorURI: maybeError.error_uri,
+              provider: maybeError.provider,
+            }),
+          );
         } else {
-          resolve(result as OAuthRedirectResult);
+          resolve(maybeResult);
         }
       } catch (error) {
         reject(error);
       }
     });
 
-    promiEvent.on(OAuthPopupEventEmit.Cancel, () => {
-      this.createIntermediaryEvent(OAuthPopupEventEmit.Cancel, requestPayload.id as string)();
-    });
+    if (!showMfaModal && promiEvent) {
+      promiEvent.on(OAuthMFAEventEmit.VerifyMFACode, (mfa: string) => {
+        this.createIntermediaryEvent(OAuthMFAEventEmit.VerifyMFACode, requestPayload.id as string)(mfa);
+      });
+      promiEvent.on(OAuthMFAEventEmit.LostDevice, () => {
+        this.createIntermediaryEvent(OAuthMFAEventEmit.LostDevice, requestPayload.id as string)();
+      });
+      promiEvent.on(OAuthMFAEventEmit.VerifyRecoveryCode, (recoveryCode: string) => {
+        this.createIntermediaryEvent(OAuthMFAEventEmit.VerifyRecoveryCode, requestPayload.id as string)(recoveryCode);
+      });
+      promiEvent.on(OAuthMFAEventEmit.Cancel, () => {
+        this.createIntermediaryEvent(OAuthMFAEventEmit.Cancel, requestPayload.id as string)();
+      });
+    }
+
+    return promiEvent;
+  }
+
+  private getResult(configuration: OAuthVerificationConfiguration, queryString: string) {
+    const { showMfaModal } = configuration;
+    const { hasStateMismatch, clientMetadata } = this.retrievePKCEMetadata(queryString);
+
+    const requestPayload = this.utils.createJsonRpcRequestPayload(OAuthPayloadMethods.Verify, [
+      {
+        authorizationResponseParams: queryString,
+        magicApiKey: this.sdk.apiKey,
+        platform: 'web',
+        showUI: showMfaModal,
+        ...configuration,
+        ...(clientMetadata ? { clientMetadata } : {}),
+      },
+    ]);
+
+    const promiEvent = this.utils.createPromiEvent<OAuthRedirectResult, OAuthGetResultEventHandlers>(
+      async (resolve, reject) => {
+        if (hasStateMismatch) {
+          reject(
+            this.createError<object>(
+              'STATE_MISMATCH',
+              'OAuth state parameter mismatch — request may have been tampered with',
+              {},
+            ),
+          );
+        }
+
+        const getResultRequest = this.request<OAuthRedirectResult | OAuthRedirectError, OAuthGetResultEventHandlers>(
+          requestPayload,
+        );
+
+        if (!showMfaModal) {
+          getResultRequest.on(OAuthMFAEventOnReceived.MfaSentHandle, () => {
+            promiEvent.emit(OAuthMFAEventOnReceived.MfaSentHandle);
+          });
+          getResultRequest.on(OAuthMFAEventOnReceived.InvalidMfaOtp, () => {
+            promiEvent.emit(OAuthMFAEventOnReceived.InvalidMfaOtp);
+          });
+          getResultRequest.on(OAuthMFAEventOnReceived.RecoveryCodeSentHandle, () => {
+            promiEvent.emit(OAuthMFAEventOnReceived.RecoveryCodeSentHandle);
+          });
+          getResultRequest.on(OAuthMFAEventOnReceived.InvalidRecoveryCode, () => {
+            promiEvent.emit(OAuthMFAEventOnReceived.InvalidRecoveryCode);
+          });
+          getResultRequest.on(OAuthMFAEventOnReceived.RecoveryCodeSuccess, () => {
+            promiEvent.emit(OAuthMFAEventOnReceived.RecoveryCodeSuccess);
+          });
+        }
+
+        // Parse the result, which may contain an OAuth-formatted error.
+        const resultOrError = await getResultRequest;
+        const maybeResult = resultOrError as OAuthRedirectResult;
+        const maybeError = resultOrError as OAuthRedirectError;
+
+        if (maybeError.error) {
+          reject(
+            this.createError<OAuthErrorData>(maybeError.error, maybeError.error_description ?? 'An error occurred.', {
+              errorURI: maybeError.error_uri,
+              provider: maybeError.provider,
+            }),
+          );
+        }
+
+        resolve(maybeResult);
+      },
+    );
+
+    if (!showMfaModal && promiEvent) {
+      promiEvent.on(OAuthMFAEventEmit.VerifyMFACode, (mfa: string) => {
+        this.createIntermediaryEvent(OAuthMFAEventEmit.VerifyMFACode, requestPayload.id as string)(mfa);
+      });
+      promiEvent.on(OAuthMFAEventEmit.LostDevice, () => {
+        this.createIntermediaryEvent(OAuthMFAEventEmit.LostDevice, requestPayload.id as string)();
+      });
+      promiEvent.on(OAuthMFAEventEmit.VerifyRecoveryCode, (recoveryCode: string) => {
+        this.createIntermediaryEvent(OAuthMFAEventEmit.VerifyRecoveryCode, requestPayload.id as string)(recoveryCode);
+      });
+      promiEvent.on(OAuthMFAEventEmit.Cancel, () => {
+        this.createIntermediaryEvent(OAuthMFAEventEmit.Cancel, requestPayload.id as string)();
+      });
+    }
 
     return promiEvent;
   }
@@ -175,13 +306,16 @@ export class OAuthExtension extends Extension.Internal<'oauth2'> {
       console.log('Error while loading telegram-web-app script', seamlessLoginError);
     }
   }
-}
 
-function getResult(this: OAuthExtension, configuration: OAuthVerificationConfiguration, queryString: string) {
-  return this.utils.createPromiEvent<OAuthRedirectResult>(async (resolve, reject) => {
+  private retrievePKCEMetadata(queryString: string): {
+    clientMetadata?: Record<string, string>;
+    hasStateMismatch: boolean;
+  } {
+    let hasStateMismatch = false;
     // Retrieve and immediately clear the full PKCE metadata stored at SDK level.
     const stored = sessionStorage.getItem(PKCE_STORAGE_KEY);
     sessionStorage.removeItem(PKCE_STORAGE_KEY);
+
     // clientMetadata contains { codeVerifier, state, redirectUri, appID, provider }.
     // Forwarding it lets the embedded-wallet verify handler skip its iframe storage entirely.
     // When absent (old embedded-wallet path), the handler falls back to its stored metadata.
@@ -193,38 +327,12 @@ function getResult(this: OAuthExtension, configuration: OAuthVerificationConfigu
     if (clientMetadata) {
       const returnedState = new URLSearchParams(queryString).get('state');
       if (!returnedState || returnedState !== clientMetadata.state) {
-        return reject(
-          this.createError<object>('STATE_MISMATCH', 'OAuth state parameter mismatch — request may have been tampered with', {}),
-        );
+        hasStateMismatch = true;
       }
     }
 
-    const parseRedirectResult = this.utils.createJsonRpcRequestPayload(OAuthPayloadMethods.Verify, [
-      {
-        authorizationResponseParams: queryString,
-        magicApiKey: this.sdk.apiKey,
-        platform: 'web',
-        ...configuration,
-        ...(clientMetadata ? { clientMetadata } : {}),
-      },
-    ]);
-
-    // Parse the result, which may contain an OAuth-formatted error.
-    const resultOrError = await this.request<OAuthRedirectResult | OAuthRedirectError>(parseRedirectResult);
-    const maybeResult = resultOrError as OAuthRedirectResult;
-    const maybeError = resultOrError as OAuthRedirectError;
-
-    if (maybeError.error) {
-      reject(
-        this.createError<OAuthErrorData>(maybeError.error, maybeError.error_description ?? 'An error occurred.', {
-          errorURI: maybeError.error_uri,
-          provider: maybeError.provider,
-        }),
-      );
-    }
-
-    resolve(maybeResult);
-  });
+    return { clientMetadata, hasStateMismatch };
+  }
 }
 
 export * from './types';
diff --git a/packages/@magic-ext/oauth2/src/types.ts b/packages/@magic-ext/oauth2/src/types.ts
index cecea04b0..fdda46850 100644
--- a/packages/@magic-ext/oauth2/src/types.ts
+++ b/packages/@magic-ext/oauth2/src/types.ts
@@ -119,6 +119,7 @@ export interface OAuthVerificationConfiguration {
   lifespan?: number;
   optionalQueryString?: string;
   skipDIDToken?: boolean;
+  showMfaModal?: boolean;
 }
 
 export interface OAuthPopupConfiguration {
@@ -127,6 +128,7 @@ export interface OAuthPopupConfiguration {
   loginHint?: string;
   providerParams?: Record<string, string | number | boolean>;
   shouldReturnURI?: boolean;
+  showMfaModal?: boolean;
 }
 
 export enum OAuthErrorCode {
diff --git a/packages/@magic-ext/wallet-kit/src/MagicWidget.tsx b/packages/@magic-ext/wallet-kit/src/MagicWidget.tsx
index 8bee9f435..42adc2e70 100644
--- a/packages/@magic-ext/wallet-kit/src/MagicWidget.tsx
+++ b/packages/@magic-ext/wallet-kit/src/MagicWidget.tsx
@@ -11,6 +11,7 @@ import { OAuthPendingView } from './views/OAuthPendingView';
 import AdditionalProvidersView from './views/AdditionalProvidersView';
 import { getExtensionInstance } from './extension';
 import { EmailLoginProvider } from './context/EmailLoginContext';
+import { OAuthLoginProvider } from './context/OAuthLoginContext';
 import { WidgetConfigProvider } from './context/WidgetConfigContext';
 import { EmailOTPView } from './views/EmailOTPView';
 import { DeviceVerificationView } from './views/DeviceVerificationView';
@@ -79,6 +80,7 @@ function WidgetContent({
           <OAuthPendingView
             key={`oauth-${state.selectedProvider}`}
             provider={state.selectedProvider as OAuthProvider}
+            state={state}
             dispatch={dispatch}
           />
         );
@@ -109,12 +111,14 @@ function WidgetContent({
 
   return (
     <EmailLoginProvider dispatch={dispatch}>
-      <Modal isWidget fullscreen={isModal && isMobile}>
-        <VStack width="full" minWidth="380px">
-          {renderView()}
-          <Footer showLogo={showFooterLogo} />
-        </VStack>
-      </Modal>
+      <OAuthLoginProvider dispatch={dispatch}>
+        <Modal isWidget fullscreen={isModal && isMobile}>
+          <VStack width="full" minWidth="380px">
+            {renderView()}
+            <Footer showLogo={showFooterLogo} />
+          </VStack>
+        </Modal>
+      </OAuthLoginProvider>
     </EmailLoginProvider>
   );
 }
diff --git a/packages/@magic-ext/wallet-kit/src/context/OAuthLoginContext.tsx b/packages/@magic-ext/wallet-kit/src/context/OAuthLoginContext.tsx
new file mode 100644
index 000000000..b8868833b
--- /dev/null
+++ b/packages/@magic-ext/wallet-kit/src/context/OAuthLoginContext.tsx
@@ -0,0 +1,192 @@
+import React, { createContext, useContext, useRef, useCallback, useState, ReactNode } from 'react';
+import { getExtensionInstance, OAuthRedirectError, OAuthRedirectResult } from '../extension';
+import { WidgetAction } from '../reducer';
+import { OAuthMFAEventEmit, OAuthMFAEventOnReceived } from '@magic-sdk/types';
+import { useWidgetConfig } from './WidgetConfigContext';
+import { OAuthProvider } from '../extension';
+
+type OAuthPopupHandle = ReturnType<ReturnType<typeof getExtensionInstance>['loginWithPopup']>;
+
+interface OAuthLoginContextValue {
+  startOAuthLogin: (provider: OAuthProvider) => void;
+  submitMFA: (totp: string) => void;
+  lostDevice: () => void;
+  submitRecoveryCode: (recoveryCode: string) => void;
+  cancelLogin: () => void;
+  isMfaActive: boolean;
+}
+
+const OAuthLoginContext = createContext<OAuthLoginContextValue | null>(null);
+
+interface OAuthLoginProviderProps {
+  children: ReactNode;
+  dispatch: React.Dispatch<WidgetAction>;
+}
+
+export function OAuthLoginProvider({ children, dispatch }: OAuthLoginProviderProps) {
+  const { handleSuccess, handleError } = useWidgetConfig();
+
+  const handleRef = useRef<OAuthPopupHandle | null>(null);
+  const [isMfaActive, setIsMfaActive] = useState(false);
+
+  const startOAuthLogin = useCallback(
+    (provider: OAuthProvider) => {
+      try {
+        // Clean up any previous handle to prevent leaked listeners and stale dispatches
+        if (handleRef.current) {
+          handleRef.current.removeAllListeners();
+          handleRef.current = null;
+        }
+
+        const extension = getExtensionInstance();
+        const handle = extension.loginWithPopup(provider);
+        handleRef.current = handle;
+
+        // MFA Events
+        handle.on(OAuthMFAEventOnReceived.MfaSentHandle, () => {
+          if (handleRef.current !== handle) return;
+          setIsMfaActive(true);
+          dispatch({ type: 'MFA_REQUIRED' });
+        });
+
+        handle.on(OAuthMFAEventOnReceived.InvalidMfaOtp, () => {
+          if (handleRef.current !== handle) return;
+          dispatch({ type: 'MFA_INVALID' });
+        });
+
+        handle.on(OAuthMFAEventOnReceived.InvalidRecoveryCode, () => {
+          if (handleRef.current !== handle) return;
+          dispatch({ type: 'RECOVERY_CODE_INVALID' });
+        });
+
+        handle.on(OAuthMFAEventOnReceived.RecoveryCodeSentHandle, () => {
+          if (handleRef.current !== handle) return;
+          dispatch({ type: 'LOST_DEVICE' });
+        });
+
+        handle.on(OAuthMFAEventOnReceived.RecoveryCodeSuccess, () => {
+          // Recovery code accepted — login will resolve via the promise handler
+        });
+
+        // Handle Promise Resolution
+        handle
+          .then((result: OAuthRedirectResult | OAuthRedirectError) => {
+            if (handleRef.current !== handle) return;
+
+            if ((result as OAuthRedirectError).error) {
+              const errorResult = result as OAuthRedirectError;
+              const errorInstance = new Error(errorResult.error_description || errorResult.error);
+              dispatch({ type: 'LOGIN_ERROR', error: errorInstance.message });
+              handleError(errorInstance);
+              // Clean up handle and listeners
+              handle.removeAllListeners();
+              handleRef.current = null;
+              setIsMfaActive(false);
+              return;
+            }
+
+            const oauthResult = result as OAuthRedirectResult;
+            dispatch({ type: 'LOGIN_SUCCESS' });
+            handleSuccess({
+              method: 'oauth',
+              magic: oauthResult.magic,
+              oauth: oauthResult.oauth,
+            });
+            // Clean up handle and listeners
+            handle.removeAllListeners();
+            handleRef.current = null;
+            setIsMfaActive(false);
+          })
+          .catch((error: any) => {
+            if (handleRef.current !== handle) return;
+
+            const errorInstance = error instanceof Error ? error : new Error(error?.message || 'OAuth login failed');
+            const msg = (errorInstance.message || '').toLowerCase();
+
+            // If user closed the popup or denied access, go back to login (not an error)
+            if (
+              msg.includes('user rejected') ||
+              msg.includes('user denied') ||
+              msg.includes('access_denied') ||
+              msg.includes('user closed') ||
+              msg.includes('popup closed') ||
+              msg.includes('cancelled') ||
+              msg.includes('canceled')
+            ) {
+              handleRef.current = null;
+              setIsMfaActive(false);
+              dispatch({ type: 'GO_TO_LOGIN' });
+              return;
+            }
+
+            dispatch({ type: 'LOGIN_ERROR', error: errorInstance.message });
+            handleError(errorInstance);
+            // Clean up handle and listeners
+            handle.removeAllListeners();
+            handleRef.current = null;
+            setIsMfaActive(false);
+          });
+      } catch (error) {
+        const errorInstance = error instanceof Error ? error : new Error('Failed to start OAuth login');
+        dispatch({ type: 'LOGIN_ERROR', error: errorInstance.message });
+        handleError(errorInstance);
+      }
+    },
+    [dispatch, handleSuccess, handleError, setIsMfaActive],
+  );
+
+  const submitMFA = useCallback(
+    (totp: string) => {
+      if (handleRef.current) {
+        dispatch({ type: 'MFA_VERIFYING' });
+        handleRef.current.emit(OAuthMFAEventEmit.VerifyMFACode, totp);
+      }
+    },
+    [dispatch],
+  );
+
+  const lostDevice = useCallback(() => {
+    if (handleRef.current) {
+      handleRef.current.emit(OAuthMFAEventEmit.LostDevice);
+    }
+  }, [dispatch]);
+
+  const submitRecoveryCode = useCallback(
+    (recoveryCode: string) => {
+      if (handleRef.current) {
+        dispatch({ type: 'RECOVERY_CODE_VERIFYING' });
+        handleRef.current.emit(OAuthMFAEventEmit.VerifyRecoveryCode, recoveryCode);
+      }
+    },
+    [dispatch],
+  );
+
+  const cancelLogin = useCallback(() => {
+    if (handleRef.current) {
+      handleRef.current.emit(OAuthMFAEventEmit.Cancel);
+      handleRef.current.removeAllListeners();
+    }
+    handleRef.current = null;
+    setIsMfaActive(false);
+    dispatch({ type: 'GO_TO_LOGIN' });
+  }, [dispatch, setIsMfaActive]);
+
+  const value: OAuthLoginContextValue = {
+    startOAuthLogin,
+    submitMFA,
+    lostDevice,
+    submitRecoveryCode,
+    cancelLogin,
+    isMfaActive,
+  };
+
+  return <OAuthLoginContext.Provider value={value}>{children}</OAuthLoginContext.Provider>;
+}
+
+export function useOAuthLogin(): OAuthLoginContextValue {
+  const context = useContext(OAuthLoginContext);
+  if (!context) {
+    throw new Error('useOAuthLogin must be used within an OAuthLoginProvider');
+  }
+  return context;
+}
diff --git a/packages/@magic-ext/wallet-kit/src/context/index.ts b/packages/@magic-ext/wallet-kit/src/context/index.ts
index b46b4fa2b..f6591cafc 100644
--- a/packages/@magic-ext/wallet-kit/src/context/index.ts
+++ b/packages/@magic-ext/wallet-kit/src/context/index.ts
@@ -1,2 +1,3 @@
 export { EmailLoginProvider, useEmailLogin } from './EmailLoginContext';
+export { OAuthLoginProvider, useOAuthLogin } from './OAuthLoginContext';
 export { WidgetConfigProvider, useWidgetConfig } from './WidgetConfigContext';
\ No newline at end of file
diff --git a/packages/@magic-ext/wallet-kit/src/extension.ts b/packages/@magic-ext/wallet-kit/src/extension.ts
index a850f1a21..04261440d 100644
--- a/packages/@magic-ext/wallet-kit/src/extension.ts
+++ b/packages/@magic-ext/wallet-kit/src/extension.ts
@@ -1,10 +1,14 @@
-import { Extension, MagicRPCError, SDKBase, ViewController } from '@magic-sdk/provider';
+import { createPromiEvent, Extension, MagicRPCError, SDKBase, ViewController } from '@magic-sdk/provider';
 import {
   FarcasterLoginEventEmit,
   JsonRpcRequestPayload,
   LocalStorageKeys,
   MagicPayloadMethod,
   MagicThirdPartyWalletUpdate,
+  OAuthMFAEventEmit,
+  OAuthMFAEventOnReceived,
+  OAuthPopupEventEmit,
+  OAuthPopupEventHandlers,
   RPCErrorCode,
 } from '@magic-sdk/types';
 import { getAccount, getConnectorClient, reconnect, signMessage, watchAccount } from '@wagmi/core';
@@ -519,27 +523,78 @@ export class WalletKitExtension extends Extension.Internal<'walletKit'> {
 
   /**
    * Login with OAuth popup.
-   * Opens a popup for the specified OAuth provider and returns the result.
+   * Opens a popup for the specified OAuth provider and returns a PromiEvent handle.
+   * The handle emits MFA events when the user has MFA enabled.
    */
-  public async loginWithPopup(provider: OAuthProvider): Promise<OAuthRedirectResult> {
+  public loginWithPopup(provider: OAuthProvider) {
     const requestPayload = this.utils.createJsonRpcRequestPayload(OAuthPayloadMethod.Popup, [
       {
         provider,
+        showUI: false,
         returnTo: window.location.href,
         apiKey: this.sdk.apiKey,
         platform: 'web',
       },
     ]);
 
-    const result = await this.request<OAuthRedirectResult | OAuthRedirectError>(requestPayload);
+    const promiEvent = createPromiEvent<OAuthRedirectResult, OAuthPopupEventHandlers>(async (resolve, reject) => {
+      try {
+        const oauthPopupRequest = this.request<OAuthRedirectResult | OAuthRedirectError, OAuthPopupEventHandlers>(
+          requestPayload,
+        );
+
+        oauthPopupRequest.on(OAuthMFAEventOnReceived.MfaSentHandle, () => {
+          promiEvent.emit(OAuthMFAEventOnReceived.MfaSentHandle);
+        });
+        oauthPopupRequest.on(OAuthMFAEventOnReceived.InvalidMfaOtp, () => {
+          promiEvent.emit(OAuthMFAEventOnReceived.InvalidMfaOtp);
+        });
+        oauthPopupRequest.on(OAuthMFAEventOnReceived.RecoveryCodeSentHandle, () => {
+          promiEvent.emit(OAuthMFAEventOnReceived.RecoveryCodeSentHandle);
+        });
+        oauthPopupRequest.on(OAuthMFAEventOnReceived.InvalidRecoveryCode, () => {
+          promiEvent.emit(OAuthMFAEventOnReceived.InvalidRecoveryCode);
+        });
+        oauthPopupRequest.on(OAuthMFAEventOnReceived.RecoveryCodeSuccess, () => {
+          promiEvent.emit(OAuthMFAEventOnReceived.RecoveryCodeSuccess);
+        });
+
+        const result = await oauthPopupRequest;
+
+        const maybeResult = result as OAuthRedirectResult;
+        const maybeError = result as OAuthRedirectError;
+
+        if (maybeError.error) {
+          reject(
+            this.createError(maybeError.error, maybeError.error_description ?? 'An error occurred.', {
+              errorURI: maybeError.error_uri,
+              provider: maybeError.provider,
+            }),
+          );
+        } else {
+          resolve(maybeResult);
+        }
+      } catch (error) {
+        reject(error);
+      }
+    });
 
-    // Check if the result is an error
-    if ((result as OAuthRedirectError).error) {
-      const errorResult = result as OAuthRedirectError;
-      throw new Error(errorResult.error_description || errorResult.error);
+    if (promiEvent) {
+      promiEvent.on(OAuthMFAEventEmit.VerifyMFACode, (mfa: string) => {
+        this.createIntermediaryEvent(OAuthMFAEventEmit.VerifyMFACode, requestPayload.id as string)(mfa);
+      });
+      promiEvent.on(OAuthMFAEventEmit.LostDevice, () => {
+        this.createIntermediaryEvent(OAuthMFAEventEmit.LostDevice, requestPayload.id as string)();
+      });
+      promiEvent.on(OAuthMFAEventEmit.VerifyRecoveryCode, (recoveryCode: string) => {
+        this.createIntermediaryEvent(OAuthMFAEventEmit.VerifyRecoveryCode, requestPayload.id as string)(recoveryCode);
+      });
+      promiEvent.on(OAuthMFAEventEmit.Cancel, () => {
+        this.createIntermediaryEvent(OAuthMFAEventEmit.Cancel, requestPayload.id as string)();
+      });
     }
 
-    return result as OAuthRedirectResult;
+    return promiEvent;
   }
 
   /**
diff --git a/packages/@magic-ext/wallet-kit/src/hooks/useMfa.ts b/packages/@magic-ext/wallet-kit/src/hooks/useMfa.ts
new file mode 100644
index 000000000..7402deb80
--- /dev/null
+++ b/packages/@magic-ext/wallet-kit/src/hooks/useMfa.ts
@@ -0,0 +1,32 @@
+import { useEmailLogin } from '../context/EmailLoginContext';
+import { useOAuthLogin } from '../context/OAuthLoginContext';
+
+interface UseMfaResult {
+  submitMFA: (totp: string) => void;
+  lostDevice: () => void;
+  submitRecoveryCode: (recoveryCode: string) => void;
+  cancelLogin: () => void;
+}
+
+export function useMfa(): UseMfaResult {
+  const oauthContext = useOAuthLogin();
+  const emailContext = useEmailLogin();
+
+  // If the OAuth context has an active MFA flow, use it
+  if (oauthContext.isMfaActive) {
+    return {
+      submitMFA: oauthContext.submitMFA,
+      lostDevice: oauthContext.lostDevice,
+      submitRecoveryCode: oauthContext.submitRecoveryCode,
+      cancelLogin: oauthContext.cancelLogin,
+    };
+  }
+
+  // Default to the email login context
+  return {
+    submitMFA: emailContext.submitMFA,
+    lostDevice: emailContext.lostDevice,
+    submitRecoveryCode: emailContext.submitRecoveryCode,
+    cancelLogin: emailContext.cancelLogin,
+  };
+}
diff --git a/packages/@magic-ext/wallet-kit/src/hooks/useOAuthLogin.ts b/packages/@magic-ext/wallet-kit/src/hooks/useOAuthLogin.ts
deleted file mode 100644
index b818f9b90..000000000
--- a/packages/@magic-ext/wallet-kit/src/hooks/useOAuthLogin.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useCallback, useState } from 'react';
-import { getExtensionInstance, OAuthProvider, OAuthRedirectResult } from '../extension';
-import { useWidgetConfig } from '../context/WidgetConfigContext';
-
-export interface UseOAuthLoginResult {
-  performOAuthLogin: (provider: OAuthProvider) => Promise<OAuthRedirectResult>;
-  isLoading: boolean;
-  error: Error | null;
-  isSuccess: boolean;
-  result: OAuthRedirectResult | null;
-}
-
-export function useOAuthLogin(): UseOAuthLoginResult {
-  const { handleSuccess, handleError } = useWidgetConfig();
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const [isSuccess, setIsSuccess] = useState(false);
-  const [result, setResult] = useState<OAuthRedirectResult | null>(null);
-
-  const performOAuthLogin = useCallback(
-    async (provider: OAuthProvider): Promise<OAuthRedirectResult> => {
-      setIsLoading(true);
-      setError(null);
-      setIsSuccess(false);
-      setResult(null);
-
-      try {
-        const extension = getExtensionInstance();
-        const oauthResult = await extension.loginWithPopup(provider);
-
-        setIsSuccess(true);
-        setResult(oauthResult);
-        setIsLoading(false);
-        handleSuccess({
-          method: 'oauth',
-          magic: oauthResult.magic,
-          oauth: oauthResult.oauth,
-        });
-
-        return oauthResult;
-      } catch (err) {
-        const errorInstance = err instanceof Error ? err : new Error('OAuth login failed');
-        setError(errorInstance);
-        setIsLoading(false);
-        handleError(errorInstance);
-        throw errorInstance;
-      }
-    },
-    [handleSuccess, handleError],
-  );
-
-  return {
-    performOAuthLogin,
-    isLoading,
-    error,
-    isSuccess,
-    result,
-  };
-}
diff --git a/packages/@magic-ext/wallet-kit/src/views/MfaView.tsx b/packages/@magic-ext/wallet-kit/src/views/MfaView.tsx
index 68282f255..5db3efa04 100644
--- a/packages/@magic-ext/wallet-kit/src/views/MfaView.tsx
+++ b/packages/@magic-ext/wallet-kit/src/views/MfaView.tsx
@@ -3,7 +3,7 @@ import { VStack } from '@styled/jsx';
 import { token } from '@styled/tokens';
 import React from 'react';
 import WidgetHeader from '../components/WidgetHeader';
-import { useEmailLogin } from '../context';
+import { useMfa } from '../hooks/useMfa';
 import { WidgetAction, WidgetState } from '../reducer';
 
 interface MFAViewProps {
@@ -12,7 +12,7 @@ interface MFAViewProps {
 }
 
 export const MFAView = ({ state, dispatch }: MFAViewProps) => {
-  const { submitMFA, cancelLogin, lostDevice } = useEmailLogin();
+  const { submitMFA, cancelLogin, lostDevice } = useMfa();
   const { emailLoginStatus, error } = state;
 
   const isVerifying = emailLoginStatus === 'mfa_verifying';
diff --git a/packages/@magic-ext/wallet-kit/src/views/OAuthPendingView.tsx b/packages/@magic-ext/wallet-kit/src/views/OAuthPendingView.tsx
index 0de286505..bb5422743 100644
--- a/packages/@magic-ext/wallet-kit/src/views/OAuthPendingView.tsx
+++ b/packages/@magic-ext/wallet-kit/src/views/OAuthPendingView.tsx
@@ -1,69 +1,34 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { getProviderConfig } from '../lib/provider-config';
-import { WidgetAction } from '../reducer';
+import { WidgetAction, WidgetState } from '../reducer';
 import { OAuthProvider } from '../types';
 import { Pending } from '../components/Pending';
-import { useOAuthLogin } from '../hooks/useOAuthLogin';
+import { useOAuthLogin } from '../context/OAuthLoginContext';
 import { OAuthProvider as ExtensionOAuthProvider, getExtensionInstance } from '../extension';
 import { DARK_MODE_ICON_OVERRIDES } from '../constants';
 
 interface OAuthPendingViewProps {
   provider: OAuthProvider;
+  state: WidgetState;
   dispatch: React.Dispatch<WidgetAction>;
 }
 
-export const OAuthPendingView = ({ provider, dispatch }: OAuthPendingViewProps) => {
+export const OAuthPendingView = ({ provider, state, dispatch }: OAuthPendingViewProps) => {
   const { title, description, Icon: DefaultIcon } = getProviderConfig(provider);
   const config = getExtensionInstance().getConfig();
   const isDarkMode = config?.theme.themeColor === 'dark';
   const Icon = (isDarkMode && DARK_MODE_ICON_OVERRIDES[provider]) || DefaultIcon;
-  const { performOAuthLogin, isLoading, error: oauthError, isSuccess } = useOAuthLogin();
+  const { startOAuthLogin } = useOAuthLogin();
   const loginAttempted = useRef(false);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const hasError = state.emailLoginStatus === 'error';
+  const errorMessage = state.error ?? null;
 
   useEffect(() => {
     if (!loginAttempted.current) {
       loginAttempted.current = true;
-
-      performOAuthLogin(provider as ExtensionOAuthProvider).catch(err => {
-        const errorMessage = (err?.message || '').toLowerCase();
-
-        // If user closed the popup or denied access, go back to login (not an error)
-        if (
-          errorMessage.includes('user rejected') ||
-          errorMessage.includes('user denied') ||
-          errorMessage.includes('access_denied') ||
-          errorMessage.includes('user closed') ||
-          errorMessage.includes('popup closed') ||
-          errorMessage.includes('cancelled') ||
-          errorMessage.includes('canceled')
-        ) {
-          dispatch({ type: 'GO_TO_LOGIN' });
-          return;
-        }
-
-        setErrorMessage(err?.message || 'OAuth login failed');
-      });
+      startOAuthLogin(provider as ExtensionOAuthProvider);
     }
-  }, [performOAuthLogin, provider, dispatch]);
-
-  useEffect(() => {
-    if (oauthError && loginAttempted.current) {
-      const errorMessage = (oauthError.message || '').toLowerCase();
-      // Don't show user cancellation as an error
-      if (
-        !errorMessage.includes('user rejected') &&
-        !errorMessage.includes('user denied') &&
-        !errorMessage.includes('access_denied') &&
-        !errorMessage.includes('cancelled') &&
-        !errorMessage.includes('canceled')
-      ) {
-        setErrorMessage(oauthError.message);
-      }
-    }
-  }, [oauthError]);
-
-  const isPending = !errorMessage && (isLoading || (!isSuccess && !oauthError));
+  }, [startOAuthLogin, provider]);
 
   return (
     <Pending
@@ -71,8 +36,8 @@ export const OAuthPendingView = ({ provider, dispatch }: OAuthPendingViewProps)
       title={title}
       description={description}
       Icon={Icon}
-      isPending={isPending}
-      errorMessage={errorMessage}
+      isPending={!hasError}
+      errorMessage={hasError ? errorMessage : null}
     />
   );
 };
diff --git a/packages/@magic-ext/wallet-kit/src/views/RecoveryCode.tsx b/packages/@magic-ext/wallet-kit/src/views/RecoveryCode.tsx
index fdc118ad4..057303b27 100644
--- a/packages/@magic-ext/wallet-kit/src/views/RecoveryCode.tsx
+++ b/packages/@magic-ext/wallet-kit/src/views/RecoveryCode.tsx
@@ -3,7 +3,7 @@ import { Center, VStack } from '@styled/jsx';
 import { token } from '@styled/tokens';
 import React, { useEffect } from 'react';
 import WidgetHeader from '../components/WidgetHeader';
-import { useEmailLogin } from '../context';
+import { useMfa } from '../hooks/useMfa';
 import { WidgetAction, WidgetState } from '../reducer';
 
 interface RecoveryCodeViewProps {
@@ -12,7 +12,7 @@ interface RecoveryCodeViewProps {
 }
 
 export const RecoveryCodeView = ({ state, dispatch }: RecoveryCodeViewProps) => {
-  const { submitRecoveryCode } = useEmailLogin();
+  const { submitRecoveryCode } = useMfa();
   const { emailLoginStatus, error } = state;
 
   const isVerifying = emailLoginStatus === 'recovery_code_verifying';
diff --git a/packages/@magic-sdk/types/src/modules/intermediary-types.ts b/packages/@magic-sdk/types/src/modules/intermediary-types.ts
index 021d1c267..4f04c80da 100644
--- a/packages/@magic-sdk/types/src/modules/intermediary-types.ts
+++ b/packages/@magic-sdk/types/src/modules/intermediary-types.ts
@@ -29,7 +29,7 @@ import {
   RecoveryFactorEventEmit,
   RecoveryFactorEventOnReceived,
 } from './user-types';
-import { OAuthPopupEventEmit, OAuthPopupEventOnReceived } from './oauth-types';
+import { OAuthMFAEventEmit, OAuthMFAEventOnReceived, OAuthPopupEventEmit, OAuthPopupEventOnReceived } from './oauth-types';
 
 export type IntermediaryEvents =
   // EmailOTP
@@ -76,5 +76,7 @@ export type IntermediaryEvents =
   | `${RecoverAccountEventOnReceived}`
   | `${RecoverAccountEventEmit}`
   // OAuth Events
+  | `${OAuthMFAEventEmit}`
+  | `${OAuthMFAEventOnReceived}`
   | `${OAuthPopupEventEmit}`
   | `${OAuthPopupEventOnReceived}`;
diff --git a/packages/@magic-sdk/types/src/modules/oauth-types.ts b/packages/@magic-sdk/types/src/modules/oauth-types.ts
index fa09880b9..28afc767c 100644
--- a/packages/@magic-sdk/types/src/modules/oauth-types.ts
+++ b/packages/@magic-sdk/types/src/modules/oauth-types.ts
@@ -1,16 +1,46 @@
+// Shared MFA events reused by both popup and redirect flows
+export enum OAuthMFAEventEmit {
+  Cancel = 'cancel',
+  VerifyMFACode = 'verify-mfa-code',
+  LostDevice = 'lost-device',
+  VerifyRecoveryCode = 'verify-recovery-code',
+}
+
+export enum OAuthMFAEventOnReceived {
+  MfaSentHandle = 'mfa-sent-handle',
+  InvalidMfaOtp = 'invalid-mfa-otp',
+  RecoveryCodeSentHandle = 'recovery-code-sent-handle',
+  InvalidRecoveryCode = 'invalid-recovery-code',
+  RecoveryCodeSuccess = 'recovery-code-success',
+}
+
+type OAuthMFAEventHandlers = {
+  // Event sent
+  [OAuthMFAEventEmit.Cancel]: () => void;
+  [OAuthMFAEventEmit.VerifyMFACode]: (mfa: string) => void;
+  [OAuthMFAEventEmit.LostDevice]: () => void;
+  [OAuthMFAEventEmit.VerifyRecoveryCode]: (recoveryCode: string) => void;
+  // Event Received
+  [OAuthMFAEventOnReceived.MfaSentHandle]: () => void;
+  [OAuthMFAEventOnReceived.InvalidMfaOtp]: () => void;
+  [OAuthMFAEventOnReceived.RecoveryCodeSentHandle]: () => void;
+  [OAuthMFAEventOnReceived.InvalidRecoveryCode]: () => void;
+  [OAuthMFAEventOnReceived.RecoveryCodeSuccess]: () => void;
+};
+
+// Popup-specific events
 export enum OAuthPopupEventOnReceived {
   PopupUrl = 'popup-url',
 }
 
 export enum OAuthPopupEventEmit {
   PopupEvent = 'popup-event',
-  Cancel = 'cancel',
 }
 
 export type OAuthPopupEventHandlers = {
-  // Event sent
   [OAuthPopupEventEmit.PopupEvent]: (eventData: unknown) => void;
-  [OAuthPopupEventEmit.Cancel]: () => void;
-  // Event Received
   [OAuthPopupEventOnReceived.PopupUrl]: (event: { popupUrl: string; provider: string }) => void;
-};
+} & OAuthMFAEventHandlers;
+
+// Redirect-specific handler type
+export type OAuthGetResultEventHandlers = OAuthMFAEventHandlers;