dauth-context-react 6.0.0 → 6.2.0

package/src/DauthProfileModal.tsx

@@ -7,11 +7,15 @@ import React, {
 } from 'react';
 import { createPortal } from 'react-dom';
 import { useDauth } from './index';
-import type { DauthProfileModalProps } from './interfaces';
+import type {
+  DauthProfileModalProps,
+  IPasskeyCredential,
+} from './interfaces';
 
 export { type DauthProfileModalProps };
 
 type Phase = 'exited' | 'entering' | 'entered' | 'exiting';
+type Tab = 'profile' | 'security' | 'account';
 
 const TRANSITION_MS = 200;
 const MOBILE_TRANSITION_MS = 300;
@@ -56,6 +60,104 @@ function IconBack() {
   );
 }
 
+function IconFingerprint() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4" />
+      <path d="M14 13.12c0 2.38 0 6.38-1 8.88" />
+      <path d="M17.29 21.02c.12-.6.43-2.3.5-3.02" />
+      <path d="M2 12a10 10 0 0 1 18-6" />
+      <path d="M2 16h.01" />
+      <path d="M21.8 16c.2-2 .131-5.354 0-6" />
+      <path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2" />
+      <path d="M8.65 22c.21-.66.45-1.32.57-2" />
+      <path d="M9 6.8a6 6 0 0 1 9 5.2v2" />
+    </svg>
+  );
+}
+
+function IconShield() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+    </svg>
+  );
+}
+
+function IconTrash() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3 6h18" />
+      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+      <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+    </svg>
+  );
+}
+
+function IconLogOut() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <polyline points="16 17 21 12 16 7" />
+      <line x1="21" y1="12" x2="9" y2="12" />
+    </svg>
+  );
+}
+
+function IconCamera() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" />
+      <circle cx="12" cy="13" r="3" />
+    </svg>
+  );
+}
+
 function Spinner() {
   return <span style={spinnerStyle} aria-hidden="true" />;
 }
@@ -64,11 +166,14 @@ function Spinner() {
 
 function useMediaQuery(query: string): boolean {
   const [matches, setMatches] = useState(
-    () => typeof window !== 'undefined' && window.matchMedia(query).matches
+    () =>
+      typeof window !== 'undefined' &&
+      window.matchMedia(query).matches
   );
   useEffect(() => {
     const mq = window.matchMedia(query);
-    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+    const handler = (e: MediaQueryListEvent) =>
+      setMatches(e.matches);
     mq.addEventListener('change', handler);
     return () => mq.removeEventListener('change', handler);
   }, [query]);
@@ -88,7 +193,10 @@ function useModalAnimation(open: boolean): Phase {
     }
     if (phase === 'entered' || phase === 'entering') {
       setPhase('exiting');
-      const timer = setTimeout(() => setPhase('exited'), MOBILE_TRANSITION_MS);
+      const timer = setTimeout(
+        () => setPhase('exited'),
+        MOBILE_TRANSITION_MS
+      );
       return () => clearTimeout(timer);
     }
     return undefined;
@@ -117,7 +225,6 @@ function useFocusTrap(
       );
       (firstInput ?? container).focus();
     };
-    // Small delay to let the portal render
     const raf = requestAnimationFrame(focusFirst);
 
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -127,16 +234,20 @@ function useFocusTrap(
         return;
       }
       if (e.key !== 'Tab') return;
-      const focusable = container.querySelectorAll<HTMLElement>(
-        'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
-      );
+      const focusable =
+        container.querySelectorAll<HTMLElement>(
+          'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        );
       if (focusable.length === 0) return;
       const first = focusable[0];
       const last = focusable[focusable.length - 1];
       if (e.shiftKey && document.activeElement === first) {
         e.preventDefault();
         last.focus();
-      } else if (!e.shiftKey && document.activeElement === last) {
+      } else if (
+        !e.shiftKey &&
+        document.activeElement === last
+      ) {
         e.preventDefault();
         first.focus();
       }
@@ -157,7 +268,8 @@ function useScrollLock(active: boolean) {
   useEffect(() => {
     if (!active) return;
     const scrollbarWidth =
-      window.innerWidth - document.documentElement.clientWidth;
+      window.innerWidth -
+      document.documentElement.clientWidth;
     const prevOverflow = document.body.style.overflow;
     const prevPaddingRight = document.body.style.paddingRight;
     document.body.style.overflow = 'hidden';
@@ -173,13 +285,31 @@ function useScrollLock(active: boolean) {
 
 // --- Component ---
 
-export function DauthProfileModal({ open, onClose }: DauthProfileModalProps) {
-  const { user, domain, updateUser, deleteAccount } = useDauth();
+export function DauthProfileModal({
+  open,
+  onClose,
+  onAvatarUpload,
+}: DauthProfileModalProps) {
+  const {
+    user,
+    domain,
+    updateUser,
+    deleteAccount,
+    logout,
+    getPasskeyCredentials,
+    registerPasskey,
+    deletePasskeyCredential,
+  } = useDauth();
   const isDesktop = useMediaQuery('(min-width: 641px)');
   const phase = useModalAnimation(open);
   const modalRef = useRef<HTMLDivElement>(null);
+  const avatarInputRef = useRef<HTMLInputElement>(null);
+
+  // Tab state
+  const showSecurity = domain.authMethods?.passkey === true;
+  const [activeTab, setActiveTab] = useState<Tab>('profile');
 
-  // Form state
+  // Profile form state
   const [name, setName] = useState('');
   const [lastname, setLastname] = useState('');
   const [nickname, setNickname] = useState('');
@@ -198,6 +328,23 @@ export function DauthProfileModal({ open, onClose }: DauthProfileModalProps) {
   const [deleteText, setDeleteText] = useState('');
   const [deleting, setDeleting] = useState(false);
 
+  // Passkey state
+  const [credentials, setCredentials] = useState<
+    IPasskeyCredential[]
+  >([]);
+  const [loadingCreds, setLoadingCreds] = useState(false);
+  const [showRegister, setShowRegister] = useState(false);
+  const [passkeyName, setPasskeyName] = useState('');
+  const [registering, setRegistering] = useState(false);
+  const [passkeyStatus, setPasskeyStatus] = useState<{
+    type: 'success' | 'error';
+    message: string;
+  } | null>(null);
+
+  // Avatar upload state
+  const [uploadingAvatar, setUploadingAvatar] =
+    useState(false);
+
   // Populate form when modal opens
   useEffect(() => {
     if (open && user?._id && !populated) {
@@ -212,28 +359,56 @@ export function DauthProfileModal({ open, onClose }: DauthProfileModalProps) {
       setStatus(null);
       setShowDelete(false);
       setDeleteText('');
+      setActiveTab('profile');
+      setPasskeyStatus(null);
+      setShowRegister(false);
+      setPasskeyName('');
     }
   }, [open, user, populated]);
 
+  // Fetch passkey credentials when Security tab is active
+  useEffect(() => {
+    if (activeTab !== 'security' || !showSecurity) return;
+    setLoadingCreds(true);
+    getPasskeyCredentials().then((creds) => {
+      setCredentials(creds);
+      setLoadingCreds(false);
+    });
+  }, [activeTab, showSecurity, getPasskeyCredentials]);
+
   // Auto-clear success message
   useEffect(() => {
     if (status?.type !== 'success') return;
-    const timer = setTimeout(() => setStatus(null), SUCCESS_TIMEOUT_MS);
+    const timer = setTimeout(
+      () => setStatus(null),
+      SUCCESS_TIMEOUT_MS
+    );
     return () => clearTimeout(timer);
   }, [status]);
 
+  useEffect(() => {
+    if (passkeyStatus?.type !== 'success') return;
+    const timer = setTimeout(
+      () => setPasskeyStatus(null),
+      SUCCESS_TIMEOUT_MS
+    );
+    return () => clearTimeout(timer);
+  }, [passkeyStatus]);
+
   useFocusTrap(modalRef, phase === 'entered', onClose);
   useScrollLock(phase !== 'exited');
 
   const hasField = useCallback(
     (field: string) =>
-      domain.formFields?.some((f) => f.field === field) ?? false,
+      domain.formFields?.some((f) => f.field === field) ??
+      false,
     [domain.formFields]
   );
 
   const isRequired = useCallback(
     (field: string) =>
-      domain.formFields?.find((f) => f.field === field)?.required ?? false,
+      domain.formFields?.find((f) => f.field === field)
+        ?.required ?? false,
     [domain.formFields]
   );
 
@@ -247,7 +422,8 @@ export function DauthProfileModal({ open, onClose }: DauthProfileModalProps) {
     );
   }, [name, lastname, nickname, country, user]);
 
-  const canSave = name.trim().length > 0 && hasChanges && !saving;
+  const canSave =
+    name.trim().length > 0 && hasChanges && !saving;
 
   const handleSave = useCallback(async () => {
     setSaving(true);
@@ -280,13 +456,107 @@ export function DauthProfileModal({ open, onClose }: DauthProfileModalProps) {
     } else {
       setStatus({
         type: 'error',
-        message: 'Could not delete account. Please try again.',
+        message:
+          'Could not delete account. Please try again.',
       });
       setShowDelete(false);
       setDeleteText('');
     }
   }, [deleteAccount, onClose]);
 
+  const handleLanguage = useCallback(
+    async (lang: string) => {
+      await updateUser({ language: lang } as any);
+    },
+    [updateUser]
+  );
+
+  const handleRegisterPasskey = useCallback(async () => {
+    setRegistering(true);
+    setPasskeyStatus(null);
+    const cred = await registerPasskey(
+      passkeyName || undefined
+    );
+    setRegistering(false);
+    if (cred) {
+      setCredentials((prev) => [...prev, cred]);
+      setPasskeyName('');
+      setShowRegister(false);
+      setPasskeyStatus({
+        type: 'success',
+        message: 'Passkey registered successfully',
+      });
+    } else {
+      setPasskeyStatus({
+        type: 'error',
+        message: 'Failed to register passkey',
+      });
+    }
+  }, [passkeyName, registerPasskey]);
+
+  const handleDeletePasskey = useCallback(
+    async (credentialId: string) => {
+      const ok = await deletePasskeyCredential(credentialId);
+      if (ok) {
+        setCredentials((prev) =>
+          prev.filter((c) => c._id !== credentialId)
+        );
+      }
+    },
+    [deletePasskeyCredential]
+  );
+
+  const handleAvatarClick = useCallback(() => {
+    if (onAvatarUpload) {
+      avatarInputRef.current?.click();
+    }
+  }, [onAvatarUpload]);
+
+  const handleAvatarChange = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (!file || !onAvatarUpload) return;
+      setUploadingAvatar(true);
+      try {
+        const url = await onAvatarUpload(file);
+        if (url) {
+          await updateUser({ avatar: url } as any);
+        }
+      } catch {
+        // Error handled by onError callback
+      }
+      setUploadingAvatar(false);
+      if (avatarInputRef.current) {
+        avatarInputRef.current.value = '';
+      }
+    },
+    [onAvatarUpload, updateUser]
+  );
+
+  const handleSignOut = useCallback(() => {
+    logout();
+    onClose();
+  }, [logout, onClose]);
+
+  // Build CSS custom property overrides from domain.modalTheme
+  const themeVars = useMemo(() => {
+    const t = domain.modalTheme;
+    if (!t) return {};
+    const vars: Record<string, string> = {};
+    if (t.accent) vars['--dauth-accent'] = t.accent;
+    if (t.accentHover)
+      vars['--dauth-accent-hover'] = t.accentHover;
+    if (t.surface) vars['--dauth-surface'] = t.surface;
+    if (t.surfaceHover)
+      vars['--dauth-surface-hover'] = t.surfaceHover;
+    if (t.textPrimary)
+      vars['--dauth-text-primary'] = t.textPrimary;
+    if (t.textSecondary)
+      vars['--dauth-text-secondary'] = t.textSecondary;
+    if (t.border) vars['--dauth-border'] = t.border;
+    return vars;
+  }, [domain.modalTheme]);
+
   if (phase === 'exited') return null;
 
   const dur = isDesktop ? TRANSITION_MS : MOBILE_TRANSITION_MS;
@@ -296,7 +566,8 @@ export function DauthProfileModal({ open, onClose }: DauthProfileModalProps) {
     position: 'fixed',
     inset: 0,
     zIndex: 2147483647,
-    backgroundColor: 'var(--dauth-backdrop, rgba(0, 0, 0, 0.6))',
+    backgroundColor:
+      'var(--dauth-backdrop, rgba(0, 0, 0, 0.6))',
     backdropFilter: 'blur(4px)',
     WebkitBackdropFilter: 'blur(4px)',
     display: 'flex',
@@ -314,8 +585,10 @@ export function DauthProfileModal({ open, onClose }: DauthProfileModalProps) {
     margin: 16,
     backgroundColor: 'var(--dauth-surface, #1a1a2e)',
     borderRadius: 'var(--dauth-radius, 12px)',
-    boxShadow: 'var(--dauth-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.5))',
-    border: '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+    boxShadow:
+      'var(--dauth-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.5))',
+    border:
+      '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
     display: 'flex',
     flexDirection: 'column',
     overflow: 'hidden',
@@ -323,7 +596,10 @@ export function DauthProfileModal({ open, onClose }: DauthProfileModalProps) {
       'var(--dauth-font-family, system-ui, -apple-system, sans-serif)',
     color: 'var(--dauth-text-primary, #e4e4e7)',
     opacity: phase === 'entered' ? 1 : 0,
-    transform: phase === 'entered' ? 'translateY(0)' : 'translateY(16px)',
+    transform:
+      phase === 'entered'
+        ? 'translateY(0)'
+        : 'translateY(16px)',
     transition: `opacity ${dur}ms ${easing}, transform ${dur}ms ${easing}`,
   };
 
@@ -336,7 +612,10 @@ export function DauthProfileModal({ open, onClose }: DauthProfileModalProps) {
     fontFamily:
       'var(--dauth-font-family, system-ui, -apple-system, sans-serif)',
     color: 'var(--dauth-text-primary, #e4e4e7)',
-    transform: phase === 'entered' ? 'translateY(0)' : 'translateY(100%)',
+    transform:
+      phase === 'entered'
+        ? 'translateY(0)'
+        : 'translateY(100%)',
     transition: `transform ${dur}ms ${easing}`,
   };
 
@@ -344,15 +623,24 @@ export function DauthProfileModal({ open, onClose }: DauthProfileModalProps) {
     .charAt(0)
     .toUpperCase();
 
+  const tabs: { key: Tab; label: string }[] = [
+    { key: 'profile', label: 'Profile' },
+    ...(showSecurity
+      ? [{ key: 'security' as Tab, label: 'Security' }]
+      : []),
+    { key: 'account', label: 'Account' },
+  ];
+
   return createPortal(
     <>
       <style
         dangerouslySetInnerHTML={{
-          __html: '@keyframes dauth-spin{to{transform:rotate(360deg)}}',
+          __html:
+            '@keyframes dauth-spin{to{transform:rotate(360deg)}}',
         }}
       />
       <div
-        style={backdrop}
+        style={{ ...backdrop, ...themeVars }}
         onClick={isDesktop ? onClose : undefined}
         data-testid="dauth-profile-backdrop"
       >
@@ -377,7 +665,8 @@ export function DauthProfileModal({ open, onClose }: DauthProfileModalProps) {
                   'var(--dauth-surface-hover, #232340)')
               }
               onMouseLeave={(e) =>
-                (e.currentTarget.style.backgroundColor = 'transparent')
+                (e.currentTarget.style.backgroundColor =
+                  'transparent')
               }
             >
               {isDesktop ? <IconClose /> : <IconBack />}
@@ -388,231 +677,643 @@ export function DauthProfileModal({ open, onClose }: DauthProfileModalProps) {
             <div style={{ width: 36 }} />
           </div>
 
+          {/* Tab bar */}
+          <div style={tabBar} role="tablist">
+            {tabs.map((t) => (
+              <button
+                key={t.key}
+                role="tab"
+                type="button"
+                aria-selected={activeTab === t.key}
+                style={{
+                  ...tabBtn,
+                  color:
+                    activeTab === t.key
+                      ? 'var(--dauth-accent, #6366f1)'
+                      : 'var(--dauth-text-secondary, #a1a1aa)',
+                  borderBottomColor:
+                    activeTab === t.key
+                      ? 'var(--dauth-accent, #6366f1)'
+                      : 'transparent',
+                }}
+                onClick={() => setActiveTab(t.key)}
+              >
+                {t.label}
+              </button>
+            ))}
+          </div>
+
           {/* Scrollable body */}
           <div style={bodyStyle}>
-            {/* Avatar */}
-            <div style={avatarSection}>
-              <div style={avatarCircle}>
-                {user.avatar?.url ? (
-                  <img
-                    src={user.avatar.url}
-                    alt=""
+            {/* ========== PROFILE TAB ========== */}
+            {activeTab === 'profile' && (
+              <>
+                {/* Avatar */}
+                <div style={avatarSection}>
+                  <div
                     style={{
-                      width: '100%',
-                      height: '100%',
-                      objectFit: 'cover',
+                      ...avatarCircle,
+                      cursor: onAvatarUpload
+                        ? 'pointer'
+                        : 'default',
+                      position: 'relative' as const,
                     }}
-                  />
-                ) : (
-                  avatarInitial
+                    onClick={handleAvatarClick}
+                  >
+                    {uploadingAvatar ? (
+                      <Spinner />
+                    ) : user.avatar?.url ? (
+                      <img
+                        src={user.avatar.url}
+                        alt=""
+                        style={{
+                          width: '100%',
+                          height: '100%',
+                          objectFit: 'cover',
+                        }}
+                      />
+                    ) : (
+                      avatarInitial
+                    )}
+                    {onAvatarUpload && !uploadingAvatar && (
+                      <div style={avatarOverlay}>
+                        <IconCamera />
+                      </div>
+                    )}
+                  </div>
+                  <div style={emailText}>{user.email}</div>
+                  {onAvatarUpload && (
+                    <input
+                      ref={avatarInputRef}
+                      type="file"
+                      accept="image/*"
+                      style={{ display: 'none' }}
+                      onChange={handleAvatarChange}
+                    />
+                  )}
+                </div>
+
+                {/* Status */}
+                {status && (
+                  <div
+                    role="status"
+                    aria-live="polite"
+                    style={statusMsg(status.type)}
+                  >
+                    {status.message}
+                  </div>
                 )}
-              </div>
-              <div style={emailText}>{user.email}</div>
-            </div>
 
-            {/* Status */}
-            {status && (
-              <div
-                role="status"
-                aria-live="polite"
-                style={statusMsg(status.type)}
-              >
-                {status.message}
-              </div>
-            )}
+                {/* Form */}
+                <div>
+                  <div style={fieldGroup}>
+                    <label
+                      htmlFor="dauth-name"
+                      style={label}
+                    >
+                      Name *
+                    </label>
+                    <input
+                      id="dauth-name"
+                      type="text"
+                      value={name}
+                      onChange={(e) =>
+                        setName(e.target.value)
+                      }
+                      placeholder="Your name"
+                      disabled={saving}
+                      style={input}
+                      onFocus={inputFocusHandler}
+                      onBlur={inputBlurHandler}
+                    />
+                  </div>
 
-            {/* Form */}
-            <div>
-              <div style={fieldGroup}>
-                <label htmlFor="dauth-name" style={label}>
-                  Name *
-                </label>
-                <input
-                  id="dauth-name"
-                  type="text"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder="Your name"
-                  disabled={saving}
-                  style={input}
-                  onFocus={inputFocusHandler}
-                  onBlur={inputBlurHandler}
-                />
-              </div>
-
-              {hasField('lastname') && (
-                <div style={fieldGroup}>
-                  <label htmlFor="dauth-lastname" style={label}>
-                    Last name
-                    {isRequired('lastname') ? ' *' : ''}
-                  </label>
-                  <input
-                    id="dauth-lastname"
-                    type="text"
-                    value={lastname}
-                    onChange={(e) => setLastname(e.target.value)}
-                    placeholder="Your last name"
-                    disabled={saving}
-                    style={input}
-                    onFocus={inputFocusHandler}
-                    onBlur={inputBlurHandler}
-                  />
+                  {hasField('lastname') && (
+                    <div style={fieldGroup}>
+                      <label
+                        htmlFor="dauth-lastname"
+                        style={label}
+                      >
+                        Last name
+                        {isRequired('lastname') ? ' *' : ''}
+                      </label>
+                      <input
+                        id="dauth-lastname"
+                        type="text"
+                        value={lastname}
+                        onChange={(e) =>
+                          setLastname(e.target.value)
+                        }
+                        placeholder="Your last name"
+                        disabled={saving}
+                        style={input}
+                        onFocus={inputFocusHandler}
+                        onBlur={inputBlurHandler}
+                      />
+                    </div>
+                  )}
+
+                  {hasField('nickname') && (
+                    <div style={fieldGroup}>
+                      <label
+                        htmlFor="dauth-nickname"
+                        style={label}
+                      >
+                        Nickname
+                        {isRequired('nickname') ? ' *' : ''}
+                      </label>
+                      <input
+                        id="dauth-nickname"
+                        type="text"
+                        value={nickname}
+                        onChange={(e) =>
+                          setNickname(e.target.value)
+                        }
+                        placeholder="Choose a nickname"
+                        disabled={saving}
+                        style={input}
+                        onFocus={inputFocusHandler}
+                        onBlur={inputBlurHandler}
+                      />
+                    </div>
+                  )}
+
+                  {hasField('country') && (
+                    <div style={fieldGroup}>
+                      <label
+                        htmlFor="dauth-country"
+                        style={label}
+                      >
+                        Country
+                        {isRequired('country') ? ' *' : ''}
+                      </label>
+                      <input
+                        id="dauth-country"
+                        type="text"
+                        value={country}
+                        onChange={(e) =>
+                          setCountry(e.target.value)
+                        }
+                        placeholder="Your country"
+                        disabled={saving}
+                        style={input}
+                        onFocus={inputFocusHandler}
+                        onBlur={inputBlurHandler}
+                      />
+                    </div>
+                  )}
                 </div>
-              )}
 
-              {hasField('nickname') && (
+                {/* Language selector */}
+                <hr style={separator} />
                 <div style={fieldGroup}>
-                  <label htmlFor="dauth-nickname" style={label}>
-                    Nickname
-                    {isRequired('nickname') ? ' *' : ''}
-                  </label>
-                  <input
-                    id="dauth-nickname"
-                    type="text"
-                    value={nickname}
-                    onChange={(e) => setNickname(e.target.value)}
-                    placeholder="Choose a nickname"
-                    disabled={saving}
-                    style={input}
-                    onFocus={inputFocusHandler}
-                    onBlur={inputBlurHandler}
-                  />
+                  <div style={label}>Language</div>
+                  <div style={{ display: 'flex', gap: 8 }}>
+                    {(['es', 'en'] as const).map((lang) => (
+                      <button
+                        key={lang}
+                        type="button"
+                        style={{
+                          ...langBtn,
+                          backgroundColor:
+                            user.language === lang
+                              ? 'var(--dauth-accent, #6366f1)'
+                              : 'var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))',
+                          color:
+                            user.language === lang
+                              ? '#ffffff'
+                              : 'var(--dauth-text-secondary, #a1a1aa)',
+                        }}
+                        onClick={() => handleLanguage(lang)}
+                      >
+                        {lang === 'es'
+                          ? 'Espa\u00f1ol'
+                          : 'English'}
+                      </button>
+                    ))}
+                  </div>
                 </div>
-              )}
+              </>
+            )}
 
-              {hasField('country') && (
-                <div style={fieldGroup}>
-                  <label htmlFor="dauth-country" style={label}>
-                    Country
-                    {isRequired('country') ? ' *' : ''}
-                  </label>
-                  <input
-                    id="dauth-country"
-                    type="text"
-                    value={country}
-                    onChange={(e) => setCountry(e.target.value)}
-                    placeholder="Your country"
-                    disabled={saving}
-                    style={input}
-                    onFocus={inputFocusHandler}
-                    onBlur={inputBlurHandler}
-                  />
+            {/* ========== SECURITY TAB ========== */}
+            {activeTab === 'security' && showSecurity && (
+              <>
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: 16,
+                  }}
+                >
+                  <div
+                    style={{
+                      ...label,
+                      marginBottom: 0,
+                      fontWeight: 600,
+                    }}
+                  >
+                    Passkeys
+                  </div>
+                  <button
+                    type="button"
+                    style={outlineBtn}
+                    onClick={() =>
+                      setShowRegister(!showRegister)
+                    }
+                    onMouseEnter={(e) =>
+                      (e.currentTarget.style.backgroundColor =
+                        'var(--dauth-surface-hover, #232340)')
+                    }
+                    onMouseLeave={(e) =>
+                      (e.currentTarget.style.backgroundColor =
+                        'transparent')
+                    }
+                  >
+                    + Add passkey
+                  </button>
                 </div>
-              )}
-            </div>
 
-            {/* Danger zone */}
-            <hr style={separator} />
-            <div>
-              <div style={dangerTitle}>Delete account</div>
-              <div style={dangerDesc}>
-                Permanently delete your account and all associated data.
-              </div>
-              {!showDelete ? (
-                <button
-                  type="button"
-                  style={deleteBtn}
-                  onClick={() => setShowDelete(true)}
-                  onMouseEnter={(e) =>
-                    (e.currentTarget.style.backgroundColor =
-                      'rgba(239, 68, 68, 0.2)')
-                  }
-                  onMouseLeave={(e) =>
-                    (e.currentTarget.style.backgroundColor =
-                      'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))')
-                  }
-                >
-                  Delete account
-                </button>
-              ) : (
-                <div style={deletePanel}>
-                  <div style={deletePanelText}>
-                    This action is permanent and cannot be undone. Type{' '}
-                    <strong>{CONFIRM_WORD}</strong> to confirm.
+                {/* Register passkey form */}
+                {showRegister && (
+                  <div style={registerPanel}>
+                    <div style={fieldGroup}>
+                      <label
+                        htmlFor="dauth-passkey-name"
+                        style={label}
+                      >
+                        Passkey name (optional)
+                      </label>
+                      <input
+                        id="dauth-passkey-name"
+                        type="text"
+                        value={passkeyName}
+                        onChange={(e) =>
+                          setPasskeyName(e.target.value)
+                        }
+                        placeholder="e.g. MacBook Touch ID"
+                        disabled={registering}
+                        style={input}
+                        onFocus={inputFocusHandler}
+                        onBlur={inputBlurHandler}
+                      />
+                    </div>
+                    <div
+                      style={{
+                        display: 'flex',
+                        gap: 8,
+                      }}
+                    >
+                      <button
+                        type="button"
+                        style={{
+                          ...smallAccentBtn,
+                          opacity: registering ? 0.6 : 1,
+                        }}
+                        disabled={registering}
+                        onClick={handleRegisterPasskey}
+                      >
+                        {registering ? (
+                          <Spinner />
+                        ) : (
+                          <IconFingerprint />
+                        )}
+                        {registering
+                          ? 'Registering...'
+                          : 'Register'}
+                      </button>
+                      <button
+                        type="button"
+                        style={cancelBtn}
+                        onClick={() =>
+                          setShowRegister(false)
+                        }
+                        onMouseEnter={(e) =>
+                          (e.currentTarget.style.backgroundColor =
+                            'var(--dauth-surface-hover, #232340)')
+                        }
+                        onMouseLeave={(e) =>
+                          (e.currentTarget.style.backgroundColor =
+                            'transparent')
+                        }
+                      >
+                        Cancel
+                      </button>
+                    </div>
                   </div>
-                  <input
-                    type="text"
-                    value={deleteText}
-                    onChange={(e) => setDeleteText(e.target.value)}
-                    placeholder={`Type ${CONFIRM_WORD}`}
-                    style={input}
-                    onFocus={inputFocusHandler}
-                    onBlur={inputBlurHandler}
-                    disabled={deleting}
-                  />
+                )}
+
+                {/* Passkey status */}
+                {passkeyStatus && (
                   <div
+                    role="status"
+                    aria-live="polite"
                     style={{
-                      display: 'flex',
-                      gap: 8,
+                      ...statusMsg(passkeyStatus.type),
                       marginTop: 12,
                     }}
                   >
+                    {passkeyStatus.message}
+                  </div>
+                )}
+
+                {/* Credentials list */}
+                <div style={{ marginTop: 12 }}>
+                  {loadingCreds ? (
+                    <div
+                      style={{
+                        textAlign: 'center',
+                        padding: 24,
+                      }}
+                    >
+                      <Spinner />
+                    </div>
+                  ) : credentials.length > 0 ? (
+                    credentials.map((cred) => (
+                      <div
+                        key={cred._id}
+                        style={credentialRow}
+                      >
+                        <div
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 12,
+                            flex: 1,
+                            minWidth: 0,
+                          }}
+                        >
+                          <span
+                            style={{
+                              color:
+                                'var(--dauth-accent, #6366f1)',
+                              flexShrink: 0,
+                            }}
+                          >
+                            <IconFingerprint />
+                          </span>
+                          <div
+                            style={{
+                              minWidth: 0,
+                              flex: 1,
+                            }}
+                          >
+                            <div
+                              style={{
+                                fontSize:
+                                  'var(--dauth-font-size-sm, 0.875rem)',
+                                fontWeight: 500,
+                                color:
+                                  'var(--dauth-text-primary, #e4e4e7)',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace:
+                                  'nowrap' as const,
+                              }}
+                            >
+                              {cred.name || 'Passkey'}
+                            </div>
+                            <div
+                              style={{
+                                fontSize:
+                                  'var(--dauth-font-size-xs, 0.75rem)',
+                                color:
+                                  'var(--dauth-text-muted, #71717a)',
+                              }}
+                            >
+                              {cred.deviceType ===
+                              'multiDevice'
+                                ? 'Synced'
+                                : 'Device-bound'}
+                              {cred.createdAt &&
+                                ` \u00b7 Created ${new Date(cred.createdAt).toLocaleDateString()}`}
+                            </div>
+                          </div>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={() =>
+                            handleDeletePasskey(cred._id)
+                          }
+                          style={trashBtn}
+                          onMouseEnter={(e) =>
+                            (e.currentTarget.style.color =
+                              'var(--dauth-error, #ef4444)')
+                          }
+                          onMouseLeave={(e) =>
+                            (e.currentTarget.style.color =
+                              'var(--dauth-text-muted, #71717a)')
+                          }
+                          aria-label={`Delete passkey ${cred.name || ''}`}
+                        >
+                          <IconTrash />
+                        </button>
+                      </div>
+                    ))
+                  ) : (
+                    <div style={emptyState}>
+                      <span
+                        style={{
+                          color:
+                            'var(--dauth-accent, #6366f1)',
+                        }}
+                      >
+                        <IconShield />
+                      </span>
+                      <div>
+                        <div
+                          style={{
+                            fontSize:
+                              'var(--dauth-font-size-sm, 0.875rem)',
+                            fontWeight: 500,
+                            color:
+                              'var(--dauth-text-primary, #e4e4e7)',
+                          }}
+                        >
+                          No passkeys registered
+                        </div>
+                        <div
+                          style={{
+                            fontSize:
+                              'var(--dauth-font-size-xs, 0.75rem)',
+                            color:
+                              'var(--dauth-text-secondary, #a1a1aa)',
+                          }}
+                        >
+                          Add a passkey for faster, more
+                          secure sign-in.
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+
+            {/* ========== ACCOUNT TAB ========== */}
+            {activeTab === 'account' && (
+              <>
+                {/* Status (shared) */}
+                {status && (
+                  <div
+                    role="status"
+                    aria-live="polite"
+                    style={statusMsg(status.type)}
+                  >
+                    {status.message}
+                  </div>
+                )}
+
+                {/* Delete account */}
+                <div>
+                  <div style={dangerTitle}>
+                    Delete account
+                  </div>
+                  <div style={dangerDesc}>
+                    Permanently delete your account and all
+                    associated data.
+                  </div>
+                  {!showDelete ? (
                     <button
                       type="button"
-                      style={cancelBtn}
-                      onClick={() => {
-                        setShowDelete(false);
-                        setDeleteText('');
-                      }}
+                      style={deleteBtn}
+                      onClick={() => setShowDelete(true)}
                       onMouseEnter={(e) =>
                         (e.currentTarget.style.backgroundColor =
-                          'var(--dauth-surface-hover, #232340)')
+                          'rgba(239, 68, 68, 0.2)')
                       }
                       onMouseLeave={(e) =>
-                        (e.currentTarget.style.backgroundColor = 'transparent')
+                        (e.currentTarget.style.backgroundColor =
+                          'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))')
                       }
                     >
-                      Cancel
-                    </button>
-                    <button
-                      type="button"
-                      style={{
-                        ...deleteConfirmBtn,
-                        opacity:
-                          deleteText !== CONFIRM_WORD || deleting ? 0.5 : 1,
-                        cursor:
-                          deleteText !== CONFIRM_WORD || deleting
-                            ? 'not-allowed'
-                            : 'pointer',
-                      }}
-                      disabled={deleteText !== CONFIRM_WORD || deleting}
-                      onClick={handleDelete}
-                    >
-                      {deleting && <Spinner />}
-                      Delete my account
+                      Delete account
                     </button>
-                  </div>
+                  ) : (
+                    <div style={deletePanel}>
+                      <div style={deletePanelText}>
+                        This action is permanent and cannot
+                        be undone. Type{' '}
+                        <strong>{CONFIRM_WORD}</strong> to
+                        confirm.
+                      </div>
+                      <input
+                        type="text"
+                        value={deleteText}
+                        onChange={(e) =>
+                          setDeleteText(e.target.value)
+                        }
+                        placeholder={`Type ${CONFIRM_WORD}`}
+                        style={input}
+                        onFocus={inputFocusHandler}
+                        onBlur={inputBlurHandler}
+                        disabled={deleting}
+                      />
+                      <div
+                        style={{
+                          display: 'flex',
+                          gap: 8,
+                          marginTop: 12,
+                        }}
+                      >
+                        <button
+                          type="button"
+                          style={cancelBtn}
+                          onClick={() => {
+                            setShowDelete(false);
+                            setDeleteText('');
+                          }}
+                          onMouseEnter={(e) =>
+                            (e.currentTarget.style.backgroundColor =
+                              'var(--dauth-surface-hover, #232340)')
+                          }
+                          onMouseLeave={(e) =>
+                            (e.currentTarget.style.backgroundColor =
+                              'transparent')
+                          }
+                        >
+                          Cancel
+                        </button>
+                        <button
+                          type="button"
+                          style={{
+                            ...deleteConfirmBtn,
+                            opacity:
+                              deleteText !== CONFIRM_WORD ||
+                              deleting
+                                ? 0.5
+                                : 1,
+                            cursor:
+                              deleteText !== CONFIRM_WORD ||
+                              deleting
+                                ? 'not-allowed'
+                                : 'pointer',
+                          }}
+                          disabled={
+                            deleteText !== CONFIRM_WORD ||
+                            deleting
+                          }
+                          onClick={handleDelete}
+                        >
+                          {deleting && <Spinner />}
+                          Delete my account
+                        </button>
+                      </div>
+                    </div>
+                  )}
                 </div>
-              )}
-            </div>
+
+                {/* Sign out */}
+                <hr style={separator} />
+                <button
+                  type="button"
+                  style={signOutBtn}
+                  onClick={handleSignOut}
+                  onMouseEnter={(e) =>
+                    (e.currentTarget.style.backgroundColor =
+                      'rgba(239, 68, 68, 0.2)')
+                  }
+                  onMouseLeave={(e) =>
+                    (e.currentTarget.style.backgroundColor =
+                      'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))')
+                  }
+                >
+                  <IconLogOut />
+                  Sign out
+                </button>
+              </>
+            )}
           </div>
 
-          {/* Footer */}
-          <div style={footerStyle(isDesktop)}>
-            <button
-              type="button"
-              style={{
-                ...saveBtn,
-                opacity: canSave ? 1 : 0.5,
-                cursor: canSave ? 'pointer' : 'not-allowed',
-              }}
-              disabled={!canSave}
-              onClick={handleSave}
-              aria-busy={saving}
-              onMouseEnter={(e) => {
-                if (canSave)
+          {/* Footer — only for Profile tab */}
+          {activeTab === 'profile' && (
+            <div style={footerStyle(isDesktop)}>
+              <button
+                type="button"
+                style={{
+                  ...saveBtn,
+                  opacity: canSave ? 1 : 0.5,
+                  cursor: canSave ? 'pointer' : 'not-allowed',
+                }}
+                disabled={!canSave}
+                onClick={handleSave}
+                aria-busy={saving}
+                onMouseEnter={(e) => {
+                  if (canSave)
+                    e.currentTarget.style.backgroundColor =
+                      'var(--dauth-accent-hover, #818cf8)';
+                }}
+                onMouseLeave={(e) => {
                   e.currentTarget.style.backgroundColor =
-                    'var(--dauth-accent-hover, #818cf8)';
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.backgroundColor =
-                  'var(--dauth-accent, #6366f1)';
-              }}
-            >
-              {saving && <Spinner />}
-              {saving ? 'Saving...' : 'Save changes'}
-            </button>
-          </div>
+                    'var(--dauth-accent, #6366f1)';
+                }}
+              >
+                {saving && <Spinner />}
+                {saving ? 'Saving...' : 'Save changes'}
+              </button>
+            </div>
+          )}
         </div>
       </div>
     </>,
@@ -622,19 +1323,21 @@ export function DauthProfileModal({ open, onClose }: DauthProfileModalProps) {
 
 // --- Style constants ---
 
-const headerStyle = (isDesktop: boolean): React.CSSProperties => ({
+const headerStyle = (
+  isDesktop: boolean
+): React.CSSProperties => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  padding: '16px 24px',
-  borderBottom: '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  padding: '16px 24px 0',
   flexShrink: 0,
   ...(!isDesktop
     ? {
         position: 'sticky' as const,
         top: 0,
         zIndex: 1,
-        backgroundColor: 'var(--dauth-surface, #1a1a2e)',
+        backgroundColor:
+          'var(--dauth-surface, #1a1a2e)',
       }
     : {}),
 });
@@ -663,6 +1366,28 @@ const closeBtn: React.CSSProperties = {
   padding: 0,
 };
 
+const tabBar: React.CSSProperties = {
+  display: 'flex',
+  padding: '0 24px',
+  borderBottom:
+    '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  flexShrink: 0,
+};
+
+const tabBtn: React.CSSProperties = {
+  flex: 1,
+  padding: '12px 4px',
+  fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
+  fontWeight: 500,
+  border: 'none',
+  borderBottom: '2px solid transparent',
+  backgroundColor: 'transparent',
+  cursor: 'pointer',
+  transition: 'color 150ms, border-color 150ms',
+  fontFamily: 'inherit',
+  textAlign: 'center',
+};
+
 const bodyStyle: React.CSSProperties = {
   flex: 1,
   overflowY: 'auto',
@@ -692,12 +1417,27 @@ const avatarCircle: React.CSSProperties = {
   fontWeight: 600,
 };
 
+const avatarOverlay: React.CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.4)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  opacity: 0.7,
+  transition: 'opacity 150ms',
+  color: '#ffffff',
+};
+
 const emailText: React.CSSProperties = {
   fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
   color: 'var(--dauth-text-secondary, #a1a1aa)',
 };
 
-const statusMsg = (type: 'success' | 'error'): React.CSSProperties => ({
+const statusMsg = (
+  type: 'success' | 'error'
+): React.CSSProperties => ({
   padding: '10px 14px',
   borderRadius: 'var(--dauth-radius-sm, 8px)',
   fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
@@ -714,7 +1454,9 @@ const statusMsg = (type: 'success' | 'error'): React.CSSProperties => ({
   lineHeight: 1.5,
 });
 
-const fieldGroup: React.CSSProperties = { marginBottom: 16 };
+const fieldGroup: React.CSSProperties = {
+  marginBottom: 16,
+};
 
 const label: React.CSSProperties = {
   display: 'block',
@@ -730,8 +1472,10 @@ const input: React.CSSProperties = {
   fontSize: 'var(--dauth-font-size-base, 1rem)',
   lineHeight: 1.5,
   color: 'var(--dauth-text-primary, #e4e4e7)',
-  backgroundColor: 'var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))',
-  border: '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  backgroundColor:
+    'var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))',
+  border:
+    '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
   borderRadius: 'var(--dauth-radius-input, 8px)',
   outline: 'none',
   transition: 'border-color 150ms, box-shadow 150ms',
@@ -739,25 +1483,119 @@ const input: React.CSSProperties = {
   fontFamily: 'inherit',
 };
 
-const inputFocusHandler = (e: React.FocusEvent<HTMLInputElement>) => {
+const inputFocusHandler = (
+  e: React.FocusEvent<HTMLInputElement>
+) => {
   e.currentTarget.style.borderColor =
     'var(--dauth-border-focus, rgba(99, 102, 241, 0.5))';
-  e.currentTarget.style.boxShadow = '0 0 0 3px rgba(99, 102, 241, 0.15)';
+  e.currentTarget.style.boxShadow =
+    '0 0 0 3px rgba(99, 102, 241, 0.15)';
 };
 
-const inputBlurHandler = (e: React.FocusEvent<HTMLInputElement>) => {
+const inputBlurHandler = (
+  e: React.FocusEvent<HTMLInputElement>
+) => {
   e.currentTarget.style.borderColor =
     'var(--dauth-border, rgba(255, 255, 255, 0.08))';
   e.currentTarget.style.boxShadow = 'none';
 };
 
+const langBtn: React.CSSProperties = {
+  padding: '8px 16px',
+  fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
+  fontWeight: 500,
+  border: 'none',
+  borderRadius: 'var(--dauth-radius-sm, 8px)',
+  cursor: 'pointer',
+  transition: 'background-color 150ms, color 150ms',
+  fontFamily: 'inherit',
+};
+
 const separator: React.CSSProperties = {
   height: 1,
-  backgroundColor: 'var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  backgroundColor:
+    'var(--dauth-border, rgba(255, 255, 255, 0.08))',
   margin: '24px 0',
   border: 'none',
 };
 
+const outlineBtn: React.CSSProperties = {
+  padding: '6px 12px',
+  fontSize: 'var(--dauth-font-size-xs, 0.75rem)',
+  fontWeight: 500,
+  color: 'var(--dauth-text-secondary, #a1a1aa)',
+  backgroundColor: 'transparent',
+  border:
+    '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  borderRadius: 'var(--dauth-radius-sm, 8px)',
+  cursor: 'pointer',
+  transition: 'background-color 150ms',
+  fontFamily: 'inherit',
+};
+
+const registerPanel: React.CSSProperties = {
+  padding: 16,
+  borderRadius: 'var(--dauth-radius-sm, 8px)',
+  border:
+    '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  backgroundColor:
+    'var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))',
+  marginBottom: 12,
+};
+
+const smallAccentBtn: React.CSSProperties = {
+  padding: '8px 16px',
+  fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
+  fontWeight: 500,
+  color: '#ffffff',
+  backgroundColor: 'var(--dauth-accent, #6366f1)',
+  border: 'none',
+  borderRadius: 'var(--dauth-radius-sm, 8px)',
+  cursor: 'pointer',
+  transition: 'opacity 150ms',
+  fontFamily: 'inherit',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 6,
+};
+
+const credentialRow: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: 12,
+  borderRadius: 'var(--dauth-radius-sm, 8px)',
+  backgroundColor:
+    'var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))',
+  marginBottom: 8,
+};
+
+const trashBtn: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 28,
+  height: 28,
+  border: 'none',
+  backgroundColor: 'transparent',
+  color: 'var(--dauth-text-muted, #71717a)',
+  cursor: 'pointer',
+  transition: 'color 150ms',
+  padding: 0,
+  borderRadius: 'var(--dauth-radius-sm, 8px)',
+  flexShrink: 0,
+};
+
+const emptyState: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 12,
+  padding: 16,
+  borderRadius: 'var(--dauth-radius-sm, 8px)',
+  backgroundColor:
+    'var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))',
+};
+
 const dangerTitle: React.CSSProperties = {
   fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
   fontWeight: 600,
@@ -777,7 +1615,8 @@ const deleteBtn: React.CSSProperties = {
   fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
   fontWeight: 500,
   color: 'var(--dauth-error, #ef4444)',
-  backgroundColor: 'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))',
+  backgroundColor:
+    'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))',
   border: '1px solid rgba(239, 68, 68, 0.2)',
   borderRadius: 'var(--dauth-radius-sm, 8px)',
   cursor: 'pointer',
@@ -790,7 +1629,8 @@ const deletePanel: React.CSSProperties = {
   padding: 16,
   borderRadius: 'var(--dauth-radius-sm, 8px)',
   border: '1px solid rgba(239, 68, 68, 0.3)',
-  backgroundColor: 'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))',
+  backgroundColor:
+    'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))',
 };
 
 const deletePanelText: React.CSSProperties = {
@@ -801,13 +1641,13 @@ const deletePanelText: React.CSSProperties = {
 };
 
 const cancelBtn: React.CSSProperties = {
-  flex: 1,
   padding: '8px 16px',
   fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
   fontWeight: 500,
   color: 'var(--dauth-text-secondary, #a1a1aa)',
   backgroundColor: 'transparent',
-  border: '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  border:
+    '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
   borderRadius: 'var(--dauth-radius-sm, 8px)',
   cursor: 'pointer',
   transition: 'background-color 150ms',
@@ -832,17 +1672,41 @@ const deleteConfirmBtn: React.CSSProperties = {
   gap: 8,
 };
 
-const footerStyle = (isDesktop: boolean): React.CSSProperties => ({
+const signOutBtn: React.CSSProperties = {
+  width: '100%',
+  padding: '12px 24px',
+  fontSize: 'var(--dauth-font-size-base, 1rem)',
+  fontWeight: 500,
+  color: 'var(--dauth-error, #ef4444)',
+  backgroundColor:
+    'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))',
+  border: '1px solid rgba(239, 68, 68, 0.2)',
+  borderRadius: 'var(--dauth-radius-sm, 8px)',
+  cursor: 'pointer',
+  transition: 'background-color 150ms',
+  fontFamily: 'inherit',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 8,
+};
+
+const footerStyle = (
+  isDesktop: boolean
+): React.CSSProperties => ({
   padding: '16px 24px',
-  borderTop: '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  borderTop:
+    '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
   flexShrink: 0,
   ...(!isDesktop
     ? {
         position: 'sticky' as const,
         bottom: 0,
         zIndex: 1,
-        backgroundColor: 'var(--dauth-surface, #1a1a2e)',
-        paddingBottom: 'max(16px, env(safe-area-inset-bottom))',
+        backgroundColor:
+          'var(--dauth-surface, #1a1a2e)',
+        paddingBottom:
+          'max(16px, env(safe-area-inset-bottom))',
       }
     : {}),
 });