[PM-6302, PM-6303] Add duo state and connector message on browser/desktop (#7957)

* pass state for clients

* use redirect connector to set cookie with translations

* simplify duo redirect url validation

apps/web/src/app/auth/two-factor.component.ts

@@ -117,11 +117,22 @@ export class TwoFactorComponent extends BaseTwoFactorComponent implements OnDest
     }
   }
 
-  private handleDuoResultMessage = async (msg: { data: { code: string } }) => {
-    this.token = msg.data.code;
+  private handleDuoResultMessage = async (msg: { data: { code: string; state: string } }) => {
+    this.token = msg.data.code + "|" + msg.data.state;
     await this.submit();
   };
 
+  override launchDuoFrameless() {
+    const duoHandOffMessage = {
+      title: this.i18nService.t("youSuccessfullyLoggedIn"),
+      message: this.i18nService.t("thisWindowWillCloseIn5Seconds"),
+      buttonText: this.i18nService.t("close"),
+      isCountdown: true,
+    };
+    document.cookie = `duoHandOffMessage=${JSON.stringify(duoHandOffMessage)}; SameSite=strict;`;
+    this.platformUtilsService.launchUri(this.duoFramelessUrl);
+  }
+
   async ngOnDestroy() {
     super.ngOnDestroy();
 

apps/web/src/connectors/duo-redirect.ts

@@ -5,24 +5,57 @@ require("./duo-redirect.scss");
 const mobileDesktopCallback = "bitwarden://duo-callback";
 
 window.addEventListener("load", () => {
+  const redirectUrl = getQsParam("duoFramelessUrl");
+  const handOffMessage = getQsParam("handOffMessage");
+
+  if (redirectUrl) {
+    redirectToDuoFrameless(redirectUrl, handOffMessage);
+    return;
+  }
+
   const client = getQsParam("client");
   const code = getQsParam("code");
+  const state = getQsParam("state");
 
   if (client === "web") {
     const channel = new BroadcastChannel("duoResult");
 
-    channel.postMessage({ code: code });
+    channel.postMessage({ code: code, state: state });
     channel.close();
 
     processAndDisplayHandoffMessage();
   } else if (client === "browser") {
-    window.postMessage({ command: "duoResult", code: code }, "*");
+    window.postMessage({ command: "duoResult", code: code, state: state }, "*");
     processAndDisplayHandoffMessage();
   } else if (client === "mobile" || client === "desktop") {
-    document.location.replace(mobileDesktopCallback + "?code=" + encodeURIComponent(code));
+    processAndDisplayHandoffMessage();
+    document.location.replace(
+      mobileDesktopCallback +
+        "?code=" +
+        encodeURIComponent(code) +
+        "&state=" +
+        encodeURIComponent(state),
+    );
   }
 });
 
+/**
+ * In order to set a cookie with the hand off message, some clients need to use
+ * this connector as a middleman to set the cookie before continuing to the duo url
+ * @param redirectUrl the duo auth url
+ * @param handOffMessage message to save as cookie
+ */
+function redirectToDuoFrameless(redirectUrl: string, handOffMessage: string) {
+  const validateUrl = new URL(redirectUrl);
+
+  if (validateUrl.protocol !== "https:" || !validateUrl.hostname.endsWith("duosecurity.com")) {
+    throw new Error("Invalid redirect URL");
+  }
+
+  document.cookie = `duoHandOffMessage=${handOffMessage}; SameSite=strict;`;
+  window.location.href = decodeURIComponent(redirectUrl);
+}
+
 /**
  * The `duoHandOffMessage` must be set in the client via a cookie. This is so
  * we can make use of i18n translations.
@@ -58,6 +91,11 @@ window.addEventListener("load", () => {
  *
  * If `isCountdown` is undefined/false, there will be no countdown timer and the user
  * will simply have to close the tab manually.
+ *
+ * If `buttonText` is undefined, there will be no close button.
+ *
+ * Note: browsers won't let javascript close a tab that wasn't opened by javascript,
+ * so some clients may not be able to take advantage of the countdown timer/close button.
  */
 function processAndDisplayHandoffMessage() {
   const handOffMessageCookie = ("; " + document.cookie)
@@ -93,7 +131,9 @@ function processAndDisplayHandoffMessage() {
 
   content.appendChild(h1);
   content.appendChild(p);
-  content.appendChild(button);
+  if (handOffMessage.buttonText) {
+    content.appendChild(button);
+  }
 
   // Countdown timer (closes tab upon completion)
   if (handOffMessage.isCountdown) {

apps/web/src/locales/en/messages.json

@@ -4043,6 +4043,12 @@
   "ssoHandOff": {
     "message": "You may now close this tab and continue in the extension."
   },
+  "youSuccessfullyLoggedIn": {
+    "message": "You successfully logged in"
+  },
+  "thisWindowWillCloseIn5Seconds": {
+    "message": "This window will automatically close in 5 seconds"
+  },
   "includeAllTeamsFeatures": {
     "message": "All Teams features, plus:"
   },