diff --git a/lib/types/tunnelbroker/peer-to-peer-message-types.js b/lib/types/tunnelbroker/peer-to-peer-message-types.js index 6e63d3412..34195634a 100644 --- a/lib/types/tunnelbroker/peer-to-peer-message-types.js +++ b/lib/types/tunnelbroker/peer-to-peer-message-types.js @@ -1,81 +1,100 @@ // @flow import type { TInterface, TUnion } from 'tcomb'; import t from 'tcomb'; import { tShape, tString } from '../../utils/validation-utils.js'; +import { + signedDeviceListValidator, + type SignedDeviceList, +} from '../identity-service-types.js'; export type SenderInfo = { +userID: string, +deviceID: string, }; const senderInfoValidator: TInterface = tShape({ userID: t.String, deviceID: t.String, }); export const peerToPeerMessageTypes = Object.freeze({ OUTBOUND_SESSION_CREATION: 'OutboundSessionCreation', ENCRYPTED_MESSAGE: 'EncryptedMessage', REFRESH_KEY_REQUEST: 'RefreshKeyRequest', QR_CODE_AUTH_MESSAGE: 'QRCodeAuthMessage', + DEVICE_LIST_UPDATED: 'DeviceListUpdated', }); export type OutboundSessionCreation = { +type: 'OutboundSessionCreation', +senderInfo: SenderInfo, +encryptedContent: string, }; export const outboundSessionCreationValidator: TInterface = tShape({ type: tString(peerToPeerMessageTypes.OUTBOUND_SESSION_CREATION), senderInfo: senderInfoValidator, encryptedContent: t.String, }); export type EncryptedMessage = { +type: 'EncryptedMessage', +senderInfo: SenderInfo, +encryptedContent: string, }; export const encryptedMessageValidator: TInterface = tShape({ type: tString(peerToPeerMessageTypes.ENCRYPTED_MESSAGE), senderInfo: senderInfoValidator, encryptedContent: t.String, }); export type RefreshKeyRequest = { +type: 'RefreshKeyRequest', +deviceID: string, +numberOfKeys: number, }; export const refreshKeysRequestValidator: TInterface = tShape({ type: tString(peerToPeerMessageTypes.REFRESH_KEY_REQUEST), deviceID: t.String, numberOfKeys: t.Number, }); export type QRCodeAuthMessage = { +type: 'QRCodeAuthMessage', +encryptedContent: string, }; export const qrCodeAuthMessageValidator: TInterface = tShape({ type: tString(peerToPeerMessageTypes.QR_CODE_AUTH_MESSAGE), encryptedContent: t.String, }); +export type DeviceListUpdated = { + +type: 'DeviceListUpdated', + +userID: string, + +signedDeviceList: SignedDeviceList, +}; +export const deviceListUpdatedValidator: TInterface = + tShape({ + type: tString(peerToPeerMessageTypes.DEVICE_LIST_UPDATED), + userID: t.String, + signedDeviceList: signedDeviceListValidator, + }); + export type PeerToPeerMessage = | OutboundSessionCreation | EncryptedMessage | RefreshKeyRequest - | QRCodeAuthMessage; + | QRCodeAuthMessage + | DeviceListUpdated; export const peerToPeerMessageValidator: TUnion = t.union([ outboundSessionCreationValidator, encryptedMessageValidator, refreshKeysRequestValidator, qrCodeAuthMessageValidator, + deviceListUpdatedValidator, ]); diff --git a/native/profile/secondary-device-qr-code-scanner.react.js b/native/profile/secondary-device-qr-code-scanner.react.js index 058089aa1..fa13572a5 100644 --- a/native/profile/secondary-device-qr-code-scanner.react.js +++ b/native/profile/secondary-device-qr-code-scanner.react.js @@ -1,272 +1,316 @@ // @flow import { useNavigation } from '@react-navigation/native'; import { BarCodeScanner, type BarCodeEvent } from 'expo-barcode-scanner'; import invariant from 'invariant'; import * as React from 'react'; import { View } from 'react-native'; import { parseDataFromDeepLink } from 'lib/facts/links.js'; import { IdentityClientContext } from 'lib/shared/identity-client-context.js'; import { useTunnelbroker } from 'lib/tunnelbroker/tunnelbroker-context.js'; import type { RawDeviceList } from 'lib/types/identity-service-types.js'; import { tunnelbrokerMessageTypes, type TunnelbrokerMessage, } from 'lib/types/tunnelbroker/messages.js'; import { peerToPeerMessageTypes, peerToPeerMessageValidator, type PeerToPeerMessage, } from 'lib/types/tunnelbroker/peer-to-peer-message-types.js'; import { qrCodeAuthMessageTypes } from 'lib/types/tunnelbroker/qr-code-auth-message-types.js'; import { createQRAuthTunnelbrokerMessage, parseQRAuthTunnelbrokerMessage, } from 'lib/utils/qr-code-auth.js'; import type { ProfileNavigationProp } from './profile.react.js'; import type { NavigationRoute } from '../navigation/route-names.js'; import { useStyles } from '../themes/colors.js'; import Alert from '../utils/alert.js'; const barCodeTypes = [BarCodeScanner.Constants.BarCodeType.qr]; type Props = { +navigation: ProfileNavigationProp<'SecondaryDeviceQRCodeScanner'>, +route: NavigationRoute<'SecondaryDeviceQRCodeScanner'>, }; // eslint-disable-next-line no-unused-vars function SecondaryDeviceQRCodeScanner(props: Props): React.Node { const [hasPermission, setHasPermission] = React.useState(null); const [scanned, setScanned] = React.useState(false); const styles = useStyles(unboundStyles); const navigation = useNavigation(); const tunnelbrokerContext = useTunnelbroker(); const identityContext = React.useContext(IdentityClientContext); invariant(identityContext, 'identity context not set'); const aes256Key = React.useRef(null); const secondaryDeviceID = React.useRef(null); + const broadcastDeviceListUpdate = React.useCallback(async () => { + invariant(identityContext, 'identity context not set'); + const { getAuthMetadata, identityClient } = identityContext; + const { userID } = await getAuthMetadata(); + if (!userID) { + throw new Error('missing auth metadata'); + } + + const deviceLists = + await identityClient.getDeviceListHistoryForUser(userID); + invariant(deviceLists.length > 0, 'received empty device list history'); + + const lastSignedDeviceList = deviceLists[deviceLists.length - 1]; + const deviceList: RawDeviceList = JSON.parse( + lastSignedDeviceList.rawDeviceList, + ); + + const promises = deviceList.devices.map(recipient => + tunnelbrokerContext.sendMessage({ + deviceID: recipient, + payload: JSON.stringify({ + type: peerToPeerMessageTypes.DEVICE_LIST_UPDATED, + userID, + signedDeviceList: lastSignedDeviceList, + }), + }), + ); + await Promise.all(promises); + }, [identityContext, tunnelbrokerContext]); + const addDeviceToList = React.useCallback( async (newDeviceID: string) => { const { getDeviceListHistoryForUser, updateDeviceList } = identityContext.identityClient; invariant( updateDeviceList, 'updateDeviceList() should be defined for primary device', ); const authMetadata = await identityContext.getAuthMetadata(); if (!authMetadata?.userID) { throw new Error('missing auth metadata'); } const deviceLists = await getDeviceListHistoryForUser( authMetadata.userID, ); invariant(deviceLists.length > 0, 'received empty device list history'); const lastSignedDeviceList = deviceLists[deviceLists.length - 1]; const deviceList: RawDeviceList = JSON.parse( lastSignedDeviceList.rawDeviceList, ); const { devices } = deviceList; if (devices.includes(newDeviceID)) { return; } const newDeviceList: RawDeviceList = { devices: [...devices, newDeviceID], timestamp: Date.now(), }; await updateDeviceList({ rawDeviceList: JSON.stringify(newDeviceList), }); }, [identityContext], ); const tunnelbrokerMessageListener = React.useCallback( async (message: TunnelbrokerMessage) => { const encryptionKey = aes256Key.current; const targetDeviceID = secondaryDeviceID.current; if (!encryptionKey || !targetDeviceID) { return; } if (message.type !== tunnelbrokerMessageTypes.MESSAGE_TO_DEVICE) { return; } let innerMessage: PeerToPeerMessage; try { innerMessage = JSON.parse(message.payload); } catch { return; } if ( !peerToPeerMessageValidator.is(innerMessage) || innerMessage.type !== peerToPeerMessageTypes.QR_CODE_AUTH_MESSAGE ) { return; } const payload = parseQRAuthTunnelbrokerMessage( encryptionKey, innerMessage, ); if ( payload?.type !== qrCodeAuthMessageTypes.SECONDARY_DEVICE_REGISTRATION_SUCCESS ) { return; } + + void broadcastDeviceListUpdate(); + + const backupKeyMessage = createQRAuthTunnelbrokerMessage(encryptionKey, { + type: qrCodeAuthMessageTypes.BACKUP_DATA_KEY_MESSAGE, + backupID: 'stub', + backupDataKey: 'stub', + backupLogDataKey: 'stub', + }); + await tunnelbrokerContext.sendMessage({ + deviceID: targetDeviceID, + payload: JSON.stringify(backupKeyMessage), + }); + Alert.alert('Device added', 'Device registered successfully', [ { text: 'OK' }, ]); }, - [], + [tunnelbrokerContext, broadcastDeviceListUpdate], ); React.useEffect(() => { tunnelbrokerContext.addListener(tunnelbrokerMessageListener); return () => { tunnelbrokerContext.removeListener(tunnelbrokerMessageListener); }; }, [tunnelbrokerMessageListener, tunnelbrokerContext]); React.useEffect(() => { void (async () => { const { status } = await BarCodeScanner.requestPermissionsAsync(); setHasPermission(status === 'granted'); if (status !== 'granted') { Alert.alert( 'No access to camera', 'Please allow Comm to access your camera in order to scan the QR code.', [{ text: 'OK' }], ); navigation.goBack(); } })(); }, [navigation]); const onConnect = React.useCallback( async (barCodeEvent: BarCodeEvent) => { const { data } = barCodeEvent; const parsedData = parseDataFromDeepLink(data); const keysMatch = parsedData?.data?.keys; if (!parsedData || !keysMatch) { Alert.alert( 'Scan failed', 'QR code does not contain a valid pair of keys.', [{ text: 'OK' }], ); return; } const keys = JSON.parse(decodeURIComponent(keysMatch)); const { aes256, ed25519 } = keys; aes256Key.current = aes256; secondaryDeviceID.current = ed25519; try { const { deviceID: primaryDeviceID, userID } = await identityContext.getAuthMetadata(); if (!primaryDeviceID || !userID) { throw new Error('missing auth metadata'); } await addDeviceToList(ed25519); const message = createQRAuthTunnelbrokerMessage(aes256, { type: qrCodeAuthMessageTypes.DEVICE_LIST_UPDATE_SUCCESS, userID, primaryDeviceID, }); await tunnelbrokerContext.sendMessage({ deviceID: ed25519, payload: JSON.stringify(message), }); } catch (err) { console.log('Primary device error:', err); Alert.alert( 'Adding device failed', 'Failed to update the device list', [{ text: 'OK' }], ); navigation.goBack(); } }, [tunnelbrokerContext, addDeviceToList, identityContext, navigation], ); const onCancelScan = React.useCallback(() => setScanned(false), []); const handleBarCodeScanned = React.useCallback( (barCodeEvent: BarCodeEvent) => { setScanned(true); Alert.alert( 'Connect with this device?', 'Are you sure you want to allow this device to log in to your account?', [ { text: 'Cancel', style: 'cancel', onPress: onCancelScan, }, { text: 'Connect', onPress: () => onConnect(barCodeEvent), }, ], { cancelable: false }, ); }, [onCancelScan, onConnect], ); if (hasPermission === null) { return ; } // Note: According to the BarCodeScanner Expo docs, we should adhere to two // guidances when using the BarCodeScanner: // 1. We should specify the potential barCodeTypes we want to scan for to // minimize battery usage. // 2. We should set the onBarCodeScanned callback to undefined if it scanned // in order to 'pause' the scanner from continuing to scan while we // process the data from the scan. // See: https://docs.expo.io/versions/latest/sdk/bar-code-scanner return ( ); } const unboundStyles = { container: { flex: 1, flexDirection: 'column', justifyContent: 'center', }, scanner: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, }, }; export default SecondaryDeviceQRCodeScanner; diff --git a/native/qr-code/qr-code-screen.react.js b/native/qr-code/qr-code-screen.react.js index f8c59b5ac..8c70acafc 100644 --- a/native/qr-code/qr-code-screen.react.js +++ b/native/qr-code/qr-code-screen.react.js @@ -1,253 +1,262 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { View, Text } from 'react-native'; import QRCode from 'react-native-qrcode-svg'; import { qrCodeLinkURL } from 'lib/facts/links.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'; import type { NonceChallenge, SignedMessage, } from 'lib/types/identity-service-types.js'; import { tunnelbrokerMessageTypes, type TunnelbrokerMessage, } from 'lib/types/tunnelbroker/messages.js'; import { peerToPeerMessageTypes, peerToPeerMessageValidator, } from 'lib/types/tunnelbroker/peer-to-peer-message-types.js'; import { qrCodeAuthMessageTypes } from 'lib/types/tunnelbroker/qr-code-auth-message-types.js'; import { createQRAuthTunnelbrokerMessage, parseQRAuthTunnelbrokerMessage, } from 'lib/utils/qr-code-auth.js'; import type { QRCodeSignInNavigationProp } from './qr-code-sign-in-navigator.react.js'; import { commCoreModule } from '../native-modules.js'; import type { NavigationRoute } from '../navigation/route-names.js'; import { useStyles } from '../themes/colors.js'; import * as AES from '../utils/aes-crypto-module.js'; import Alert from '../utils/alert.js'; import { getContentSigningKey } from '../utils/crypto-utils.js'; type QRCodeScreenProps = { +navigation: QRCodeSignInNavigationProp<'QRCodeScreen'>, +route: NavigationRoute<'QRCodeScreen'>, }; // eslint-disable-next-line no-unused-vars function QRCodeScreen(props: QRCodeScreenProps): React.Node { const [qrCodeValue, setQrCodeValue] = React.useState(); const [qrData, setQRData] = React.useState(); const [primaryDeviceID, setPrimaryDeviceID] = React.useState(); const { setUnauthorizedDeviceID, addListener, removeListener, connected: tunnelbrokerConnected, isAuthorized, sendMessage, } = useTunnelbroker(); const identityContext = React.useContext(IdentityClientContext); const identityClient = identityContext?.identityClient; React.useEffect(() => { if ( !tunnelbrokerConnected || !isAuthorized || !primaryDeviceID || !qrData ) { return; } const message = createQRAuthTunnelbrokerMessage(qrData.aesKey, { type: qrCodeAuthMessageTypes.SECONDARY_DEVICE_REGISTRATION_SUCCESS, }); void sendMessage({ deviceID: primaryDeviceID, payload: JSON.stringify(message), }); }, [ tunnelbrokerConnected, isAuthorized, sendMessage, primaryDeviceID, qrData, ]); const tunnelbrokerMessageListener = React.useCallback( async (message: TunnelbrokerMessage) => { invariant(identityClient, 'identity context not set'); if ( !qrData || message.type !== tunnelbrokerMessageTypes.MESSAGE_TO_DEVICE ) { return; } let innerMessage; try { innerMessage = JSON.parse(message.payload); } catch { return; } if ( !peerToPeerMessageValidator.is(innerMessage) || innerMessage.type !== peerToPeerMessageTypes.QR_CODE_AUTH_MESSAGE ) { return; } const qrCodeAuthMessage = parseQRAuthTunnelbrokerMessage( qrData.aesKey, innerMessage, ); + + if ( + qrCodeAuthMessage?.type === + qrCodeAuthMessageTypes.BACKUP_DATA_KEY_MESSAGE + ) { + console.log('Received backup data key:', qrCodeAuthMessage); + return; + } + if ( !qrCodeAuthMessage || qrCodeAuthMessage.type !== qrCodeAuthMessageTypes.DEVICE_LIST_UPDATE_SUCCESS ) { return; } const { primaryDeviceID: receivedPrimaryDeviceID, userID } = qrCodeAuthMessage; setPrimaryDeviceID(receivedPrimaryDeviceID); try { const nonce = await identityClient.generateNonce(); const nonceChallenge: NonceChallenge = { nonce }; const nonceMessage = JSON.stringify(nonceChallenge); const signature = await commCoreModule.signMessage(nonceMessage); const challengeResponse: SignedMessage = { message: nonceMessage, signature, }; await identityClient.uploadKeysForRegisteredDeviceAndLogIn( userID, challengeResponse, ); setUnauthorizedDeviceID(null); } catch (err) { console.error('Secondary device registration error:', err); Alert.alert('Registration failed', 'Failed to upload device keys', [ { text: 'OK' }, ]); } }, [setUnauthorizedDeviceID, identityClient, qrData], ); React.useEffect(() => { if (!qrData) { return undefined; } addListener(tunnelbrokerMessageListener); setUnauthorizedDeviceID(qrData.deviceID); return () => { removeListener(tunnelbrokerMessageListener); setUnauthorizedDeviceID(null); }; }, [ setUnauthorizedDeviceID, qrData, addListener, removeListener, tunnelbrokerMessageListener, ]); const generateQRCode = React.useCallback(async () => { try { const rawAESKey: Uint8Array = await AES.generateKey(); const aesKeyAsHexString: string = uintArrayToHexString(rawAESKey); const ed25519Key: string = await getContentSigningKey(); const url = qrCodeLinkURL(aesKeyAsHexString, ed25519Key); setQrCodeValue(url); setQRData({ deviceID: ed25519Key, aesKey: aesKeyAsHexString }); } catch (err) { console.error('Failed to generate QR Code:', err); } }, []); React.useEffect(() => { void generateQRCode(); }, [generateQRCode]); const styles = useStyles(unboundStyles); return ( 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 ); } const unboundStyles = { container: { flex: 1, alignItems: 'center', marginTop: 125, }, heading: { fontSize: 24, color: 'panelForegroundLabel', paddingBottom: 12, }, headingSubtext: { fontSize: 12, color: 'panelForegroundLabel', paddingBottom: 30, }, instructionsBox: { alignItems: 'center', width: 300, marginTop: 40, padding: 15, borderColor: 'panelForegroundLabel', borderWidth: 2, borderRadius: 8, }, instructionsTitle: { fontSize: 12, color: 'panelForegroundLabel', paddingBottom: 15, }, instructionsStep: { fontSize: 12, padding: 1, color: 'panelForegroundLabel', }, instructionsBold: { fontWeight: 'bold', }, }; export default QRCodeScreen;