Make withAuthenticator HOC configurable

README.md

@@ -32,8 +32,9 @@ AWS Amplify is a JavaScript library for frontend and mobile developers building
 * [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)
+  - [3. Override default authentication screens](#3-override-default-authentication-screens)
+  - [4. Sign HTTP requests](#4-sign-http-requests)
+  - [5. Upload and Download public or private content](#5-upload-and-download-public-or-private-content)
 * [Contributing](#contributing)
 
 ## Installation
@@ -157,7 +158,40 @@ Amplify.configure(aws_exports);
 export default withAuthenticator(App);
 ```
 
-### 3. Sign HTTP requests
+### 3. Override default authentication screens
+
+The `withAuthenticator` HOC gives you some good default authentication screens. But if you need to
+customize those screens with more than simply styles, it also provides an optional third parameter
+through which you can pass the list of customized (or not) screens:
+
+```js
+import React, { Component } from 'react';
+import { ConfirmSignIn, ConfirmSignUp, ForgotPassword, SignIn, SignUp, VerifyContact, withAuthenticator } from 'aws-amplify-react';
+
+class App extends Component {
+  render() {
+    ...
+  }
+}
+
+class MySignIn extends SignIn {
+  render() {
+    ...
+  }
+}
+
+export default withAuthenticator(App, false, [
+  <MySignIn/>,
+  <ConfirmSignIn/>,
+  <VerifyContact/>,
+  <SignUp/>,
+  <ConfirmSignUp/>,
+  <ForgotPassword/>
+]);
+
+```
+
+### 4. 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:
 
@@ -172,7 +206,7 @@ API.get(apiName, path, options).then(response => {
 });
 ```
 
-### 4. Upload and Download public or private content
+### 5. 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:
 

packages/aws-amplify-react-native/dist/Auth/index.js

@@ -31,7 +31,7 @@ const logger = new Logger('auth components');
 
 export { Authenticator, AuthPiece, SignIn, ConfirmSignIn, SignUp, ConfirmSignUp, ForgotPassword, RequireNewPassword, VerifyContact, Greetings };
 
-export function withAuthenticator(Comp, includeGreetings = false) {
+export function withAuthenticator(Comp, includeGreetings = false, authenticatorComponents = []) {
     class Wrapper extends React.Component {
         constructor(props) {
             super(props);
@@ -77,7 +77,9 @@ export function withAuthenticator(Comp, includeGreetings = false) {
             }
 
             return React.createElement(Authenticator, _extends({}, this.props, {
-                onStateChange: this.handleAuthStateChange
+                hideDefault: authenticatorComponents.length > 0,
+                onStateChange: this.handleAuthStateChange,
+                children: authenticatorComponents
             }));
         }
     }

packages/aws-amplify-react-native/dist/index.js

@@ -16,6 +16,7 @@ import dict from './AmplifyI18n';
 
 export { default as AmplifyTheme } from './AmplifyTheme';
 export { MapEntries as AmplifyMessageMapEntries } from './AmplifyMessageMap';
+export * from './AmplifyUI';
 export * from './Auth';
 export * from './Storage';
 

packages/aws-amplify-react-native/src/Auth/index.js

@@ -40,7 +40,7 @@ export {
     Greetings
 };
 
-export function withAuthenticator(Comp, includeGreetings=false) {
+export function withAuthenticator(Comp, includeGreetings=false, authenticatorComponents = []) {
     class Wrapper extends React.Component {
         constructor(props) {
             super(props);
@@ -89,7 +89,9 @@ export function withAuthenticator(Comp, includeGreetings=false) {
 
             return <Authenticator
                 {...this.props}
+                hideDefault={authenticatorComponents.length > 0}
                 onStateChange={this.handleAuthStateChange}
+                children={authenticatorComponents}
             />
         }
     }

packages/aws-amplify-react-native/src/index.js

@@ -16,6 +16,7 @@ import dict from './AmplifyI18n';
 
 export { default as AmplifyTheme } from './AmplifyTheme';
 export { MapEntries as AmplifyMessageMapEntries } from './AmplifyMessageMap';
+export * from './AmplifyUI';
 export * from './Auth';
 export * from './Storage';
 

packages/aws-amplify-react/dist/Auth/index.js

@@ -199,6 +199,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 function withAuthenticator(Comp) {
     var includeGreetings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var authenticatorComponents = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
 
     return function (_Component) {
         _inherits(_class, _Component);
@@ -253,7 +254,9 @@ function withAuthenticator(Comp) {
                     }
 
                     return _react2['default'].createElement(_Authenticator2['default'], _extends({}, this.props, {
-                        onStateChange: this.handleAuthStateChange
+                        hideDefault: authenticatorComponents.length > 0,
+                        onStateChange: this.handleAuthStateChange,
+                        children: authenticatorComponents
                     }));
                 }
 

packages/aws-amplify-react/dist/index.js

@@ -5,6 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.white1X1 = exports.transparent1X1 = exports.AmplifyMessageMapEntries = exports.AmplifyTheme = undefined;
 
+var _AmplifyUI = require('./AmplifyUI');
+
+Object.keys(_AmplifyUI).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      function get() {
+        return _AmplifyUI[key];
+      }
+
+      return get;
+    }()
+  });
+});
+
 var _Auth = require('./Auth');
 
 Object.keys(_Auth).forEach(function (key) {
@@ -94,9 +110,6 @@ Object.defineProperty(exports, 'AmplifyMessageMapEntries', {
     return get;
   }()
 });
-
-var _AmplifyUI = require('./AmplifyUI');
-
 Object.defineProperty(exports, 'transparent1X1', {
   enumerable: true,
   get: function () {

packages/aws-amplify-react/src/Auth/index.jsx

@@ -30,7 +30,7 @@ export * from './Provider';
 
 import Greetings from './Greetings';
 
-export function withAuthenticator(Comp, includeGreetings=false) {
+export function withAuthenticator(Comp, includeGreetings=false, authenticatorComponents = []) {
     return class extends Component {
         constructor(props) {
             super(props);
@@ -74,7 +74,9 @@ export function withAuthenticator(Comp, includeGreetings=false) {
 
             return <Authenticator
                 {...this.props}
+                hideDefault={authenticatorComponents.length > 0}
                 onStateChange={this.handleAuthStateChange}
+                children={authenticatorComponents}
             />
         }
     }

packages/aws-amplify-react/src/index.jsx

@@ -15,6 +15,7 @@ import { I18n } from 'aws-amplify';
 
 import dict from './AmplifyI18n';
 
+export * from './AmplifyUI';
 export * from './Auth';
 export * from './Analytics';
 export * from './Storage';