Merge pull request #3534 from matrix-org/dbkr/add_threepid_ui_auth

Support UI Auth on adding email addresses & phone numbers

src/AddThreepid.js

@@ -17,6 +17,8 @@ limitations under the License.
 */
 
 import MatrixClientPeg from './MatrixClientPeg';
+import sdk from './index';
+import Modal from './Modal';
 import { _t } from './languageHandler';
 import IdentityAuthClient from './IdentityAuthClient';
 
@@ -171,10 +173,29 @@ export default class AddThreepid {
                         id_access_token: identityAccessToken,
                     });
                 } else {
-                    await MatrixClientPeg.get().addThreePidOnly({
-                        sid: this.sessionId,
-                        client_secret: this.clientSecret,
-                    });
+                    try {
+                        await this._makeAddThreepidOnlyRequest();
+
+                        // The spec has always required this to use UI auth but synapse briefly
+                        // implemented it without, so this may just succeed and that's OK.
+                        return;
+                    } catch (e) {
+                        if (e.httpStatus !== 401 || !e.data || !e.data.flows) {
+                            // doesn't look like an interactive-auth failure
+                            throw e;
+                        }
+
+                        // pop up an interactive auth dialog
+                        const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
+
+                        const { finished } = Modal.createTrackedDialog('Add Email', '', InteractiveAuthDialog, {
+                            title: _t("Add Email Address"),
+                            matrixClient: MatrixClientPeg.get(),
+                            authData: e.data,
+                            makeRequest: this._makeAddThreepidOnlyRequest,
+                        });
+                        return finished;
+                    }
                 }
             } else {
                 await MatrixClientPeg.get().addThreePid({
@@ -193,6 +214,18 @@ export default class AddThreepid {
         }
     }
 
+    /**
+     * @param {Object} auth UI auth object
+     * @return {Promise<Object>} Response from /3pid/add call (in current spec, an empty object)
+     */
+    _makeAddThreepidOnlyRequest = (auth) => {
+        return MatrixClientPeg.get().addThreePidOnly({
+            sid: this.sessionId,
+            client_secret: this.clientSecret,
+            auth,
+        });
+    }
+
     /**
      * Takes a phone number verification code as entered by the user and validates
      * it with the ID server, then if successful, adds the phone number.
@@ -233,10 +266,29 @@ export default class AddThreepid {
                     id_access_token: await authClient.getAccessToken(),
                 });
             } else {
-                await MatrixClientPeg.get().addThreePidOnly({
-                    sid: this.sessionId,
-                    client_secret: this.clientSecret,
-                });
+                try {
+                    await this._makeAddThreepidOnlyRequest();
+
+                    // The spec has always required this to use UI auth but synapse briefly
+                    // implemented it without, so this may just succeed and that's OK.
+                    return;
+                } catch (e) {
+                    if (e.httpStatus !== 401 || !e.data || !e.data.flows) {
+                        // doesn't look like an interactive-auth failure
+                        throw e;
+                    }
+
+                    // pop up an interactive auth dialog
+                    const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
+
+                    const { finished } = Modal.createTrackedDialog('Add MSISDN', '', InteractiveAuthDialog, {
+                        title: _t("Add Phone Number"),
+                        matrixClient: MatrixClientPeg.get(),
+                        authData: e.data,
+                        makeRequest: this._makeAddThreepidOnlyRequest,
+                    });
+                    return finished;
+                }
             }
         } else {
             await MatrixClientPeg.get().addThreePid({

src/components/views/settings/account/EmailAddresses.js

@@ -201,7 +201,7 @@ export default class EmailAddresses extends React.Component {
                         "and then click continue again."),
                 });
             } else {
-                console.error("Unable to verify email address: " + err);
+                console.error("Unable to verify email address: ", err);
                 Modal.createTrackedDialog('Unable to verify email address', '', ErrorDialog, {
                     title: _t("Unable to verify email address."),
                     description: ((err && err.message) ? err.message : _t("Operation failed")),

src/i18n/strings/en_EN.json

@@ -1,7 +1,9 @@
 {
     "This email address is already in use": "This email address is already in use",
     "This phone number is already in use": "This phone number is already in use",
+    "Add Email Address": "Add Email Address",
     "Failed to verify email address: make sure you clicked the link in the email": "Failed to verify email address: make sure you clicked the link in the email",
+    "Add Phone Number": "Add Phone Number",
     "The platform you're on": "The platform you're on",
     "The version of Riot.im": "The version of Riot.im",
     "Whether or not you're logged in (we don't record your username)": "Whether or not you're logged in (we don't record your username)",