freerasp-react-native 1.0.0 → 1.1.0

package/example/metro.config.js

@@ -1,40 +1,40 @@
-const path = require('path');
-const escape = require('escape-string-regexp');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
-const pak = require('../package.json');
-
-const root = path.resolve(__dirname, '..');
-
-const modules = Object.keys({
-  ...pak.peerDependencies,
-});
-
-module.exports = {
-  projectRoot: __dirname,
-  watchFolders: [root],
-
-  // We need to make sure that only one version is loaded for peerDependencies
-  // So we block them at the root, and alias them to the versions in example's node_modules
-  resolver: {
-    blacklistRE: exclusionList(
-      modules.map(
-        (m) =>
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
-      )
-    ),
-
-    extraNodeModules: modules.reduce((acc, name) => {
-      acc[name] = path.join(__dirname, 'node_modules', name);
-      return acc;
-    }, {}),
-  },
-
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
-};
+const path = require('path');
+const escape = require('escape-string-regexp');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
+const pak = require('../package.json');
+
+const root = path.resolve(__dirname, '..');
+
+const modules = Object.keys({
+  ...pak.peerDependencies,
+});
+
+module.exports = {
+  projectRoot: __dirname,
+  watchFolders: [root],
+
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we block them at the root, and alias them to the versions in example's node_modules
+  resolver: {
+    blacklistRE: exclusionList(
+      modules.map(
+        (m) =>
+          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
+      )
+    ),
+
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+  },
+
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+};

package/example/package.json

@@ -1,21 +1,24 @@
-{
-  "name": "FreeraspReactNativeExample",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "android": "react-native run-android",
-    "ios": "react-native run-ios",
-    "start": "react-native start",
-    "pods": "pod-install --quiet"
-  },
-  "dependencies": {
-    "react": "18.1.0",
-    "react-native": "^0.70.6"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "metro-react-native-babel-preset": "0.72.3"
-  }
-}
+{
+  "name": "FreeraspReactNativeExample",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "start": "react-native start",
+    "pods": "pod-install --quiet"
+  },
+  "dependencies": {
+    "@react-native-material/core": "^1.3.7",
+    "react": "18.1.0",
+    "react-native": "^0.70.6",
+    "react-native-svg": "^13.8.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@babel/runtime": "^7.12.5",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "metro-react-native-babel-preset": "0.72.3",
+    "react-native-svg-transformer": "^1.0.0"
+  }
+}

package/example/react-native.config.js

@@ -1,10 +1,10 @@
-const path = require('path');
-const pak = require('../package.json');
-
-module.exports = {
-  dependencies: {
-    [pak.name]: {
-      root: path.join(__dirname, '..'),
-    },
-  },
-};
+const path = require('path');
+const pak = require('../package.json');
+
+module.exports = {
+  dependencies: {
+    [pak.name]: {
+      root: path.join(__dirname, '..'),
+    },
+  },
+};

package/example/src/App.tsx

@@ -1,89 +1,135 @@
-import * as React from 'react';
-
-import { StyleSheet, View, Text } from 'react-native';
-import { useFreeRasp } from 'freerasp-react-native';
-
-const App = () => {
-  const config = {
-    androidConfig: {
-      packageName: 'com.freeraspreactnativeexample',
-      certificateHashes: ['your_signing_certificate_hash_base64'],
-      // supportedAlternativeStores: ['storeOne', 'storeTwo'],
-    },
-    iosConfig: {
-      appBundleId: 'com.freeraspreactnativeexample',
-      appTeamId: 'your_team_ID',
-    },
-    watcherMail: 'your_email_address@example.com',
-  };
-
-  const actions = {
-    // Android & iOS
-    'privilegedAccess': () => {
-      console.log('privilegedAccess');
-    },
-    // Android & iOS
-    'debug': () => {
-      console.log('debug');
-    },
-    // Android & iOS
-    'simulator': () => {
-      console.log('simulator');
-    },
-    // Android & iOS
-    'appIntegrity': () => {
-      console.log('appIntegrity');
-    },
-    // Android & iOS
-    'unofficialStore': () => {
-      console.log('unofficialStore');
-    },
-    // Android & iOS
-    'hooks': () => {
-      console.log('hooks');
-    },
-    // Android & iOS
-    'device binding': () => {
-      console.log('device binding');
-    },
-    // iOS only
-    'deviceID': () => {
-      console.log('deviceID');
-    },
-    // iOS only
-    'missingSecureEnclave': () => {
-      console.log('missingSecureEnclave');
-    },
-    // iOS only
-    'passcodeChange': () => {
-      console.log('passcodeChange');
-    },
-    // iOS only
-    'passcode': () => {
-      console.log('passcode');
-    },
-  };
-
-  useFreeRasp(config, actions);
-
-  return (
-    <View style={styles.container}>
-      <Text>Hello from the freeRASP app!</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
-  },
-});
-
-export default App;
+import * as React from 'react';
+
+import { Platform } from 'react-native';
+import { useFreeRasp } from 'freerasp-react-native';
+import { DemoApp } from './DemoApp';
+import { commonChecks, iosChecks } from './checks';
+
+const App = () => {
+  const [appChecks, setAppChecks] = React.useState([
+    ...commonChecks,
+    ...(Platform.OS === 'ios' ? iosChecks : []),
+  ]);
+
+  const config = {
+    androidConfig: {
+      packageName: 'com.freeraspreactnativeexample',
+      certificateHashes: ['your_signing_certificate_hash_base64'],
+      // supportedAlternativeStores: ['storeOne', 'storeTwo'],
+    },
+    iosConfig: {
+      appBundleId: 'com.freeraspreactnativeexample',
+      appTeamId: 'your_team_ID',
+    },
+    watcherMail: 'your_email_address@example.com',
+  };
+
+  const actions = {
+    // Android & iOS
+    'privilegedAccess': () => {
+      setAppChecks((currentState) =>
+        currentState.map((threat) =>
+          threat.name === 'Privileged Access'
+            ? { ...threat, status: 'nok' }
+            : threat
+        )
+      );
+    },
+    // Android & iOS
+    'debug': () => {
+      setAppChecks((currentState) =>
+        currentState.map((threat) =>
+          threat.name === 'Debug' ? { ...threat, status: 'nok' } : threat
+        )
+      );
+    },
+    // Android & iOS
+    'simulator': () => {
+      setAppChecks((currentState) =>
+        currentState.map((threat) =>
+          threat.name === 'Simulator' ? { ...threat, status: 'nok' } : threat
+        )
+      );
+    },
+    // Android & iOS
+    'appIntegrity': () => {
+      setAppChecks((currentState) =>
+        currentState.map((threat) =>
+          threat.name === 'App Integrity'
+            ? { ...threat, status: 'nok' }
+            : threat
+        )
+      );
+    },
+    // Android & iOS
+    'unofficialStore': () => {
+      setAppChecks((currentState) =>
+        currentState.map((threat) =>
+          threat.name === 'Unofficial Store'
+            ? { ...threat, status: 'nok' }
+            : threat
+        )
+      );
+    },
+    // Android & iOS
+    'hooks': () => {
+      setAppChecks((currentState) =>
+        currentState.map((threat) =>
+          threat.name === 'Hooks' ? { ...threat, status: 'nok' } : threat
+        )
+      );
+    },
+    // Android & iOS
+    'device binding': () => {
+      setAppChecks((currentState) =>
+        currentState.map((threat) =>
+          threat.name === 'Device Binding'
+            ? { ...threat, status: 'nok' }
+            : threat
+        )
+      );
+    },
+    // Android & iOS
+    'secureHardwareNotAvailable': () => {
+      setAppChecks((currentState) =>
+        currentState.map((threat) =>
+          threat.name === 'Secure Hardware Not Available'
+            ? { ...threat, status: 'nok' }
+            : threat
+        )
+      );
+    },
+    // Android & iOS
+    'passcode': () => {
+      setAppChecks((currentState) =>
+        currentState.map((threat) =>
+          threat.name === 'Passcode' ? { ...threat, status: 'nok' } : threat
+        )
+      );
+    },
+    // iOS only
+    'deviceID': () => {
+      setAppChecks((currentState) =>
+        currentState.map((threat) =>
+          threat.name === 'Device ID' ? { ...threat, status: 'nok' } : threat
+        )
+      );
+    },
+    // iOS only
+    'passcodeChange': () => {
+      setAppChecks((currentState) =>
+        currentState.map((threat) =>
+          threat.name === 'Passcode Change'
+            ? { ...threat, status: 'nok' }
+            : threat
+        )
+      );
+    },
+  };
+
+  useFreeRasp(config, actions);
+
+  return <DemoApp checks={appChecks} />;
+};
+
+export default App;

package/example/src/DemoApp.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable react-native/no-inline-styles */
+import * as React from 'react';
+import { Box, Flex, HStack, Text, VStack } from '@react-native-material/core';
+import CheckmarkCircle from '../assets/checkmark-circle-outline.png';
+import CloseCircle from '../assets/close-circle-outline.png';
+import TalsecLogo from '../assets/talsec-logo.png';
+import { Image } from 'react-native';
+import { Colors } from './styles';
+
+export const DemoApp = (props: any) => {
+  return (
+    <>
+      <Flex
+        fill
+        style={{
+          backgroundColor: Colors.background,
+          justifyContent: 'center',
+        }}
+      >
+        <VStack>
+          <Image source={TalsecLogo} style={{ alignSelf: 'center' }} />;
+          <Text
+            style={{
+              alignSelf: 'center',
+              fontWeight: 'bold',
+              fontSize: 25,
+              color: 'white',
+              paddingTop: 15,
+            }}
+          >
+            freeRASP checks:
+          </Text>
+          {props.checks.map((check: any, idx: number) => (
+            <Box
+              key={idx}
+              style={{
+                borderColor:
+                  check.status === 'ok'
+                    ? Colors.checkOkDark
+                    : Colors.checkNokDark,
+                backgroundColor:
+                  check.status === 'ok'
+                    ? Colors.checkOkLight
+                    : Colors.checkNokLight,
+                borderWidth: 1,
+                paddingHorizontal: 30,
+                paddingVertical: 4,
+                marginVertical: 8,
+                marginHorizontal: 20,
+                borderRadius: 15,
+              }}
+            >
+              <HStack style={{ justifyContent: 'space-between' }}>
+                <Text
+                  style={{
+                    color: check.status === 'ok' ? 'green' : 'rgb(200, 0, 0)',
+                    fontWeight: 'bold',
+                    alignSelf: 'center',
+                  }}
+                >
+                  {check.name}
+                </Text>
+                {check.status === 'ok' ? (
+                  <Image
+                    source={CheckmarkCircle}
+                    style={{
+                      tintColor: Colors.checkOkDark,
+                      width: 30,
+                      height: 30,
+                    }}
+                  />
+                ) : (
+                  <Image
+                    source={CloseCircle}
+                    style={{
+                      tintColor: Colors.checkNokDark,
+                      width: 30,
+                      height: 30,
+                    }}
+                  />
+                )}
+              </HStack>
+            </Box>
+          ))}
+        </VStack>
+      </Flex>
+    </>
+  );
+};

package/example/src/checks.ts

@@ -0,0 +1,16 @@
+export const commonChecks = [
+  { name: 'Privileged Access', status: 'ok' },
+  { name: 'Debug', status: 'ok' },
+  { name: 'Simulator', status: 'ok' },
+  { name: 'App Integrity', status: 'ok' },
+  { name: 'Unofficial Store', status: 'ok' },
+  { name: 'Hooks', status: 'ok' },
+  { name: 'Device Binding', status: 'ok' },
+  { name: 'Secure Hardware Not Available', status: 'ok' },
+  { name: 'Passcode', status: 'ok' },
+];
+
+export const iosChecks = [
+  { name: 'Device ID', status: 'ok' },
+  { name: 'Passcode Change', status: 'ok' },
+];

package/example/src/styles.ts

@@ -0,0 +1,7 @@
+export const Colors = {
+  background: 'rgba(26, 31, 45, 255)',
+  checkOkLight: 'rgba(173, 247, 187, 1)',
+  checkNokLight: 'rgba(247, 173, 173, 1)',
+  checkOkDark: 'green',
+  checkNokDark: 'rgb(200, 0, 0)',
+};