diff --git a/native/qr-code/qr-code-screen.react.js b/native/qr-code/qr-code-screen.react.js index e4d7a1ca4..879d76851 100644 --- a/native/qr-code/qr-code-screen.react.js +++ b/native/qr-code/qr-code-screen.react.js @@ -1,107 +1,108 @@ // @flow 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 type { QRCodeSignInNavigationProp } from './qr-code-sign-in-navigator.react.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 { getContentSigningKey } from '../utils/crypto-utils.js'; type QRCodeScreenProps = { +navigation: QRCodeSignInNavigationProp<'QRCodeScreen'>, +route: NavigationRoute<'QRCodeScreen'>, }; -const defaultDeviceEd25519Key = 'device_ed25519_key'; - // eslint-disable-next-line no-unused-vars function QRCodeScreen(props: QRCodeScreenProps): React.Node { const [qrCodeValue, setQrCodeValue] = React.useState(); const generateQRCode = React.useCallback(async () => { try { const aes256Key: Uint8Array = await AES.generateKey(); - const url = qrCodeLinkURL(aes256Key, defaultDeviceEd25519Key); + const ed25519Key: string = await getContentSigningKey(); + + const url = qrCodeLinkURL(aes256Key, ed25519Key); setQrCodeValue(url); } catch (err) { console.error('Failed to generate QR Code:', err); } }, []); React.useEffect(() => { 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; diff --git a/web/account/qr-code-login.react.js b/web/account/qr-code-login.react.js index 9b5366ecb..4b50214dc 100644 --- a/web/account/qr-code-login.react.js +++ b/web/account/qr-code-login.react.js @@ -1,53 +1,59 @@ // @flow import { QRCodeSVG } from 'qrcode.react'; import * as React from 'react'; import { qrCodeLinkURL } from 'lib/facts/links.js'; import css from './qr-code-login.css'; import { generateKey } from '../media/aes-crypto-utils.js'; - -const defaultDeviceEd25519Key = 'device_ed25519_key'; +import { useSelector } from '../redux/redux-utils.js'; function QrCodeLogin(): React.Node { const [qrCodeValue, setQrCodeValue] = React.useState(); + const ed25519Key = useSelector( + state => state.cryptoStore.primaryIdentityKeys?.ed25519, + ); const generateQRCode = React.useCallback(async () => { try { + if (!ed25519Key) { + return; + } + const aes256Key: Uint8Array = await generateKey(); - const url = qrCodeLinkURL(aes256Key, defaultDeviceEd25519Key); + const url = qrCodeLinkURL(aes256Key, ed25519Key); setQrCodeValue(url); } catch (err) { console.error('Failed to generate QR Code:', err); } - }, []); + }, [ed25519Key]); React.useEffect(() => { generateQRCode(); }, [generateQRCode]); 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
); } export default QrCodeLogin;