Authentication 🔐 CUSTOM SETUP  /  AWS Amplify + React Native
Tags: aws, reactnative, awsamplify, authentication
Published: 2019-12-09 21:43:33

One of the most requested topics among my channel subscribers is authentication and authorization in the React Native application. Therefore, I decided to devote a separate post to this issue, but before we start coding, it is necessary to deal with the definition of Authentication/Authorization.

[![AWS Amplify](https://fullstackserverless.github.io/img/auth/00.gif)](https://youtu.be/QMObthDaewQ)

**Authentication** is a verification of the conformity of the subject and the one he is trying to impersonate using some unique information (fingerprints, iris color, voice, etc.), in the simplest case — with the help of mail and password.

**Authorization** is the verification and determination of the authority to perform certain actions in accordance with previously performed authentication
At the end of this article, we will make this mobile application:

![Flow](https://thepracticaldev.s3.amazonaws.com/i/l1qmvfwl7ko0rwvciis7.png)

Authentication is an integral part of almost any application. Knowing who the user is, the unique identifier of the user, what permissions the user has, and whether they are logged in, allows your application to display the correct views and return the correct data for the current logged in user.

Most applications require mechanisms for registering users, logging in, processing encryption and updating passwords, as well as many other tasks related to identity management. Modern applications often require things like OAUTH (open authentication), MFA (multi-factor authentication) and TOTP (time-based time passwords).

In the past, developers had to manually spin all of these authentication features from scratch. This task alone can take weeks or even months from the development team to do everything right and make it safe. In this article, you’ll learn how to correctly and securely implement authentication in a React Native application using Amazon Cognito with AWS Amplify.

Amazon Cognito is AWS’s fully managed identity service. Cognito provides easy and secure user registration, logon, access control, token updating, and user identity management. Cognito scales to millions of users and also supports logging in with social network providers such as Facebook, Google and Amazon.

##Cognito consists of two main parts: user pools and identity pools.
**User Pools** — User pools provide a secure user directory that stores all of your users and scales to hundreds of millions of users. This is a fully managed service. Like serverless technology, user pools are easy to configure, without having to worry about supporting any infrastructure. User pools are what manage all the users who register and log in to the account, and is the main part that we will focus on in this article.

**Identity pools** — Identity pools allow you to authorize users who are logged into your application to access various other AWS services. Suppose you want to give a user access to a lambda function so that he can receive data from another API. You can specify this when creating the identity pool. User pools include the fact that Cognito or even Facebook or Google user pools can be the source of these identifiers.

##A scenario where an Amazon Cognito user pool and an identity pool are used together.

See the diagram for the general Amazon Cognito script. The goal here is to authenticate your user and then give him access to another AWS service.

![Amazon Cognito](https://thepracticaldev.s3.amazonaws.com/i/5sztva1f6d2akpq2dahc.png)

1. At the first stage, the user of your application enters the system through the user pool and receives the tokens of the user pool after successful authentication.

2. Your application then exchanges user pool tokens for AWS credentials through the identity pool.

3. Finally, your application user can then use these AWS credentials to access other AWS services such as Amazon S3 or DynamoDB.
Cognito User Pools allows your application to call various methods for a service to manage all aspects of user authentication, including things like:
*User registration*
*User Login*
*User Logout*
*Change user password*
*Reset User Password*
*MFA Code Verification*
*Amazon Cognito Integration with AWS Amplify*

AWS Amplify supports Amazon Cognito in a variety of ways. First of all, you can create and configure Amazon Cognito services directly from the AWS Amplify command-line interface. By creating an authentication service through the CLI, you can call various methods (for example, signUp, signIn and signOut) from a JavaScript application using the Amplify JavaScript client library.

Amplify also has pre-configured user interface components that allow you to build entire authentication flows in just a couple of lines of code for environments such as React, React Native, Vue, and Angular.

##You ask how much does it all cost?

Using Amazon Cognito Identity to create a user pool, you pay only for the number of active users per month (MAU). MAUs are users who have performed at least one authentication operation during a calendar month: registration, authorization, token renewal, or password change. Subsequent sessions of active users and inactive users in this calendar month are not paid.

![Amazon Cognito Identity - Cost](https://thepracticaldev.s3.amazonaws.com/i/c9g74wdi2djsw37riqoc.png)

CODING TIME 👨🏼‍💻👩🏻‍💻

![CODING TIME](https://media.giphy.com/media/836HiJc7pgzy8iNXCn/giphy.gif)

PART 1
All the code for this part can be found on [Github](https://github.com/react-native-village/messaga/tree/Part1).



![Flow](https://miro.medium.com/max/7680/1*dbFzVVHRemOjKL0VK2kFEg.png)


##Step 1
##Create a new project ⚛️

```bash
react-native init messaga
```


We start the project 🚀
iOS

```bash
cd messaga && react-native run-ios
```

Android
```bash
cd messaga && react-native run-android
```


##Step 2
##We connect icons👾
Since the icons are used by the AWS Amplify framework, we therefore connect them according to this [instruction](https://github.com/oblador/react-native-vector-icons#installation) 📃.

Check for errors. Add to App.js

```javascript
import Icon from 'react-native-vector-icons/FontAwesome5'

const App = () => {
  return (
    <>
      <Icon name="comments" size={30} color="#900" />
    </>
  )
}
```


##Step 3
##Register your AWS account

We register according to this [instruction](https://aws-amplify.github.io/docs/) 📃 and check all 5 steps according to the video tutorial..
Attention!!! You will need a bank card 💳, where should be more than 1 $ 💵
There we look and put the Amplify Command Line Interface (CLI)


##Step 4
##Initializing AWS Amplify in a React Native Project

Initialize our backend in the root directory of the React Native project.

```bash
amplify init
```

We answer the questions:

![amplify init](https://miro.medium.com/max/2948/1*-dhY1viIsQ50ih-HKj2trg.png)

Next is the initialization of the project. 🚀
⠧ Initializing project in the cloud…
Your project has been successfully initialized and connected to the cloud!


##Step 5
##Connecting Authentication Plugin — Auth 🔐

Now that the application is in the cloud, you can add some features, such as allowing users to register with our application and log in.
We connect the authentication plugin.

```bash
amplify add auth
```

Select the default configuration. This adds auth resource configurations locally to your amplify/backend/auth directory.
Select the profile we want to use. default. Enter and how users will log in. Email (write off money for SMS).

####Select the profile we want to use. default. Enter and how users will log in. Email (write off money for SMS).

![amplify add auth](https://cdn-images-1.medium.com/max/1600/1*KD6KyPjd9Ac3REpgsTC9CQ.png)

Successfully added resource yourname locally
Send changes to the cloud 💭

```bash
amplify push
```
✔ All resources are updated in the cloud


##Step 6
##Connect AWS Amplify to React Native Project ⚛️

Details in this [manual](https://aws-amplify.github.io/docs/js/react) 📃, and briefly and in a straight line like this:

```bash
yarn add aws-amplify@1.2.4 @aws-amplify/core@1.2.4 aws-amplify-react-native amazon-cognito-identity-js
```

After installation, be sure to go to the ios folder and set the pods

```bash
cd ios && pod install && cd ..
```


##Step 7
##Editing the project structure
Create the /src directory and transfer the App.js file there, renaming it to index.js with this content
Edit import in root /yourname/index.js

```diff
- import App from './App'
+ import App from './src'
```

##Step 8
##Minimal project configuration and Authenticator module

Amplify.configure - project configuration
Authenticator - [The AWS Amplify Authentication Module](https://aws-amplify.github.io/docs/js/authentication#using-components-in-react--react-native) provides authentication APIs and building blocks for developers who want to create user authentication capabilities.

```javascript
import React from 'react'
import {StatusBar} from 'react-native'
import Amplify from '@aws-amplify/core'
import {Authenticator} from 'aws-amplify-react-native'
import awsconfig from '../aws-exports'

Amplify.configure({
  ...awsconfig,
  Analytics: {
    disabled: true,
  },
})

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <Authenticator usernameAttributes="email" />
    </>
  )
}

export default App
```

Run the simulator


##Step 9
##Edit Inputs in App.js

```diff
const signUpConfig = {
  hideAllDefaults: true,
  signUpFields: [
    {
      label: 'Email',
      key: 'email',
      required: true,
      displayOrder: 1,
      type: 'string',
    },
    {
      label: 'Password',
      key: 'password',
      required: true,
      displayOrder: 2,
      type: 'password',
    },
  ],
}


      <Authenticator
        usernameAttributes="email"
+       signUpConfig={signUpConfig}
      />
```

##Step 10
##Change the theme of UI🖌
We create an export point for our future components /src/components/index.js with the content

```javascript
export * from './AmplifyTheme'
```

and accordingly create the /src/components/AmplifyTheme/index.js file itself with the content

```javascript
import {StyleSheet} from 'react-native'

export const deepSquidInk = '#152939'
export const linkUnderlayColor = '#FFF'
export const errorIconColor = '#30d0fe'

const AmplifyTheme = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-around',
    paddingTop: 20,
    width: '100%',
    backgroundColor: '#FFF',
  },
  section: {
    flex: 1,
    width: '100%',
    padding: 30,
  },
  sectionHeader: {
    width: '100%',
    marginBottom: 32,
  },
  sectionHeaderText: {
    color: deepSquidInk,
    fontSize: 20,
    fontWeight: '500',
  },
  sectionFooter: {
    width: '100%',
    padding: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 15,
    marginBottom: 20,
  },
  sectionFooterLink: {
    fontSize: 14,
    color: '#30d0fe',
    alignItems: 'baseline',
    textAlign: 'center',
  },
  navBar: {
    marginTop: 35,
    padding: 15,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  navButton: {
    marginLeft: 12,
    borderRadius: 4,
  },
  cell: {
    flex: 1,
    width: '50%',
  },
  errorRow: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  errorRowText: {
    marginLeft: 10,
  },
  photo: {
    width: '100%',
  },
  album: {
    width: '100%',
  },
  button: {
    backgroundColor: '#30d0fe',
    alignItems: 'center',
    padding: 16,
  },
  buttonDisabled: {
    backgroundColor: '#85E4FF',
    alignItems: 'center',
    padding: 16,
  },
  buttonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
  formField: {
    marginBottom: 22,
  },
  input: {
    padding: 16,
    borderWidth: 1,
    borderRadius: 3,
    borderColor: '#C4C4C4',
  },
  inputLabel: {
    marginBottom: 8,
  },
  phoneContainer: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  phoneInput: {
    flex: 2,
    padding: 16,
    borderWidth: 1,
    borderRadius: 3,
    borderColor: '#C4C4C4',
  },
  picker: {
    flex: 1,
    height: 44,
  },
  pickerItem: {
    height: 44,
  },
})

export {AmplifyTheme}
```

And plug the theme into the Authenticator src/index.js component

```diff
+import {AmplifyTheme} from './components'

      <Authenticator
        usernameAttributes="email"
        signUpConfig={signUpConfig}
+       theme={AmplifyTheme}
      />
```


##Step 11
##Connecting language support
Add export to /src/components/index.js

```javascript
export * from './Localei18n'
```
Create the file /src/components/Localei18n/index.js with the contents

```javascript
import {NativeModules, Platform} from 'react-native'
import {I18n} from '@aws-amplify/core'

let langRegionLocale = 'en_US'

// If we have an Android phone
if (Platform.OS === 'android') {
  langRegionLocale = NativeModules.I18nManager.localeIdentifier || ''
} else if (Platform.OS === 'ios') {
  langRegionLocale = NativeModules.SettingsManager.settings.AppleLocale || ''
}

const authScreenLabels = {
  en: {
    'Sign Up': 'Create new account',
    'Sign Up Account': 'Create a new account',
  },
  ru: {
    'Sign Up': 'Создать аккаунт',
    'Forgot Password': 'Забыли пароль?',
    'Sign In Account': 'Войдите в систему',
    'Enter your email': 'Введите email',
    'Enter your password': 'Введите пароль',
    Password: 'Пароль',
    'Sign In': 'Вход',
    'Please Sign In / Sign Up': 'Войти / Создать аккаунт',
    'Sign in to your account': 'Войдите в свой аккаунт',
    'Create a new account': 'Cоздайте свой аккаунт',
    'Confirm a Code': 'Подтвердите код',
    'Confirm Sign Up': 'Подтвердите регистрацию',
    'Resend code': 'Еще отправить код',
    'Back to Sign In': 'Вернуться к входу',
    Confirm: 'Подтвердить',
    'Confirmation Code': 'Код подтверждения',
    'Sign Out': 'Выход',
  },
}

// "en_US" -> "en", "es_CL" -> "es", etc
const languageLocale = langRegionLocale.substring(0, 2)
I18n.setLanguage(languageLocale)
I18n.putVocabularies(authScreenLabels)

const Localei18n = () => null

export { Localei18n }
```

And we connect the Localei18n component in src/index.js

```diff
import {
   AmplifyTheme,
+  Localei18n
} from './components'
```

```diff
+ <Localei18n />
    <Authenticator
      usernameAttributes="email"
      signUpConfig={signUpConfig}
      theme={AmplifyTheme}
    />
```

Part 1 done ✅

#PART 2
All the code for this part can be found on [Github](https://github.com/react-native-village/messaga/tree/Part2).

![flow](https://miro.medium.com/max/5200/1*XvC2-mTu0aRQtIF2FCpeig.png)

Firstly, in the official documentation Amplify says:

> Data is stored unencrypted when using standard storage adapters (`localStorage` in the browser and `AsyncStorage` on React Native). Amplify gives you the option to use your own storage object to persist data. With this, you could write a thin wrapper around libraries like:
`react-native-keychain`
`react-native-secure-storage`
Expo’s secure store


that the data is stored in an unencrypted form, and this is a risk 🕷 information security with possible negative consequences 🕸.

Secondly, the standard UI from Amplify does not always satisfy the UX coming from the customer, so we will solve these two problems in this part.

👉🏻[To be continued](https://fullstackserverless.github.io/docs/auth1-02)