From 62528519398b5450c001a127d2b6cfcd411f044b Mon Sep 17 00:00:00 2001 From: Ryan Martin Date: Sun, 4 Feb 2018 23:01:49 -0500 Subject: [PATCH 1/4] Expose React Native components from AmplifyUI --- packages/aws-amplify-react-native/dist/index.js | 1 + packages/aws-amplify-react-native/src/index.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/aws-amplify-react-native/dist/index.js b/packages/aws-amplify-react-native/dist/index.js index 66290c42041..138c9ab1d9e 100644 --- a/packages/aws-amplify-react-native/dist/index.js +++ b/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'; diff --git a/packages/aws-amplify-react-native/src/index.js b/packages/aws-amplify-react-native/src/index.js index d0e834729e5..6c2ca918958 100644 --- a/packages/aws-amplify-react-native/src/index.js +++ b/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'; From 431581381a35a27a031e70a1f5999a8d70946b38 Mon Sep 17 00:00:00 2001 From: Ryan Martin Date: Sun, 4 Feb 2018 23:52:00 -0500 Subject: [PATCH 2/4] Make withAuthenticator HOC configurable --- packages/aws-amplify-react-native/dist/Auth/index.js | 6 ++++-- packages/aws-amplify-react-native/src/Auth/index.js | 4 +++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/aws-amplify-react-native/dist/Auth/index.js b/packages/aws-amplify-react-native/dist/Auth/index.js index 68ff036e01f..a72ee9d85c1 100644 --- a/packages/aws-amplify-react-native/dist/Auth/index.js +++ b/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 })); } } diff --git a/packages/aws-amplify-react-native/src/Auth/index.js b/packages/aws-amplify-react-native/src/Auth/index.js index 29ed54a8509..cbd77e20e81 100644 --- a/packages/aws-amplify-react-native/src/Auth/index.js +++ b/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 0} onStateChange={this.handleAuthStateChange} + children={authenticatorComponents} /> } } From 449870f64abc6db40a9f124f6b2815984758d858 Mon Sep 17 00:00:00 2001 From: Ryan Martin Date: Tue, 13 Feb 2018 23:36:20 -0500 Subject: [PATCH 3/4] Also make withAuthenticator configurable in aws-amplify-react --- packages/aws-amplify-react/dist/Auth/index.js | 5 ++++- packages/aws-amplify-react/dist/index.js | 19 ++++++++++++++++--- packages/aws-amplify-react/src/Auth/index.jsx | 4 +++- packages/aws-amplify-react/src/index.jsx | 1 + 4 files changed, 24 insertions(+), 5 deletions(-) diff --git a/packages/aws-amplify-react/dist/Auth/index.js b/packages/aws-amplify-react/dist/Auth/index.js index 1196c48ffb1..d18c2462b0f 100644 --- a/packages/aws-amplify-react/dist/Auth/index.js +++ b/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 })); } diff --git a/packages/aws-amplify-react/dist/index.js b/packages/aws-amplify-react/dist/index.js index 7ea0ff924cc..4dc920d8c6e 100644 --- a/packages/aws-amplify-react/dist/index.js +++ b/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 () { diff --git a/packages/aws-amplify-react/src/Auth/index.jsx b/packages/aws-amplify-react/src/Auth/index.jsx index 7ea7e2d41ff..c2072d74798 100644 --- a/packages/aws-amplify-react/src/Auth/index.jsx +++ b/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 0} onStateChange={this.handleAuthStateChange} + children={authenticatorComponents} /> } } diff --git a/packages/aws-amplify-react/src/index.jsx b/packages/aws-amplify-react/src/index.jsx index 54e1e0a8b0e..adc58bee40b 100644 --- a/packages/aws-amplify-react/src/index.jsx +++ b/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'; From f399d8e55cde51d33f18f5cca27db5e7feba4111 Mon Sep 17 00:00:00 2001 From: Ryan Martin Date: Tue, 13 Feb 2018 23:37:07 -0500 Subject: [PATCH 4/4] Document the configurable parameter of withAuthenticator --- README.md | 42 ++++++++++++++++++++++++++++++++++++++---- 1 file changed, 38 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1ca281646aa..b7ed4e1586b 100644 --- a/README.md +++ b/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, [ + , + , + , + , + , + +]); + +``` + +### 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: