Add other methods to OIDC MFA

new-ui/biome.json

@@ -1,6 +1,6 @@
 {
   "root": true,
-  "$schema": "https://biomejs.dev/schemas/2.6.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.6.4/schema.json",
   "vcs": {
     "enabled": false,
     "clientKind": "git",

new-ui/package.json

@@ -14,7 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@biomejs/biome": "2.6.3",
+    "@biomejs/biome": "2.6.4",
     "@floating-ui/react": "^0.27.20",
     "@fluentui/keyboard-keys": "^9.0.9",
     "@stablelib/base64": "^2.0.1",
@@ -24,7 +24,7 @@
     "@tanstack/react-router": "^1.170.46",
     "@tauri-apps/api": "^2.12.4",
     "@tauri-apps/plugin-clipboard-manager": "^2.5.0",
-    "@tauri-apps/plugin-dialog": "^2.8.3",
+    "@tauri-apps/plugin-dialog": "^2.8.4",
     "@tauri-apps/plugin-fs": "^2.7.1",
     "@tauri-apps/plugin-http": "^2.8.3",
     "@tauri-apps/plugin-log": "^2.10.1",
@@ -39,7 +39,7 @@
     "p-timeout": "^7.0.2",
     "prettier": "^3.9.10",
     "qrcode.react": "^4.2.0",
-    "radashi": "^12.9.7",
+    "radashi": "^12.9.8",
     "react": "^19.3.1",
     "react-chartjs-2": "^5.3.1",
     "react-dom": "^19.3.1",
@@ -49,16 +49,16 @@
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "rxjs": "^7.8.2",
-    "sass": "^1.106.1",
+    "sass": "^1.107.1",
     "zod": "^4.6.7",
     "zustand": "^5.0.16"
   },
   "devDependencies": {
-    "@tanstack/devtools-vite": "^0.8.5",
+    "@tanstack/devtools-vite": "^0.8.6",
     "@tanstack/router-plugin": "^1.168.48",
     "@testing-library/react": "^16.3.3",
     "@types/byte-size": "^8.1.2",
-    "@types/node": "^26.6.5",
+    "@types/node": "^26.6.6",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.2",

new-ui/src/pages/full/OverviewPage/components/ConnectModal/ConnectModal.tsx

@@ -50,6 +50,7 @@ export const ConnectModal = () => {
     <Modal
       id="connect-modal"
       size="small"
+      contentClassName="connect-modal"
       title={stepLabel ?? (view ? ConnectModalTitle[view] : '')}
       isOpen={isOpen}
       afterClose={() => {

new-ui/src/pages/full/OverviewPage/components/ConnectModal/hooks/useMfaStep.ts

@@ -23,6 +23,7 @@ export const useMfaStep = () => {
   const currentStep = isPresent(location) ? mfaStepsOf(location)[stepIndex] : undefined;
 
   return {
+    instance,
     canPickOtherMethod:
       isPresent(currentStep) && usableMfaMethods(currentStep, instance).length > 1,
     stepPlan,

new-ui/src/pages/full/OverviewPage/components/ConnectModal/style.scss

@@ -1,3 +1,8 @@
+// Wide enough for "Other methods" next to "Continue with Microsoft".
+#modals-root .modal.size-small.connect-modal {
+  --max-width: 400px;
+}
+
 #connect-modal {
   .view-description {
     font: var(--t-body-xs-400);

new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaOidc/ConnectModalMfaOidc.tsx

@@ -1,17 +1,12 @@
 import './style.scss';
 import { useQuery } from '@tanstack/react-query';
-import { Fragment, useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useShallow } from 'zustand/shallow';
 import { Button } from '../../../../../../../shared/components/Button/Button';
 import { ButtonVariant } from '../../../../../../../shared/components/Button/types';
-import { Checkbox } from '../../../../../../../shared/components/Checkbox/Checkbox';
+import { Controls } from '../../../../../../../shared/components/Controls/Controls';
 import { ExternalProviderButton } from '../../../../../../../shared/components/ExternalProviderButton/ExternalProviderButton';
-import { SizedBox } from '../../../../../../../shared/components/SizedBox/SizedBox';
-import { useAppData } from '../../../../../../../shared/providers/AppDataContext';
-import { api } from '../../../../../../../shared/rust-api/api';
 import { getAppConfigQueryOptions } from '../../../../../../../shared/rust-api/query';
-import { ThemeSpacing } from '../../../../../../../shared/types';
-import { isPresent } from '../../../../../../../shared/utils/isPresent';
 import {
   findOpenIdProvider,
   openIdProviderName,
@@ -20,6 +15,7 @@ import { ConnectModalPostureCheckLoading } from '../../components/ConnectModalPo
 import { ConnectModalView } from '../../hooks/types';
 import { useConnectModal } from '../../hooks/useConnectModal';
 import { useConnectModalMfaOidc } from '../../hooks/useConnectModalMfaOidc';
+import { useMfaStep } from '../../hooks/useMfaStep';
 
 type Screen = 'idle' | 'polling' | 'error';
 
@@ -28,8 +24,9 @@ export const ConnectModalMfaOidc = () => {
   const [perviousView, location, initAutoStart] = useConnectModal(
     useShallow((s) => [s.perviousView, s.location, s.autoStartOpenId]),
   );
-  const { instances } = useAppData();
-  const instance = instances.find((entry) => entry.id === location?.instance_id);
+  const { instance, canPickOtherMethod } = useMfaStep();
+  const showOtherMethods =
+    canPickOtherMethod && appConfig?.auto_start_openid_mfa === false;
   const providerName = openIdProviderName(instance);
 
   const { start, isStarting, startError, isPolling, pollError } = useConnectModalMfaOidc({
@@ -78,40 +75,35 @@ export const ConnectModalMfaOidc = () => {
         </p>
       )}
       {screen === 'error' && <p className="view-description">{errorMessage}</p>}
-      <div className="actions">
+      <Controls>
+        {showOtherMethods && (
+          <Button
+            containerProps={{ className: 'other-methods' }}
+            variant={ButtonVariant.Secondary}
+            text="Other methods"
+            onClick={() => {
+              useConnectModal.getState().setView(ConnectModalView.MfaSettings);
+            }}
+          />
+        )}
         {screen !== 'error' && (
           <ExternalProviderButton
-            text={`Authenticate with ${providerName}`}
+            className="primary-action"
+            text={`Continue with ${providerName}`}
             provider={findOpenIdProvider(instance) ?? 'custom'}
             loading={screen === 'polling' || isStarting}
             onClick={handleStart}
           />
         )}
         {screen === 'error' && (
           <Button
+            containerProps={{ className: 'primary-action' }}
             text="Try again"
             variant={ButtonVariant.Primary}
             onClick={() => setScreen('idle')}
           />
         )}
-        {isPresent(appConfig) && screen === 'idle' && !initAutoStart && (
-          <Fragment>
-            <SizedBox height={ThemeSpacing.Xl3} />
-            <Checkbox
-              active={appConfig.auto_start_openid_mfa}
-              text={`Don't show this screen next time`}
-              onClick={() => {
-                void api.setAppConfig(
-                  {
-                    auto_start_openid_mfa: !appConfig.auto_start_openid_mfa,
-                  },
-                  true,
-                );
-              }}
-            />
-          </Fragment>
-        )}
-      </div>
+      </Controls>
     </div>
   );
 };

new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaOidc/style.scss

@@ -1,8 +1,9 @@
 #mfa-oidc-view {
-  .actions {
-    .btn,
-    .external-provider-button {
-      width: 100%;
-    }
+  .other-methods {
+    flex-shrink: 0;
+  }
+
+  .primary-action {
+    flex: 1;
   }
 }

new-ui/src/shared/components/LocationCard/components/MfaSelector/MfaSelector.tsx

@@ -7,11 +7,9 @@ import {
   MfaMethod,
   type MfaMethodValue,
 } from '../../../../rust-api/types';
-import { isPresent } from '../../../../utils/isPresent';
-import { findOpenIdProvider, mfaToText, openIdProviderName } from '../../../../utils/mfa';
+import { mfaToText, openIdProviderName } from '../../../../utils/mfa';
 import { Icon } from '../../../Icon';
 import checkboxSrc from './assets/checkbox.svg';
-import { openIdProviderIcon } from './consts';
 
 interface Props {
   factor: MfaMethodValue;
@@ -38,8 +36,6 @@ export const MfaSelector = ({
 }: Props) => {
   const isMobileOnly = factor === MfaMethod.Biometric;
   const showCheckbox = isSelectable && selected;
-  const openIdProvider =
-    factor === MfaMethod.Oidc ? findOpenIdProvider(instance) : undefined;
 
   return (
     <div
@@ -60,12 +56,7 @@ export const MfaSelector = ({
       {showCheckbox && <img src={checkboxSrc} alt="" width={24} height={24} />}
       {!showCheckbox && (
         <div className="icon-col">
-          {isPresent(openIdProvider) && (
-            <img src={openIdProviderIcon[openIdProvider]} alt="" width={20} height={20} />
-          )}
-          {!isPresent(openIdProvider) && (
-            <Icon className="factor-icon" icon={mfaMethodIcon[factor]} size={20} />
-          )}
+          <Icon className="factor-icon" icon={mfaMethodIcon[factor]} size={20} />
         </div>
       )}
       <div className="middle">