Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F3516337
D8934.id30279.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
7 KB
Referenced Files
None
Subscribers
None
D8934.id30279.diff
View Options
diff --git a/keyserver/.well-known/apple-app-site-association b/keyserver/.well-known/apple-app-site-association
--- a/keyserver/.well-known/apple-app-site-association
+++ b/keyserver/.well-known/apple-app-site-association
@@ -10,12 +10,15 @@
"components": [
{
"/": "/invite/*"
+ },
+ {
+ "/": "/qr-code/*"
}
]
},
{
"appID": "H98Y8MH53M.app.comm",
- "paths": [ "/invite/*" ]
+ "paths": [ "/invite/*", "/qr-code/*" ]
}
]
}
diff --git a/lib/facts/links.js b/lib/facts/links.js
--- a/lib/facts/links.js
+++ b/lib/facts/links.js
@@ -4,4 +4,13 @@
return `https://comm.app/invite/${secret}`;
}
-export { inviteLinkUrl };
+function qrCodeLinkUrl(aes256Param: string, ed25519Param: string): string {
+ const keys = {
+ aes256: aes256Param,
+ ed25519: ed25519Param,
+ };
+ const keysString = encodeURIComponent(JSON.stringify(keys));
+ return `comm://qr-code/${keysString}`;
+}
+
+export { inviteLinkUrl, qrCodeLinkUrl };
diff --git a/native/android/app/src/main/AndroidManifest.xml b/native/android/app/src/main/AndroidManifest.xml
--- a/native/android/app/src/main/AndroidManifest.xml
+++ b/native/android/app/src/main/AndroidManifest.xml
@@ -68,6 +68,11 @@
android:host="comm.app"
android:pathPrefix="/invite"
/>
+ <data
+ android:scheme="https"
+ android:host="comm.app"
+ android:pathPrefix="/qr-code"
+ />
</intent-filter>
</activity>
<activity
diff --git a/native/navigation/navigation-handler.react.js b/native/navigation/navigation-handler.react.js
--- a/native/navigation/navigation-handler.react.js
+++ b/native/navigation/navigation-handler.react.js
@@ -11,6 +11,7 @@
import { useIsAppLoggedIn } from './nav-selectors.js';
import { NavContext, type NavAction } from './navigation-context.js';
import PolicyAcknowledgmentHandler from './policy-acknowledgment-handler.react.js';
+import QRCodeLinkHandler from './qr-code-link-handler.react.js';
import ThreadScreenTracker from './thread-screen-tracker.react.js';
import DevTools from '../redux/dev-tools.react.js';
import { useSelector } from '../redux/redux-utils.js';
@@ -43,6 +44,7 @@
<ThreadScreenTracker />
<ModalPruner navContext={navContext} />
<PolicyAcknowledgmentHandler />
+ <QRCodeLinkHandler />
{devTools}
</>
);
diff --git a/native/navigation/qr-code-link-handler.react.js b/native/navigation/qr-code-link-handler.react.js
new file mode 100644
--- /dev/null
+++ b/native/navigation/qr-code-link-handler.react.js
@@ -0,0 +1,43 @@
+// @flow
+
+import { useNavigation } from '@react-navigation/native';
+import * as React from 'react';
+import { Linking } from 'react-native';
+
+import { isLoggedIn } from 'lib/selectors/user-selectors.js';
+
+import { SecondaryDeviceQRCodeScannerRouteName } from './route-names.js';
+import { useSelector } from '../redux/redux-utils.js';
+
+function QRCodeLinkHandler() {
+ const [currentLink, setCurrentLink] = React.useState(null);
+
+ React.useEffect(() => {
+ const subscription = Linking.addEventListener('url', ({ url }) =>
+ setCurrentLink(url),
+ );
+ (async () => {
+ const initialURL = await Linking.getInitialURL();
+ if (initialURL) {
+ setCurrentLink(initialURL);
+ }
+ })();
+
+ return () => subscription.remove();
+ }, []);
+
+ const loggedIn = useSelector(isLoggedIn);
+ const { navigate } = useNavigation();
+
+ React.useEffect(() => {
+ if (!loggedIn || !currentLink) {
+ return;
+ }
+
+ setCurrentLink(null);
+
+ navigate(SecondaryDeviceQRCodeScannerRouteName);
+ }, [currentLink, loggedIn, navigate]);
+}
+
+export default QRCodeLinkHandler;
diff --git a/native/profile/secondary-device-qr-code-scanner.react.js b/native/profile/secondary-device-qr-code-scanner.react.js
--- a/native/profile/secondary-device-qr-code-scanner.react.js
+++ b/native/profile/secondary-device-qr-code-scanner.react.js
@@ -36,10 +36,14 @@
}, [navigation]);
const onConnect = React.useCallback((barCodeEvent: BarCodeEvent) => {
- const { type, data } = barCodeEvent;
+ const { data } = barCodeEvent;
+ const extractKeysFromURLRegex = /comm:\/\/qr-code\/(.*)/;
+ const keysMatch = data.match(extractKeysFromURLRegex)?.[1] ?? '';
+ const keys = JSON.parse(decodeURIComponent(keysMatch));
+
Alert.alert(
'Scan successful',
- `Bar code with type ${type} and data ${data} has been scanned!`,
+ `QR code contains the following keys: ${JSON.stringify(keys)}`,
[{ text: 'OK' }],
);
}, []);
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
@@ -4,6 +4,8 @@
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';
@@ -16,13 +18,17 @@
// eslint-disable-next-line no-unused-vars
function QRCodeScreen(props: QRCodeScreenProps): React.Node {
const styles = useStyles(unboundStyles);
+ const qrCodeValue = React.useMemo(
+ () => qrCodeLinkUrl('random_aes256_key', 'device_ed25519_key'),
+ [],
+ );
return (
<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="https://www.google.com" size={200} />
+ <QRCode value={qrCodeValue} size={200} />
<View style={styles.instructionsBox}>
<Text style={styles.instructionsTitle}>How to find the scanner:</Text>
<Text style={styles.instructionsStep}>
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,21 +3,22 @@
import { QRCodeSVG } from 'qrcode.react';
import * as React from 'react';
+import { qrCodeLinkUrl } from 'lib/facts/links.js';
+
import css from './qr-code-login.css';
function QrCodeLogin(): React.Node {
+ const qrCodeValue = React.useMemo(
+ () => qrCodeLinkUrl('random_aes256_key', 'device_ed25519_key'),
+ [],
+ );
return (
<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="https://comm.app/"
- size={300}
- marginSize={4}
- level="L"
- />
+ <QRCodeSVG value={qrCodeValue} size={300} marginSize={4} level="L" />
<div className={css.instructionsContainer}>
<div className={css.instructionsTitle}>How to find the scanner:</div>
<div className={css.instructionsStep}>
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Mon, Dec 23, 1:56 PM (14 h, 59 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2694819
Default Alt Text
D8934.id30279.diff (7 KB)
Attached To
Mode
D8934: [keyserver/lib/web/native] Support external cameras scanning the QR code
Attached
Detach File
Event Timeline
Log In to Comment