rnamplify v0.0.3

This project has a default React-Native instance installed.

This is a Vanilla Amplify/Cognito implementation which will allow you to create a working example of a login via cognito.

This is a working pacakge which will require some configuration in order to ensure this works with your AWS/Amplify instance.

Installation prerequisites

In order to install this repo there is an assumption you've built your RN using the default typescript template.

Note: If this is the first time installing RN then you should be able to ignore this step however if you have an older version of the RN CLI installed you may find the install doesn't work as expected in which case you need to follow these instructions.

Remove any legacy installs of RN CLI installed

sudo npm uninstall -g react-native-cli

Install the latest version of the RN CLI

npm i -g @react-native-community/cli

Social Signins

If you require social sign ins as part of your authentication/login process you will need to ensure you have set up the relevant developer accounts, OAuth keys and secrets before you start as these will be needed during this process.

Facebook

Sign up for a facebook developer account or login if you already have one.

1. Login to the developers portal.
2. Go to the My Apps link.
3. Click Add New App.
4. In Display Name give it a meaningful name.
5. In Contact Email put your contact email.
6. Click on Create App ID.
7. This will bring up a Captcha screen. Confirm you are not a robot and hit Submit.
8. Once this has been created and loaded go to the Settings menu link on the left hand side.
9. Select Basic
10. This will then show you your App ID and your App Secret you will need to click on the show button in the field to reveal this information

Note: If it has taken longer than 5 minutes to create this then you will be asked for your account password again before this will be shown.

Google

Sign up for a Google Developers Console Account account or login if you already have one.

Note:

If you haven't already configured the OAuth Consent Screen you will need to do this before creating these credentials. There is a wizard for this which will take you through this process.

1. Go to credentials in the lefthand side bar.
2. Find the OAuth 2.0 Client IDs section. This will display all of your current credentials.
3. Click on the Create credentials button at the top of the screen.
4. Select OAuth client ID | Requests user consent so that your app can access the user's data.
5. From the dropdown select Web Application type (Usually web application: this will also work for iOs and Android).
6. Fill in the Name.
7. Authorised JavaScript origins: Add the domain you want these to work with via the Add URI button.
8. Authorised redirect URIs: Add the URI for the post login redirect via the Add URI button.
9. Hit the Create button. This will generate the credentials.

Note:

You will only be shown these credentials once for either of these please make a note of them, store them securely.

Installation

To Manually install please run the following

npx react-native init rnamplify --template react-native-template-typescript

Install Amplify

sudo npm install -g @aws-amplify/cli

Configure Amplify

amplify configure

Note: This will then ask you to sign into the AWS console.

Once logged in you will then need to create an IAM user via the console this will take you through the following steps:

Specify the AWS Region

1. region: # Your preferred region
2. Specify the username of the new IAM user:
3. user name: # User name for Amplify IAM user
4. Complete the user creation using the AWS console

Create a user with AdministratorAccess to your account to provision AWS resources for you like AppSync, Cognito etc.

Once this is created Amplify will ask you for your accessKeyId and your secretAccessKey.

1. Enter the access key of the newly created user:
2. accessKeyId: # YOUR_ACCESS_KEY_ID
3. secretAccessKey: # YOUR_SECRET_ACCESS_KEY
4. This would update/create the AWS Profile in your local machine
5. Profile Name: # (default)

Successfully set up the new user.

Initalise Amplify

amplify init

It will then take you through the following steps in the console:

1. Enter a name for the project: rnamplify (or whatevername you want).
2. Enter a name for the environment: dev | prod | demo | any etc.
3. Choose your default editor: Your favorite text editor
4. Choose the type of app that you're building: typescript
5. What javascript framework are you using: react-native
6. Source Directory Path: / (assuming you've installed this as root on your project)
7. Distribution Directory Path: /
8. Build Command: npm run ios or npm run andriod
9. Start Command: npm start
10. Do you want to use an AWS profile? Y
11. Please choose the profile you want to use: Your AWS profile from the configuration step

If you don't want to do this manually then please clone this repo and then install it into your project or use it as the base project to create Cognito Authenticated RN applications.

Install Amplify Libraries

npm install aws-amplify aws-amplify-react-native amazon-cognito-identity-js react-native-vector-icons @react-native-community/netinfo

Install the pod libraries for iOS

cd ios
pod install
NOTE: Wait for install to finish then
cd ../

Update the iOS Info.plist

Open file ios/RNAmpIntr/Info.plist

Add the following before the final

</dict>
</plist>

<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
</array>

Update the Andriod build.gradle

Open android/app/build.gradle

and add this line at the top of the file.

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Add Authentication via AWS Cognito

In the console run

npm run amp:auth

or

amplify add auth

This will then take you through the following steps:

Simple config

1. Do you want to use the default authentication and security configuration? Default configuration
2. How do you want users to be able to sign in? Username
3. Do you want to configure advanced settings? No, I am done.

Social sign in config (Federation SSO/MS etc.)

1. Do you want to use the default authentication and security configuration? Default configuration with Social Provider (Federation)
2. How do you want users to be able to sign in? Username | Email
3. Do you want to configure advanced settings? No, I am done.
4. What domain name prefix do you want to use? Select the default or create a custom one.
5. Enter your redirect signin URI: Enter the path to redirect from IE your signin page.
6. Do you want to add another redirect signin URI No
7. Enter your redirect signout URI: Enter the path to redirect to after signing out.
8. Do you want to add another redirect signout URI No
9. Select the social providers you want to configure for your user pool: (Press space to select, a to toggle all, i to invert selection) Choose the social sign in providers you want to allow. This is where you will need the social signin settings you created earlier.
10. After these are added amplify push or npm run amp:push

Edit the App.tsx

import Amplify from 'aws-amplify';
import config from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react-native';

Amplify.configure(config);

/**
 * Rest of your code
 */

export default withAuthenticator(App);

That's it.

You can also customise this component to add or remove fields, update styling, or other configurations.

In addition to the withAuthenticator you can build custom authentication flows using the Auth class.

Auth has over 30 methods including signUp, signIn, forgotPassword, and signOut that allow you full control over all aspects of the user authentication flow. Check out the complete API.

Available Scripts

General Scripts

Reset | Mac only

This will reset your node_modules and reinstall

npm run reset:modules

Lint

This will lint your project based on the ESlint/Prettier conventions

npm run lint

Base Scripts

React Native

Build Android

Builds React Native for Andriod devices

npm run android

Build iOS

Builds React Native for iOS devices

npm run ios

React Native Start

starts React Native instance, inc watch functions etc.

npm run start

React Native Test

Tests React Native instance.

npm run test

Amplify scripts

amplify add <category>

Will allow you to add features like user login or a backend API

npm run amp:add <category>

e.g.

npm run amp:add api - Will create an backend API

amplify add api

To create a backend API and then npm run amp:publish to deploy everything

npm run amp:api

amplify add auth

To add authentication to your application then run npm run amp:push to store the configuration

npm run amp:auth

amplify console

To open the Amplify Console and view your project status

npm run amp:console

amplify publish

Will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

npm run amp:publish

amplify push

Will build all your local backend resources and provision it in the cloud

npm run amp:push

amplify status

Will show you what you've added already and if it's locally configured or deployed

npm run amp:status