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, @@ -32,10 +32,10 @@ encryptionKey: string, message: QRCodeAuthMessage, ) => Promise, - performBackupRestore?: (backupKeys: BackupKeys) => Promise, + +performBackupRestore?: (backupKeys: BackupKeys) => Promise, }; -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(); 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 ( - <> - - - Log in to Comm - - Open the Comm app on your phone and scan the QR code below + + Log in to Comm + + Open the Comm app on your phone and scan the QR code below + + + + How to find the scanner: + + Go to + Profile + + + Select + Linked devices + + + Click + Add + on the top right - - - How to find the scanner: - - Go to - Profile - - - Select - Linked devices - - - Click - Add - on the top right - - - + ); } 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 ( - <> - -
-
Log in to Comm
-
- Open the Comm app on your phone and scan the QR code below +
+
Log in to Comm
+
+ Open the Comm app on your phone and scan the QR code below +
+ +
+
How to find the scanner:
+
+ Go to Profile +
+
+ Select Linked devices
- -
-
How to find the scanner:
-
- Go to Profile -
-
- Select Linked devices -
-
- Click Add on the top right -
+
+ Click Add on the top right
- +
); }