diff --git a/lib/components/qr-auth-handler.react.js b/lib/hooks/qr-auth.js
rename from lib/components/qr-auth-handler.react.js
rename to lib/hooks/qr-auth.js
--- a/lib/components/qr-auth-handler.react.js
+++ b/lib/hooks/qr-auth.js
@@ -20,7 +20,7 @@
   type QRCodeAuthMessagePayload,
 } from '../types/tunnelbroker/qr-code-auth-message-types.js';
 
-type QRAuthHandlerProps = {
+type QRAuthHandlerInput = {
   +secondaryDeviceID: ?string,
   +aesKey: ?string,
   +performSecondaryDeviceRegistration: (userID: string) => Promise<void>,
@@ -32,10 +32,10 @@
     encryptionKey: string,
     message: QRCodeAuthMessage,
   ) => Promise<?QRCodeAuthMessagePayload>,
-  performBackupRestore?: (backupKeys: BackupKeys) => Promise<void>,
+  +performBackupRestore?: (backupKeys: BackupKeys) => Promise<void>,
 };
 
-function QRAuthHandler(props: QRAuthHandlerProps): React.Node {
+function useQRAuth(input: QRAuthHandlerInput) {
   const {
     secondaryDeviceID,
     aesKey,
@@ -43,7 +43,7 @@
     composeMessage,
     performSecondaryDeviceRegistration,
     performBackupRestore,
-  } = props;
+  } = input;
   const [primaryDeviceID, setPrimaryDeviceID] = React.useState<?string>();
   const {
     setUnauthorizedDeviceID,
@@ -171,7 +171,6 @@
     removeListener,
     tunnelbrokerMessageListener,
   ]);
-  return null;
 }
 
-export { QRAuthHandler };
+export { useQRAuth };
diff --git a/native/qr-code/qr-code-screen.react.js b/native/qr-code/qr-code-screen.react.js
--- a/native/qr-code/qr-code-screen.react.js
+++ b/native/qr-code/qr-code-screen.react.js
@@ -5,8 +5,8 @@
 import { View, Text } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 
-import { QRAuthHandler } from 'lib/components/qr-auth-handler.react.js';
 import { qrCodeLinkURL } from 'lib/facts/links.js';
+import { useQRAuth } from 'lib/hooks/qr-auth.js';
 import { uintArrayToHexString } from 'lib/media/data-utils.js';
 import { IdentityClientContext } from 'lib/shared/identity-client-context.js';
 import { useTunnelbroker } from 'lib/tunnelbroker/tunnelbroker-context.js';
@@ -99,41 +99,44 @@
     [qrData],
   );
 
+  const qrAuthInput = React.useMemo(
+    () => ({
+      secondaryDeviceID: qrData?.deviceID,
+      aesKey: qrData?.aesKey,
+      performSecondaryDeviceRegistration: performRegistration,
+      composeMessage: composeTunnelbrokerQRAuthMessage,
+      processMessage: parseTunnelbrokerQRAuthMessage,
+      performBackupRestore,
+    }),
+    [qrData, performRegistration],
+  );
+  useQRAuth(qrAuthInput);
+
   const styles = useStyles(unboundStyles);
   return (
-    <>
-      <QRAuthHandler
-        secondaryDeviceID={qrData?.deviceID}
-        aesKey={qrData?.aesKey}
-        performSecondaryDeviceRegistration={performRegistration}
-        composeMessage={composeTunnelbrokerQRAuthMessage}
-        processMessage={parseTunnelbrokerQRAuthMessage}
-        performBackupRestore={performBackupRestore}
-      />
-      <View style={styles.container}>
-        <Text style={styles.heading}>Log in to Comm</Text>
-        <Text style={styles.headingSubtext}>
-          Open the Comm app on your phone and scan the QR code below
+    <View style={styles.container}>
+      <Text style={styles.heading}>Log in to Comm</Text>
+      <Text style={styles.headingSubtext}>
+        Open the Comm app on your phone and scan the QR code below
+      </Text>
+      <QRCode value={qrCodeURL} size={200} />
+      <View style={styles.instructionsBox}>
+        <Text style={styles.instructionsTitle}>How to find the scanner:</Text>
+        <Text style={styles.instructionsStep}>
+          <Text>Go to </Text>
+          <Text style={styles.instructionsBold}>Profile</Text>
+        </Text>
+        <Text style={styles.instructionsStep}>
+          <Text>Select </Text>
+          <Text style={styles.instructionsBold}>Linked devices </Text>
+        </Text>
+        <Text style={styles.instructionsStep}>
+          <Text>Click </Text>
+          <Text style={styles.instructionsBold}>Add </Text>
+          <Text>on the top right</Text>
         </Text>
-        <QRCode value={qrCodeURL} size={200} />
-        <View style={styles.instructionsBox}>
-          <Text style={styles.instructionsTitle}>How to find the scanner:</Text>
-          <Text style={styles.instructionsStep}>
-            <Text>Go to </Text>
-            <Text style={styles.instructionsBold}>Profile</Text>
-          </Text>
-          <Text style={styles.instructionsStep}>
-            <Text>Select </Text>
-            <Text style={styles.instructionsBold}>Linked devices </Text>
-          </Text>
-          <Text style={styles.instructionsStep}>
-            <Text>Click </Text>
-            <Text style={styles.instructionsBold}>Add </Text>
-            <Text>on the top right</Text>
-          </Text>
-        </View>
       </View>
-    </>
+    </View>
   );
 }
 
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
@@ -5,8 +5,8 @@
 import * as React from 'react';
 
 import { identityLogInActionTypes } from 'lib/actions/user-actions.js';
-import { QRAuthHandler } from 'lib/components/qr-auth-handler.react.js';
 import { qrCodeLinkURL } from 'lib/facts/links.js';
+import { useQRAuth } from 'lib/hooks/qr-auth.js';
 import { generateKeyCommon } from 'lib/media/aes-crypto-utils-common.js';
 import * as AES from 'lib/media/aes-crypto-utils-common.js';
 import { hexToUintArray, uintArrayToHexString } from 'lib/media/data-utils.js';
@@ -126,35 +126,38 @@
     [qrData],
   );
 
+  const qrAuthInput = React.useMemo(
+    () => ({
+      secondaryDeviceID: qrData?.deviceID,
+      aesKey: qrData?.aesKey,
+      performSecondaryDeviceRegistration: performRegistration,
+      composeMessage: composeTunnelbrokerMessage,
+      processMessage: parseTunnelbrokerMessage,
+    }),
+    [qrData, performRegistration],
+  );
+  useQRAuth(qrAuthInput);
+
   return (
-    <>
-      <QRAuthHandler
-        secondaryDeviceID={qrData?.deviceID}
-        aesKey={qrData?.aesKey}
-        performSecondaryDeviceRegistration={performRegistration}
-        composeMessage={composeTunnelbrokerMessage}
-        processMessage={parseTunnelbrokerMessage}
-      />
-      <div className={css.qrContainer}>
-        <div className={css.title}>Log in to Comm</div>
-        <div className={css.scanInstructions}>
-          Open the Comm app on your phone and scan the QR code below
+    <div className={css.qrContainer}>
+      <div className={css.title}>Log in to Comm</div>
+      <div className={css.scanInstructions}>
+        Open the Comm app on your phone and scan the QR code below
+      </div>
+      <QRCodeSVG value={qrCodeURL} size={300} marginSize={4} level="L" />
+      <div className={css.instructionsContainer}>
+        <div className={css.instructionsTitle}>How to find the scanner:</div>
+        <div className={css.instructionsStep}>
+          Go to <strong>Profile</strong>
+        </div>
+        <div className={css.instructionsStep}>
+          Select <strong>Linked devices</strong>
         </div>
-        <QRCodeSVG value={qrCodeURL} size={300} marginSize={4} level="L" />
-        <div className={css.instructionsContainer}>
-          <div className={css.instructionsTitle}>How to find the scanner:</div>
-          <div className={css.instructionsStep}>
-            Go to <strong>Profile</strong>
-          </div>
-          <div className={css.instructionsStep}>
-            Select <strong>Linked devices</strong>
-          </div>
-          <div className={css.instructionsStep}>
-            Click <strong>Add</strong> on the top right
-          </div>
+        <div className={css.instructionsStep}>
+          Click <strong>Add</strong> on the top right
         </div>
       </div>
-    </>
+    </div>
   );
 }