# rnamplify
> Base package for creating a basic cognito React-Native sign in
Latest version **0.0.3** (published 2020-06-30) · MIT license · 0 weekly downloads
## Install
```sh
npm install rnamplify
pnpm add rnamplify
yarn add rnamplify
bun add rnamplify
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.3 |
| Published | 2020-06-30 |
| First published | 2020-06-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 298.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | eddstrickland |
## Links
- npm: https://www.npmjs.com/package/rnamplify
- npm.io page: https://npm.io/package/rnamplify
## Dependencies (8)
- [react](https://npm.io/package/react.md) 16.11.0
- [aws-amplify](https://npm.io/package/aws-amplify.md) ^3.0.18
- [react-native](https://npm.io/package/react-native.md) 0.62.2
- [@types/amplify](https://npm.io/package/@types/amplify.md) ^1.1.24
- [aws-amplify-react-native](https://npm.io/package/aws-amplify-react-native.md) ^4.2.1
- [react-native-vector-icons](https://npm.io/package/react-native-vector-icons.md) ^6.6.0
- [amazon-cognito-identity-js](https://npm.io/package/amazon-cognito-identity-js.md) ^4.3.2
- [@react-native-community/netinfo](https://npm.io/package/@react-native-community/netinfo.md) ^5.9.4
## Recent versions
- 0.0.3 (latest) — 2020-06-30
- 0.0.2 — 2020-06-29
- 0.0.1 — 2020-06-29
## README
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](https://developers.facebook.com/) 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](https://console.developers.google.com/) 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
```XML
```
```XML
UIAppFonts
AntDesign.ttf
Entypo.ttf
EvilIcons.ttf
Feather.ttf
FontAwesome.ttf
FontAwesome5_Brands.ttf
FontAwesome5_Regular.ttf
FontAwesome5_Solid.ttf
Foundation.ttf
Ionicons.ttf
MaterialIcons.ttf
MaterialCommunityIcons.ttf
SimpleLineIcons.ttf
Octicons.ttf
Zocial.ttf
```
### Update the Andriod build.gradle
Open `android/app/build.gradle`
and add this line at the top of the file.
```XML
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
```javascript
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](https://aws-amplify.github.io/amplify-js/api/classes/authclass.html).
## 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 `
Will allow you to add features like user login or a backend API
```
npm run amp:add
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
```
---
_Source: https://npm.io/package/rnamplify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._