sso login confirm for upload cross signing keys

[drmjo]

Description

I have made a prototype of how this SSO flow could be possible .. any guidance to make this look pretty please let me know .. this is my first time using cinny and i noticed when validation of the upload endpoint is required the system only work when the flow is password or else it ignores it ..

this is using the "fallback" login method to let the homeserver handle the auth and validate the session.

Fixes # #1399

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

[aceArt-GmbH]

Works!

To improve the UI, you should add a gap between the buttons and the text.

display: flex;
gap: var(--sp-normal);

When pressing "Confirm" it just tries to do the normal upload which does not work.
Errors are logged, but no user feedback is shown.
Maybe only show "Confirm" after pressing "Single Sign-On" and hide "Single Sign-On" then?
(Element does a similar thing. They switch dialog)

[aceArt-GmbH]

This PR also fixes deleting devices!

I changed your code a bit.
Removed the log and unused variable and also show a single button at a time.
Also updated the style, feel free to take it

adapted patch

diff --git a/src/app/organisms/settings/AuthRequest.jsx b/src/app/organisms/settings/AuthRequest.jsx
index ca07c2a22..3f5a1526c 100644
--- a/src/app/organisms/settings/AuthRequest.jsx
+++ b/src/app/organisms/settings/AuthRequest.jsx
@@ -22,6 +22,40 @@ const getAuthId = (password) => ({
   },
 });
 
+function SsoAuthRequest({ onComplete, makeRequest, session }) {
+    const mountStore = useStore();
+    const [ssoPressed, setSsoPressed] = useState(false);
+    const handleSso = async () => {
+      const baseUrl = `${initMatrix.matrixClient.baseUrl}/_matrix/client/v3/auth/m.login.sso/fallback/web`;
+      window.open(`${baseUrl}?session=${session}`, "_blank");
+      setSsoPressed(true);
+    }
+
+    const handleConfirm = async () => {
+      mountStore.setItem(true);
+      await makeRequest({session});
+      if (!mountStore.getItem()) return;
+      onComplete(true);
+    }
+
+    return (
+      <div className="auth-request">
+        <div className="sso-dialog">
+          <Text variant="s1" weight="medium">Use Single Sign On to continue</Text>
+          <Text>To continue, use Single Sign On to prove your identity.</Text>
+          <div className="buttons-container">
+            { ssoPressed ? <Button variant="primary" onClick={handleConfirm}>Confirm</Button> : <Button variant="primary" onClick={handleSso}>Single Sign-On</Button>}
+          </div>
+        </div>
+      </div>
+    );
+}
+SsoAuthRequest.propTypes = {
+  onComplete: PropTypes.func.isRequired,
+  makeRequest: PropTypes.func.isRequired,
+  session: PropTypes.string.isRequired,
+};
+
 function AuthRequest({ onComplete, makeRequest }) {
   const [status, setStatus] = useState(false);
   const mountStore = useStore();
@@ -88,29 +122,54 @@ export const authRequest = async (title, makeRequest) => {
     lastUsedPassword = undefined;
     if (e.httpStatus !== 401 || e.data?.flows === undefined) return false;
 
-    const { flows } = e.data;
-    const canUsePassword = flows.find((f) => f.stages.includes('m.login.password'));
-    if (!canUsePassword) return false;
-
-    return new Promise((resolve) => {
-      let isCompleted = false;
-      openReusableDialog(
-        <Text variant="s1" weight="medium">{title}</Text>,
-        (requestClose) => (
-          <AuthRequest
-            onComplete={(done) => {
-              isCompleted = true;
-              resolve(done);
-              requestClose();
-            }}
-            makeRequest={makeRequest}
-          />
-        ),
-        () => {
-          if (!isCompleted) resolve(false);
-        },
-      );
-    });
+    const { flows, session } = e.data;
+    const canUsePassword = flows.find((f) => f.stages.includes('m.login.password')) || false;
+
+    let promise
+    if (canUsePassword) {
+      promise = new Promise((resolve) => {
+        let isCompleted = false;
+        openReusableDialog(
+          <Text variant="s1" weight="medium">{title}</Text>,
+          (requestClose) => (
+            <AuthRequest
+              onComplete={(done) => {
+                isCompleted = true;
+                resolve(done);
+                requestClose();
+              }}
+              makeRequest={makeRequest}
+            />
+          ),
+          () => {
+            if (!isCompleted) resolve(false);
+          },
+        );
+      });
+    } else {
+      promise = new Promise((resolve) => {
+        let isCompleted = false;
+        openReusableDialog(
+          <Text variant="s1" weight="medium">{title}</Text>,
+          (requestClose) => (
+            <SsoAuthRequest
+              session={session}
+              onComplete={(done) => {
+                isCompleted = true;
+                resolve(done);
+                requestClose();
+              }}
+              makeRequest={makeRequest}
+            />
+          ),
+          () => {
+            if (!isCompleted) resolve(false);
+          },
+        );
+      });
+    }
+
+    return promise
   }
 };
 
diff --git a/src/app/organisms/settings/AuthRequest.scss b/src/app/organisms/settings/AuthRequest.scss
index 35e95bf2b..f38377072 100644
--- a/src/app/organisms/settings/AuthRequest.scss
+++ b/src/app/organisms/settings/AuthRequest.scss
@@ -9,4 +9,10 @@
     color: var(--tc-danger-high);
     margin-top: var(--sp-ultra-tight) !important;
   }
+}
+
+.sso-dialog {
+  & > .text {
+    padding-bottom: var(--sp-normal);
+  }
 }
\ No newline at end of file