Offer the sign-in the server actually allows

A second button beside the password one, needing no username or password
here because the whole point is that somebody else asks for them. The
address it produces opens in the real browser rather than a window of ours:
that is where a password manager, a passkey and a second factor already
work.

Co-Authored-By: Claude Opus 5 <[email protected]>

src/renderer/src/components/AccountsPanel.tsx

@@ -1228,25 +1228,44 @@ function MatrixForm(): JSX.Element {
           />
         </label>
       </div>
-      <button
-        type="button"
-        className="button"
-        disabled={!userId || !password}
-        onClick={() =>
-          void window.moho
-            .rpc('addMatrixAccount', {
-              homeserverUrl,
-              // Tolerate a pasted full MXID as well as a bare username: strip
-              // the leading @ and anything from the first ':' onward.
-              userId: userId.replace(/^@/, '').split(':')[0],
-              password
-            })
-            .then(() => store.setMatrixLoginStatus('Logging in…'))
-            .catch((e: Error) => store.toast('error', e.message))
-        }
-      >
-        Log in
-      </button>
+      <div className="field-row">
+        <button
+          type="button"
+          className="button"
+          disabled={!userId || !password}
+          onClick={() =>
+            void window.moho
+              .rpc('addMatrixAccount', {
+                homeserverUrl,
+                // Tolerate a pasted full MXID as well as a bare username:
+                // strip the leading @ and anything from the first ':' onward.
+                userId: userId.replace(/^@/, '').split(':')[0],
+                password
+              })
+              .then(() => store.setMatrixLoginStatus('Logging in…'))
+              .catch((e: Error) => store.toast('error', e.message))
+          }
+        >
+          Log in
+        </button>
+        {/* The other way in, and for many homeservers the only way: the
+            server's own web login in a browser, coming back with a one-time
+            token. Needs no username or password here because the point is
+            that somebody else asks for them. */}
+        <button
+          type="button"
+          className="button subtle"
+          disabled={!homeserverUrl}
+          onClick={() =>
+            void window.moho
+              .rpc('addMatrixAccountSso', { homeserverUrl })
+              .then(() => store.setMatrixLoginStatus('Opening your browser…'))
+              .catch((e: Error) => store.toast('error', e.message))
+          }
+        >
+          Sign in with SSO
+        </button>
+      </div>
       {status && <p className="small muted">{status}</p>}
       <p className="small muted">
         New sessions start unverified. Once logged in, verify this device from another signed-in

src/renderer/src/state/store.ts

@@ -1787,6 +1787,11 @@ export class ChatStore {
 
       case 'matrixLoginStatus':
         this.set({ matrixLoginStatus: data.detail || '' })
+        // An SSO sign-in arrives with the address of the server's own login
+        // page. Opened in the real browser rather than in a window of ours:
+        // it is where somebody's password manager, passkey and second factor
+        // already live, and none of that should have to work in here.
+        if (typeof data.url === 'string' && data.url) void window.moho.openExternal(data.url)
         break
       case 'matrixLoginResult':
         this.set({ matrixLoginStatus: data.error || '' })