diff --git a/packages/@magic-ext/oauth2/src/index.ts b/packages/@magic-ext/oauth2/src/index.ts
index e7ddde91c..b706a11ce 100644
--- a/packages/@magic-ext/oauth2/src/index.ts
+++ b/packages/@magic-ext/oauth2/src/index.ts
@@ -9,7 +9,14 @@ import {
   OAuthPopupConfiguration,
   OAuthVerificationConfiguration,
 } from './types';
-import { OAuthPopupEventEmit, OAuthPopupEventHandlers, OAuthPopupEventOnReceived } from '@magic-sdk/types';
+import {
+  OAuthMFAEventEmit,
+  OAuthMFAEventOnReceived,
+  OAuthPopupEventEmit,
+  OAuthPopupEventHandlers,
+  OAuthPopupEventOnReceived,
+  OAuthGetResultEventHandlers,
+} from '@magic-sdk/types';
 
 declare global {
   interface Window {
@@ -83,10 +90,11 @@ 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 { showUI } = configuration;
     const requestPayload = this.utils.createJsonRpcRequestPayload(OAuthPayloadMethods.Popup, [
       {
         ...configuration,
@@ -102,33 +110,144 @@ 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 (!showUI) {
+          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 (!showUI && 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 { showUI } = configuration;
+    const requestPayload = this.utils.createJsonRpcRequestPayload(OAuthPayloadMethods.Verify, [
+      {
+        authorizationResponseParams: queryString,
+        magicApiKey: this.sdk.apiKey,
+        platform: 'web',
+        ...configuration,
+      },
+    ]);
+
+    const promiEvent = this.utils.createPromiEvent<OAuthRedirectResult, OAuthGetResultEventHandlers>(
+      async (resolve, reject) => {
+        const getResultRequest = this.request<OAuthRedirectResult | OAuthRedirectError, OAuthGetResultEventHandlers>(
+          requestPayload,
+        );
+
+        if (!showUI) {
+          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 (!showUI && 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;
   }
@@ -160,33 +279,4 @@ export class OAuthExtension extends Extension.Internal<'oauth2'> {
   }
 }
 
-function getResult(this: OAuthExtension, configuration: OAuthVerificationConfiguration, queryString: string) {
-  return this.utils.createPromiEvent<OAuthRedirectResult>(async (resolve, reject) => {
-    const parseRedirectResult = this.utils.createJsonRpcRequestPayload(OAuthPayloadMethods.Verify, [
-      {
-        authorizationResponseParams: queryString,
-        magicApiKey: this.sdk.apiKey,
-        platform: 'web',
-        ...configuration,
-      },
-    ]);
-
-    // 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);
-  });
-}
-
 export * from './types';
diff --git a/packages/@magic-ext/oauth2/src/types.ts b/packages/@magic-ext/oauth2/src/types.ts
index 7afa83b85..127b5476c 100644
--- a/packages/@magic-ext/oauth2/src/types.ts
+++ b/packages/@magic-ext/oauth2/src/types.ts
@@ -109,6 +109,7 @@ export interface OAuthVerificationConfiguration {
   lifespan?: number;
   optionalQueryString?: string;
   skipDIDToken?: boolean;
+  showUI?: boolean;
 }
 
 export interface OAuthPopupConfiguration {
@@ -117,6 +118,7 @@ export interface OAuthPopupConfiguration {
   loginHint?: string;
   providerParams?: Record<string, string | number | boolean>;
   shouldReturnURI?: boolean;
+  showUI?: boolean;
 }
 
 export enum OAuthErrorCode {
diff --git a/packages/@magic-ext/wallet-kit/package.json b/packages/@magic-ext/wallet-kit/package.json
index 26fb6f35d..71a98ee15 100644
--- a/packages/@magic-ext/wallet-kit/package.json
+++ b/packages/@magic-ext/wallet-kit/package.json
@@ -53,6 +53,7 @@
     "@reown/appkit-adapter-wagmi": "^1.8.0",
     "@wagmi/core": "^2.0.0",
     "@walletconnect/ethereum-provider": "^2.23.0",
+    "libphonenumber-js": "^1.12.37",
     "wagmi": "^2.0.0"
   },
   "peerDependencies": {
diff --git a/packages/@magic-ext/wallet-kit/src/MagicWidget.tsx b/packages/@magic-ext/wallet-kit/src/MagicWidget.tsx
index 379e1c5a1..a32269684 100644
--- a/packages/@magic-ext/wallet-kit/src/MagicWidget.tsx
+++ b/packages/@magic-ext/wallet-kit/src/MagicWidget.tsx
@@ -11,14 +11,19 @@ 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 { SmsLoginProvider } from './context/SmsLoginContext';
+import { WebAuthnLoginProvider } from './context/WebAuthnLoginContext';
 import { WidgetConfigProvider } from './context/WidgetConfigContext';
-import { EmailOTPView } from './views/EmailOTPView';
+import { OtpView } from './views/OtpView';
 import { DeviceVerificationView } from './views/DeviceVerificationView';
 import { LoginSuccessView } from './views/LoginSuccessView';
 import { MFAView } from './views/MfaView';
 import { RecoveryCodeView } from './views/RecoveryCode';
 import { LostRecoveryCode } from './views/LostRecoveryCode';
 import { WalletConnectView } from './views/WalletConnectView';
+import { SmsLoginView } from './views/SmsLoginView';
+import { WebAuthnLoginView } from './views/WebAuthnLoginView';
 import { FarcasterPendingView } from './views/FarcasterPendingView';
 import { FarcasterSuccessView } from './views/FarcasterSuccessView';
 import { FarcasterFailedView } from './views/FarcasterFailedView';
@@ -56,10 +61,14 @@ function WidgetContent({
   const renderView = () => {
     switch (state.view) {
       case 'login':
-        return <LoginView dispatch={dispatch} />;
+        return <LoginView dispatch={dispatch} state={state} />;
+      case 'sms_login':
+        return <SmsLoginView state={state} />;
+      case 'webauthn_login':
+        return <WebAuthnLoginView state={state} />;
       case 'wallet_pending':
         if (!state.selectedProvider) {
-          return <LoginView dispatch={dispatch} />;
+          return <LoginView dispatch={dispatch} state={state} />;
         }
         return (
           <WalletPendingView
@@ -73,19 +82,20 @@ function WidgetContent({
         return <WalletConnectView key="walletconnect" dispatch={dispatch} />;
       case 'oauth_pending':
         if (!state.selectedProvider) {
-          return <LoginView dispatch={dispatch} />;
+          return <LoginView dispatch={dispatch} state={state} />;
         }
         return (
           <OAuthPendingView
             key={`oauth-${state.selectedProvider}`}
             provider={state.selectedProvider as OAuthProvider}
+            state={state}
             dispatch={dispatch}
           />
         );
       case 'additional_providers':
         return <AdditionalProvidersView dispatch={dispatch} />;
-      case 'email_otp_pending':
-        return <EmailOTPView state={state} dispatch={dispatch} />;
+      case 'otp_pending':
+        return <OtpView state={state} dispatch={dispatch} />;
       case 'device_verification':
         return <DeviceVerificationView state={state} dispatch={dispatch} />;
       case 'mfa_pending':
@@ -103,18 +113,24 @@ function WidgetContent({
       case 'farcaster_failed':
         return <FarcasterFailedView state={state} dispatch={dispatch} />;
       default:
-        return <LoginView dispatch={dispatch} />;
+        return <LoginView dispatch={dispatch} state={state} />;
     }
   };
 
   return (
     <EmailLoginProvider dispatch={dispatch}>
-      <Modal isWidget fullscreen={isModal && isMobile}>
-        <VStack width="full" minWidth="380px">
-          {renderView()}
-          <Footer showLogo={showFooterLogo} />
-        </VStack>
-      </Modal>
+      <SmsLoginProvider dispatch={dispatch}>
+        <WebAuthnLoginProvider dispatch={dispatch}>
+          <OAuthLoginProvider dispatch={dispatch}>
+            <Modal isWidget fullscreen={isModal && isMobile}>
+              <VStack width="full" minWidth="380px">
+                {renderView()}
+                <Footer showLogo={showFooterLogo} />
+              </VStack>
+            </Modal>
+          </OAuthLoginProvider>
+        </WebAuthnLoginProvider>
+      </SmsLoginProvider>
     </EmailLoginProvider>
   );
 }
diff --git a/packages/@magic-ext/wallet-kit/src/components/EmailInput.tsx b/packages/@magic-ext/wallet-kit/src/components/EmailInput.tsx
index b97fb5802..d12164fdb 100644
--- a/packages/@magic-ext/wallet-kit/src/components/EmailInput.tsx
+++ b/packages/@magic-ext/wallet-kit/src/components/EmailInput.tsx
@@ -8,33 +8,39 @@ import { Box } from '@styled/jsx';
 import { token } from '@styled/tokens';
 import { getExtensionInstance } from 'src/extension';
 
-export const EmailInput = () => {
+interface EmailInputProps {
+  error?: string;
+  isLoading?: boolean;
+}
+
+export const EmailInput = ({ error: externalError, isLoading }: EmailInputProps) => {
   const { startEmailLogin } = useEmailLogin();
   const [email, setEmail] = useState('');
-  const [isValidating, setIsValidating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [localError, setLocalError] = useState<string | null>(null);
   const [disabled, setDisabled] = useState(true);
   const config = getExtensionInstance().getConfig();
   const isDarkMode = config?.theme.themeColor === 'dark';
 
+  // Use external error if available, otherwise fall back to local error
+  const displayError = externalError || localError;
+
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
     if (!isValidEmail(email)) {
-      setError(RpcErrorMessage.MalformedEmail);
+      setLocalError(RpcErrorMessage.MalformedEmail);
       return;
     } else if (isSanctionedEmail(email)) {
-      setError(RpcErrorMessage.SanEmail);
+      setLocalError(RpcErrorMessage.SanEmail);
       return;
     }
 
     setDisabled(true);
-    setIsValidating(true);
     startEmailLogin(email);
   };
 
   const handleInput = (e: string) => {
-    setError(null);
+    setLocalError(null);
     setDisabled(!e.length);
     setEmail(e.trim());
   };
@@ -52,7 +58,7 @@ export const EmailInput = () => {
               variant="text"
               textStyle="neutral"
               disabled={disabled}
-              validating={isValidating}
+              validating={isLoading}
               type="submit"
             >
               <Button.LeadingIcon color={token('colors.text.tertiary')}>
@@ -62,9 +68,9 @@ export const EmailInput = () => {
           </TextInput.ActionIcon>
         </TextInput>
       </Box>
-      {error && (
+      {displayError && (
         <Text variant="error" size="sm" styles={{ textAlign: 'center' }}>
-          {error}
+          {displayError}
         </Text>
       )}
     </form>
diff --git a/packages/@magic-ext/wallet-kit/src/components/ProviderButton.tsx b/packages/@magic-ext/wallet-kit/src/components/ProviderButton.tsx
index 48004292c..7f0b7292e 100644
--- a/packages/@magic-ext/wallet-kit/src/components/ProviderButton.tsx
+++ b/packages/@magic-ext/wallet-kit/src/components/ProviderButton.tsx
@@ -8,9 +8,10 @@ interface ProviderButtonProps {
   Icon: ElementType;
   onPress: () => void;
   hideLabel?: boolean;
+  center?: boolean;
 }
 
-export const ProviderButton = ({ label, Icon, onPress, hideLabel }: ProviderButtonProps) => {
+export const ProviderButton = ({ label, Icon, onPress, hideLabel, center }: ProviderButtonProps) => {
   return (
     <ButtonContainer
       onPress={onPress}
@@ -23,7 +24,7 @@ export const ProviderButton = ({ label, Icon, onPress, hideLabel }: ProviderButt
         _hover: { bg: 'neutral.tertiary' },
       })}
     >
-      <Flex gap={3} w="full" justifyContent={hideLabel ? 'center' : 'flex-start'} alignItems="center">
+      <Flex gap={3} w="full" justifyContent={hideLabel || center ? 'center' : 'flex-start'} alignItems="center">
         <Icon width={24} height={24} />
         {!hideLabel && label && (
           <Text fontWeight="medium" styles={{ lineHeight: '1.5rem' }}>
diff --git a/packages/@magic-ext/wallet-kit/src/components/SmsInput.tsx b/packages/@magic-ext/wallet-kit/src/components/SmsInput.tsx
new file mode 100644
index 000000000..4aa052454
--- /dev/null
+++ b/packages/@magic-ext/wallet-kit/src/components/SmsInput.tsx
@@ -0,0 +1,81 @@
+import { Button, IcoArrowRight, PhoneInput, Text } from '@magiclabs/ui-components';
+import { Box } from '@styled/jsx';
+import { vstack } from '@styled/patterns';
+import { token } from '@styled/tokens';
+import { isValidPhoneNumber } from 'libphonenumber-js';
+import React, { FormEvent, useState } from 'react';
+import { RpcErrorMessage } from 'src/types';
+import { useSmsLogin } from '../context/SmsLoginContext';
+
+interface SmsInputProps {
+  error?: string;
+  isLoading?: boolean;
+}
+
+export const SmsInput = ({ error: externalError, isLoading }: SmsInputProps) => {
+  const { startSmsLogin } = useSmsLogin();
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const isPhoneValid = phoneNumber.length > 0 && isValidPhoneNumber(phoneNumber);
+
+  // Use external error if available, otherwise fall back to local error
+  const displayError = externalError || localError;
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!isValidPhoneNumber(phoneNumber)) {
+      setLocalError(RpcErrorMessage.InvalidPhoneNumber);
+      return;
+    }
+
+    startSmsLogin(phoneNumber);
+  };
+
+  const handleInput = (value: string) => {
+    setLocalError(null);
+    setPhoneNumber(value.trim());
+  };
+
+  const handlePhoneChange = (phone: string) => {
+    handleInput(phone);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={vstack({ w: 'full' })}>
+      <Box w="full" maxW="25rem" style={{ position: 'relative' }}>
+        <PhoneInput onChange={handlePhoneChange} autoFocus={false} errorMessage={undefined} />
+
+        <Box
+          style={{
+            position: 'absolute',
+            right: token('spacing.3'),
+            top: '0',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <Button
+            aria-label="login-submit-button"
+            variant="text"
+            textStyle="neutral"
+            disabled={!isPhoneValid}
+            validating={isLoading}
+            type="submit"
+          >
+            <Button.LeadingIcon color={token('colors.text.tertiary')}>
+              <IcoArrowRight />
+            </Button.LeadingIcon>
+          </Button>
+        </Box>
+      </Box>
+      {displayError && (
+        <Text variant="error" size="sm" styles={{ textAlign: 'center' }}>
+          {displayError}
+        </Text>
+      )}
+    </form>
+  );
+};
diff --git a/packages/@magic-ext/wallet-kit/src/context/EmailLoginContext.tsx b/packages/@magic-ext/wallet-kit/src/context/EmailLoginContext.tsx
index 4dec0213f..f577ebd66 100644
--- a/packages/@magic-ext/wallet-kit/src/context/EmailLoginContext.tsx
+++ b/packages/@magic-ext/wallet-kit/src/context/EmailLoginContext.tsx
@@ -43,7 +43,7 @@ export function EmailLoginProvider({ children, dispatch }: EmailLoginProviderPro
   const startEmailLogin = useCallback(
     (email: string) => {
       emailRef.current = email;
-      dispatch({ type: 'EMAIL_OTP_START', email });
+      dispatch({ type: 'OTP_START', identifier: email, loginMethod: 'email' });
 
       try {
         const extension = getExtensionInstance();
@@ -56,17 +56,17 @@ export function EmailLoginProvider({ children, dispatch }: EmailLoginProviderPro
 
         // OTP was sent successfully
         handle.on(LoginWithEmailOTPEventOnReceived.EmailOTPSent, () => {
-          dispatch({ type: 'EMAIL_OTP_SENT' });
+          dispatch({ type: 'OTP_SENT' });
         });
 
         // Invalid OTP entered
         handle.on(LoginWithEmailOTPEventOnReceived.InvalidEmailOtp, () => {
-          dispatch({ type: 'EMAIL_OTP_INVALID' });
+          dispatch({ type: 'OTP_INVALID' });
         });
 
         // OTP has expired
         handle.on(LoginWithEmailOTPEventOnReceived.ExpiredEmailOtp, () => {
-          dispatch({ type: 'EMAIL_OTP_EXPIRED' });
+          dispatch({ type: 'OTP_EXPIRED' });
         });
 
         // Login throttled (too many attempts)
@@ -76,7 +76,7 @@ export function EmailLoginProvider({ children, dispatch }: EmailLoginProviderPro
 
         // Max attempts reached
         handle.on(LoginWithEmailOTPEventOnReceived.MaxAttemptsReached, () => {
-          dispatch({ type: 'EMAIL_OTP_MAX_ATTEMPTS_REACHED' });
+          dispatch({ type: 'OTP_MAX_ATTEMPTS_REACHED' });
         });
 
         // ==========================================
@@ -157,7 +157,7 @@ export function EmailLoginProvider({ children, dispatch }: EmailLoginProviderPro
   const submitOTP = useCallback(
     (otp: string) => {
       if (handleRef.current) {
-        dispatch({ type: 'EMAIL_OTP_VERIFYING' });
+        dispatch({ type: 'OTP_VERIFYING' });
         handleRef.current.emit(LoginWithEmailOTPEventEmit.VerifyEmailOtp, otp);
       }
     },
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/SmsLoginContext.tsx b/packages/@magic-ext/wallet-kit/src/context/SmsLoginContext.tsx
new file mode 100644
index 000000000..4c0886da5
--- /dev/null
+++ b/packages/@magic-ext/wallet-kit/src/context/SmsLoginContext.tsx
@@ -0,0 +1,265 @@
+import {
+  DeviceVerificationEventEmit,
+  DeviceVerificationEventOnReceived,
+  LoginWithSmsOTPEventEmit,
+  LoginWithSmsOTPEventOnReceived,
+} from '@magic-sdk/types';
+import React, { createContext, ReactNode, useCallback, useContext, useRef, useState } from 'react';
+import { getExtensionInstance } from '../extension';
+import { WidgetAction } from '../reducer';
+import { useWidgetConfig } from './WidgetConfigContext';
+
+type SmsOTPHandle = ReturnType<ReturnType<typeof getExtensionInstance>['loginWithSMS']>;
+
+interface SmsLoginContextValue {
+  startSmsLogin: (phoneNumber: string) => void;
+  submitOTP: (otp: string) => void;
+  submitMFA: (totp: string) => void;
+  lostDevice: () => void;
+  submitRecoveryCode: (recoveryCode: string) => void;
+  cancelLogin: () => void;
+  retryDeviceVerification: () => void;
+  resendSmsOTP: () => void;
+  phoneNumber: string | null;
+  isSmsLoginActive: boolean;
+}
+
+const SmsLoginContext = createContext<SmsLoginContextValue | null>(null);
+
+interface SmsLoginProviderProps {
+  children: ReactNode;
+  dispatch: React.Dispatch<WidgetAction>;
+}
+
+export function SmsLoginProvider({ children, dispatch }: SmsLoginProviderProps) {
+  const { handleSuccess, handleError } = useWidgetConfig();
+
+  const handleRef = useRef<SmsOTPHandle | null>(null);
+  const phoneNumberRef = useRef<string | null>(null);
+  const [isSmsLoginActive, setIsSmsLoginActive] = useState(false);
+
+  /**
+   * Start the SMS OTP login flow
+   * Sets up all event listeners and manages state transitions
+   */
+  const startSmsLogin = useCallback(
+    (phoneNumber: string) => {
+      phoneNumberRef.current = phoneNumber;
+      setIsSmsLoginActive(true);
+      dispatch({ type: 'OTP_START', identifier: phoneNumber, loginMethod: 'sms' });
+
+      try {
+        const extension = getExtensionInstance();
+        const handle = extension.loginWithSMS(phoneNumber);
+        handleRef.current = handle;
+
+        // ==========================================
+        // SMS OTP Events
+        // ==========================================
+
+        // OTP was sent successfully
+        handle.on(LoginWithSmsOTPEventOnReceived.SmsOTPSent, () => {
+          dispatch({ type: 'OTP_SENT' });
+        });
+
+        // Invalid OTP entered
+        handle.on(LoginWithSmsOTPEventOnReceived.InvalidSmsOtp, () => {
+          dispatch({ type: 'OTP_INVALID' });
+        });
+
+        // OTP has expired
+        handle.on(LoginWithSmsOTPEventOnReceived.ExpiredSmsOtp, () => {
+          dispatch({ type: 'OTP_EXPIRED' });
+        });
+
+        // Login throttled (too many attempts)
+        handle.on(LoginWithSmsOTPEventOnReceived.LoginThrottled, () => {
+          dispatch({ type: 'LOGIN_ERROR', error: 'Too many login attempts. Please try again later.' });
+        });
+
+        // ==========================================
+        // Device Verification Events
+        // ==========================================
+
+        // Device needs approval (unrecognized device)
+        handle.on(DeviceVerificationEventOnReceived.DeviceNeedsApproval, () => {
+          dispatch({ type: 'DEVICE_NEEDS_APPROVAL' });
+        });
+
+        // Device verification sms sent
+        handle.on(DeviceVerificationEventOnReceived.DeviceVerificationEmailSent, () => {
+          dispatch({ type: 'DEVICE_VERIFICATION_SENT' });
+        });
+
+        // Device verification link expired
+        handle.on(DeviceVerificationEventOnReceived.DeviceVerificationLinkExpired, () => {
+          dispatch({ type: 'DEVICE_VERIFICATION_EXPIRED' });
+        });
+
+        // Device approved successfully
+        handle.on(DeviceVerificationEventOnReceived.DeviceApproved, () => {
+          dispatch({ type: 'DEVICE_APPROVED' });
+        });
+
+        // ==========================================
+        // MFA Events
+        // ==========================================
+
+        handle.on(LoginWithSmsOTPEventOnReceived.MfaSentHandle, () => {
+          dispatch({ type: 'MFA_REQUIRED' });
+        });
+
+        handle.on(LoginWithSmsOTPEventOnReceived.InvalidMfaOtp, () => {
+          dispatch({ type: 'MFA_INVALID' });
+        });
+
+        // ==========================================
+        // Recovery Code Events
+        // ==========================================
+
+        handle.on(LoginWithSmsOTPEventOnReceived.InvalidRecoveryCode, () => {
+          dispatch({ type: 'RECOVERY_CODE_INVALID' });
+        });
+
+        // ==========================================
+        // Handle Promise Resolution
+        // ==========================================
+
+        handle
+          .then(didToken => {
+            if (didToken) {
+              dispatch({ type: 'LOGIN_SUCCESS' });
+              handleSuccess({ method: 'sms', didToken });
+            }
+          })
+          .catch(error => {
+            const errorInstance = error instanceof Error ? error : new Error(error?.message || 'Login failed');
+            dispatch({ type: 'LOGIN_ERROR', error: errorInstance.message });
+            handleError(errorInstance);
+          });
+      } catch (error) {
+        const errorInstance = error instanceof Error ? error : new Error('Failed to start login');
+        dispatch({
+          type: 'LOGIN_ERROR',
+          error: errorInstance.message,
+        });
+        handleError(errorInstance);
+      }
+    },
+    [dispatch, handleSuccess, handleError],
+  );
+
+  /**
+   * Submit OTP code for verification
+   */
+  const submitOTP = useCallback(
+    (otp: string) => {
+      if (handleRef.current) {
+        dispatch({ type: 'OTP_VERIFYING' });
+        handleRef.current.emit(LoginWithSmsOTPEventEmit.VerifySmsOtp, otp);
+      }
+    },
+    [dispatch],
+  );
+
+  /**
+   * Submit MFA code for verification
+   */
+  const submitMFA = useCallback(
+    (totp: string) => {
+      if (handleRef.current) {
+        dispatch({ type: 'MFA_VERIFYING' });
+        handleRef.current.emit(LoginWithSmsOTPEventEmit.VerifyMFACode, totp);
+      }
+    },
+    [dispatch],
+  );
+
+  /**
+   * Lost device
+   */
+  const lostDevice = useCallback(() => {
+    if (handleRef.current) {
+      dispatch({ type: 'LOST_DEVICE' });
+      handleRef.current.emit(LoginWithSmsOTPEventEmit.LostDevice);
+    }
+  }, [dispatch]);
+
+  /**
+   * Submit recovery code for verification
+   */
+  const submitRecoveryCode = useCallback(
+    (recoveryCode: string) => {
+      if (handleRef.current) {
+        dispatch({ type: 'RECOVERY_CODE_VERIFYING' });
+        handleRef.current.emit(LoginWithSmsOTPEventEmit.VerifyRecoveryCode, recoveryCode);
+      }
+    },
+    [dispatch],
+  );
+
+  /**
+   * Cancel the current login flow
+   */
+  const cancelLogin = useCallback(() => {
+    if (handleRef.current) {
+      handleRef.current.emit(LoginWithSmsOTPEventEmit.Cancel);
+    }
+    handleRef.current = null;
+    phoneNumberRef.current = null;
+    setIsSmsLoginActive(false);
+    dispatch({ type: 'GO_TO_LOGIN' });
+  }, [dispatch]);
+
+  /**
+   * Retry device verification
+   */
+  const retryDeviceVerification = useCallback(() => {
+    if (handleRef.current) {
+      handleRef.current.emit(DeviceVerificationEventEmit.Retry);
+    }
+  }, []);
+
+  const resendSmsOTP = useCallback(() => {
+    const phoneNumber = phoneNumberRef.current;
+
+    if (handleRef.current) {
+      handleRef.current.emit(LoginWithSmsOTPEventEmit.Cancel);
+    }
+    handleRef.current = null;
+    phoneNumberRef.current = null;
+
+    if (!phoneNumber) {
+      return dispatch({ type: 'LOGIN_ERROR', error: 'Internal error: No phone number found' });
+    }
+
+    startSmsLogin(phoneNumber);
+  }, [startSmsLogin, dispatch]);
+
+  const value: SmsLoginContextValue = {
+    startSmsLogin,
+    submitOTP,
+    submitMFA,
+    lostDevice,
+    submitRecoveryCode,
+    cancelLogin,
+    retryDeviceVerification,
+    resendSmsOTP,
+    phoneNumber: phoneNumberRef.current,
+    isSmsLoginActive,
+  };
+
+  return <SmsLoginContext.Provider value={value}>{children}</SmsLoginContext.Provider>;
+}
+
+/**
+ * Hook to access the SMS login context
+ * @throws Error if used outside of SmsLoginProvider
+ */
+export function useSmsLogin(): SmsLoginContextValue {
+  const context = useContext(SmsLoginContext);
+  if (!context) {
+    throw new Error('useSmsLogin must be used within a SmsLoginProvider');
+  }
+  return context;
+}
diff --git a/packages/@magic-ext/wallet-kit/src/context/WebAuthnLoginContext.tsx b/packages/@magic-ext/wallet-kit/src/context/WebAuthnLoginContext.tsx
new file mode 100644
index 000000000..258f1f18d
--- /dev/null
+++ b/packages/@magic-ext/wallet-kit/src/context/WebAuthnLoginContext.tsx
@@ -0,0 +1,137 @@
+import React, { createContext, ReactNode, useCallback, useContext, useRef, useState } from 'react';
+import { getExtensionInstance } from '../extension';
+import { WidgetAction } from '../reducer';
+import { useWidgetConfig } from './WidgetConfigContext';
+
+type WebAuthnHandle = ReturnType<ReturnType<typeof getExtensionInstance>['loginWithWebAuthn']>;
+
+interface WebAuthnLoginContextValue {
+  startWebAuthnLogin: (username: string) => void;
+  registerNewWebAuthnUser: (username: string, nickname?: string) => void;
+  cancelLogin: () => void;
+  username: string | null;
+}
+
+const WebAuthnLoginContext = createContext<WebAuthnLoginContextValue | null>(null);
+
+interface WebAuthnLoginProviderProps {
+  children: ReactNode;
+  dispatch: React.Dispatch<WidgetAction>;
+}
+
+export function WebAuthnLoginProvider({ children, dispatch }: WebAuthnLoginProviderProps) {
+  const { handleSuccess, handleError } = useWidgetConfig();
+
+  const handleRef = useRef<WebAuthnHandle | null>(null);
+  const usernameRef = useRef<string | null>(null);
+
+  /**
+   * Start the WebAuthn login flow
+   * Initiates WebAuthn biometric authentication for the given username
+   */
+  const startWebAuthnLogin = useCallback(
+    (username: string) => {
+      usernameRef.current = username;
+      dispatch({ type: 'OTP_START', identifier: username, loginMethod: 'webauthn' });
+
+      try {
+        const extension = getExtensionInstance();
+        const handle = extension.loginWithWebAuthn(username);
+        handleRef.current = handle;
+
+        // Handle Promise Resolution
+        handle
+          .then((didToken: string | null) => {
+            if (didToken) {
+              dispatch({ type: 'LOGIN_SUCCESS' });
+              handleSuccess({ method: 'webauthn', didToken });
+            }
+          })
+          .catch((error: unknown) => {
+            const errorMessage = error instanceof Error ? error.message : 'Login failed';
+            const errorInstance = error instanceof Error ? error : new Error(errorMessage);
+            dispatch({ type: 'LOGIN_ERROR', error: errorMessage });
+            handleError(errorInstance);
+          });
+      } catch (error) {
+        const errorInstance = error instanceof Error ? error : new Error('Failed to start WebAuthn login');
+        dispatch({
+          type: 'LOGIN_ERROR',
+          error: errorInstance.message,
+        });
+        handleError(errorInstance);
+      }
+    },
+    [dispatch, handleSuccess, handleError],
+  );
+
+  /**
+   * Register a new user with WebAuthn (passkey)
+   * Creates a new WebAuthn credential for the user
+   */
+  const registerNewWebAuthnUser = useCallback(
+    (username: string, nickname?: string) => {
+      usernameRef.current = username;
+      dispatch({ type: 'OTP_START', identifier: username, loginMethod: 'webauthn' });
+
+      try {
+        const extension = getExtensionInstance();
+        const handle = extension.registerNewWebAuthnUser({ username, nickname });
+        handleRef.current = handle;
+
+        // Handle Promise Resolution
+        handle
+          .then((didToken: string | null) => {
+            if (didToken) {
+              dispatch({ type: 'LOGIN_SUCCESS' });
+              handleSuccess({ method: 'webauthn', didToken });
+            }
+          })
+          .catch((error: unknown) => {
+            const errorMessage = error instanceof Error ? error.message : 'Registration failed';
+            const errorInstance = error instanceof Error ? error : new Error(errorMessage);
+            dispatch({ type: 'LOGIN_ERROR', error: errorMessage });
+            handleError(errorInstance);
+          });
+      } catch (error) {
+        const errorInstance = error instanceof Error ? error : new Error('Failed to start WebAuthn registration');
+        dispatch({
+          type: 'LOGIN_ERROR',
+          error: errorInstance.message,
+        });
+        handleError(errorInstance);
+      }
+    },
+    [dispatch, handleSuccess, handleError],
+  );
+
+  /**
+   * Cancel the current login flow
+   */
+  const cancelLogin = useCallback(() => {
+    handleRef.current = null;
+    usernameRef.current = null;
+    dispatch({ type: 'GO_TO_LOGIN' });
+  }, [dispatch]);
+
+  const value: WebAuthnLoginContextValue = {
+    startWebAuthnLogin,
+    registerNewWebAuthnUser,
+    cancelLogin,
+    username: usernameRef.current,
+  };
+
+  return <WebAuthnLoginContext.Provider value={value}>{children}</WebAuthnLoginContext.Provider>;
+}
+
+/**
+ * Hook to access the WebAuthn login context
+ * @throws Error if used outside of WebAuthnLoginProvider
+ */
+export function useWebAuthnLogin(): WebAuthnLoginContextValue {
+  const context = useContext(WebAuthnLoginContext);
+  if (!context) {
+    throw new Error('useWebAuthnLogin must be used within a WebAuthnLoginProvider');
+  }
+  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 47facde1d..5723f54a7 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';
@@ -12,6 +16,12 @@ import type { Config } from '@wagmi/core';
 import type { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
 import { ClientConfig } from './types/client-config';
 import { createWagmiConfig } from './wagmi/config';
+import {
+  transformAssertionForServer,
+  transformNewAssertionForServer,
+  WebAuthnPayloadMethod,
+  WebAuthnSDKErrorCode,
+} from './utils/webauthn';
 
 enum SiwePayloadMethod {
   GenerateNonce = 'magic_siwe_generate_nonce',
@@ -503,27 +513,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;
   }
 
   /**
@@ -558,6 +619,91 @@ export class WalletKitExtension extends Extension.Internal<'walletKit'> {
     return this.sdk.auth.loginWithEmailOTP({ email, showUI: false, deviceCheckUI: false });
   }
 
+  /**
+   * Login with SMS OTP
+   */
+  public loginWithSMS(phoneNumber: string) {
+    return this.sdk.auth.loginWithSMS({ phoneNumber, showUI: false });
+  }
+
+  /**
+   * Login with WebAuthn (passkey).
+   * Authenticates an existing user with WebAuthn credentials.
+   */
+  public async loginWithWebAuthn(username: string) {
+    if (!window.PublicKeyCredential) {
+      throw this.createError(
+        WebAuthnSDKErrorCode.WebAuthnNotSupported,
+        'WebAuthn is not supported in this device.',
+        {},
+      );
+    }
+
+    const transformedCredentialRequestOptions = await this.request<any>(
+      this.utils.createJsonRpcRequestPayload(WebAuthnPayloadMethod.LoginWithWebAuthn, [{ username }]),
+    );
+
+    let assertion;
+    try {
+      assertion = (await navigator.credentials.get({
+        publicKey: transformedCredentialRequestOptions,
+      })) as PublicKeyCredential;
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : 'Error getting credential';
+      throw this.createError(WebAuthnSDKErrorCode.WebAuthnCreateCredentialError, errorMessage, {});
+    }
+
+    return this.request<string | null>(
+      this.utils.createJsonRpcRequestPayload(WebAuthnPayloadMethod.WebAuthnLoginVerify, [
+        {
+          username,
+          assertion_response: transformAssertionForServer(assertion),
+        },
+      ]),
+    );
+  }
+
+  /**
+   * Register a new user with WebAuthn (passkey).
+   * Creates a new WebAuthn credential for the user.
+   */
+  public async registerNewWebAuthnUser(configuration: { username: string; nickname?: string }) {
+    if (!window.PublicKeyCredential) {
+      throw this.createError(
+        WebAuthnSDKErrorCode.WebAuthnNotSupported,
+        'WebAuthn is not supported in this device.',
+        {},
+      );
+    }
+    const { username, nickname = '' } = configuration;
+
+    const options = await this.request<any>(
+      this.utils.createJsonRpcRequestPayload(WebAuthnPayloadMethod.WebAuthnRegistrationStart, [{ username }]),
+    );
+
+    let credential;
+    try {
+      credential = (await navigator.credentials.create({
+        publicKey: options.credential_options,
+      })) as PublicKeyCredential;
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : 'Error creating credential';
+      throw this.createError(WebAuthnSDKErrorCode.WebAuthnCreateCredentialError, errorMessage, {});
+    }
+
+    return this.request<string | null>(
+      this.utils.createJsonRpcRequestPayload(WebAuthnPayloadMethod.RegisterWithWebAuth, [
+        {
+          id: options.id,
+          nickname,
+          transport: (credential.response as AuthenticatorAttestationResponse).getTransports(),
+          user_agent: navigator.userAgent,
+          registration_response: transformNewAssertionForServer(credential),
+        },
+      ]),
+    );
+  }
+
   /**
    * Login with Farcaster (whitelabel mode - no built-in UI).
    * Returns a PromiEvent that emits 'channel', 'success', and 'failed' events.
diff --git a/packages/@magic-ext/wallet-kit/src/hooks/useCancelLogin.ts b/packages/@magic-ext/wallet-kit/src/hooks/useCancelLogin.ts
new file mode 100644
index 000000000..3d02b472d
--- /dev/null
+++ b/packages/@magic-ext/wallet-kit/src/hooks/useCancelLogin.ts
@@ -0,0 +1,32 @@
+import { useEmailLogin } from '../context/EmailLoginContext';
+import { useOAuthLogin } from '../context/OAuthLoginContext';
+import { useSmsLogin } from '../context/SmsLoginContext';
+
+interface UseCancelLoginResult {
+  cancelLogin: () => void;
+}
+
+export function useCancelLogin(): UseCancelLoginResult {
+  const oauthContext = useOAuthLogin();
+  const emailContext = useEmailLogin();
+  const smsContext = useSmsLogin();
+
+  // If the OAuth context has an active MFA flow, use it
+  if (oauthContext.isMfaActive) {
+    return {
+      cancelLogin: oauthContext.cancelLogin,
+    };
+  }
+
+  // Use SMS context for MFA if SMS login is active
+  if (smsContext.isSmsLoginActive) {
+    return {
+      cancelLogin: smsContext.cancelLogin,
+    };
+  }
+
+  // Default to the email login context
+  return {
+    cancelLogin: emailContext.cancelLogin,
+  };
+}
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..accbf9ced
--- /dev/null
+++ b/packages/@magic-ext/wallet-kit/src/hooks/useMfa.ts
@@ -0,0 +1,44 @@
+import { useEmailLogin } from '../context/EmailLoginContext';
+import { useOAuthLogin } from '../context/OAuthLoginContext';
+import { useSmsLogin } from '../context/SmsLoginContext';
+
+interface UseMfaResult {
+  submitMFA: (totp: string) => void;
+  lostDevice: () => void;
+  submitRecoveryCode: (recoveryCode: string) => void;
+  cancelLogin: () => void;
+}
+
+export function useMfa(): UseMfaResult {
+  const oauthContext = useOAuthLogin();
+  const emailContext = useEmailLogin();
+  const smsContext = useSmsLogin();
+
+  // 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,
+    };
+  }
+
+  // Use SMS context for MFA if SMS login is active
+  if (smsContext.isSmsLoginActive) {
+    return {
+      submitMFA: smsContext.submitMFA,
+      lostDevice: smsContext.lostDevice,
+      submitRecoveryCode: smsContext.submitRecoveryCode,
+      cancelLogin: smsContext.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/index.ts b/packages/@magic-ext/wallet-kit/src/index.ts
index 051593272..07e219bdd 100644
--- a/packages/@magic-ext/wallet-kit/src/index.ts
+++ b/packages/@magic-ext/wallet-kit/src/index.ts
@@ -8,8 +8,10 @@ export {
   type MagicWidgetProps,
   type LoginResult,
   type EmailLoginResult,
+  type SmsLoginResult,
   type OAuthLoginResult,
   type WalletLoginResult,
   type FarcasterLoginResult,
+  type WebAuthnLoginResult,
   type OAuthUserInfo,
 } from './types';
diff --git a/packages/@magic-ext/wallet-kit/src/reducer.ts b/packages/@magic-ext/wallet-kit/src/reducer.ts
index 274b23783..58f11a43c 100644
--- a/packages/@magic-ext/wallet-kit/src/reducer.ts
+++ b/packages/@magic-ext/wallet-kit/src/reducer.ts
@@ -5,11 +5,13 @@ import { LoginProvider, OAuthProvider, ThirdPartyWallet, ThirdPartyWallets } fro
 export type View =
   | 'login'
   | 'otp'
+  | 'sms_login'
+  | 'webauthn_login'
   | 'additional_providers'
   | 'wallet_pending'
   | 'walletconnect_pending'
   | 'oauth_pending'
-  | 'email_otp_pending'
+  | 'otp_pending'
   | 'device_verification'
   | 'mfa_pending'
   | 'recovery_code'
@@ -19,7 +21,7 @@ export type View =
   | 'farcaster_success'
   | 'farcaster_failed';
 
-export type EmailLoginStatus =
+export type OtpLoginStatus =
   | 'idle'
   | 'sending'
   | 'otp_sent'
@@ -42,13 +44,15 @@ export type EmailLoginStatus =
 
 export interface WidgetState {
   view: View;
-  // Data passed between views
-  email?: string;
+  // Data passed between views (email or phone number)
+  identifier?: string;
   selectedProvider?: LoginProvider;
   walletAddress?: string; // For WalletConnect when using EthereumProvider directly
   error?: string;
-  // Email login flow state
-  emailLoginStatus?: EmailLoginStatus;
+  // OTP login flow state (email or SMS)
+  otpLoginStatus?: OtpLoginStatus;
+  // Login method: 'email', 'sms', or 'webauthn'
+  loginMethod?: 'email' | 'sms' | 'webauthn';
   // Farcaster flow state
   farcasterUrl?: string;
   farcasterUsername?: string;
@@ -57,13 +61,15 @@ export interface WidgetState {
 export type WidgetAction =
   // Navigation actions
   | { type: 'GO_TO_LOGIN' }
-  // Email flow
-  | { type: 'EMAIL_OTP_START'; email: string }
-  | { type: 'EMAIL_OTP_SENT' }
-  | { type: 'EMAIL_OTP_INVALID' }
-  | { type: 'EMAIL_OTP_EXPIRED' }
-  | { type: 'EMAIL_OTP_MAX_ATTEMPTS_REACHED' }
-  | { type: 'EMAIL_OTP_VERIFYING' }
+  | { type: 'GO_TO_SMS_LOGIN' }
+  | { type: 'GO_TO_WEBAUTHN_LOGIN' }
+  // OTP flow (email, SMS, or WebAuthn)
+  | { type: 'OTP_START'; identifier: string; loginMethod?: 'email' | 'sms' | 'webauthn' }
+  | { type: 'OTP_SENT' }
+  | { type: 'OTP_INVALID' }
+  | { type: 'OTP_EXPIRED' }
+  | { type: 'OTP_MAX_ATTEMPTS_REACHED' }
+  | { type: 'OTP_VERIFYING' }
   | { type: 'DEVICE_NEEDS_APPROVAL' }
   | { type: 'DEVICE_VERIFICATION_SENT' }
   | { type: 'DEVICE_VERIFICATION_EXPIRED' }
@@ -76,7 +82,7 @@ export type WidgetAction =
   | { type: 'RECOVERY_CODE_INVALID' }
   | { type: 'LOST_RECOVERY_CODE' }
   | { type: 'LOGIN_SUCCESS' }
-  | { type: 'RESET_EMAIL_ERROR' }
+  | { type: 'RESET_OTP_ERROR' }
   | { type: 'LOGIN_ERROR'; error: string }
   // OAuth flow
   | { type: 'SELECT_PROVIDER'; provider: OAuthProvider }
@@ -92,7 +98,7 @@ export type WidgetAction =
 
 export const initialState: WidgetState = {
   view: 'login',
-  emailLoginStatus: 'idle',
+  otpLoginStatus: 'idle',
 };
 
 export function widgetReducer(state: WidgetState, action: WidgetAction): WidgetState {
@@ -103,52 +109,67 @@ export function widgetReducer(state: WidgetState, action: WidgetAction): WidgetS
         ...initialState,
         selectedProvider: undefined,
         walletAddress: undefined,
-        email: undefined,
+        identifier: undefined,
         error: undefined,
       };
 
-    // Email OTP flow
-    case 'EMAIL_OTP_START':
+    case 'GO_TO_SMS_LOGIN':
       return {
         ...state,
-        email: action.email,
-        emailLoginStatus: 'sending',
+        view: 'sms_login',
         error: undefined,
       };
 
-    case 'EMAIL_OTP_SENT':
+    case 'GO_TO_WEBAUTHN_LOGIN':
       return {
         ...state,
-        view: 'email_otp_pending',
-        emailLoginStatus: 'otp_sent',
+        view: 'webauthn_login',
         error: undefined,
       };
 
-    case 'EMAIL_OTP_VERIFYING':
+    // OTP flow (email or SMS)
+    case 'OTP_START':
       return {
         ...state,
-        emailLoginStatus: 'verifying_otp',
+        identifier: action.identifier,
+        loginMethod: action.loginMethod || 'email',
+        otpLoginStatus: 'sending',
         error: undefined,
       };
 
-    case 'EMAIL_OTP_INVALID':
+    case 'OTP_SENT':
       return {
         ...state,
-        emailLoginStatus: 'invalid_otp',
+        view: 'otp_pending',
+        otpLoginStatus: 'otp_sent',
+        error: undefined,
+      };
+
+    case 'OTP_VERIFYING':
+      return {
+        ...state,
+        otpLoginStatus: 'verifying_otp',
+        error: undefined,
+      };
+
+    case 'OTP_INVALID':
+      return {
+        ...state,
+        otpLoginStatus: 'invalid_otp',
         error: 'Invalid code. Please try again.',
       };
 
-    case 'EMAIL_OTP_EXPIRED':
+    case 'OTP_EXPIRED':
       return {
         ...state,
-        emailLoginStatus: 'expired_otp',
+        otpLoginStatus: 'expired_otp',
         error: 'Code expired. Please request a new one.',
       };
 
-    case 'EMAIL_OTP_MAX_ATTEMPTS_REACHED':
+    case 'OTP_MAX_ATTEMPTS_REACHED':
       return {
         ...state,
-        emailLoginStatus: 'max_attempts_reached',
+        otpLoginStatus: 'max_attempts_reached',
         error: 'Max attempts reached. Please request a new code.',
       };
 
@@ -156,7 +177,7 @@ export function widgetReducer(state: WidgetState, action: WidgetAction): WidgetS
       return {
         ...state,
         view: 'device_verification',
-        emailLoginStatus: 'device_needs_approval',
+        otpLoginStatus: 'device_needs_approval',
         error: undefined,
       };
 
@@ -164,21 +185,21 @@ export function widgetReducer(state: WidgetState, action: WidgetAction): WidgetS
       return {
         ...state,
         view: 'device_verification',
-        emailLoginStatus: 'device_verification_sent',
+        otpLoginStatus: 'device_verification_sent',
         error: undefined,
       };
 
     case 'DEVICE_VERIFICATION_EXPIRED':
       return {
         ...state,
-        emailLoginStatus: 'device_verification_expired',
+        otpLoginStatus: 'device_verification_expired',
         error: 'Verification link expired. Please try again.',
       };
 
     case 'DEVICE_APPROVED':
       return {
         ...state,
-        emailLoginStatus: 'device_approved',
+        otpLoginStatus: 'device_approved',
         error: undefined,
       };
 
@@ -186,21 +207,21 @@ export function widgetReducer(state: WidgetState, action: WidgetAction): WidgetS
       return {
         ...state,
         view: 'mfa_pending',
-        emailLoginStatus: 'mfa_required',
+        otpLoginStatus: 'mfa_required',
         error: undefined,
       };
 
     case 'MFA_VERIFYING':
       return {
         ...state,
-        emailLoginStatus: 'mfa_verifying',
+        otpLoginStatus: 'mfa_verifying',
         error: undefined,
       };
 
     case 'MFA_INVALID':
       return {
         ...state,
-        emailLoginStatus: 'mfa_invalid',
+        otpLoginStatus: 'mfa_invalid',
         error: 'Invalid code. Please try again.',
       };
 
@@ -208,21 +229,21 @@ export function widgetReducer(state: WidgetState, action: WidgetAction): WidgetS
       return {
         ...state,
         view: 'recovery_code',
-        emailLoginStatus: 'recovery_code',
+        otpLoginStatus: 'recovery_code',
         error: undefined,
       };
 
     case 'RECOVERY_CODE_VERIFYING':
       return {
         ...state,
-        emailLoginStatus: 'recovery_code_verifying',
+        otpLoginStatus: 'recovery_code_verifying',
         error: undefined,
       };
 
     case 'RECOVERY_CODE_INVALID':
       return {
         ...state,
-        emailLoginStatus: 'recovery_code',
+        otpLoginStatus: 'recovery_code',
         error: 'Invalid recovery code. Please try again.',
       };
 
@@ -230,7 +251,7 @@ export function widgetReducer(state: WidgetState, action: WidgetAction): WidgetS
       return {
         ...state,
         view: 'lost_recovery_code',
-        emailLoginStatus: 'lost_recovery_code',
+        otpLoginStatus: 'lost_recovery_code',
         error: undefined,
       };
 
@@ -238,18 +259,18 @@ export function widgetReducer(state: WidgetState, action: WidgetAction): WidgetS
       return {
         ...state,
         view: 'login_success',
-        emailLoginStatus: 'success',
+        otpLoginStatus: 'success',
         error: undefined,
       };
 
     case 'LOGIN_ERROR':
       return {
         ...state,
-        emailLoginStatus: 'error',
+        otpLoginStatus: 'error',
         error: action.error,
       };
 
-    case 'RESET_EMAIL_ERROR':
+    case 'RESET_OTP_ERROR':
       return {
         ...state,
         error: undefined,
diff --git a/packages/@magic-ext/wallet-kit/src/types.ts b/packages/@magic-ext/wallet-kit/src/types.ts
index a9336a458..8c962055c 100644
--- a/packages/@magic-ext/wallet-kit/src/types.ts
+++ b/packages/@magic-ext/wallet-kit/src/types.ts
@@ -24,6 +24,7 @@ export interface ProviderMetadata {
 export enum RpcErrorMessage {
   MalformedEmail = 'Invalid params: Please provide a valid email address.',
   SanEmail = 'We are unable to create an account with that email.',
+  InvalidPhoneNumber = 'Invalid params: Invalid phone number.',
 }
 
 export enum OAuthProvider {
@@ -70,6 +71,15 @@ export interface EmailLoginResult {
   didToken: string;
 }
 
+/**
+ * Result returned on successful SMS login
+ */
+export interface SmsLoginResult {
+  method: 'sms';
+  /** The DID token for authentication */
+  didToken: string;
+}
+
 /**
  * Result returned on successful OAuth login
  */
@@ -107,6 +117,15 @@ export interface FarcasterLoginResult {
   };
 }
 
+/**
+ * Result returned on successful WebAuthn login
+ */
+export interface WebAuthnLoginResult {
+  method: 'webauthn';
+  /** The DID token for authentication */
+  didToken: string;
+}
+
 /**
  * Discriminated union of all login result types.
  * Check the `method` property to determine which fields are available.
@@ -120,7 +139,13 @@ export interface FarcasterLoginResult {
  *   }
  * }}
  */
-export type LoginResult = EmailLoginResult | OAuthLoginResult | WalletLoginResult | FarcasterLoginResult;
+export type LoginResult =
+  | EmailLoginResult
+  | SmsLoginResult
+  | OAuthLoginResult
+  | WalletLoginResult
+  | FarcasterLoginResult
+  | WebAuthnLoginResult;
 
 /**
  * How the widget is displayed on the page.
diff --git a/packages/@magic-ext/wallet-kit/src/utils/webauthn.ts b/packages/@magic-ext/wallet-kit/src/utils/webauthn.ts
new file mode 100644
index 000000000..05ffd832a
--- /dev/null
+++ b/packages/@magic-ext/wallet-kit/src/utils/webauthn.ts
@@ -0,0 +1,123 @@
+// ==========================================
+// WebAuthn Utility Functions
+// ==========================================
+
+const lookup = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+
+function fromByteArray(uint8: Uint8Array): string {
+  let i;
+  const extraBytes = uint8.length % 3;
+  let output = '';
+  let temp;
+  let length;
+
+  function encode(num: number): string {
+    return lookup.charAt(num);
+  }
+
+  function tripletToBase64(num: number): string {
+    return encode((num >> 18) & 0x3f) + encode((num >> 12) & 0x3f) + encode((num >> 6) & 0x3f) + encode(num & 0x3f);
+  }
+
+  for (i = 0, length = uint8.length - extraBytes; i < length; i += 3) {
+    temp = (uint8[i] << 16) + (uint8[i + 1] << 8) + uint8[i + 2];
+    output += tripletToBase64(temp);
+  }
+
+  switch (extraBytes) {
+    case 1:
+      temp = uint8[uint8.length - 1];
+      output += encode(temp >> 2);
+      output += encode((temp << 4) & 0x3f);
+      output += '==';
+      break;
+    case 2:
+      temp = (uint8[uint8.length - 2] << 8) + uint8[uint8.length - 1];
+      output += encode(temp >> 10);
+      output += encode((temp >> 4) & 0x3f);
+      output += encode((temp << 2) & 0x3f);
+      output += '=';
+      break;
+    default:
+      break;
+  }
+
+  return output;
+}
+
+function b64enc(buf: Uint8Array): string {
+  return fromByteArray(buf).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+function b64RawEnc(buf: Uint8Array): string {
+  return fromByteArray(buf).replace(/\+/g, '-').replace(/\//g, '_');
+}
+
+function hexEncode(buf: Uint8Array): string {
+  return Array.from(buf)
+    .map(function (x) {
+      return `0${x.toString(16)}`.substr(-2);
+    })
+    .join('');
+}
+
+/**
+ * Transforms the binary data in the credential into base64 strings
+ * for posting to the server.
+ */
+export function transformNewAssertionForServer(newAssertion: PublicKeyCredential) {
+  const response = newAssertion.response as AuthenticatorAttestationResponse;
+  const attObj = new Uint8Array(response.attestationObject);
+  const clientDataJSON = new Uint8Array(response.clientDataJSON);
+  const rawId = new Uint8Array(newAssertion.rawId);
+
+  const registrationClientExtensions = newAssertion.getClientExtensionResults();
+
+  return {
+    id: newAssertion.id,
+    rawId: b64enc(rawId),
+    type: newAssertion.type,
+    attObj: b64enc(attObj),
+    clientData: b64enc(clientDataJSON),
+    registrationClientExtensions: JSON.stringify(registrationClientExtensions),
+  };
+}
+
+/**
+ * Encodes the binary data in the assertion into strings for posting to the server.
+ */
+export function transformAssertionForServer(newAssertion: PublicKeyCredential) {
+  const response = newAssertion.response as AuthenticatorAssertionResponse;
+  const authData = new Uint8Array(response.authenticatorData);
+  const clientDataJSON = new Uint8Array(response.clientDataJSON);
+  const rawId = new Uint8Array(newAssertion.rawId);
+  const sig = new Uint8Array(response.signature);
+  const assertionClientExtensions = newAssertion.getClientExtensionResults();
+
+  return {
+    id: newAssertion.id,
+    rawId: b64enc(rawId),
+    type: newAssertion.type,
+    authData: b64RawEnc(authData),
+    clientData: b64RawEnc(clientDataJSON),
+    signature: hexEncode(sig),
+    assertionClientExtensions: JSON.stringify(assertionClientExtensions),
+  };
+}
+
+export enum WebAuthnPayloadMethod {
+  WebAuthnRegistrationStart = 'magic_auth_webauthn_registration_start',
+  RegisterWithWebAuth = 'magic_auth_webauthn_register',
+  LoginWithWebAuthn = 'magic_auth_login_with_web_authn',
+  WebAuthnLoginVerify = 'magic_auth_login_with_webauthn_verify',
+  GetWebAuthnInfo = 'magic_user_get_webauthn_credentials',
+  UpdateWebAuthnInfo = 'magic_user_update_webauthn',
+  UnregisterWebAuthDevice = 'magic_user_unregister_webauthn',
+  RegisterWebAuthDeviceStart = 'magic_auth_register_webauthn_device_start',
+  RegisterWebAuthDevice = 'magic_auth_register_webauthn_device',
+}
+
+export enum WebAuthnSDKErrorCode {
+  WebAuthnNotSupported = 'WEBAUTHN_NOT_SUPPORTED',
+  WebAuthnCreateCredentialError = 'WEBAUTHN_CREATE_CREDENTIAL_ERROR',
+}
diff --git a/packages/@magic-ext/wallet-kit/src/views/DeviceVerificationView.tsx b/packages/@magic-ext/wallet-kit/src/views/DeviceVerificationView.tsx
index 3c1c3edee..f81772772 100644
--- a/packages/@magic-ext/wallet-kit/src/views/DeviceVerificationView.tsx
+++ b/packages/@magic-ext/wallet-kit/src/views/DeviceVerificationView.tsx
@@ -6,6 +6,7 @@ import { token } from '@styled/tokens';
 import { useEmailLogin } from '../context/EmailLoginContext';
 import { WidgetAction, WidgetState } from '../reducer';
 import WidgetHeader from '../components/WidgetHeader';
+import { useCancelLogin } from 'src/hooks/useCancelLogin';
 
 interface DeviceVerificationViewProps {
   state: WidgetState;
@@ -13,14 +14,17 @@ interface DeviceVerificationViewProps {
 }
 
 export const DeviceVerificationView = ({ state, dispatch }: DeviceVerificationViewProps) => {
-  const { cancelLogin } = useEmailLogin();
-  const { emailLoginStatus, email } = state;
+  const { cancelLogin } = useCancelLogin();
+  const { otpLoginStatus, identifier, loginMethod } = state;
 
   useEffect(() => {
-    if (emailLoginStatus === 'device_approved') {
-      dispatch({ type: 'EMAIL_OTP_SENT' });
+    if (otpLoginStatus === 'device_approved') {
+      dispatch({ type: 'OTP_SENT' });
     }
-  }, [emailLoginStatus]);
+  }, [otpLoginStatus]);
+
+  // For SMS login, device verification is done via SMS, not email
+  const isSms = loginMethod === 'sms';
 
   return (
     <>
@@ -51,7 +55,7 @@ export const DeviceVerificationView = ({ state, dispatch }: DeviceVerificationVi
                 fontWeight: '600',
               }}
             >
-              {email}
+              {isSms ? 'your phone' : identifier}
             </Text>
             <button className={css({ cursor: 'pointer' })} onClick={cancelLogin}>
               <IcoEdit height={18} width={18} color={token('colors.brand.base')} />
diff --git a/packages/@magic-ext/wallet-kit/src/views/LoginSuccessView.tsx b/packages/@magic-ext/wallet-kit/src/views/LoginSuccessView.tsx
index c64f8eafb..544167e06 100644
--- a/packages/@magic-ext/wallet-kit/src/views/LoginSuccessView.tsx
+++ b/packages/@magic-ext/wallet-kit/src/views/LoginSuccessView.tsx
@@ -10,7 +10,7 @@ interface LoginSuccessViewProps {
 }
 
 export const LoginSuccessView = ({ state }: LoginSuccessViewProps) => {
-  const { email } = state;
+  const { identifier } = state;
 
   return (
     <>
@@ -22,9 +22,9 @@ export const LoginSuccessView = ({ state }: LoginSuccessViewProps) => {
           <Text fontColor="text.tertiary" styles={{ textAlign: 'center' }}>
             You have successfully logged in
           </Text>
-          {email && (
+          {identifier && (
             <Text fontWeight="semibold" styles={{ textAlign: 'center' }}>
-              {email}
+              {identifier}
             </Text>
           )}
         </VStack>
diff --git a/packages/@magic-ext/wallet-kit/src/views/LoginView.tsx b/packages/@magic-ext/wallet-kit/src/views/LoginView.tsx
index 8b7a9613a..c19f3d224 100644
--- a/packages/@magic-ext/wallet-kit/src/views/LoginView.tsx
+++ b/packages/@magic-ext/wallet-kit/src/views/LoginView.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { Text } from '@magiclabs/ui-components';
-import { Divider, Flex, HStack, VStack } from '@styled/jsx';
+import { IcoMessage, Text, IcoFingerprintFill } from '@magiclabs/ui-components';
+import { Box, Divider, Flex, HStack, VStack } from '@styled/jsx';
 import { ProviderButton } from '../components/ProviderButton';
 import { WALLET_METADATA } from '../constants';
 import { OAuthProvider, ThirdPartyWallet } from '../types';
-import { WidgetAction } from '../reducer';
+import { WidgetAction, WidgetState } from '../reducer';
 import { EmailInput } from '../components/EmailInput';
 import { SocialProviders } from '../components/SocialProviders';
 import WidgetHeader from '../components/WidgetHeader';
@@ -13,15 +13,22 @@ import { useWidgetConfig } from '../context/WidgetConfigContext';
 
 interface LoginViewProps {
   dispatch: React.Dispatch<WidgetAction>;
+  state: WidgetState;
 }
 
-export const LoginView = ({ dispatch }: LoginViewProps) => {
+export const LoginView = ({ dispatch, state }: LoginViewProps) => {
   const config = getExtensionInstance().getConfig();
   const { wallets, enableFarcaster } = useWidgetConfig();
-  const { primary, social } = config?.authProviders ?? {};
+  const { primary, secondary, social } = config?.authProviders ?? {};
   const hasEmailProvider = primary?.includes('email');
+  const hasSmsProvider = primary?.includes('sms');
+  const hasWebAuthnProvider = primary?.includes('webauthn') || secondary?.includes('webauthn');
   const socialProviders = social?.map(provider => provider as OAuthProvider) ?? [];
-  const showDivider = (hasEmailProvider || socialProviders.length > 0 || enableFarcaster) && wallets.length > 0;
+  const hasAlternativeLogin = hasSmsProvider || hasWebAuthnProvider;
+
+  const showDivider =
+    (hasEmailProvider || hasSmsProvider || hasWebAuthnProvider || socialProviders.length > 0 || enableFarcaster) &&
+    wallets.length > 0;
 
   const handleProviderSelect = (provider: ThirdPartyWallet) => {
     dispatch({ type: 'SELECT_WALLET', provider });
@@ -31,6 +38,14 @@ export const LoginView = ({ dispatch }: LoginViewProps) => {
     dispatch({ type: 'SELECT_PROVIDER', provider });
   };
 
+  const handleSmsClick = () => {
+    dispatch({ type: 'GO_TO_SMS_LOGIN' });
+  };
+
+  const handleWebAuthnClick = () => {
+    dispatch({ type: 'GO_TO_WEBAUTHN_LOGIN' });
+  };
+
   return (
     <>
       <WidgetHeader />
@@ -38,7 +53,28 @@ export const LoginView = ({ dispatch }: LoginViewProps) => {
         {config?.theme.assetUri && <img src={config.theme.assetUri} alt="Logo" width={80} height={80} />}
 
         <VStack width="full" maxWidth="25rem" gap={4}>
-          {hasEmailProvider && <EmailInput />}
+          {hasEmailProvider && (
+            <EmailInput
+              error={state.loginMethod === 'email' ? state.error : undefined}
+              isLoading={state.loginMethod === 'email' && state.otpLoginStatus === 'sending'}
+            />
+          )}
+
+          {hasAlternativeLogin && (
+            <Flex gap={2} w="full" justify="center">
+              {hasSmsProvider && (
+                <Box flex={1}>
+                  <ProviderButton label="SMS" Icon={IcoMessage} onPress={handleSmsClick} center />
+                </Box>
+              )}
+              {hasWebAuthnProvider && (
+                <Box flex={1}>
+                  <ProviderButton label="Passkey" Icon={IcoFingerprintFill} onPress={handleWebAuthnClick} center />
+                </Box>
+              )}
+            </Flex>
+          )}
+
           {(socialProviders.length > 0 || enableFarcaster) && (
             <SocialProviders
               providers={Object.values(socialProviders)}
diff --git a/packages/@magic-ext/wallet-kit/src/views/MfaView.tsx b/packages/@magic-ext/wallet-kit/src/views/MfaView.tsx
index 68282f255..8a23fcb51 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,14 +12,14 @@ interface MFAViewProps {
 }
 
 export const MFAView = ({ state, dispatch }: MFAViewProps) => {
-  const { submitMFA, cancelLogin, lostDevice } = useEmailLogin();
-  const { emailLoginStatus, error } = state;
+  const { submitMFA, cancelLogin, lostDevice } = useMfa();
+  const { otpLoginStatus, error } = state;
 
-  const isVerifying = emailLoginStatus === 'mfa_verifying';
-  const isSuccess = emailLoginStatus === 'success';
+  const isVerifying = otpLoginStatus === 'mfa_verifying';
+  const isSuccess = otpLoginStatus === 'success';
 
   const onChangeOtp = () => {
-    dispatch({ type: 'RESET_EMAIL_ERROR' });
+    dispatch({ type: 'RESET_OTP_ERROR' });
   };
 
   return (
diff --git a/packages/@magic-ext/wallet-kit/src/views/OAuthPendingView.tsx b/packages/@magic-ext/wallet-kit/src/views/OAuthPendingView.tsx
index 0de286505..af15f6e1f 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.otpLoginStatus === '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/EmailOTPView.tsx b/packages/@magic-ext/wallet-kit/src/views/OtpView.tsx
similarity index 57%
rename from packages/@magic-ext/wallet-kit/src/views/EmailOTPView.tsx
rename to packages/@magic-ext/wallet-kit/src/views/OtpView.tsx
index d96beeeb5..c7a1907ae 100644
--- a/packages/@magic-ext/wallet-kit/src/views/EmailOTPView.tsx
+++ b/packages/@magic-ext/wallet-kit/src/views/OtpView.tsx
@@ -1,41 +1,48 @@
-import { Button, EmailWbr, IcoEmail, Text, VerifyPincode } from '@magiclabs/ui-components';
+import { Button, EmailWbr, IcoEmail, IcoMessage, Text, VerifyPincode } from '@magiclabs/ui-components';
+import { VStack } from '@styled/jsx';
+import { token } from '@styled/tokens';
 import React, { useEffect, useState } from 'react';
 import WidgetHeader from '../components/WidgetHeader';
 import { useEmailLogin } from '../context/EmailLoginContext';
+import { useSmsLogin } from '../context/SmsLoginContext';
 import { WidgetAction, WidgetState } from '../reducer';
-import { VStack } from '@styled/jsx';
-import { token } from '@styled/tokens';
 
-interface EmailOTPViewProps {
+interface OtpViewProps {
   state: WidgetState;
   dispatch: React.Dispatch<WidgetAction>;
 }
 
-export const EmailOTPView = ({ state, dispatch }: EmailOTPViewProps) => {
-  const { submitOTP, cancelLogin, resendEmailOTP } = useEmailLogin();
-  const { emailLoginStatus, email, error } = state;
+export const OtpView = ({ state, dispatch }: OtpViewProps) => {
+  const emailLogin = useEmailLogin();
+  const smsLogin = useSmsLogin();
+  const { otpLoginStatus, identifier, error, loginMethod } = state;
   const [isResending, setIsResending] = useState(false);
   const [showResendButton, setShowResendButton] = useState(false);
 
-  const isVerifying = emailLoginStatus === 'verifying_otp';
-  const isSuccess = emailLoginStatus === 'success';
+  const isSms = loginMethod === 'sms';
+  const submitOTP = isSms ? smsLogin.submitOTP : emailLogin.submitOTP;
+  const cancelLogin = isSms ? smsLogin.cancelLogin : emailLogin.cancelLogin;
+  const resendOtp = isSms ? smsLogin.resendSmsOTP : emailLogin.resendEmailOTP;
+
+  const isVerifying = otpLoginStatus === 'verifying_otp';
+  const isSuccess = otpLoginStatus === 'success';
 
   const onChangeOtp = () => {
-    dispatch({ type: 'RESET_EMAIL_ERROR' });
+    dispatch({ type: 'RESET_OTP_ERROR' });
   };
 
   useEffect(() => {
-    if (emailLoginStatus === 'otp_sent') {
+    if (otpLoginStatus === 'otp_sent') {
       setIsResending(false);
     }
-    if (emailLoginStatus === 'expired_otp' || emailLoginStatus === 'max_attempts_reached') {
+    if (otpLoginStatus === 'expired_otp' || otpLoginStatus === 'max_attempts_reached') {
       setShowResendButton(true);
     }
-  }, [emailLoginStatus]);
+  }, [otpLoginStatus]);
 
   const handleResend = () => {
     setIsResending(true);
-    resendEmailOTP();
+    resendOtp();
     setShowResendButton(false);
   };
 
@@ -44,7 +51,11 @@ export const EmailOTPView = ({ state, dispatch }: EmailOTPViewProps) => {
       <WidgetHeader onPressBack={cancelLogin} showHeaderText={false} />
       <VStack>
         <VStack gap={6}>
-          <IcoEmail width={60} height={60} color={token('colors.brand.base')} />
+          {isSms ? (
+            <IcoMessage width={60} height={60} color={token('colors.brand.base')} />
+          ) : (
+            <IcoEmail width={60} height={60} color={token('colors.brand.base')} />
+          )}
           <VStack gap={0}>
             <Text.H4
               fontWeight="normal"
@@ -59,13 +70,13 @@ export const EmailOTPView = ({ state, dispatch }: EmailOTPViewProps) => {
                 textAlign: 'center',
               }}
             >
-              {email && <EmailWbr email={email} />}
+              {identifier && (isSms ? identifier : <EmailWbr email={identifier} />)}
             </Text.H4>
           </VStack>
         </VStack>
 
         <VerifyPincode
-          originName="email"
+          originName={isSms ? 'sms' : 'email'}
           pinLength={6}
           isPending={isVerifying || isResending}
           isSuccess={isSuccess}
diff --git a/packages/@magic-ext/wallet-kit/src/views/RecoveryCode.tsx b/packages/@magic-ext/wallet-kit/src/views/RecoveryCode.tsx
index fdc118ad4..2ea8b9520 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,11 +12,11 @@ interface RecoveryCodeViewProps {
 }
 
 export const RecoveryCodeView = ({ state, dispatch }: RecoveryCodeViewProps) => {
-  const { submitRecoveryCode } = useEmailLogin();
-  const { emailLoginStatus, error } = state;
+  const { submitRecoveryCode } = useMfa();
+  const { otpLoginStatus, error } = state;
 
-  const isVerifying = emailLoginStatus === 'recovery_code_verifying';
-  const isSuccess = emailLoginStatus === 'success';
+  const isVerifying = otpLoginStatus === 'recovery_code_verifying';
+  const isSuccess = otpLoginStatus === 'success';
 
   useEffect(() => {
     if (isSuccess) {
@@ -25,7 +25,7 @@ export const RecoveryCodeView = ({ state, dispatch }: RecoveryCodeViewProps) =>
   }, [isSuccess]);
 
   const onChangeOtp = (recoveryCode: string) => {
-    dispatch({ type: 'RESET_EMAIL_ERROR' });
+    dispatch({ type: 'RESET_OTP_ERROR' });
 
     if (recoveryCode.length === 8) {
       submitRecoveryCode(recoveryCode);
diff --git a/packages/@magic-ext/wallet-kit/src/views/SmsLoginView.tsx b/packages/@magic-ext/wallet-kit/src/views/SmsLoginView.tsx
new file mode 100644
index 000000000..790d09f8a
--- /dev/null
+++ b/packages/@magic-ext/wallet-kit/src/views/SmsLoginView.tsx
@@ -0,0 +1,88 @@
+import { ButtonContainer, IcoMessage, LoadingSpinner, PhoneInput, Text } from '@magiclabs/ui-components';
+import { css } from '@styled/css';
+import { Flex, Spacer, VStack } from '@styled/jsx';
+import { token } from '@styled/tokens';
+import { isValidPhoneNumber } from 'libphonenumber-js';
+import React, { useState } from 'react';
+import { RpcErrorMessage } from 'src/types';
+import WidgetHeader from '../components/WidgetHeader';
+import { useSmsLogin } from '../context/SmsLoginContext';
+import { WidgetState } from '../reducer';
+
+interface SmsLoginViewProps {
+  state: WidgetState;
+}
+
+export const SmsLoginView = ({ state }: SmsLoginViewProps) => {
+  const { cancelLogin, startSmsLogin } = useSmsLogin();
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [localError, setLocalError] = useState<string | null>(null);
+  const isLoading = state.loginMethod === 'sms' && state.otpLoginStatus === 'sending';
+
+  const isPhoneValid = phoneNumber.length > 0 && isValidPhoneNumber(phoneNumber);
+  const displayError = (state.loginMethod === 'sms' ? state.error : undefined) || localError || undefined;
+
+  const handlePhoneChange = (phone: string) => {
+    setLocalError(null);
+    setPhoneNumber(phone.trim());
+  };
+
+  const handleSubmit = () => {
+    if (!isValidPhoneNumber(phoneNumber)) {
+      setLocalError(RpcErrorMessage.InvalidPhoneNumber);
+      return;
+    }
+    startSmsLogin(phoneNumber);
+  };
+
+  if (isLoading) {
+    return (
+      <>
+        <WidgetHeader onPressBack={cancelLogin} />
+        <Spacer size={'2'} />
+        <LoadingSpinner size={60} strokeWidth={6} neutral />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <WidgetHeader onPressBack={cancelLogin} />
+      <VStack w="full" gap={10} mt={2} px={7}>
+        <VStack gap={10}>
+          <IcoMessage width={60} height={60} color={token('colors.ink.70')} />
+          <Text.H4
+            fontWeight="normal"
+            styles={{
+              textAlign: 'center',
+            }}
+          >
+            Please enter phone number
+          </Text.H4>
+        </VStack>
+
+        <PhoneInput onChange={handlePhoneChange} autoFocus={false} errorMessage={displayError} />
+
+        <ButtonContainer
+          onPress={handleSubmit}
+          borderRadius={14}
+          className={css({
+            w: 'full',
+            px: 4,
+            py: 3,
+            bg: 'neutral.primary',
+            _hover: { bg: 'neutral.tertiary' },
+            _disabled: { opacity: 0.5 },
+          })}
+          disabled={!isPhoneValid || isLoading}
+        >
+          <Flex gap={3} w="full" justifyContent={'center'} alignItems="center">
+            <Text fontWeight="medium" styles={{ lineHeight: '1.5rem' }}>
+              Continue
+            </Text>
+          </Flex>
+        </ButtonContainer>
+      </VStack>
+    </>
+  );
+};
diff --git a/packages/@magic-ext/wallet-kit/src/views/WebAuthnLoginView.tsx b/packages/@magic-ext/wallet-kit/src/views/WebAuthnLoginView.tsx
new file mode 100644
index 000000000..9dfb4902e
--- /dev/null
+++ b/packages/@magic-ext/wallet-kit/src/views/WebAuthnLoginView.tsx
@@ -0,0 +1,129 @@
+import { ButtonContainer, IcoFingerprint, LoadingSpinner, Text, TextInput } from '@magiclabs/ui-components';
+import { css } from '@styled/css';
+import { Flex, Spacer, VStack } from '@styled/jsx';
+import { token } from '@styled/tokens';
+import React, { useState } from 'react';
+import WidgetHeader from '../components/WidgetHeader';
+import { useWebAuthnLogin } from '../context/WebAuthnLoginContext';
+import { WidgetState } from '../reducer';
+
+interface WebAuthnLoginViewProps {
+  state: WidgetState;
+}
+
+export const WebAuthnLoginView = ({ state }: WebAuthnLoginViewProps) => {
+  const { startWebAuthnLogin, registerNewWebAuthnUser, cancelLogin } = useWebAuthnLogin();
+  const [username, setUsername] = useState('');
+  const [localError, setLocalError] = useState<string | null>(null);
+  const isLoading = state.loginMethod === 'webauthn' && state.otpLoginStatus === 'sending';
+
+  const displayError = state.error || localError;
+
+  const handleInput = (value: string) => {
+    setLocalError(null);
+    setUsername(value.trim());
+  };
+
+  const isUsernameValid = username.trim().length > 0;
+
+  const handleLogin = () => {
+    if (isUsernameValid) {
+      startWebAuthnLogin(username.trim());
+    } else {
+      setLocalError('Username is required');
+    }
+  };
+
+  const handleRegister = () => {
+    if (isUsernameValid) {
+      registerNewWebAuthnUser(username.trim());
+    } else {
+      setLocalError('Username is required');
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <>
+        <WidgetHeader onPressBack={cancelLogin} />
+        <Spacer size={'2'} />
+        <LoadingSpinner size={60} strokeWidth={6} neutral />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <WidgetHeader onPressBack={cancelLogin} />
+      <VStack w="full" gap={10} mt={2} px={7}>
+        <VStack gap={4}>
+          <IcoFingerprint width={60} height={60} color={token('colors.ink.70')} />
+          <Text.H4
+            fontWeight="normal"
+            styles={{
+              textAlign: 'center',
+            }}
+          >
+            Please signup or login
+          </Text.H4>
+        </VStack>
+
+        <VStack gap={2} w="full" alignItems="stretch">
+          <TextInput
+            aria-label="webauthn username input"
+            value={username}
+            onChange={handleInput}
+            placeholder="Username or email"
+          />
+          {displayError && (
+            <Text variant="error" size="sm" styles={{ textAlign: 'center' }}>
+              {displayError}
+            </Text>
+          )}
+        </VStack>
+
+        <Flex gap={2} w="full">
+          <ButtonContainer
+            onPress={handleLogin}
+            borderRadius={14}
+            className={css({
+              w: 'full',
+              px: 4,
+              py: 3,
+              bg: 'neutral.primary',
+              _hover: { bg: 'neutral.tertiary' },
+              _disabled: { opacity: 0.5 },
+            })}
+            disabled={!isUsernameValid || isLoading}
+          >
+            <Flex gap={3} w="full" justifyContent={'center'} alignItems="center">
+              <Text fontWeight="medium" styles={{ lineHeight: '1.5rem' }}>
+                Login
+              </Text>
+            </Flex>
+          </ButtonContainer>
+
+          <ButtonContainer
+            onPress={handleRegister}
+            borderRadius={14}
+            className={css({
+              w: 'full',
+              px: 4,
+              py: 3,
+              bg: 'neutral.primary',
+              _hover: { bg: 'neutral.tertiary' },
+              _disabled: { opacity: 0.5 },
+            })}
+            disabled={!isUsernameValid || isLoading}
+          >
+            <Flex gap={3} w="full" justifyContent={'center'} alignItems="center">
+              <Text fontWeight="medium" styles={{ lineHeight: '1.5rem' }}>
+                Register
+              </Text>
+            </Flex>
+          </ButtonContainer>
+        </Flex>
+      </VStack>
+    </>
+  );
+};
diff --git a/packages/@magic-sdk/provider/src/modules/auth.ts b/packages/@magic-sdk/provider/src/modules/auth.ts
index c5e7b7fba..e04e3b60f 100644
--- a/packages/@magic-sdk/provider/src/modules/auth.ts
+++ b/packages/@magic-sdk/provider/src/modules/auth.ts
@@ -82,6 +82,21 @@ export class AuthModule extends BaseModule {
         this.createIntermediaryEvent(LoginWithSmsOTPEventEmit.VerifySmsOtp, requestPayload.id as string)(otp);
       });
 
+      handle.on(LoginWithSmsOTPEventEmit.VerifyMFACode, (mfa: string) => {
+        this.createIntermediaryEvent(LoginWithSmsOTPEventEmit.VerifyMFACode, requestPayload.id as string)(mfa);
+      });
+
+      handle.on(LoginWithSmsOTPEventEmit.LostDevice, () => {
+        this.createIntermediaryEvent(LoginWithSmsOTPEventEmit.LostDevice, requestPayload.id as string)();
+      });
+
+      handle.on(LoginWithSmsOTPEventEmit.VerifyRecoveryCode, (recoveryCode: string) => {
+        this.createIntermediaryEvent(
+          LoginWithSmsOTPEventEmit.VerifyRecoveryCode,
+          requestPayload.id as string,
+        )(recoveryCode);
+      });
+
       handle.on(LoginWithSmsOTPEventEmit.Cancel, () => {
         this.createIntermediaryEvent(LoginWithSmsOTPEventEmit.Cancel, requestPayload.id as string)();
       });
diff --git a/packages/@magic-sdk/provider/test/spec/modules/auth/loginWithSmsWhitelabel.spec.ts b/packages/@magic-sdk/provider/test/spec/modules/auth/loginWithSmsWhitelabel.spec.ts
index 718f3a749..553373402 100644
--- a/packages/@magic-sdk/provider/test/spec/modules/auth/loginWithSmsWhitelabel.spec.ts
+++ b/packages/@magic-sdk/provider/test/spec/modules/auth/loginWithSmsWhitelabel.spec.ts
@@ -57,6 +57,64 @@ test('Generates JSON RPC pending for otp-input-sent', () => {
   expect(intermediaryEventSecondMethod).toBe('cancel');
 });
 
+test('Generates JSON RPC pending for verify-mfa-code', () => {
+  const magic = createMagicSDK();
+  magic.auth.overlay.post = jest.fn().mockImplementation(() => new Promise(() => { /* noop */ }));
+  const createIntermediaryEventFn = jest.fn();
+  magic.auth.createIntermediaryEvent = jest.fn().mockImplementation(() => createIntermediaryEventFn);
+
+  const handle = magic.auth.loginWithSMS({ phoneNumber: expectedPhoneNumber, showUI: false });
+
+  const troll_mfa = '123456';
+  handle.emit('verify-mfa-code', troll_mfa);
+  handle.emit('cancel');
+
+  const verifyEvent = magic.auth.createIntermediaryEvent.mock.calls[0];
+  expect(verifyEvent[0]).toBe('verify-mfa-code');
+  expect(createIntermediaryEventFn.mock.calls[0][0]).toBe(troll_mfa);
+
+  const intermediaryEventSecondMethod = magic.auth.createIntermediaryEvent.mock.calls[1][0];
+  expect(intermediaryEventSecondMethod).toBe('cancel');
+});
+
+test('Generates JSON RPC pending for lost-device', () => {
+  const magic = createMagicSDK();
+  magic.auth.overlay.post = jest.fn().mockImplementation(() => new Promise(() => { /* noop */ }));
+  const createIntermediaryEventFn = jest.fn();
+  magic.auth.createIntermediaryEvent = jest.fn().mockImplementation(() => createIntermediaryEventFn);
+
+  const handle = magic.auth.loginWithSMS({ phoneNumber: expectedPhoneNumber, showUI: false });
+
+  handle.emit('lost-device');
+  handle.emit('cancel');
+
+  const verifyEvent = magic.auth.createIntermediaryEvent.mock.calls[0];
+  expect(verifyEvent[0]).toBe('lost-device');
+
+  const intermediaryEventSecondMethod = magic.auth.createIntermediaryEvent.mock.calls[1][0];
+  expect(intermediaryEventSecondMethod).toBe('cancel');
+});
+
+test('Generates JSON RPC pending for verify-recovery-code', () => {
+  const magic = createMagicSDK();
+  magic.auth.overlay.post = jest.fn().mockImplementation(() => new Promise(() => { /* noop */ }));
+  const createIntermediaryEventFn = jest.fn();
+  magic.auth.createIntermediaryEvent = jest.fn().mockImplementation(() => createIntermediaryEventFn);
+
+  const handle = magic.auth.loginWithSMS({ phoneNumber: expectedPhoneNumber, showUI: false });
+
+  const recovery_code = '10epf6fk';
+  handle.emit('verify-recovery-code', recovery_code);
+  handle.emit('cancel');
+
+  const verifyEvent = magic.auth.createIntermediaryEvent.mock.calls[0];
+  expect(verifyEvent[0]).toBe('verify-recovery-code');
+  expect(createIntermediaryEventFn.mock.calls[0][0]).toBe(recovery_code);
+
+  const intermediaryEventSecondMethod = magic.auth.createIntermediaryEvent.mock.calls[1][0];
+  expect(intermediaryEventSecondMethod).toBe('cancel');
+});
+
 test('method should return a PromiEvent', () => {
   const magic = createMagicSDK();
   magic.auth.overlay.post = jest.fn().mockImplementation(() => new Promise(() => { /* noop */ }));
diff --git a/packages/@magic-sdk/types/src/modules/auth-types.ts b/packages/@magic-sdk/types/src/modules/auth-types.ts
index d637a807e..de72fc294 100644
--- a/packages/@magic-sdk/types/src/modules/auth-types.ts
+++ b/packages/@magic-sdk/types/src/modules/auth-types.ts
@@ -159,6 +159,9 @@ export enum LoginWithEmailOTPEventEmit {
 
 export enum LoginWithSmsOTPEventEmit {
   VerifySmsOtp = 'verify-sms-otp',
+  VerifyMFACode = 'verify-mfa-code',
+  LostDevice = 'lost-device',
+  VerifyRecoveryCode = 'verify-recovery-code',
   Cancel = 'cancel',
   Retry = 'retry',
 }
@@ -167,6 +170,12 @@ export enum LoginWithSmsOTPEventOnReceived {
   SmsOTPSent = 'sms-otp-sent',
   InvalidSmsOtp = 'invalid-sms-otp',
   ExpiredSmsOtp = 'expired-sms-otp',
+  MfaSentHandle = 'mfa-sent-handle',
+  InvalidMfaOtp = 'invalid-mfa-otp',
+  LoginThrottled = 'login-throttled',
+  RecoveryCodeSentHandle = 'recovery-code-sent-handle',
+  InvalidRecoveryCode = 'invalid-recovery-code',
+  RecoveryCodeSuccess = 'recovery-code-success',
 }
 
 export enum LoginWithEmailOTPEventOnReceived {
@@ -271,6 +280,9 @@ export type LoginWithMagicLinkEventHandlers = {
 export type LoginWithSmsOTPEventHandlers = {
   // Event sent
   [LoginWithSmsOTPEventEmit.VerifySmsOtp]: (otp: string) => void;
+  [LoginWithSmsOTPEventEmit.VerifyMFACode]: (mfa: string) => void;
+  [LoginWithSmsOTPEventEmit.LostDevice]: () => void;
+  [LoginWithSmsOTPEventEmit.VerifyRecoveryCode]: (recoveryCode: string) => void;
   [LoginWithSmsOTPEventEmit.Cancel]: () => void;
   [LoginWithSmsOTPEventEmit.Retry]: () => void;
 
@@ -278,6 +290,12 @@ export type LoginWithSmsOTPEventHandlers = {
   [LoginWithSmsOTPEventOnReceived.SmsOTPSent]: () => void;
   [LoginWithSmsOTPEventOnReceived.InvalidSmsOtp]: () => void;
   [LoginWithSmsOTPEventOnReceived.ExpiredSmsOtp]: () => void;
+  [LoginWithSmsOTPEventOnReceived.MfaSentHandle]: () => void;
+  [LoginWithSmsOTPEventOnReceived.InvalidMfaOtp]: () => void;
+  [LoginWithSmsOTPEventOnReceived.LoginThrottled]: () => void;
+  [LoginWithSmsOTPEventOnReceived.RecoveryCodeSentHandle]: () => void;
+  [LoginWithSmsOTPEventOnReceived.InvalidRecoveryCode]: () => void;
+  [LoginWithSmsOTPEventOnReceived.RecoveryCodeSuccess]: () => void;
 } & DeviceVerificationEventHandlers;
 
 export type LoginWithEmailOTPEventHandlers = {
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;
diff --git a/yarn.lock b/yarn.lock
index 41866f058..9fb454409 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3568,6 +3568,7 @@ __metadata:
     "@types/react-dom": ^18.0.0
     "@wagmi/core": ^2.0.0
     "@walletconnect/ethereum-provider": ^2.23.0
+    libphonenumber-js: ^1.12.37
     react: ^18.0.0
     react-dom: ^18.0.0
     rollup: ^4.18.0
@@ -18480,6 +18481,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"libphonenumber-js@npm:^1.12.37":
+  version: 1.12.37
+  resolution: "libphonenumber-js@npm:1.12.37"
+  checksum: 43106a6d91fec640181f1140c8f4cea5020f7281f980d006b72980725ae3ae810db3988af151c76419787e8196a0e671e21d40b084d7ab6f3e732a8bce4a262c
+  languageName: node
+  linkType: hard
+
 "lie@npm:3.1.1":
   version: 3.1.1
   resolution: "lie@npm:3.1.1"