When building a real-world mobile application there are a ton of essential basic requirements.

You need to have a way to authenticate users, you want to track user engagement & usage, & you probably want to be able to send push notifications and maybe base these messages on events or user behavior. Then you have to manage your application data and are probably dealing with multiple REST endpoints. You’re also usually dealing with media such as images & videos and you hopefully want to be able to handle offline use cases so that the app continues to work whether or not they are online.

More and more developers & companies are adopting and taking advantage of managed services in order to lessen their dependence on building & maintaining their own infrastructure and having to create this functionality from scratch, lowering the cost and decreasing the complexity of their back end development infrastructure in the process.

It’s now even possible for a single developer without a lot of traditional back end experience to be able to build and ship a fully featured application by taking advantage of these managed backend services, bringing about what I consider the next revolution of architecture that will dominate in the future, backend-less application development.

Some of the more popular existing use cases that come to mind are push notification services, authentication providers, & analytics services. There are now also services like AWS AppSync that offer completely managed data layers so you can also offload the complexity & work of building & maintaining your backend & API to a managed service with a single GraphQL endpoint.

In this post, we’ll look at how to leverage the AWS Mobile CLI to quickly spin up these types of services & add new this new functionality to your React Native application using the AWS Amplify JavaScript SDK.

The AWS Amplify JavaScript SDK was created to provide a unified API across many of AWS’ services & managed services. There is first class support for JavaScript frameworks like React Native, React, & Angular.

The projects we will create in this post will be created from the AWS Mobile CLI but will also be accessible from within the AWS Mobile Hub console as we’ll see in just a moment.

We’ll touch on how to not only create these services through the AWS Mobile CLI but also show how to integrate them into a React Native application using AWS Amplify.

Getting Started

Creating the React Native App

First we’ll create a new React Native project using either the React Native CLI or the Create React Native App CLI:

react-native init ServerlessProject

Next, we’ll change into the directory:

cd ServerlessProject

Installing the AWS Mobile CLI

The AWS Mobile CLI offers a way to quickly & easily spin up new AWS Mobile Hub projects from the command line.

To get started we’ll now need to install & configure the AWS Mobile CLI if you don’t already have it installed:

npm i -g awsmobile-cli

awsmobile configure

If you’re not sure how to work with AWS IAM roles, check out this video walking through how to configure the AWS Mobile CLI from end to end in just a couple of minutes.

Once the CLI is installed & configured, we need to go ahead and create a new AWS Mobile Project. From within the new React Native project root directory create a new AWS Mobile project:

awsmobile init

Now, answer the default to all questions from awsmobile init .

This will also install a couple of local dependencies to our project. You should now see aws-amplify & aws-amplify-react-native in your package.json.

Finally, we need to link an aws-amplify native dependency:

react-native link amazon-cognito-identity-js

We now have a new Mobile Hub project created in our AWS dashboard. You can view the project & configuration at anytime by running awsmobile console from the root of the React Native directory.

Configuring the React Native app with your new AWS Mobile Hub project.

Now that the Mobile Hub project has been created & the dependencies are all installed, we can configure the React Native project to recognize our configuration.

In index.js, let’s add the following lines of code:

import { AppRegistry } from 'react-native';

import App from './App'; import Amplify from 'aws-amplify' // NEW

import config from './aws-exports' // NEW

Amplify.configure(config) // NEW AppRegistry.registerComponent('ServerlessProject', () => App);

User Sign Up & Sign In

The first thing we’ll do is look at how we can add user sign up & sign in.

To do so we’ll need to enable it in our Mobile Hub Project.

awsmobile user-signin enable awsmobile push

Now user signup and signin is enabled through Amazon Cognito and we can immediately start signing users up and in.

If we look at the docs we’ll notice that there are two distinct ways to do this:

We can use the React components & higher order components for preconfigured functionality & UI We can write this functionality from scratch using the Auth class which contains methods like Auth.signUp() & Auth.signIn()

React Native Components

Let’s first check out how to use the withAuthenticator HOC from aws-amplify-react-native .

In App.js, below the React Native imports let’s import the withAuthenticator HOC:

import { withAuthenticator } from 'aws-amplify-react-native'

Next, instead of having the default export on the class we’ll use the HOC as the default export:

class App extends Component {

// all of this code stays the same

} export default withAuthenticator(App)

Next, run the app:

react-native run-ios

// or

react-native run-android

Now, we have a completely functioning sign up / sign in process in front of our main app.

To achieve similar functionality you can also use the <Authenticator /> component to wrap whatever main component you would like to authenticate:

<Authenticator>

<App />

</Authenticator>

In the wrapped component (App), you will have access to a prop called authState that you can use to conditionally render. authState will have values of signIn , signUp , & signedIn among others to properly identify the current authentication state.

Auth Class

We can also use the Auth class to authenticate users.

import { Auth } from 'aws-amplify' // in your component

Auth.signIn('myusername', 'mYC0MP13xP@55w0r8')

Auth has over 30 methods including signUp , confirmSignUp , signIn , confirmSignIn , & changePassword . You can also do things like change MFA type to TOTP & update user attributes!

When you sign in using Auth.signIn , the session data will be persisted and can be accessed at any time using the Auth.currentauthenticateduser method.

Once you have signed in new users, you can view the configuration in AWS Mobile Hub or go to https://console.aws.amazon.com/cognito and view the users & Amazon cognito configuration for the app.

To view your current project configurations you can always type in:

awsmobile console

Then click on Resources in the top right corner, and click on the resource you would like to view 👇.