Cognito hosted ui

docs/media/authentication_guide.md

@@ -352,6 +352,94 @@ const federated = {
 
 There is also `withGoogle`, `withFacebook`, `withAmazon` components, in case you need to customize a single provider.
 
+### Cognito Hosted UI
+
+Cognito hosted UI provides general availability of a Built-in Customizable User Experience for Sign-in, OAuth 2.0 Support, and Federation with Facebook, Login with Amazon, Google, and SAML providers for User Pools.
+
+#### Setup your Cognito App Client
+
+First you need to setup your App Client in the Cognito User Pool console.
+
+* Go to: App integration -> App client settings
+    * Select Identity Providers
+    * Input your Callback URL and Sign out URL.
+    * Select OAuth Flows (Authorization code grant is the recommended choice for security reasons)
+    * Choose OAuth Scopes
+
+* Go to: App integration -> Domain name
+    * Input the domain prefix for sign-up and sign-in pages hosted by Cognito
+
+To add federation provider
+
+* Go to: Federation -> Identity providers
+    * Select the federated identity provider
+    * Input required configuration like App Id, App secret, Authorized scope
+    * Set the Oauth Redirected URI in your Facebook/Google app's setting page to:
+
+        ```https://your-domain-prefix.auth.us-east-1.amazoncognito.com/oauth2/idpresponse```
+
+* Go to Federation -> Attribute mapping
+    * Map Federation Provider attributes to corresponding User pool attributes. Please make sure at least Email is correctly mapped.
+
+* Don't forget to select this provider in the App client settings
+#### Integrate it into your App
+
+* You need to pass your hosted ui options into Amplify:
+```js
+import Amplify from 'aws-amplify';
+
+const hostedUIOptions = {
+    AppWebDomain : 'your-domain-prefix.auth.us-east-1.amazoncognito.com', // Domain name
+    TokenScopesArray : ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'], // Authorized scopes,
+    RedirectUriSignIn : 'http://localhost:3000/', // Callback URL
+    RedirectUriSignOut : 'http://localhost:3000/', // Sign out URL
+    AdvancedSecurityDataCollectionFlag : true, // indicating if the data collection is enabled to support cognito   advanced security features. By default, this flag is set to true.
+    ResponseType: 'code' // 'code' for Authorization code grant, 'token' for Implicit grant
+}
+
+Amplify.configure({
+    Auth: {
+        // other configurations...
+        // ....
+        hostedUIOptions: hostedUIOptions
+    },
+    // ...
+});
+```
+
+* If you are using ```aws-amplify-react```:
+    * You will see a button ```Sign in with AWS``` showed up in your login page when you are using the HOC ```withAuthenticator``` or using the ```Authenticator``` component.
+    * You can also import the HOC provided and wrap your own component with it, for example:
+    ```jsx
+        import { withCognito } from 'aws-amplify-react';
+
+        class MyComp extends React.Component {
+            // ...
+            render() {
+                return(
+                    <SignInButton onClick={props.cognitoSignIn}>
+                    </SignInButton>
+                )
+            }
+        }
+
+        export default withCognito(MyComp);
+    ```
+
+* If you are NOT using ```aws-amplify-react```:
+    * you need to construct the url yourself:
+    ```js
+    const config = Auth.configure();
+    const { 
+        AppWebDomain,  
+        RedirectUriSignIn, 
+        RedirectUriSignOut,
+        ResponseType } = config.hostedUIOptions;
+    const clientId = config.userPoolWebClientId;
+    const url = 'https://' + AppWebDomain + '/login?redirect_uri=' + RedirectUriSignIn + '&response_type=' + ResponseType + '&client_id=' + clientId;
+    window.location.assign(url);          
+    ```
+
 ### Enabling MFA (Multi-Factor Authentication)
 
 Multi-factor authentication (MFA) increases security for your app by adding an authentication method and not relying solely on username (or alias) and password. AWS Amplify uses Amazon Cognito to provide MFA. Please see [Amazon Cognito Developer Guide](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-mfa.html) for more information about setting up MFA in Amazon Cognito.

packages/aws-amplify-react/__tests__/Auth/Provider/__snapshots__/withCognito-test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`withCognito test render test render correctly 1`] = `
+<MockComp
+  cognitoSignIn={[Function]}
+/>
+`;

packages/aws-amplify-react/__tests__/Auth/Provider/withCognito-test.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import withCognito, { CognitoButton } from '../../../src/Auth/Provider/withCognito';
+import { SignInButton, Button } from '../../../src/AmplifyUI';
+import { Auth } from 'aws-amplify';
+
+describe('withCognito test', () => {
+    describe('render test', () => {
+        test('render correctly', () => {
+            const MockComp = class extends Component {
+                render() {
+                    return <div />;
+                }
+            }
+
+            const Comp = withCognito(MockComp);
+            const wrapper = shallow(<Comp/>);
+            expect(wrapper).toMatchSnapshot();
+        });
+    });
+
+    describe('signIn test', () => {
+        test('happy case with connected response', () => {
+            const MockComp = class extends Component {
+                render() {
+                    return <div />;
+                }
+            }
+
+            const spyon = jest.spyOn(Auth, 'configure').mockImplementationOnce(() => {
+                return {
+                    hostedUIOptions: {
+                        AppWebDomain: 'domain',
+                        RedirectUriSignIn: 'redirectUriSignIn',
+                        RedirectUriSignOut: 'redirectUriSignOut',
+                        ResponseType: 'responseType'
+                    },
+                    userPoolWebClientId: 'userPoolWebClientId'
+                }
+            })
+            const Comp = withCognito(MockComp);
+            const wrapper = shallow(<Comp/>);
+            const comp = wrapper.instance();
+
+            comp.signIn();
+
+            spyon.mockClear();
+        });
+    });
+});

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

@@ -10,7 +10,8 @@ import {
 import {
     GoogleButton,
     FacebookButton,
-    AmazonButton
+    AmazonButton,
+    CognitoButton
 } from './Provider';
 
 const logger = new Logger('FederatedSignIn');
@@ -49,21 +50,34 @@ export class FederatedButtons extends Component {
               />
     }
 
+    cognito(cognito_auth) {
+        if (!cognito_auth) { return null; }
+        const { theme, onStateChange } = this.props;
+        return <CognitoButton
+                authData={cognito_auth.authData}
+                label={cognito_auth.label}
+                theme={theme}
+                onStateChange={onStateChange}
+              />
+    }
+
+
     render() {
         const { authState } = this.props;
         if (!['signIn', 'signedOut', 'signedUp'].includes(authState)) { return null; }
 
         const federated = this.props.federated || {};
         if (JS.isEmpty(federated)) { return null; }
 
-        const { google_client_id, facebook_app_id, amazon_client_id } = federated;
+        const { google_client_id, facebook_app_id, amazon_client_id, cognito_auth } = federated;
 
         const theme = this.props.theme || AmplifyTheme;
         return (
             <ActionRow theme={theme}>
                 {this.google(google_client_id)}
                 {this.facebook(facebook_app_id)}
                 {this.amazon(amazon_client_id)}
+                {this.cognito(cognito_auth)}
             </ActionRow>
         )
     }

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

@@ -3,13 +3,15 @@ import React, { Component } from 'react';
 import withGoogle from './withGoogle';
 import withFacebook from './withFacebook';
 import withAmazon from './withAmazon';
+import withCognito from './withCognito';
 
 export { default as withGoogle, GoogleButton } from './withGoogle';
 export { default as withFacebook, FacebookButton } from './withFacebook';
 export { default as withAmazon, AmazonButton } from './withAmazon';
+export { default as withCognito, CognitoButton } from './withCognito';
 
 export function withFederated(Comp) {
-    const Federated = withAmazon(withGoogle(withFacebook(Comp)));
+    const Federated = withCognito(withAmazon(withGoogle(withFacebook(Comp))));
 
     return class extends Component {
         render() {

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

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+
+import { Auth, Logger } from 'aws-amplify';
+import AmplifyTheme from '../../AmplifyTheme';
+import { SignInButton } from '../../AmplifyUI';
+
+const logger = new Logger('withCognito');
+
+export default function withCognito(Comp) {
+    return class extends Component {
+        constructor(props) {
+            super(props);
+            this.signIn = this.signIn.bind(this);
+            this.state = {};
+        }
+
+        signIn() {
+            const config = Auth.configure();
+            const { 
+                AppWebDomain,  
+                RedirectUriSignIn, 
+                RedirectUriSignOut,
+                ResponseType } = config.hostedUIOptions;
+            const clientId = config.userPoolWebClientId;
+            const url = 'https://' + AppWebDomain + '/login?redirect_uri=' + RedirectUriSignIn + '&response_type=' + ResponseType + '&client_id=' + clientId;
+            window.location.assign(url);            
+        }
+
+        render() {
+            return (
+                <Comp {...this.props} cognitoSignIn={this.signIn} />
+            )
+        }
+    }
+}
+
+const Button = (props) => (
+    <SignInButton
+        id="cognito_signin_btn"
+        onClick={props.cognitoSignIn}
+        theme={props.theme || AmplifyTheme}
+    >
+        {props.label || 'Sign in with AWS'}
+    </SignInButton>
+)
+
+export const CognitoButton = withCognito(Button);

packages/aws-amplify/__tests__/Auth/auth-unit-test-rn.ts

@@ -148,23 +148,27 @@ import Cache from '../../src/Cache';
 import { CognitoUserPool, CognitoUser, CognitoUserSession, CognitoIdToken, CognitoAccessToken } from 'amazon-cognito-identity-js';
 import { CognitoIdentityCredentials } from 'aws-sdk';
 
-const authOptions: AuthOptions = {
-    userPoolId: "awsUserPoolsId",
-    userPoolWebClientId: "awsUserPoolsWebClientId",
-    region: "region",
-    identityPoolId: "awsCognitoIdentityPoolId"
+const authOptions = {
+    Auth: {
+        userPoolId: "awsUserPoolsId",
+        userPoolWebClientId: "awsUserPoolsWebClientId",
+        region: "region",
+        identityPoolId: "awsCognitoIdentityPoolId"
+    }
 }
 
 const authOptionsWithNoUserPoolId = {
-    userPoolId: null,
-    userPoolWebClientId: "awsUserPoolsWebClientId",
-    region: "region",
-    identityPoolId: "awsCognitoIdentityPoolId"
+    Auth: {
+        userPoolId: null,
+        userPoolWebClientId: "awsUserPoolsWebClientId",
+        region: "region",
+        identityPoolId: "awsCognitoIdentityPoolId"
+    }
 }
 
 const userPool = new CognitoUserPool({
-    UserPoolId: authOptions.userPoolId,
-    ClientId: authOptions.userPoolWebClientId
+    UserPoolId: authOptions.Auth.userPoolId,
+    ClientId: authOptions.Auth.userPoolWebClientId
 });
 
 const idToken = new CognitoIdToken({IdToken: 'idToken'});