Mobile-App with React Native & AWS Amplify

🔥 Mobile-App with React Native & AWS Amplify

1. Creating React-Native App

We can use the React Native CLI or Expo CLI to create a new React Native project.

1.1. Using the React Native CLI

Creating React-Native Mobile-App using React-Native CLI

    npx react-native init Job4uMobile
    cd Job4uMobile
    # npm install --save aws-amplify aws-amplify-react-native uuid amazon-cognito-identity-js
    yarn add aws-amplify aws-amplify-react-native uuid amazon-cognito-identity-js

    ## install the pods for iOS
    cd ios
    pod install --repo-update
    cd ..

1.2. Using Expo CLI

Creating React-Native Mobile-App using Expo CLI

    npx expo init Job4uMobile
    ## > Choose a template: blank
    cd Job4uMobile
    ## npm install --save aws-amplify aws-amplify-react-native uuid
    yarn add aws-amplify aws-amplify-react-native uuid

1.3. Running the Mobile-App

npx react-native run-ios

## or if running android
npx react-native run-android

## or, if using expo
# expo start

2. Initializing the AWS Amplify

2.1. Configuring the Amplify CLI

[x] npm install -g @aws-amplify/cli
[x] amplify configure

Configure the CLI with our credentials

[x] Specify the AWS Region: ap-southeast-1
[x] Specify the username of the new IAM user: amplify-user
- In the AWS Console, click Next: Permissions, Next: Tags, Next: Review, & Create User to create the new IAM user. Then, return to the command line & press Enter.
[x] Enter the access key of the newly created user:
accessKeyId: YOUR_ACCESS_KEY_ID
secretAccessKey: YOUR_SECRET_ACCESS_KEY
[x] Profile Name: amplify-user

2.2. Initializing Amplify Project

[x] amplify init

Initialize the new Job4uMobile Amplify project

[x] Enter a name for the project: Job4uMobile
[x] Enter a name for the environment: dev
[x] Choose your default editor: Visual Studio Code (or your favorite editor)
[x] Please choose the type of app that you're building javascript
[x] What javascript framework are you using react-native
[x] Source Directory Path: /
[x] Distribution Directory Path: /
[x] Build Command: npm run-script build
[x] Start Command: npm run-script start
[x] Do you want to use an AWS profile? Y
[x] Please choose the profile you want to use: amplify-user

Amplify-CLI has initialized the project configuration: amplify & aws-exports.js

React-Native Application to be aware of new AWS Amplify project by referencing the auto-generated aws-exports.js

2.3. Configuring React Native

2.3.1. Using React-Native CLI

Open index.js and add the following code

    // index.js
    import Amplify from 'aws-amplify'
    import config from './aws-exports'
    Amplify.configure(config)

2.3.2. Using the Expo CLI

Open App.js and add the following code

    // App.js
    import Amplify from 'aws-amplify'
    import config from './aws-exports'
    Amplify.configure(config)

3. Adding Authentication

[x] amplify add auth

Adding Authentication

[x] Do you want to use default authentication and security configuration? Default configuration
[x] How do you want users to be able to sign in when using your Cognito User Pool? Username (keep default)
[x] Do you want to configure advanced settings? No

amplify push to create the AWS resources.

amplify console to view the AWS services any time after their creation.

3.1. Using `withAuthenticator`

App.js > import withAuthenticator Higher Order Component

    // App.js & the withAuthenticator` HOC (Higher Order Component)
    import { withAuthenticator } from 'aws-amplify-react-native'

[x] Wrap our default export (the App component) with the withAuthenticator HOC

    export default withAuthenticator(App, {
        includeGreetings: true
    })

Authentication flow has been added in front of Job4uMobile.

# iOS Simulator
CMD + d # Opens debug menu
CMD + r # Reloads the app

# Android Emulator
CTRL + m # Opens debug menu
rr # Reloads the app

3.2. Accessing User Data

Access the Signed-in User's info by calling Auth.currentAuthenticatedUser()

3.3. Custom Sign-Out button

Sign-out the User using the Auth class & calling Auth.signOut()

3.4. Custom Authentication

Custom Authentication Strategy from AWS Amplify React Native Auth Starter