diff --git a/CHANGELOG.md b/CHANGELOG.md
index 40f87fce4..9473c6d3a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,16 @@
+# (Fri Feb 20 2026)
+
+#### 🚀 Enhancement
+
+- `@magic-ext/wallet-kit@0.5.0`
+  - adds account switching for external wallets [#1038](https://github.com/magiclabs/magic-js/pull/1038) ([@joshuascan](https://github.com/joshuascan))
+
+#### Authors: 1
+
+- Josh Scanlan ([@joshuascan](https://github.com/joshuascan))
+
+---
+
 # (Wed Feb 18 2026)
 
 #### 🐛 Bug Fix
diff --git a/packages/@magic-ext/wallet-kit/CHANGELOG.md b/packages/@magic-ext/wallet-kit/CHANGELOG.md
index ce231cc51..ce296988e 100644
--- a/packages/@magic-ext/wallet-kit/CHANGELOG.md
+++ b/packages/@magic-ext/wallet-kit/CHANGELOG.md
@@ -1,3 +1,15 @@
+# v0.5.0 (Fri Feb 20 2026)
+
+#### 🚀 Enhancement
+
+- adds account switching for external wallets [#1038](https://github.com/magiclabs/magic-js/pull/1038) ([@joshuascan](https://github.com/joshuascan))
+
+#### Authors: 1
+
+- Josh Scanlan ([@joshuascan](https://github.com/joshuascan))
+
+---
+
 # v0.4.0 (Tue Feb 10 2026)
 
 #### 🚀 Enhancement
diff --git a/packages/@magic-ext/wallet-kit/package.json b/packages/@magic-ext/wallet-kit/package.json
index 5470e9430..71a98ee15 100644
--- a/packages/@magic-ext/wallet-kit/package.json
+++ b/packages/@magic-ext/wallet-kit/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@magic-ext/wallet-kit",
   "useCustomBuild": true,
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Magic SDK Wallet Kit Extension",
   "author": "Magic <team@magic.link> (https://magic.link/)",
   "license": "MIT",
@@ -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 463baa46b..a32269684 100644
--- a/packages/@magic-ext/wallet-kit/src/MagicWidget.tsx
+++ b/packages/@magic-ext/wallet-kit/src/MagicWidget.tsx
@@ -12,14 +12,18 @@ 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';
@@ -57,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
@@ -74,7 +82,7 @@ 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
@@ -86,8 +94,8 @@ function WidgetContent({
         );
       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':
@@ -105,20 +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}>
-      <OAuthLoginProvider dispatch={dispatch}>
-        <Modal isWidget fullscreen={isModal && isMobile}>
-          <VStack width="full" minWidth="380px">
-            {renderView()}
-            <Footer showLogo={showFooterLogo} />
-          </VStack>
-        </Modal>
-      </OAuthLoginProvider>
+      <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/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/extension.ts b/packages/@magic-ext/wallet-kit/src/extension.ts
index c9ef85fc8..5723f54a7 100644
--- a/packages/@magic-ext/wallet-kit/src/extension.ts
+++ b/packages/@magic-ext/wallet-kit/src/extension.ts
@@ -11,11 +11,17 @@ import {
   OAuthPopupEventHandlers,
   RPCErrorCode,
 } from '@magic-sdk/types';
-import { getAccount, getConnectorClient, reconnect, watchAccount } from '@wagmi/core';
+import { getAccount, getConnectorClient, reconnect, signMessage, watchAccount } from '@wagmi/core';
 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',
@@ -236,6 +242,7 @@ export class WalletKitExtension extends Extension.Internal<'walletKit'> {
   private configPromise: Promise<ClientConfig> | null = null;
   private eventsListenerAdded = false;
   private reconnectPromise: Promise<void> | null = null;
+  private isReauthInProgress = false;
 
   constructor(options?: WalletKitExtensionOptions) {
     super();
@@ -397,6 +404,9 @@ export class WalletKitExtension extends Extension.Internal<'walletKit'> {
             addresses: account.addresses,
             updatedField: 'address',
           });
+          // Re-run SIWE for the new address so the Magic session stays in sync.
+          // This triggers the wallet's native signing prompt without Magic UI.
+          this.performSilentReauth(account.address, account.chainId ?? 1);
         }
 
         // Chain changed
@@ -443,6 +453,25 @@ export class WalletKitExtension extends Extension.Internal<'walletKit'> {
     }
   }
 
+  /**
+   * Silently re-runs the SIWE flow for a new wallet address without any UI changes.
+   * Called when the user switches accounts in their wallet while already signed in.
+   * The wallet's native signing prompt will appear to the user.
+   */
+  private async performSilentReauth(address: string, chainId: number): Promise<void> {
+    if (this.isReauthInProgress) return;
+    this.isReauthInProgress = true;
+    try {
+      const message = await this.generateMessage({ address, chainId });
+      const signature = await signMessage(this.wagmiConfig, { message });
+      await this.login({ message, signature });
+    } catch (err) {
+      console.error('Silent SIWE re-auth failed for new account:', err);
+    } finally {
+      this.isReauthInProgress = false;
+    }
+  }
+
   /**
    * Generate a nonce for SIWE message construction.
    * This calls the Magic backend to get a unique nonce.
@@ -590,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
index 7402deb80..accbf9ced 100644
--- a/packages/@magic-ext/wallet-kit/src/hooks/useMfa.ts
+++ b/packages/@magic-ext/wallet-kit/src/hooks/useMfa.ts
@@ -1,5 +1,6 @@
 import { useEmailLogin } from '../context/EmailLoginContext';
 import { useOAuthLogin } from '../context/OAuthLoginContext';
+import { useSmsLogin } from '../context/SmsLoginContext';
 
 interface UseMfaResult {
   submitMFA: (totp: string) => void;
@@ -11,6 +12,7 @@ interface UseMfaResult {
 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) {
@@ -22,6 +24,16 @@ export function useMfa(): UseMfaResult {
     };
   }
 
+  // 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,
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 5db3efa04..8a23fcb51 100644
--- a/packages/@magic-ext/wallet-kit/src/views/MfaView.tsx
+++ b/packages/@magic-ext/wallet-kit/src/views/MfaView.tsx
@@ -13,13 +13,13 @@ interface MFAViewProps {
 
 export const MFAView = ({ state, dispatch }: MFAViewProps) => {
   const { submitMFA, cancelLogin, lostDevice } = useMfa();
-  const { emailLoginStatus, error } = state;
+  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 bb5422743..af15f6e1f 100644
--- a/packages/@magic-ext/wallet-kit/src/views/OAuthPendingView.tsx
+++ b/packages/@magic-ext/wallet-kit/src/views/OAuthPendingView.tsx
@@ -20,7 +20,7 @@ export const OAuthPendingView = ({ provider, state, dispatch }: OAuthPendingView
   const Icon = (isDarkMode && DARK_MODE_ICON_OVERRIDES[provider]) || DefaultIcon;
   const { startOAuthLogin } = useOAuthLogin();
   const loginAttempted = useRef(false);
-  const hasError = state.emailLoginStatus === 'error';
+  const hasError = state.otpLoginStatus === 'error';
   const errorMessage = state.error ?? null;
 
   useEffect(() => {
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 057303b27..2ea8b9520 100644
--- a/packages/@magic-ext/wallet-kit/src/views/RecoveryCode.tsx
+++ b/packages/@magic-ext/wallet-kit/src/views/RecoveryCode.tsx
@@ -13,10 +13,10 @@ interface RecoveryCodeViewProps {
 
 export const RecoveryCodeView = ({ state, dispatch }: RecoveryCodeViewProps) => {
   const { submitRecoveryCode } = useMfa();
-  const { emailLoginStatus, error } = state;
+  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/yarn.lock b/yarn.lock
index 66aede8ba..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
@@ -16198,9 +16199,9 @@ __metadata:
   linkType: hard
 
 "hono@npm:^4.10.3":
-  version: 4.11.1
-  resolution: "hono@npm:4.11.1"
-  checksum: afd3ceb3506b42cd9b753aaa33bdce82b8eca0558b928b5f9b22f32eb67e3cbddaa27ee96d3affe6787084b2caca05bbb0f3f8f17d6fd9e9ae534131054cfb8e
+  version: 4.12.0
+  resolution: "hono@npm:4.12.0"
+  checksum: 15aa429be962f7f2ff93c05a4f41cc633316ae967841d83b52fb21ffdd9b6d08b31413b1832bd4600e0b488f6602827c2b5ef3d15f5031819ed536713fbbead8
   languageName: node
   linkType: hard
 
@@ -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"