Docs/update hocs (#251)

* update quickstart * update docs index with examples * Update index.md * fix retrieve unauth credentials if not logged in, Fixes #229 * fix docs #238 * update details around react-native hocs * update signUp api description * updates based on review
aws-amplify · Feb 9, 2018 · 2df3b33 · 2df3b33
1 parent 5c31a5e
commit 2df3b33
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 101 deletions.
diff --git a/README.md b/README.md
@@ -139,6 +139,20 @@ class App extends Component {
 export default withAuthenticator(App);
 ```
 
+If you are working in React Native the exact same setup is used. Simply include `aws-amplify-react-native` instead:
+
+```jsx
+...
+import Amplify from 'aws-amplify';
+import { withAuthenticator } from 'aws-amplify-react-native';
+import aws_exports from './aws-exports';
+Amplify.configure(aws_exports);
+
+...
+
+export default withAuthenticator(App);
+```
+
 ### 3. Sign HTTP requests
 
 Sign REST requests with [AWS Signature Version 4](http://docs.aws.amazon.com/general/latest/gr/signature-version-4.html) using the API module to one or multiple endpoints:

diff --git a/docs/index.md b/docs/index.md
@@ -25,11 +25,6 @@ AWS Amplify is a JavaScript library for frontend and mobile developers building
   - [Web Development](#web-development)
   - [React Native Development](#react-native-development)
 * [Documentation](#documentation)
-* [Examples](#example)
-  - [1. Collect user session metrics.](#1-collect-user-session-metrics)
-  - [2. Add Authentication](#2-add-authentication-to-your-app)
-  - [3. Sign HTTP requests](#3-sign-http-requests)
-  - [4. Upload and Download public or private content](#4-upload-and-download-public-or-private-content)
 * [Contributing](#contributing)
 
 ## Installation
@@ -73,89 +68,6 @@ Now run your application as normal:
 react-native run-ios
 ```
 
-## Examples
-
-AWS Amplify supports many category scenarios such as Auth, Analytics, APIs and Storage as outlined in the Developer Guides. A couple of samples are below.
-
-### 1. Collect user session metrics
-
-By default, AWS Amplify can send user session information as metrics with a few lines of code:
-
-```js
-import Amplify, { Analytics } from 'aws-amplify';
-import aws_exports from './aws-exports';
-
-Amplify.configure(aws_exports);
-```
-
- The `aws-exports.js` file can be retrieved either via the AWS Console or automatically by using the [awsmobile-cli](https://github.com/aws/awsmobile-cli). See the developer guides for detailed examples.
-
-### 2. Add Authentication to your App
-Take a fresh React app created by `create-react-app` as an example and edit the `App.js` file:
-
-```jsx
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-import Amplify from 'aws-amplify';
-import { withAuthenticator } from 'aws-amplify-react';
-import aws_exports from './aws-exports';
-
-Amplify.configure(aws_exports);
-
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
-    );
-  }
-}
-
-export default withAuthenticator(App);
-```
-
-### 3. Sign HTTP requests
-
-Sign REST requests with [AWS Signature Version 4](http://docs.aws.amazon.com/general/latest/gr/signature-version-4.html) using the API module to one or multiple endpoints:
-
-```js
-let apiName = 'MyApiName';
-let path = '/path'; 
-let options = {
-    headers: {...} // OPTIONAL
-}
-API.get(apiName, path, options).then(response => {
-    // Add your code here
-});
-```
-
-### 4. Upload and Download public or private content
-
-With configurable settings, store content in an S3 bucket in public folders for all of your application's users or in private folders for each user identity:
-
-```js
-  Storage.put(key, fileObj, {level: 'private'})
-        .then (result => console.log(result))
-        .catch(err => console.log(err));
-
-    // Stores data with specifying its MIME type
-    Storage.put(key, fileObj, {
-        level: 'private',
-        contentType: 'text/plain'
-    })
-    .then (result => console.log(result))
-    .catch(err => console.log(err));
-```
-
 ## Contributing
 
 See [Contributing Guidelines](https://github.com/aws/aws-amplify/blob/master/CONTRIBUTING.md)
diff --git a/docs/media/authentication_guide.md b/docs/media/authentication_guide.md
@@ -81,15 +81,14 @@ Auth.confirmSignIn(user, code)
 import { Auth } from 'aws-amplify';
 
 Auth.signUp({
-    username,
-    password,
-    attributes: {
-        email, // optional
-        phone, // optional
-        // other custom attributes if has been set in Cognito
-        // myAttr: ...
-    },
-    validationData: [] //optional
+        username,
+        password,
+        attributes: {
+            email,          // optional
+            phone_number,   // optional - E.164 number convention
+            // other custom attributes
+        },
+        validationData: []  //optional
     })
     .then(data => console.log(data))
     .catch(err => console.log(err));
@@ -125,12 +124,12 @@ Auth.forgotPasswordSubmit(username, code, new_password)
 
 ### 2. withAuthenticator HOC
 
-For React apps, the simplest way to add Auth flows into your app is to use `withAuthenticator`.
+For React and React Native apps, the simplest way to add Auth flows into your app is to use `withAuthenticator`.
 
 Just add these two lines to your `App.js`:
 
 ```js
-import { withAuthenticator } from 'aws-amplify-react';
+import { withAuthenticator } from 'aws-amplify-react'; // or 'aws-amplify-react-native';
 
 ...
 
@@ -155,6 +154,8 @@ const federated = {
 ReactDOM.render(<AppWithAuth federated={federated}/>, document.getElementById('root'));
 ```
 
+ NOTE: Federated Identity HOCs are not yet available on React Native
+
 #### Sign Out Button
 
 The default `withAuthenticator` renders just the App component after a user is signed in, preventing interference with your app. Then question comes, how does the user sign out?
@@ -173,7 +174,7 @@ The `withAuthenticator` HOC essentially just wraps `Authenticator` component. Yo
 
 App.js
 ```js
-import { Authenticator } from 'aws-amplify-react';
+import { Authenticator } from 'aws-amplify-react'; // or 'aws-amplify-react-native'
 
 ...
 
@@ -340,7 +341,7 @@ Auth.signUp({
     'password': 'mysecurerandompassword#123',
     'attributes': {
         'email': 'me@domain.com',
-        'phone_number': '+12128601234',
+        'phone_number': '+12128601234', // E.164 number convention
         'first_name': 'Jane',
         'last_name': 'Doe',
         'nick_name': 'Jane'