Add support for simulating biometric authorization on ios (#236)

Description: This PR introduces an option to simulate biometric authorization. You can simulate: - matching face/touch id - not matching face/touch id - biometric authorization enrollment. Additionally convenient commands were added to vs code to allow for binding a shortcut to the action of matching or non-matching. The default keybindings are the same as in xcode. Relates to : #217 https://github.com/user-attachments/assets/88cc5f2b-fd71-4abd-b302-853578b721de How was it tested: a simple example app is added as a part of this PR that allows testing introduced functionality . Future improvments: - [ ] android support --------- Co-authored-by: filip131311 <[email protected]>
software-mansion · Aug 29, 2024 · f7f0003 · f7f0003
1 parent 531c1bd
commit f7f0003
Show file tree

Hide file tree

Showing 17 changed files with 2,098 additions and 71 deletions.
diff --git a/packages/vscode-extension/package.json b/packages/vscode-extension/package.json
@@ -61,6 +61,18 @@
         "title": "Diagnostics",
         "category": "React Native IDE",
         "enablement": "!RNIDE.extensionIsActive"
+      },
+      {
+        "command": "RNIDE.performBiometricAuthorization",
+        "title": "Perform Biometric Authorization ",
+        "category": "React Native IDE",
+        "enablement": "RNIDE.extensionIsActive"
+      },
+      {
+        "command": "RNIDE.performFailedBiometricAuthorization",
+        "title": "Perform Failed Biometric Authorization",
+        "category": "React Native IDE",
+        "enablement": "RNIDE.extensionIsActive"
       }
     ],
     "keybindings": [
@@ -74,6 +86,16 @@
         "key": "ctrl+w",
         "mac": "cmd+w",
         "when": "RNIDE.isTabPanelFocused"
+      },
+      {
+        "command": "RNIDE.performBiometricAuthorization",
+        "key": "ctrl+shift+M",
+        "mac": "cmd+shift+M"
+      },
+      {
+        "command": "RNIDE.performFailedBiometricAuthorization",
+        "key": "ctrl+shift+N",
+        "mac": "cmd+shift+N"
       }
     ],
     "configuration": {

diff --git a/packages/vscode-extension/src/common/Project.ts b/packages/vscode-extension/src/common/Project.ts
@@ -8,6 +8,7 @@ export type DeviceSettings = {
     longitude: number;
     isDisabled: boolean;
   };
+  hasEnrolledBiometrics: boolean;
 };
 
 export type ProjectState = {
@@ -111,6 +112,7 @@ export interface ProjectInterface {
 
   getDeviceSettings(): Promise<DeviceSettings>;
   updateDeviceSettings(deviceSettings: DeviceSettings): Promise<void>;
+  sendBiometricAuthorization(match: boolean): Promise<void>;
 
   resumeDebugger(): Promise<void>;
   stepOverDebugger(): Promise<void>;

diff --git a/packages/vscode-extension/src/devices/AndroidEmulatorDevice.ts b/packages/vscode-extension/src/devices/AndroidEmulatorDevice.ts
@@ -9,13 +9,14 @@ import { getAppCachesDir, getNativeABI } from "../utilities/common";
 import { ANDROID_HOME } from "../utilities/android";
 import { ChildProcess, exec, lineReader } from "../utilities/subprocess";
 import { v4 as uuidv4 } from "uuid";
-import { AndroidBuildResult, BuildResult } from "../builders/BuildManager";
+import { BuildResult } from "../builders/BuildManager";
 import { AndroidSystemImageInfo, DeviceInfo, DevicePlatform } from "../common/DeviceManager";
 import { Logger } from "../Logger";
 import { AppPermissionType, DeviceSettings } from "../common/Project";
 import { getAndroidSystemImages } from "../utilities/sdkmanager";
 import { EXPO_GO_PACKAGE_NAME, fetchExpoLaunchDeeplink } from "../builders/expoGo";
 import { Platform } from "../utilities/platform";
+import { AndroidBuildResult } from "../builders/buildAndroid";
 
 export const EMULATOR_BINARY = Platform.select({
   macos: path.join(ANDROID_HOME, "emulator", "emulator"),
@@ -361,6 +362,10 @@ export class AndroidEmulatorDevice extends DeviceBase {
   makePreview(): Preview {
     return new Preview(["android", this.serial!]);
   }
+
+  async sendBiometricAuthorization(isMatch: boolean) {
+    // TO DO: implement android biometric authorization
+  }
 }
 
 export async function createEmulator(displayName: string, systemImage: AndroidSystemImageInfo) {

diff --git a/packages/vscode-extension/src/devices/DeviceBase.ts b/packages/vscode-extension/src/devices/DeviceBase.ts
@@ -16,6 +16,7 @@ export abstract class DeviceBase implements Disposable {
 
   abstract bootDevice(): Promise<void>;
   abstract changeSettings(settings: DeviceSettings): Promise<void>;
+  abstract sendBiometricAuthorization(isMatch: boolean): Promise<void>;
   abstract installApp(build: BuildResult, forceReinstall: boolean): Promise<void>;
   abstract launchApp(build: BuildResult, metroPort: number, devtoolsPort: number): Promise<void>;
   abstract makePreview(): Preview;

diff --git a/packages/vscode-extension/src/devices/IosSimulatorDevice.ts b/packages/vscode-extension/src/devices/IosSimulatorDevice.ts
@@ -5,12 +5,13 @@ import { Logger } from "../Logger";
 import { exec } from "../utilities/subprocess";
 import { getAvailableIosRuntimes } from "../utilities/iosRuntimes";
 import { IOSDeviceInfo, IOSRuntimeInfo, DevicePlatform, DeviceInfo } from "../common/DeviceManager";
-import { BuildResult, IOSBuildResult } from "../builders/BuildManager";
+import { BuildResult } from "../builders/BuildManager";
 import path from "path";
 import fs from "fs";
 import { AppPermissionType, DeviceSettings } from "../common/Project";
 import { EXPO_GO_BUNDLE_ID, fetchExpoLaunchDeeplink } from "../builders/expoGo";
 import { ExecaError } from "execa";
+import { IOSBuildResult } from "../builders/buildIOS";
 
 interface SimulatorInfo {
   availability?: string;
@@ -125,6 +126,42 @@ export class IosSimulatorDevice extends DeviceBase {
         `${settings.location.latitude.toString()},${settings.location.longitude.toString()}`,
       ]);
     }
+    await exec("xcrun", [
+      "simctl",
+      "--set",
+      deviceSetLocation,
+      "spawn",
+      this.deviceUDID,
+      "notifyutil",
+      "-s",
+      "com.apple.BiometricKit.enrollmentChanged",
+      settings.hasEnrolledBiometrics ? "1" : "0",
+    ]);
+    await exec("xcrun", [
+      "simctl",
+      "--set",
+      deviceSetLocation,
+      "spawn",
+      this.deviceUDID,
+      "notifyutil",
+      "-p",
+      "com.apple.BiometricKit.enrollmentChanged",
+    ]);
+  }
+  async sendBiometricAuthorization(isMatch: boolean) {
+    const deviceSetLocation = getOrCreateDeviceSet();
+    await exec("xcrun", [
+      "simctl",
+      "--set",
+      deviceSetLocation,
+      "spawn",
+      this.deviceUDID,
+      "notifyutil",
+      "-p",
+      isMatch
+        ? "com.apple.BiometricKit_Sim.fingerTouch.match"
+        : "com.apple.BiometricKit_Sim.fingerTouch.nomatch",
+    ]);
   }
 
   async configureMetroPort(bundleID: string, metroPort: number) {

diff --git a/packages/vscode-extension/src/extension.ts b/packages/vscode-extension/src/extension.ts
@@ -128,6 +128,15 @@ export async function activate(context: ExtensionContext) {
       { webviewOptions: { retainContextWhenHidden: true } }
     )
   );
+  context.subscriptions.push(
+    commands.registerCommand("RNIDE.performBiometricAuthorization", performBiometricAuthorization)
+  );
+  context.subscriptions.push(
+    commands.registerCommand(
+      "RNIDE.performFailedBiometricAuthorization",
+      performFailedBiometricAuthorization
+    )
+  );
   context.subscriptions.push(commands.registerCommand("RNIDE.openDevMenu", openDevMenu));
   context.subscriptions.push(commands.registerCommand("RNIDE.closePanel", closeIDEPanel));
   context.subscriptions.push(commands.registerCommand("RNIDE.openPanel", showIDEPanel));
@@ -338,6 +347,14 @@ async function openDevMenu() {
   Project.currentProject?.openDevMenu();
 }
 
+async function performBiometricAuthorization() {
+  Project.currentProject?.sendBiometricAuthorization(true);
+}
+
+async function performFailedBiometricAuthorization() {
+  Project.currentProject?.sendBiometricAuthorization(false);
+}
+
 async function diagnoseWorkspaceStructure() {
   const appRootFolder = await configureAppRootFolder();
   if (appRootFolder) {

diff --git a/packages/vscode-extension/src/project/deviceSession.ts b/packages/vscode-extension/src/project/deviceSession.ts
@@ -258,4 +258,8 @@ export class DeviceSession implements Disposable {
   public focusBuildOutput() {
     this.buildManager.focusBuildOutput();
   }
+
+  public async sendBiometricAuthorization(isMatch: boolean) {
+    await this.device.sendBiometricAuthorization(isMatch);
+  }
 }
diff --git a/packages/vscode-extension/src/project/project.ts b/packages/vscode-extension/src/project/project.ts
@@ -64,13 +64,25 @@ export class Project
       longitude: 19.965474,
       isDisabled: true,
     },
+    hasEnrolledBiometrics: false,
   };
 
   constructor(
     private readonly deviceManager: DeviceManager,
     private readonly dependencyManager: DependencyManager
   ) {
     Project.currentProject = this;
+    this.deviceSettings = extensionContext.workspaceState.get(DEVICE_SETTINGS_KEY) ?? {
+      appearance: "dark",
+      contentSize: "normal",
+      location: {
+        latitude: 50.048653,
+        longitude: 19.965474,
+        isDisabled: false,
+      },
+      hasEnrolledBiometrics: false,
+    };
+    this.devtools = new Devtools();
     this.metro = new Metro(this.devtools, this);
     this.start(false, false);
     this.trySelectingInitialDevice();
@@ -404,6 +416,9 @@ export class Project
     await this.deviceSession?.changeDeviceSettings(settings);
     this.eventEmitter.emit("deviceSettingsChanged", this.deviceSettings);
   }
+  public async sendBiometricAuthorization(isMatch: boolean) {
+    await this.deviceSession?.sendBiometricAuthorization(isMatch);
+  }
 
   private reportStageProgress(stageProgress: number, stage: string) {
     if (stage !== this.projectState.startupMessage) {

diff --git a/packages/vscode-extension/src/webview/components/DeviceSettingsDropdown.tsx b/packages/vscode-extension/src/webview/components/DeviceSettingsDropdown.tsx
@@ -18,6 +18,8 @@ import { DeviceLocationView } from "../views/DeviceLocationView";
 import { JSX } from "react/jsx-runtime";
 import DiagnosticView from "../views/DiagnosticView";
 import { useModal } from "../providers/ModalProvider";
+import { DevicePlatform } from "../../common/DeviceManager";
+import { KeybindingInfo } from "./shared/KeybindingInfo";
 
 const contentSizes = [
   "xsmall",
@@ -117,7 +119,8 @@ function DeviceSettingsDropdown({ children, disabled }: DeviceSettingsDropdownPr
               </Slider.Root>
               <span className="device-settings-large-text-indicator" />
             </div>
-
+            <div className="device-settings-margin" />
+            {projectState.selectedDevice?.platform === DevicePlatform.IOS && <BiometricsItem />}
             <DropdownMenu.Arrow className="dropdown-menu-arrow" />
           </form>
           <Label>Device Location</Label>
@@ -158,4 +161,59 @@ function DeviceSettingsDropdown({ children, disabled }: DeviceSettingsDropdownPr
   );
 }
 
+const BiometricsItem = () => {
+  const { project, deviceSettings } = useProject();
+
+  return (
+    <DropdownMenu.Sub>
+      <DropdownMenu.SubTrigger className="dropdown-menu-item">
+        <span className="codicon codicon-layout" />
+        Biometrics
+        <span className="codicon codicon-chevron-right right-slot" />
+      </DropdownMenu.SubTrigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.SubContent className="dropdown-menu-content">
+          <DropdownMenu.Item
+            className="dropdown-menu-item"
+            onSelect={() => {
+              project.updateDeviceSettings({
+                ...deviceSettings,
+                hasEnrolledBiometrics: !deviceSettings.hasEnrolledBiometrics,
+              });
+            }}>
+            <span className="codicon codicon-layout-sidebar-left" />
+            Enrolled
+            {deviceSettings.hasEnrolledBiometrics && (
+              <span className="codicon codicon-check right-slot" />
+            )}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            className="dropdown-menu-item"
+            onSelect={() => {
+              project.sendBiometricAuthorization(true);
+            }}>
+            <span className="codicon codicon-layout-sidebar-left" />
+            <div className="dropdown-menu-item-content">
+              Matching ID
+              <KeybindingInfo commandName="RNIDE.performBiometricAuthorization" />
+            </div>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            className="dropdown-menu-item"
+            onSelect={() => {
+              project.sendBiometricAuthorization(false);
+            }}>
+            <span className="codicon codicon-layout-sidebar-left" />
+            <div className="dropdown-menu-item-content">
+              Non-Matching ID
+              <KeybindingInfo commandName="RNIDE.performFailedBiometricAuthorization" />
+            </div>
+          </DropdownMenu.Item>
+        </DropdownMenu.SubContent>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Sub>
+  );
+};
+
 export default DeviceSettingsDropdown;
diff --git a/packages/vscode-extension/src/webview/providers/ProjectProvider.tsx b/packages/vscode-extension/src/webview/providers/ProjectProvider.tsx
@@ -20,6 +20,7 @@ const ProjectContext = createContext<ProjectContextProps>({
   deviceSettings: {
     appearance: "dark",
     contentSize: "normal",
+    hasEnrolledBiometrics: false,
     location: {
       latitude: 50.048653,
       longitude: 19.965474,
@@ -39,6 +40,7 @@ export default function ProjectProvider({ children }: PropsWithChildren) {
   const [deviceSettings, setDeviceSettings] = useState<DeviceSettings>({
     appearance: "dark",
     contentSize: "normal",
+    hasEnrolledBiometrics: false,
     location: {
       latitude: 50.048653,
       longitude: 19.965474,

diff --git a/test-apps/react-native-75/App.tsx b/test-apps/react-native-75/App.tsx
@@ -5,9 +5,10 @@
  * @format
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import type {PropsWithChildren} from 'react';
 import {
+  Button,
   SafeAreaView,
   ScrollView,
   StatusBar,
@@ -16,6 +17,7 @@ import {
   useColorScheme,
   View,
 } from 'react-native';
+import ReactNativeBiometrics from 'react-native-biometrics';
 
 import {
   Colors,
@@ -56,6 +58,29 @@ function Section({children, title}: SectionProps): React.JSX.Element {
 }
 
 function App(): React.JSX.Element {
+  const [isAuthorized, setIsAuthorized] = useState(false);
+  const [biometrics, setBiometrics] = useState(new ReactNativeBiometrics({allowDeviceCredentials: true}) );
+  async function AuthSimplePrompt(){
+    const { biometryType } = await biometrics.isSensorAvailable();
+    console.log("isSensorAvailable", biometryType)
+    try{
+      const {success} = await biometrics.simplePrompt({
+        promptMessage: 'Confirmation',
+      });
+
+      if (success) {
+        setIsAuthorized(true);
+      }
+      else{
+        setIsAuthorized(false);
+      }
+    }catch(e){
+      setIsAuthorized(false);
+      console.log("isSensorAvailable", e);
+    }
+
+  } 
+
   const isDarkMode = useColorScheme() === 'dark';
 
   const backgroundStyle = {
@@ -72,6 +97,24 @@ function App(): React.JSX.Element {
         contentInsetAdjustmentBehavior="automatic"
         style={backgroundStyle}>
         <Header />
+        <View
+          style={{
+            display: "flex",
+            justifyContent:"center",
+            alignItems: "center",
+            height: 500,
+            backgroundColor: isDarkMode ? Colors.black : Colors.white,
+          }}>
+            <Button title = {"Try and Authorize"} onPress={AuthSimplePrompt}></Button>
+            <View>
+              {isAuthorized &&
+                <Text>I am authorized!</Text>
+              }
+              {!isAuthorized &&
+                <Text>I am NOT authorized!</Text>
+              }
+            </View>
+        </View>
         <View
           style={{
             backgroundColor: isDarkMode ? Colors.black : Colors.white,