Category: Mobile App

Mobile app security has become evenly important in today’s world. A rupture in mobile security can give hackers access to the user’s personal life in real-time, also disclose data like their location, personal & banking related information, and much more.

App Developers should aim to create applications that meet all user expectations regarding security & safety. All the below approaches and methods enable successful application development, making it difficult for attackers to get access to sensitive data.

Let’s find out some best practices for mobile security

App-Level Security

To achieve data security, Encryption is the most operative way. The sensitive data in all mobile applications developed should be encrypted with complex algorithms such as RSA, AES, and DES.

Server Side Security

While developing mobile applications mobile backend security is also important. Below are the few things you need to know to protect your mobile sensitive data:

• Use HTTPS back end for all API calls as this protocol is designed for secure communications over computer networks and the internet.
• API call limits on the server-side.
• Authentication should expire after a reasonable amount of time.

Protected local storage

Local storage: where Applications media files, settings files, and other files are stored.

In protected local storage, data is encrypted with the help of a key. And to read these encrypted files(video, text, audio, etc.) we have to decipher it by a key (eg.password) which converts data back into the plain text.

Code Obfuscation

Code obfuscation is the intentional act of creating a source code or machine code that is difficult for hackers to understand. 

Obfuscators are used to automatically convert programming code into a format that cannot be understood by humans. 

How does it work?

• It encrypts some or the entire code.
• It removes metadata which may reveal information about the libraries or APIs used.
• It renames classes and variables so they cannot be guessed

In iOS, obfuscation technique is not generally used as its libraries are closed, whereas Android has open-source libraries so it becomes necessary for android developers to obfuscate code.

Encrypt Cache

A device’s cache saves data for all apps and websites that have been used on the device. If the cache is not encrypted, hackers can easily access data stored in it. Clearing the cache every now and then is necessary to free up some space on your phone or tablet.

Session Handling

One of the best ways to handle sessions more securely is to use tokens instead of device identifiers as it can be revoked whenever needed. Another option is to consider session expiration while developing an application.

Here in Neova, we develop applications that satisfy the needs of the user and focus their efforts on the security aspect as well.

Additional resources

For more information about making your application more safe & secure, consult the following resources.

• Android: App security best practices
• iOS: Security

WHAT IS A PUSH NOTIFICATION? AND WHY IT MATTERS?

Push notification is a message that pops up on your mobile device even when you are not using the app. For app publishers, it is a gateway to speak directly with app users.  Examples include getting a notification when a transaction is performed or getting a new offer from your online retailer – these notifications pop up only for Apps that are previously installed on the device.

According to a survey, implementing push notification improves app engagement by 88%. Push notification was introduced to attract users to return to an application. The survey mentioned that the retention rate of an app increased by 4 to 10x. 

This blog will guide you to implement push notification using Firebase in React Native for iOS devices.

Requirements:

1. React Native Project
2. Xcode Version >= 10.x
3. Apple Developer license
4. Physical iOS device

Following are the important steps to be performed:

STEP 1. CREATE CERTIFICATE NEEDED FOR PUSH NOTIFICATION

 iOS: To start using push notification with iOS device following certificates are mandatory:

1. Login to https://developer.apple.com/
2. Go to Certificate ID’s and profiles
3. Go to Identifiers
4. Select app Id’s
   1. Click on + to create new app id
   2. Enter name of your App
   3. Enter Bundle ID(same as XCode bundle Identifier)
      1. Go to Xcode
      2. General->Identity->Bundle Identifier
   4. Select Push Notification
   5. Click on Continue
   6. Click on Register and then Done
5. Go Back to App Id’s
   1. Select your app from App Id’s
   2. Click on Edit
   3. Under Push Notification Section
      1. Select  Development SSL Certificate => For Development or
      2. Select  Production  SSL Certificate=> For Production.
   4. Click on Create Certificate
   5. Click on Continue
   6. Now, upload Signing Certificate.
      1. Create the Signing Certificate needed for Apple Push Notification Service SSL.
         1. Go to Keychain Access on your Desktop
            1. Tab on Keychain Access->Certificate Assistant
            2.  Select “Request a Certificate From a Certificate Authority”
            3. Enter Email Address
            4. Select Save to disk
            5. Click on Continue and save the file
         2. Choose .csr file we created in previous topic.
         3.  Download your Certificate
6. To Convert .csr file to .p12 file
   1. Double Click on recently generated .cer file.
   2. If you have previously created .csr file.
      1. Go to Keychain Access on your Desktop
      2.  Go to Certificates
      3.  Select your certificate, right-click and choose to export in .p12 format. 
7. Enable Capabilities
   1. In Xcode, enable the following capabilities:
      1. Push Notifications
      2. Background modes > Remote notifications

STEP 2. FIREBASE SETUP

1. Login to https://console.firebase.google.com
2. Click on Add Project (Existing User) / Click on Create Project (New User)
   1. Enter your new Project Name, Project Id and Region.
   2. Click on Continue button
   3. Now you are on Homepage
3. Click on iOS option
   1. Enter Bundle ID(same as xcode bundle Identifier)
   2. Enter App nickname and App Store ID
   3. Click on Register  app and then Done
4. Download GoogleService-Info.plist file and add into your root folder of your project.

STEP 3. TO INITIALIZE FIREBASE INTO AN EXISTING PROJECT

1.Add library:
For React Native firebase(V5.x.x):

npx install --save react-native-firebase

Or

npm install --save react-native-firebase

react-native link react-native-firebase 

For React Native Firebase(V6.x.x):

yarn add @react-native-firebase/app

For users on React Native >= 0.60, the module will be automatically linked to your project.

2.Add following into your existing project:

Common for React Native Firebase(V5.x.x and V6.x.x):

a.Add following line at the top of ios/[YOUR APP NAME]/AppDelegate.m file:

@import Firebase;

b.Add the following line at beginning of didFinishLaunchingWithOptions:(NSDictionary*)launchOptions method :

if ([FIRApp defaultApp] == nil) {
[FIRApp configure];
}

3.Make your pods up-to-date in podfile:
For React Native firebase(V5.x.x):
1.Add following pod:

pod 'Firebase/Core'

2.Run

pod install

For React Native firebase(V6.x.x):

$ cd ios/
$ pod install --repo-update

STEP 4. TO MAKE USE OF FIREBASE CLOUD MESSAGING

For React Native firebase(V5.x.x):
1.Add following pod:

pod ‘Firebase/Messaging'

2.Run

pod install

For React Native firebase(V6.x.x):

yarn add @react-native-firebase/messaging

cd ios/ && pod install

STEP 5. SETTING UP THE APPLICATION TO GET A PUSH NOTIFICATION

While setting up you will come across the following terms:

1. Message types: There are two types of messages handled by FCM:
   1. Data messages: Data messages are used to handle data along with the notification.
   2. Notification messages: Notification messages are a type in which FCM automatically triggers a message on the user’s device.
2. Device Registration Token: During the initial phase of your app, the FCM SDK generates a device registration token, which is responsible to get a notification on your device. If the user initializes the app after clearing app data or uninstalls the app, the device registration token is regenerated. 

STEP 6. IMPLEMENTATION

Add following functions in app.js to receive a push notification on mobile:

import React, {Component} from 'react';
import {StyleSheet, Text, View, Alert, AsyncStorage} from 'react-native';
import firebase from 'react-native-firebase';
export default class App extends Component{
  async componentDidMount() {
    this.checkPermission();
    this.createNotificationListeners();
  }
  componentWillUnmount() {
    this.notificationListener;
    this.notificationOpenedListener;
  }
  //Check whether Push Notifications are enabled or not
  async checkPermission() {
    const enabled = await firebase.messaging().hasPermission();
    if (enabled) {
      this.getToken();
    } else {
      this.requestPermission();
    }
  }
  //Get Device Registration Token
  async getToken() {
    let fcmToken = await AsyncStorage.getItem('fcmToken');
    if (!fcmToken) {
      fcmToken = await firebase.messaging().getToken();
      if (fcmToken) {
        console.log('fcmToken:', fcmToken);
        await AsyncStorage.setItem('fcmToken', fcmToken);
      }
    }
  }
  //Request for Push Notification
  async requestPermission() {
    try {
      await firebase.messaging().requestPermission();
      // If user allow Push Notification
      this.getToken();
    } catch (error) {
      // If user do not allow Push Notification
      console.log('Rejected');
    }
  }
  async createNotificationListeners() {
    
    // If your app is in Foreground
   
    this.notificationListener = firebase.notifications().onNotification((notification) => {
        const localNotification = new firebase.notifications.Notification({
          show_in_foreground: true,
        })
        .setNotificationId(notification.notificationId)
        .setTitle(notification.title)
        .setBody(notification.body)
        firebase.notifications()
          .displayNotification(localNotification)
          .catch(err => console.error(err));
    });

    //If your app is in background
    this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen) => {
      const { title, body } = notificationOpen.notification;
      console.log('onNotificationOpened:');
      Alert.alert(title, body)
    });

    // If your app is closed
    const notificationOpen = await firebase.notifications().getInitialNotification();
    if (notificationOpen) {
      console.log('getInitialNotification:');
    }
    // For data only payload in foreground
    this.messageListener = firebase.messaging().onMessage
((message) => {
      //process data message
      console.log("Message", JSON.stringify(message));
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Push Notification Demo</Text>
        <Text style={styles.instructions}>By Neova Solutions..</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
 

To test your application you can send notification using Firebase Console.

Cheers ! We are Done.https://www.youtube.com/embed/cxo4A0RQPjQ

I hope this blog helped you implement push notification using firebase for your React native iOS Apps. 

At Neova, we have an expert team of react native developers that are eager to work on the next big mobile app. Feel free to reach us at sales@neovatechsolutions.com for any queries.

Source Code:

More details: