[feat] add 2fa compatibility

src/css/login.css

···
   border-radius: 0 0.375rem 0.375rem 0;
   display: flex;
   align-items: center;
+}
+
+/* 2FA Modal styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.75);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background-color: var(--white);
+  padding: 2rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  width: 90%;
+  max-width: 28rem;
+}
+
+.modal-content h2 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  color: var(--text-color);
+  text-align: center;
+}
+
+.modal-content p {
+  margin-bottom: 1.5rem;
+  color: var(--text-light);
+  text-align: center;
+}
+
+.two-factor-form {
+  margin-top: 2rem;
+}
+
+.button-group {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.button-group .submit-button {
+  margin-top: 0;
+  flex: 1;
+  width: fit-content;
+}
+
+.button-group .back-button {
+  flex: 1;
 } 

src/pages/Login.tsx

···
   }>;
 }
 
-type LoginStep = 'idle' | 'resolving-handle' | 'resolving-did' | 'connecting-pds' | 'authenticating' | 'success';
+type LoginStep = 'idle' | 'resolving-handle' | 'resolving-did' | 'connecting-pds' | 'authenticating' | '2fa-required' | 'success';
 
 export default function Login({ onLogin }: LoginProps) {
   const [handle, setHandle] = useState('');
   const [password, setPassword] = useState('');
+  const [twoFactorCode, setTwoFactorCode] = useState('');
   const [error, setError] = useState('');
   const [appPasswordAttempts, setAppPasswordAttempts] = useState(0);
   const [loginStep, setLoginStep] = useState<LoginStep>('idle');
+  const [agent, setAgent] = useState<AtpAgent | null>(null);
   const navigate = useNavigate();
 
   const isAppPassword = (password: string) => {
···
         return 'Connecting to your Personal Data Server...';
       case 'authenticating':
         return 'Authenticating your credentials...';
+      case '2fa-required':
+        return 'Please enter your 2FA code';
       case 'success':
         return 'Login successful! Redirecting...';
       default:
···
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
+
+    // If we're in 2FA step, handle that separately
+    if (loginStep === '2fa-required') {
+      if (!agent) {
+        setError('Session expired. Please try logging in again.');
+        setLoginStep('idle');
+        return;
+      }
+
+      try {
+        setLoginStep('authenticating');
+        await agent.login({ identifier: handle, password, authFactorToken: twoFactorCode });
+        setLoginStep('success');
+        onLogin(agent);
+        navigate('/actions');
+      } catch (err) {
+        setError(err instanceof Error ? err.message : '2FA verification failed');
+        setLoginStep('2fa-required');
+      }
+      return;
+    }
+
     setLoginStep('resolving-handle');
 
     // app password check and debug method
···
       setLoginStep('connecting-pds');
       const pds = ((didDocResponse.data as unknown) as DidDocument).service.find((s) => s.id === '#atproto_pds')?.serviceEndpoint || 'https://bsky.social';
 
-      const agent = new AtpAgent({ service: pds });
+      const newAgent = new AtpAgent({ service: pds });
+      setAgent(newAgent);
       
       setLoginStep('authenticating');
-      await agent.login({ identifier: handle, password });
-      
-      setLoginStep('success');
-      onLogin(agent);
-      navigate('/actions');
+      try {
+        await newAgent.login({ identifier: handle, password });
+        setLoginStep('success');
+        onLogin(newAgent);
+        navigate('/actions');
+      } catch (err) {
+        if (err instanceof Error && (
+          err.message.includes('AuthFactorTokenRequired') || 
+          err.message.includes('A sign in code has been sent to your email address')
+        )) {
+          setLoginStep('2fa-required');
+          return;
+        }
+        throw err;
+      }
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Login failed');
       setLoginStep('idle');
···
         <div className="login-card">
           <h2 className="login-title">Sign in to your account</h2>
           <div className="warning-message">
-            ⚠️ Please use your main account password, not an app password. You will also have to temporarily disable 2FA. All operations are performed locally in your browser.
+            ⚠️ Please use your main account password, not an app password. All operations are performed locally in your browser.
           </div>
           <form className="login-form" onSubmit={handleSubmit}>
             <div className="form-group">
···
             </div>
 
             {error && <div className="error-message">{error}</div>}
-            {loginStep !== 'idle' && (
+            {loginStep !== 'idle' && loginStep !== '2fa-required' && (
               <div className="loading-message">
                 {getStepMessage(loginStep)}
               </div>
···
           </form>
         </div>
       </div>
+
+      {/* 2FA Modal */}
+      {loginStep === '2fa-required' && (
+        <div className="modal-overlay">
+          <div className="modal-content">
+            <h2>Two-Factor Authentication Required</h2>
+            <p>A sign in code has been sent to your email address.</p>
+            <form onSubmit={handleSubmit} className="two-factor-form">
+              <div className="form-group">
+                <input
+                  type="text"
+                  required
+                  className="form-input"
+                  placeholder="Enter 2FA code"
+                  value={twoFactorCode}
+                  onChange={(e) => setTwoFactorCode(e.target.value)}
+                  autoFocus
+                />
+              </div>
+              {error && <div className="error-message">{error}</div>}
+              <div className="button-group">
+                <button 
+                  type="button" 
+                  className="back-button"
+                  onClick={() => {
+                    setLoginStep('idle');
+                    setError('');
+                    setTwoFactorCode('');
+                  }}
+                >
+                  Cancel
+                </button>
+                <button 
+                  type="submit" 
+                  className="submit-button"
+                >
+                  Verify
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
       <Footer />
     </div>
   );