diff --git a/web/account/qr-code-login.react.js b/web/account/qr-code-login.react.js
--- a/web/account/qr-code-login.react.js
+++ b/web/account/qr-code-login.react.js
@@ -3,6 +3,7 @@
 import { QRCodeSVG } from 'qrcode.react';
 import * as React from 'react';
 
+import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { qrCodeLinkURL } from 'lib/facts/links.js';
 import { useSecondaryDeviceLogIn } from 'lib/hooks/login-hooks.js';
 import { useQRAuth } from 'lib/hooks/qr-auth.js';
@@ -19,8 +20,10 @@
   type QRCodeAuthMessagePayload,
 } from 'lib/types/tunnelbroker/qr-code-auth-message-types.js';
 import { getContentSigningKey } from 'lib/utils/crypto-utils.js';
+import { getMessageForException } from 'lib/utils/errors.js';
 
 import css from './qr-code-login.css';
+import VersionUnsupportedModal from '../modals/version-unsupported-modal.react.js';
 import {
   base64DecodeBuffer,
   base64EncodeBuffer,
@@ -82,6 +85,8 @@
     }
   }, [setUnauthorizedDeviceID]);
 
+  const { pushModal } = useModalContext();
+
   const logInSecondaryDevice = useSecondaryDeviceLogIn();
   const performRegistration = React.useCallback(
     async (userID: string) => {
@@ -89,10 +94,17 @@
         await logInSecondaryDevice(userID);
       } catch (err) {
         console.error('Secondary device registration error:', err);
+        const messageForException = getMessageForException(err);
+        if (
+          messageForException === 'client_version_unsupported' ||
+          messageForException === 'Unsupported version'
+        ) {
+          pushModal(<VersionUnsupportedModal />);
+        }
         void generateQRCode();
       }
     },
-    [logInSecondaryDevice, generateQRCode],
+    [logInSecondaryDevice, pushModal, generateQRCode],
   );
 
   React.useEffect(() => {
diff --git a/web/components/log-out-if-missing-csat-handler.react.js b/web/components/log-out-if-missing-csat-handler.react.js
--- a/web/components/log-out-if-missing-csat-handler.react.js
+++ b/web/components/log-out-if-missing-csat-handler.react.js
@@ -10,7 +10,7 @@
 import { useSelector } from 'lib/utils/redux-utils.js';
 import { usingCommServicesAccessToken } from 'lib/utils/services-utils.js';
 
-import css from './version-handler.css';
+import css from './missing-csat-modal.css';
 import Modal from '../modals/modal.react.js';
 
 type Props = {
diff --git a/web/components/missing-csat-modal.css b/web/components/missing-csat-modal.css
new file mode 100644
--- /dev/null
+++ b/web/components/missing-csat-modal.css
@@ -0,0 +1,6 @@
+.modalContent {
+  color: var(--text-background-primary-default);
+  font-size: var(--s-font-14);
+  margin-top: 8px;
+  display: flex;
+}
diff --git a/web/components/version-handler.css b/web/components/version-handler.css
deleted file mode 100644
--- a/web/components/version-handler.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.modalContent {
-  color: var(--text-background-primary-default);
-  font-size: var(--s-font-14);
-  margin-top: 8px;
-  display: flex;
-}
-
-.wrapper {
-  display: flex;
-  flex-shrink: 1;
-  justify-content: center;
-}
-
-.ancestryContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 40px;
-  background-color: var(--frame-background-tertiary-default);
-  margin-top: 20px;
-}
diff --git a/web/components/version-handler.react.js b/web/components/version-handler.react.js
--- a/web/components/version-handler.react.js
+++ b/web/components/version-handler.react.js
@@ -5,20 +5,8 @@
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { allConnectionInfosSelector } from 'lib/selectors/keyserver-selectors.js';
 
-import css from './version-handler.css';
-import Modal from '../modals/modal.react.js';
+import VersionUnsupportedModal from '../modals/version-unsupported-modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
-import { getVersionUnsupportedError } from '../utils/version-utils.js';
-
-function VersionUnsupportedModal(): React.Node {
-  const { popModal } = useModalContext();
-  const message = getVersionUnsupportedError();
-  return (
-    <Modal name="App version unsupported" onClose={popModal} size="large">
-      <div className={css.modalContent}>{message}</div>
-    </Modal>
-  );
-}
 
 function MinVersionHandler(): null {
   const connections = useSelector(allConnectionInfosSelector);
diff --git a/web/modals/version-unsupported-modal.css b/web/modals/version-unsupported-modal.css
new file mode 100644
--- /dev/null
+++ b/web/modals/version-unsupported-modal.css
@@ -0,0 +1,6 @@
+.modalContent {
+  color: var(--text-background-primary-default);
+  font-size: var(--s-font-14);
+  margin-top: 8px;
+  display: flex;
+}
diff --git a/web/modals/version-unsupported-modal.react.js b/web/modals/version-unsupported-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/version-unsupported-modal.react.js
@@ -0,0 +1,21 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import css from './version-unsupported-modal.css';
+import Modal from '../modals/modal.react.js';
+import { getVersionUnsupportedError } from '../utils/version-utils.js';
+
+function VersionUnsupportedModal(): React.Node {
+  const { popModal } = useModalContext();
+  const message = getVersionUnsupportedError();
+  return (
+    <Modal name="App version unsupported" onClose={popModal} size="large">
+      <div className={css.modalContent}>{message}</div>
+    </Modal>
+  );
+}
+
+export default VersionUnsupportedModal;