feat(aws-amplify-react): adding loading page

Author: powerful23

packages/auth/src/Auth.ts

@@ -180,6 +180,7 @@ export default class AuthClass {
                 onFailure: (err) => {
                     logger.debug("Error in cognito hosted auth response", err);
                     dispatchAuthEvent('signIn_failure', err);
+                    dispatchAuthEvent('cognitoHostedUI_failure', err);
                 }
             };
             // if not logged in, try to parse the url.
@@ -196,6 +197,7 @@ export default class AuthClass {
                     this._cognitoAuthClient.parseCognitoWebResponse(curUrl);
                 } catch (err) {
                     logger.debug('something wrong when parsing the url', err);
+                    dispatchAuthEvent('parsingUrl_failure', null);
                 }
             });
         }

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

@@ -20,10 +20,12 @@ import SignIn from './SignIn';
 import ConfirmSignIn from './ConfirmSignIn';
 import RequireNewPassword from './RequireNewPassword';
 import SignUp from './SignUp';
+import Loading from './Loading';
 import ConfirmSignUp from './ConfirmSignUp';
 import VerifyContact from './VerifyContact';
 import ForgotPassword from './ForgotPassword';
 import TOTPSetup from './TOTPSetup';
+import Constants from './common/constants';
 
 import AmplifyTheme from '../Amplify-UI/Amplify-UI-Theme';
 import AmplifyMessageMap from '../AmplifyMessageMap';
@@ -52,7 +54,14 @@ export default class Authenticator extends Component {
             Amplify.configure(config);
         }
         this._isMounted = true;
-        this.checkUser();
+        // the workaround for Cognito Hosted UI
+        // don't check the user immediately if redirected back from Hosted UI
+        // instead waiting for the hub event sent from Auth module
+        // the item in the localStorage is a mark to indicate whether
+        // the app is redirected back from Hosted UI or not
+        const byHostedUI = localStorage.getItem(Constants.SIGN_IN_WITH_HOSTEDUI_KEY);
+        localStorage.removeItem(Constants.SIGN_IN_WITH_HOSTEDUI_KEY);
+        if (!byHostedUI) this.checkUser();
     }
 
     componentWillUnmount() {
@@ -66,13 +75,7 @@ export default class Authenticator extends Component {
         return Auth.currentAuthenticatedUser()
             .then(user => {
                 if (!this._isMounted) { return; }
-                if (auth !== 'signedIn') {
-                    this.setState({
-                        authState: 'signedIn',
-                        authData: user
-                    });
-                    this.handleStateChange('signedIn', user);
-                }
+                this.handleStateChange('signedIn', user);
             })
             .catch(err => {
                 if (!this._isMounted) { return; }
@@ -92,8 +95,20 @@ export default class Authenticator extends Component {
 
     onHubCapsule(capsule) {
         const { channel, payload, source } = capsule;
-        if (channel === 'auth' && (payload.event === 'configured' || payload.event === 'cognitoHostedUI')) { 
-            this.checkUser(); 
+        if (channel === 'auth') {
+            switch (payload.event) {
+                case 'cognitoHostedUI':
+                    this.handleStateChange('signedIn', payload.data);
+                    break;
+                case 'cognitoHostedUI_failure':
+                    this.handleStateChange('signIn', null);
+                    break;
+                case 'parsingUrl_failure':
+                    this.handleStateChange('signIn', null);
+                    break;
+                default:
+                    break;
+            }
         }
     }
 
@@ -136,7 +151,8 @@ export default class Authenticator extends Component {
                 ConfirmSignUp,
                 VerifyContact,
                 ForgotPassword,
-                TOTPSetup
+                TOTPSetup,
+                Loading
             ]);
         }
         const props_children = this.props.children || [];
@@ -150,7 +166,8 @@ export default class Authenticator extends Component {
             <ConfirmSignUp/>,
             <VerifyContact/>,
             <ForgotPassword/>,
-            <TOTPSetup/>
+            <TOTPSetup/>,
+            <Loading/>
         ];
 
         const props_children_names  = React.Children.map(props_children, child => child.type.name);

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

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2017-2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
+ * the License. A copy of the License is located at
+ *
+ *     http://aws.amazon.com/apache2.0/
+ *
+ * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
+ * and limitations under the License.
+ */
+
+import * as React from 'react';
+import { I18n, ConsoleLogger as Logger } from '@aws-amplify/core';
+
+
+import AuthPiece from './AuthPiece';
+import AmplifyTheme from '../AmplifyTheme';
+import {
+    FormSection,
+    SectionHeader,
+    SectionBody,
+    SectionFooter,
+    Input,
+    RadioRow,
+    Button,
+    Link,
+    SectionFooterPrimaryContent,
+    SectionFooterSecondaryContent
+} from '../Amplify-UI/Amplify-UI-Components-React';
+
+const logger = new Logger('Loading');
+
+export default class Loading extends AuthPiece {
+    constructor(props) {
+        super(props);
+
+        this._validAuthStates = ['loading'];
+    }
+
+    showComponent(theme) {
+        const { hide } = this.props;
+        if (hide && hide.includes(Loading)) { return null; }
+
+        return (
+            <FormSection theme={theme}>
+                <SectionBody theme={theme}>{I18n.get('Loading...')}
+                </SectionBody>
+            </FormSection>
+        )
+    }
+}

packages/aws-amplify-react/src/Auth/Provider/withOAuth.jsx

@@ -22,6 +22,7 @@ import {
     SignInButton, 
     SignInButtonContent
 } from '../../Amplify-UI/Amplify-UI-Components-React';
+import Constants from '../common/constants';
 
 const logger = new Logger('withOAuth');
 
@@ -44,7 +45,7 @@ export default function withOAuth(Comp, options) {
 
             logger.debug('withOAuth configuration', config);
             const { 
-                domain,  
+                domain, 
                 redirectSignIn,
                 redirectSignOut,
                 responseType
@@ -55,7 +56,13 @@ export default function withOAuth(Comp, options) {
                 + '/login?redirect_uri=' + redirectSignIn 
                 + '&response_type=' + responseType 
                 + '&client_id=' + (options.ClientId || Auth.configure().userPoolWebClientId);
-            window.location.assign(url);  
+
+            try {
+                localStorage.setItem(Constants.SIGN_IN_WITH_HOSTEDUI_KEY, 'true');
+            } catch (e) {
+                logger.debug('Failed to set item into localStorage', e);
+            }
+            window.location.assign(url);
         }
 
         render() {

packages/aws-amplify-react/src/Auth/common/constants.js

@@ -3,6 +3,7 @@ const constants = {
     AUTH0: 'auth0',
     GOOGLE: 'google',
     FACEBOOK: 'facebook',
-    AMAZON: 'amazon'
+    AMAZON: 'amazon',
+    SIGN_IN_WITH_HOSTEDUI_KEY: 'amplify-react-signin-with-hostedUI'
 };
  export default constants; 

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

@@ -29,6 +29,7 @@ export { default as ForgotPassword } from './ForgotPassword';
 export { default as Greetings } from './Greetings';
 export { default as FederatedSignIn, FederatedButtons } from './FederatedSignIn';
 export { default as TOTPSetup } from './TOTPSetup';
+export { default as Loading } from './Loading';
 
 export * from './Provider';