How to restrict the user in login page using class component

[gkasireddy202]

I need to restrict the user by disabling the logic button on my login page or exiting the app using a class component if any threats are detected.

[martinzigrai]

Hi,

Thank you for your question.

Could you please describe what you have already tried to implement?

The standard approach for handling the threat callbacks is available in our React Native example app: https://github.com/talsec/Free-RASP-ReactNative/tree/master/example

Best regards,

Martin from Talsec.

[gkasireddy202]

@martinzigrai - Thanks for your reply. I would like to implement important callbacks for handling the treats using a class component. If any threats are detected, I will disable the login button to restrict the user.

[gkasireddy202]

@martinzigrai - Please review my implementation in the class component. I added the below logic in the entry page of my project(index.js)

import React, { Component } from 'react'; import { Alert,StyleSheet,View,Text} from 'react-native'; import {talsecStart,setThreatListeners,removeThreatListeners} from 'freerasp-react-native'; export default class AppNavigation extends Component { state = { tamperDetected: false, }; handleThreat = (type) => { // console.log([FreeRASP] Threat detected: ${type}); this.setState({ tamperDetected: true }); }; async componentDidMount() { await this.initializeFreeRASP(); }

async initializeFreeRASP() {
const actions = {
  privilegedAccess: () => this.handleThreat('privilegedAccess'),
  debug: () => this.handleThreat('debug'),
  simulator: () => this.handleThreat('simulator'),
  appIntegrity: () => this.handleThreat('appIntegrity'),
  unofficialStore: () => this.handleThreat('unofficialStore'),
  hooks: () => this.handleThreat('hooks'),
  deviceBinding: () => this.handleThreat('deviceBinding'),
  secureHardwareNotAvailable: () => this.handleThreat('secureHardwareNotAvailable'),
  systemVPN: () => this.handleThreat('systemVPN'),
  passcode: () => this.handleThreat('passcode'),
  deviceID: () => this.handleThreat('deviceID'),
  obfuscationIssues: () => this.handleThreat('obfuscationIssues'),
  devMode: () => this.handleThreat('devMode'),
  adbEnabled: () => this.handleThreat('adbEnabled'),
  // screenshot: () => this.handleThreat('screenshot'),
  // screenRecording: () => this.handleThreat('screenRecording'),
  multiInstance: () => this.handleThreat('multiInstance'),
};

try {
  await setThreatListeners(actions);
  const config = {
    androidConfig: {
      packageName: '',
      certificateHashes: [''],  // Replace with your release (!) signing certificate hash(es)
    },
    iosConfig: {
      appBundleId: '',
      appTeamId: '',
    },
    watcherMail: '',
    isProd: true,
  };
  const response = await talsecStart(config);
  console.log(response); // FreeRASP started
} catch (error) {
  Alert.alert('FreeRASP failed to start:', error);
}

}

componentWillUnmount() { removeThreatListeners(); } render() { if (this.state.tamperDetected) { return ( <View style={styles.warning}> <Text>⚠️ Security Warning</Text> <Text> Your device cannot be verified. The app cannot run for security reasons. </Text> </View> ); } return ( <View style={{flex:1,backgroundColor:'green'}}> </View> ); } }

const styles = StyleSheet.create({ warning: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, backgroundColor:'white' } });

[tompsota]

Hi @gkasireddy202,

Your code snippet looks correct, regarding the integration of the RASP SDK. The integration for Class components is also described in our docs: https://docs.talsec.app/freerasp/integration/react-native#alternative-initialize-freerasp-in-a-class-component

Just make sure that the state updates accordingly. Also, I'd suggest to separate the logic to each check, and perform a reaction based on that. For example, when obfuscationIssues is detected, you will want to fix this on your end (user of the app has nothing to do with this), not limiting the user access to your app.

Regards, Tomas

[gkasireddy202]

@tompsota - Thanks for your reply. Can you please provide the sample code snippet for the above comment, because if I make any mistake, users will be unable to log in to the app?

[gkasireddy202]

@tompsota - Here is my logic implementation as you suggested. Is this ok now?

I need this action only privilegedAccess, debug, hooks, and appIntegrity.

const actions = { privilegedAccess: this.handlePrivilegedAccess, debug: this.handleDebug, hooks: this.handleHooks, appIntegrity: this.handleAppIntegrity, };

// /--- Individual reactions for each threat ---

handlePrivilegedAccess = () => { console.log('[FreeRASP] Critical threat: privilegedAccess'); this.setState({ tamperDetected: true }); };

handleDebug = () => { console.log('[FreeRASP] Critical threat: debug'); this.setState({ tamperDetected: true }); };

handleHooks = () => { console.log('[FreeRASP] Critical threat: hooks'); this.setState({ tamperDetected: true }); };

handleAppIntegrity = () => { console.log('[FreeRASP] Critical threat: appIntegrity'); this.setState({ tamperDetected: true }); };

[tompsota]

@gkasireddy202 , looks good to me.