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

Support UI Auth on adding email addresses & phone numbers

Author: dbkr

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)",