Threat-Events™, In-App Threat Intelligence in React Native Apps

This knowledge base article shows you how easy it is to use Appdome Threat-Events™ to get in-app threat intelligence in React Native Apps and control the user experience in your React Native Apps when mobile attacks occur.

What are Threat-Events?

Appdome Threat-Events is a powerful threat-intelligence framework for Android & iOS apps, which is comprised of three elements: (1) a Threat Event, (2) the data from each Threat-Event, and (3) the Threat-Score™.

With Threat-Events, mobile developers can register, listen to, and consume real-time attack and threat data from Appdome’s mobile app security, anti-fraud, mobile anti-bot, and other protections within their mobile applications. This allows them to (1) ensure that mobile application workflows are aware of attacks and threats, (2) customize business logic and user experience based on the user’s risk profile and/or each attack or threat presented, and (3) pass the threat data to other record systems, such as app servers, mobile fraud analysis systems, SIEMs, and other data collection points.

The purpose of Threat-Events is to enable Android and iOS applications to adapt and respond to mobile app attacks and threats in real-time. Using Threat-Events will ensure the safety of users, data, and transactions.

Mobile Application Threat-Events vs. Threat-Scores

Appdome Threat Events can be used as a stand-alone implementation in React Native Apps or in combination with Threat Scores. Threat Events provide the mobile developer with the in-app notification of each attack or threat and the metadata associated with the attack. Threat Scores provide the mobile developer with the Threat Event event score and the combined (aggregate) mobile end-user risk at the time of the notification.

The figure below shows where you can find Threat-Events and Threat-Scores for each of the runtime mobile app security, anti-fraud, anti-malware, mobile antibot, and other protections available on Appdome:

To enable Threat-Events with any runtime protection, select the check box next to Threat-Events for that feature. Doing so will enable (turn ON) Threat-Events for that feature. To enable Threat-Scores for any runtime protection, click the up/down arrow associated with Threat-Scores to assign a specific score to each protection.
Threat-Scores must have a value greater than zero (0) and less than a thousand (1,000).

Threat-Events and Threat-Scores can be used with or in place of server-based mobile anti-fraud solutions.

Prerequisites for Using Threat-Events with React Native Apps

Here’s what you need to use Threat-Events with React Native Apps.

• Appdome account (If you do not yet have an account, create a free Appdome account).
• Appdome account class – Appdome DEV or higher.
• Mobile Application Source Code.
• Threat events license
• Xcode software
• Android Studio software
• React-Native mobile development framework
• Signing Credentials (e.g., signing certificates and provisioning profile) – see Signing Secure Android apps and Signing Secure iOS apps.

Code Snippet Required for Using Threat-Events with React Native Apps

Before consuming Threat-Events or Threat-Scores in your React Native Apps, confirm that the following conditions are met:

• Threat-Events and/or Threat-Scores have been enabled (turned ON) for the specific protection
• You are using the correct identifiers for the Threat-Events for each protection.
  You can find the specific identifiers for each Threat-Event and Threat-Score in the knowledge base article associated with each protection.

Using Threat-Events™ and Threat-Scores™ in React Native Apps is different between iOS and Android.

1. Open the iOS project in Xcode (resides in IOS folder under the root directory of the project).
2. Add an ADThreatEvents class and an ADThreatEvents header.
3. Make the ADThreatEvents class inherit from RCTEventEmitter and implements RCTBridgeModule.
   The ADThreatEvents header should contain the following code:

   #ifndef ADThreatEvents_h
   #define ADThreatEvents_h 
   
   #import "React/RCTBridgeModule.h"
   #import <React/RCTEventEmitter.h>
   
   @interface ADThreatEvents : RCTEventEmitter 
   @property (strong) NSMutableArray *supportedEventsArray; 
   @end 
   
   #endif/* ADThreatEvents_h */
   

4. Add the following code to ADThreatEvents class

   #import <Foundation/Foundation.h>
   #import "ADThreatEvents.h"
   #import "React/RCTBridgeModule.h"
   
   @implementation ADThreatEvents
   RCT_EXPORT_MODULE()
   // This method can be called from js to register to event
   RCT_EXPORT_METHOD(registerForThreatEvent:(NSString *)name ) {
       [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(handleNotification:) name:name object:nil];
       if (!self.supportedEventsArray) {
           self.supportedEventsArray = [NSMutableArray array];
       }
       [self.supportedEventsArray addObject:name];
   }
   
   // This method is needed to return all the events that will be called using sendEventWithName
   - (NSArray *)supportedEvents
   {
       return self.supportedEventsArray;
   }
   
   // This method will send notification to js
   - (void)handleNotification:(NSNotification *)notification
   { 
       [self sendEventWithName:notification.name body:notification.userInfo];
   }
   @end
   

   To register for Threat-Events, see the section Threat-Event Registration for 

   iOS and Android React Native Apps

   .

Below is the code snippet required for using Threat-Events™ and Threat-Scores™ in Android React Native Apps:

1. Open the Android project in Android Studio (it resides in the Android folder under the root directory).
   Add ADThreatEvents class with the following code:

   package com.reactnativedevevents;
   
   import android.content.BroadcastReceiver;
   import android.content.Context;
   import android.content.Intent;
   import android.content.IntentFilter;
   import android.os.Bundle;
   import android.util.Log;
   import com.facebook.react.bridge.Arguments;
   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.bridge.ReactContextBaseJavaModule;
   import com.facebook.react.bridge.ReactMethod;
   import com.facebook.react.bridge.ReadableMap;
   import com.facebook.react.bridge.WritableMap;
   import com.facebook.react.modules.core.DeviceEventManagerModule;
   import javax.annotation.Nonnull;
   
   public class ADDevEvents extends ReactContextBaseJavaModule {
   
       public class ThreatEventReceiver extends BroadcastReceiver {
   
           @Override
           public void onReceive(Context context, Intent intent) {
               Log.i("Appdome", "recieved");
               handleNotification(intent);
           }
   
           private void handleNotification(Intent intent) {
               WritableMap extras = Arguments.fromBundle(intent.getExtras());
               getReactApplicationContext()
                       .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                       .emit(intent.getAction(), extras);
           }
       }
       private ThreatEventReceiver threatEventReceiver = new ThreatEventReceiver();
   
       public ADDevEvents(@Nonnull ReactApplicationContext reactContext) {
           super(reactContext);
       }
   
       @Nonnull
       @Override
       public String getName() {
           return "ADDevEvents";
       }
   
       @ReactMethod
       public void registerForDevEvent(String action) {
           IntentFilter filter = new IntentFilter(action);
           Log.i("Appdome", "registered");
           this.getReactApplicationContext().registerReceiver(threatEventReceiver, filter);
       }
   
       @ReactMethod
       public void postDevEvent(String action, ReadableMap userInfo) {
           Intent intent = new Intent(action);
           if (userInfo != null) {
               Bundle bundle = Arguments.toBundle(userInfo);
               intent.putExtras(bundle);
           }
           this.getReactApplicationContext().sendBroadcast(intent);
       }
   }

2. Add ADThreatEventsPackage class with the following code:

   import com.facebook.react.ReactPackage;
   import com.facebook.react.bridge.NativeModule;
   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.uimanager.ViewManager;
   import java.util.ArrayList;
   import java.util.Collections;
   import java.util.List;
   import javax.annotation.Nonnull;
   
   public class ADThreatEventsPackage implements ReactPackage {
       @Nonnull
       @Override
       public List createNativeModules(@Nonnull ReactApplicationContext reactContext) {
           List modules = new ArrayList<>();
           modules.add(new ADThreatEvents(reactContext));
           return modules;
       }
   
       @Nonnull
       @Override
       public List createViewManagers(@Nonnull ReactApplicationContext reactContext) {
           return Collections.emptyList();
       }
   }
   

3. Append the newly created ADThreatEventsPackage() class to getPackages method in MainApplication class.
   Here is an example of the MainApplication class code:

   import android.app.Application;
   import com.facebook.react.ReactApplication;
   import com.facebook.react.ReactNativeHost;
   import com.facebook.react.ReactPackage;
   import com.facebook.react.shell.MainReactPackage;
   import com.facebook.soloader.SoLoader;
   import java.util.Arrays;
   import java.util.List;
   
   public class MainApplication extends Application implements ReactApplication {
   
       private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
           @Override
           public boolean getUseDeveloperSupport() {
           return BuildConfig.DEBUG;
           }
   
           @Override
           protected List getPackages() {
               return Arrays.asList(new MainReactPackage(), new ADThreatEventsPackage());
           }
   
           @Override
           protected String getJSMainModuleName() {
               return "index";
           }
       };
   
       @Override
       public ReactNativeHost getReactNativeHost() {
           return mReactNativeHost;
       }
   
       @Override
       public void onCreate() {
           super.onCreate();
           SoLoader.init(this,/* native exopackage */ false);
       }
   }
   

   To register for Threat-Events, see the section Threat-Event Registration for iOS and Android React Native Apps.

Threat-Event Registration for iOS and Android React Native Apps

1. 1. 1. Add NativeModules and NativeEventEmitter from react-native.
         1. Add the following code:

            const { ADThreatEvents } = NativeModules;
            const adThreatEvents = new NativeEventEmitter(ADThreatEvents);
            

         2. Add the following function:

            function registerToThreatEvent(action, callback) {
                NativeModules.ADThreatEvents.registerForThreatEvent(action);
                adThreatEvents.addListener(action, callback);
            }
            

      2. Register for a Threat-Events by calling registerToThreatEvent(action, callback) from JS.

Related Articles

• Threat-Events™, In-App Threat Intelligence in Kotlin Apps
• Threat-Events™, In-App Threat Intelligence in Native iOS Apps
• Threat-Events™, In-App Threat Intelligence in Cordova Apps
• Threat-Events™, In-App Threat Intelligence in Swift Apps
• Threat-Events™, In-App Threat Intelligence in Native Android Apps
• Threat-Events™, In-App Threat Intelligence in Maui, Xamarin Apps
• How To Implement Threat-Events in Java
• Implementing Threat Events – Best Practices