AWS Amplify adds support for push notifications in React Native and provides new features for user authentication

AWS Amplify is a declarative JavaScript library for working with cloud services. It has built-in support for creating React Native applications. For push notifications in React Native, AWS Amplify introduces an easy-to-use client API and backend configuration over AWS Mobile Hub. The latest version of  the AWS Amplify JavaScript library has been enhanced to support push notifications in React Native and includes improvements for user authentication.

Enabling push notifications for React Native apps involves configuring the backend, configuring your app, and handling notification messages in your code with the Push Notification API.

Configuring the backend with Mobile Hub

Push notifications are generated by push notification services like the Apple Push Notification service (APNs) for iOS, Firebase Cloud Messaging (FCM) for Android, and Amazon Device Messaging (ADM) for Amazon devices. You can use AWS Mobile Hub and Amazon Pinpoint to orchestrate those services and send push messages to any mobile device, without dealing with multiple vendor SDKs in your app.

To enable push messaging in your app, follow these steps:

• Register your app with the platform push notification system (APNs, FCM, or ADM). Keep the registration keys and credentials for use in the next steps.
• Add ‘Messaging and Analytics’ to your project in Mobile Hub.
• Update the push notification credentials for the related notification services in Mobile Hub.
• Mobile Hub automatically provisions the AWS resources that your app requires. An Amazon Pinpoint project is created and integrated into your app backend.

You can later create campaigns for mobile push notifications in the Amazon Pinpoint console. For more information about working with Amazon Pinpoint campaigns, see the Amazon Pinpoint User Guide.

Configuring your React Native app

In order to receive and handle notifications on mobile devices, you need to configure your application as well. For iOS and Android, the required configuration parameters are different. Follow the setup instructions for notifications in the AWS Amplify notifications setup guide.

Testing and tracking notifications

After building your React Native app with the required configuration, you’re ready to send and receive notifications in your app. The Amazon Pinpoint console enables you to create push messaging campaigns, where you can send messages directly or schedule them for later.

When receiving notifications in your app, AWS Amplify provides two handlers that you can implement and use to add custom behavior. The following code sample displays the notification payload on an Android device.

PushNotification.onNotification(data => {
    alert('Notification payload', data);
});

PushNotification.onRegister(data => {
    alert('in app registration', data);
});

Developers  can use messaging payload information to create a custom campaign flow or to collect campaign information. When a push message is sent over Amazon Pinpoint, AWS Amplify automatically sends tracking data back to Amazon Pinpoint. Campaign statistics are displayed in the Amazon Pinpoint console. The console displays helpful information, such as delivery rates and the percentage of users that open the app after receiving the notification.

Authorization improvements

In addition to push notification support, AWS Amplify has added authorization improvements, such as sign-in with Federated Identities and custom user attributes for Amazon Cognito.

Federated Identities support enables developers to integrate Google, Facebook, and Amazon social sign-in with their JavaScript-based applications for the web. With support for custom user attributes, developers can create and update custom user attributes and manage user information extensively in their apps.

Other features

Additional features in this release of AWS Amplify include:

• A customizable Authenticator component for React.
• Support for custom domains and regional endpoints with Amazon API Gateway.
• Improvements to the type definitions for TypeScript.

For more information about Amplify, see our developer documentation.