Announcing: React Native Starter Project with One-Click AWS Deployment and Serverless Infrastructure

Update (February 18, 2019): This article was originally posted on September 19, 2017. At that time, AWS Mobile Hub was used to cloud-enable this React Native Starter project. Going forward, we recommend that developers use AWS Amplify to cloud enable your React Native, iOS, Android, and web application projects. That said, the solution below may be out of date and incomplete. We are working on a new modern solution utilizing the Amplify Framework.

About AWS Amplify

AWS Amplify makes it easy to create, configure, and implement scalable mobile and web apps powered by AWS. Amplify seamlessly provisions and manages your mobile backend and provides a simple framework to easily integrate your backend with your iOS, Android, Web, and React Native frontends. Amplify also automates the application release process of both your frontend and backend allowing you to deliver features faster. Get started here.

React Native as a mobile development platform continues to grow in popularity. AWS has invested more in this area over the past year, and has been participating in React Native community events. Many developers want to enrich applications that they built using React Native with features like database access and content storage (images, videos, etc.), while protecting these resources with strong security mechanisms. Adding functionality such as user registration, sign-in, and MFA flows can be challenging to do in a cost effective and scalable manner.

Today, we’re announcing a new React Native starter project which has been open sourced on GitHub to help customers quickly add these features using AWS services. After deployment finishes, the starter can be run locally using npm or yarn on either iOS or Android. The project demonstrates user sign-up and sign-in flows along with MFA as a “Pet Tracker” application, allowing you to upload pictures of your pets along with some data (name, age, breed, and gender). The pictures are stored in an S3 bucket. The bucket can only be accessed by the user. Similarly, the records corresponding to these pictures are stored in an Amazon DynamoDB table on a per-user basis as well. This is protected by a serverless infrastructure that uses Amazon API Gateway and AWS Lambda.

In addition to the starter application, which you can modify to fit your needs, the project contains several Higher Order Components (HOCs) that you can use in your application. For instance, there is a WithAuth HOC that you can use to add just the sign-up, sign-in, and MFA portions of the project to your application. Similarly, there are HOCs for secure API and storage access as well.

In the starter, the import functionality automatically configures the following:

Amazon Cognito User Pools and Federated Identities
Amazon API Gateway, AWS Lambda, and Amazon DynamoDB
Amazon S3, including bucket policies and folder structures for private and public content
IAM roles and policy for the Lambda execution role
IAM roles and policy for the user roles that access API routes and S3 buckets after authentication

Prerequisites

To get the starter running quickly you need the following:

AWS account
NodeJS with NPM
React Native CLI
- npm install -g react-native-cli
(optional) AWS CLI

You can find the starter project demonstrating this functionality on GitHub. The repository describes the steps to get everything running and information about how to incorporate HOCs into your own application. In this blog post, we dive into some extra details.

Installation

Clone the GitHub repository.

After the deployment is complete, click Hosting and Streaming in the Mobile Hub console. At the bottom of the page, download the aws-exports.js file into the ./aws-mobile-react-native-starter/client folder of the cloned repo.

Use the following commands to run the application:

cd ../aws-mobile-react-native-starter/client
npm install
npm run ios #npm run android

Walkthrough of the application

After the application is running, you can see the SIGN IN screen. If this is your first time running the application, choose the SIGN UP tab in the lower right and complete the process with a username, password, email address, and valid phone number.

You will receive a confirmation code for signing up through SMS; enter the code in the prompt.

Navigate back to the main sign-up screen with your new user name and password. You’ll get another SMS verification code, this time as part of the MFA process. After signing in, you will see a blank screen. Choose plus (+) in the lower right and either take a picture of your pet or upload an existing image from your camera roll. Fill out the details such as name, date of birth, breed, and gender, and then choose Add Pet.

This stores the image in an S3 bucket and stores the record in Amazon DynamoDB, using Amazon API Gateway and AWS Lambda. The main screen shows this record and you can click it any time. The records are protected on a per-user basis, which is described later in this post.

Details and customizations

Storing data from your Camera Roll

In the Storage section of the starter repository, there is a walkthrough that describes how to adding capabilities to upload images to an S3 bucket. The image comes from an existing AWS URL in this HOC walkthrough. The starter application, however, contains code for uploading to Amazon S3 using CameraRoll, which requires a native bridge. The logic for this process is contained in the AddPet component, which you can view here and here.

The getPhotos() function pulls the images off of the Camera Roll:

  getPhotos = () => {
    CameraRoll
      .getPhotos({
        first: 20,
      })
      .then(res => {
        this.setState({ images: res.edges })
        this.props.navigation.navigate('UploadPhoto', 
		  { 
		    data: this.state, 
			updateSelectedImage: this.updateSelectedImage 
		})
      })
      .catch(err => console.log('error getting photos...:', err))
  }

You can use this utility function in your React components to open the Camera Roll and return an image. Set the function as a State value called images, which is a list of images passed to a function called updateSelectedImage(). This can be used with the TouchableWithoutFeedback component to show a camera dialog:

<TouchableWithoutFeedback onPress={this.getPhotos}>
{
    selectedImageIndex === null ? (
    <View style={styles.addImageContainer}>
        <Icon size={34} name='camera-roll' color={colors.grayIcon} />
        <Text style={styles.addImageTitle}>Upload Photo</Text>
    </View>
    ) : (
        <Image
        style={styles.addImageContainer}
        source={{ uri: selectedImage.node.image.uri }}
        />
    )
}
</TouchableWithoutFeedback>

The readImage() function is provided to have a consistent object across Android and iOS. The Camera Roll on these platforms is returned differently: on Android, the MIME type is present but it is not present on iOS. This function sets the MIME type on iOS using the result of a lookup on the file extension (for instance PNG will result in image/png).

Modifying the import process

You may also want to make changes to the Amazon Cognito configuration or the Amazon DynamoDB settings. If you look in the ./backend/import_mobilehub directory of the repo, there is a file called reactnative-starter.zip, which contains the YAML file that AWS Mobile Hub uses on One-Click import. Open this and look at the following section:

  
database: !com.amazonaws.mobilehub.v0.Database
    components:
      database-nosql: !com.amazonaws.mobilehub.v0.NoSQLDatabase
        tables:
          - !com.amazonaws.mobilehub.v0.NoSQLTable
            attributes:
              petId: S
              userId: S
            hashKeyName: userId
            hashKeyType: S
            rangeKeyName: petId
            rangeKeyType: S
            tableName: ___DYNAMIC_PREFIX___-pets
            tablePrivacy: protected

This section of code is what configures an Amazon DynamoDB table, which the AWS Lambda function uses as part of its environment variables. As outlined in our previous blog post, AWS Mobile Hub creates some default environment variables when importing a project, which you can use in your code. From your cloned repo, open ./backend/lambdas/crud/app.js and notice the following code:

const PETS_TABLE_NAME = `${process.env.MOBILE_HUB_DYNAMIC_PREFIX}-pets`;
AWS.config.update({ region: process.env.REGION });

These variables were automatically added to the AWS Lambda function configuration on import. You can view this in the console by clicking the Cloud Logic section of your Mobile Hub project, expanding the View resource details section, and clicking the Lambda function.

Additionally, in the YAML file are features for sign-in and user-files like in the following snippet:

sign-in: !com.amazonaws.mobilehub.v0.SignIn
    attributes:
      enabled: true
      optional-sign-in: true
    components:
      sign-in-user-pools: !com.amazonaws.mobilehub.v0.UserPoolsIdentityProvider
        attributes:
          alias-attributes:
            - preferred_username
            - phone_number
          mfa-configuration: ON
          name: userpool
          password-policy: !com.amazonaws.mobilehub.ConvertibleMap
            min-length: "8"
            require-lower-case: true
            require-numbers: true
            require-symbols: true
            require-upper-case: true
  user-files: !com.amazonaws.mobilehub.v0.UserFiles
    attributes:
      enabled: true

These features control settings, like the password policy or requiring MFA for the sign-up and sign-in process. You can use them with the starter application and when using this import with the WithAuth HOC. You can also control the creation of the S3 bucket for user content above in the user-files setting.

Fine-grained security controls

The starter application as part of the AWS Mobile Hub import process configures an IAM policy that allows users to read and write only their data. This means that the content they put in S3 buckets is private only to that logged in user and the records in the DynamoDB table (written by Amazon API Gateway and AWS Lambda) can only be read and written by that user.

To view this, in the Mobile Hub console for your project, click Resources on the left of the console and find the section labeled AWS Identity and Access Management Roles. Click the link that starts with reactnativestarter_auth_MOBILEHUB-XXXXXX. This opens the role in the IAM console that the user gets when he or she signs in. There are two policies to look at:

Per-user security on S3: This is controlled by the policy that starts with reactnativestarter_userfiles. If you view the policy JSON, notice that it has Resource settings that look similar to the following:

 "Resource": [
     "arn:aws:s3:::BUCKET/public/*",
     "arn:aws:s3:::BUCKET/protected/${cognito-identity.amazonaws.com:sub}/*",
     "arn:aws:s3:::BUCKET/private/${cognito-identity.amazonaws.com:sub}/*"
 ]

These policy variables validate the Amazon Cognito Identity per-user that was assigned upon account registration and initial sign-in. This means that only a specific user can access his or her protected or private folders, while the public folder anyone can access.

Per-user security in API Gateway, Lambda, and DynamoDB: This is controlled by the policy that starts with reactnativestarter_ as well as AWS Lambda. First, note the following condition in the policy JSON:
```
"Condition": {
     "ForAllValues:StringEquals": {
         "dynamodb:LeadingKeys": [
             "${cognito-identity.amazonaws.com:sub}"
         ]
     }
 }
```

This condition controls writes to Amazon DynamoDB in this starter project so that only users can write to their data but everyone can read the database records. You can also modify this policy to apply to both writes and reads as another example.

Finally, since the users access DynamoDB through Amazon API Gateway and AWS Lambda, we extract the identity in the Lambda function. If you view ./backend/lambdas/crud/app.js, you will notice that the condition for reading and writing to Amazon DynamoDB leverages the Amazon Cognito Identity ID:

dynamoDb.query({
    TableName: PETS_TABLE_NAME,
    KeyConditions: {
      userId: {
        ComparisonOperator: 'EQ',
        AttributeValueList: [req.apiGateway.event.requestContext.identity.cognitoIdentityId || UNAUTH],
      },
    },

The value req.apiGateway.event.requestContext.identity.cognitoIdentityId is provided by the AWS Serverless Express middleware library that allows this Lambda function to run as an Express server:

const awsServerlessExpressMiddleware = require('aws-serverless-express/middleware');

Wrapping up

As React Native continues to grow, we’re looking forward to bringing more to the ecosystem with the capabilities of this starter project. We hope the combination of React Native and AWS Mobile Hub accelerates your next project. Please give us feedback in the GitHub issues section of the repository.

Front-End Web & Mobile