Cognito Hosted UI capability in Authenticator HOC

[davegariepy]

Do you want to request a feature or report a bug?

• feature

What is the current behavior?

• using Authenticator HOC with federated sign in with Facebook does not provide correct token to access API gateway that uses Cognito User Pool for Authorizer
• federated sign in with Facebook loads the Facebook SDK, but does not document how to use it in app, to implement facebook analytics for example.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than AWS Amplify.

What is the expected behavior?

• expected behavior is closer to that of the Cognito Hosted UI where federated users are synced to a user pool

Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions?

• aws-amplify 1.0.4
• aws-amplify-react 1.0.4

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

Hi, I'm using the Authenticator HOC with email and its working fine in my react app, but I would like to add Facebook sign on. I am using Apollo Client to access a graphql API via Api Gateway. The API Gateway uses a Cognito User Pool for Authorization so for each request to the graphql endpoint I pass a header with a JWT like so:

const authLink = setContext(
  request =>
    new Promise((resolve, reject) => {
      Auth.currentSession().then(session => {
        const token = session.idToken.jwtToken;
        resolve({
          headers: { Authorization: token }
        });
      });
    })
);

I have tried adding federated sign in for Facebook by adding the federated prop to the Authenticator component per the docs:

const federated = {
 facebook_app_id: process.env.REACT_APP_FACEBOOK_APP_ID
};

then in the root component:

render() {
    return (
      <ApolloProvider client={client}>
        <Authenticator
          hide={[Greetings]}
          theme={AuthTheme}
          federated={federated}
        >
          <App />
        </Authenticator>
      </ApolloProvider>
    );
  }

This works to let the user sign in with facebook, but the calls to the API Gateway do not work. From what I understand this is because the federated identities use the identity pool to gain access, not the user pool. Since this sign up process does not sync with Cognito User Pool the user that authenticates with Facebook is not allowed access to API Gateway.

I have read through the documentation for setting up withOauth, but I am still unsure of what to do with the code once it is received from the Hosted UI service. Do I need to integrate this with the Amplify library somehow?

So this leads me to the feature request: Would it be possible to integrate the Hosted UI approach more cleanly with the Authenticator HOC?

Additionally, I would like to track user metrics to Facebook Analytics. I can see in the withFacebook HOC, we are loading the Facebook browser SDK and adding FB to the global window object. I couldn't find any documentation about working with the Facebook SDK via the Amplify components and I dont want to load the SDK twice by adding the library myself.

So this leads me to my second feature: Would it be possible to call the FB analytics throughout my app?

Thanks

[jordanranz]

Hi @ddddave, your understanding that federated identities use the identity pool to gain access, not the user pool is correct. Is this the documentation you read for setting up withOauth?:
https://aws-amplify.github.io/amplify-js/media/authentication_guide#using-amazon-cognito-hosted-ui

As for the FB analytics feature request, it is possible using a custom provider for the Amplify Analytics module:
https://aws-amplify.github.io/amplify-js/media/analytics_guide#using-a-custom-plugin

Additionally you would want to setup Authentication event recording: https://aws-amplify.github.io/amplify-js/media/analytics_guide#record-authentication-events

Let me know if this documentation helps (or does not :P).

[davegariepy]

Hey @jordanranz, thanks very much for sharing those docs I will look into them and let you know.

here's my solution for using the Cognito Hosted UI with the Authenticator HOC:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './app/App';
import client from './app/apollo';
import { ApolloProvider } from 'react-apollo';
import Amplify from 'aws-amplify';
import { Authenticator, withOAuth } from 'aws-amplify-react';
import AuthTheme from './AuthTheme';
// import registerServiceWorker from './registerServiceWorker';

const oauth = {
  domain: `${
    process.env.REACT_APP_COGNITO_DOMAIN
  }.auth.us-east-1.amazoncognito.com`,
  scope: [
    'phone',
    'email',
    'profile',
    'openid',
    'aws.cognito.signin.user.admin'
  ],
  redirectSignIn: process.env.REACT_APP_COGNITO_SIGNIN,
  redirectSignOut: process.env.REACT_APP_COGNITO_SIGNOUT,
  responseType: 'code',
  options: {
    // Indicates if the data collection is enabled to support Cognito advanced security features. By default, this flag is set to true.
    AdvancedSecurityDataCollectionFlag: true
  }
};

Amplify.configure({
  Auth: {
    identityPoolId: process.env.REACT_APP_IDENTITY_POOL_ID, //REQUIRED - Amazon Cognito Identity Pool ID
    region: process.env.REACT_APP_REGION, // REQUIRED - Amazon Cognito Region
    userPoolId: process.env.REACT_APP_USER_POOL_ID, //OPTIONAL - Amazon Cognito User Pool ID
    userPoolWebClientId: process.env.REACT_APP_USER_POOL_WEB_CLIENT_ID, //OPTIONAL - Amazon Cognito Web Client ID
    oauth: oauth
  },
  Storage: {
    bucket: process.env.REACT_APP_STORAGE_BUCKET, //REQUIRED -  Amazon S3 bucket
    region: process.env.REACT_APP_STORAGE_BUCKET_REGION //OPTIONAL -  Amazon service region
  }
});

const SignInButton = ({ OAuthSignIn }) => (
  <div>
    <button onClick={OAuthSignIn}>Sign In</button>
  </div>
);

const SignIn = withOAuth(SignInButton);

const AppWithData = ({ authState }) => (
  <div>
    {authState === 'signedIn' ? (
      <ApolloProvider client={client}>
        <App />
      </ApolloProvider>
    ) : (
      <SignIn />
    )}
  </div>
);

const AppWithAuth = () => (
  <Authenticator hideDefault="true" theme={AuthTheme}>
    <AppWithData />
  </Authenticator>
);

ReactDOM.render(<AppWithAuth />, document.getElementById('root'));
// registerServiceWorker();

The ApolloProvider is for Apollo Graphql as I'm not using the API methods from Amplify.

In Facebook App Dashboard make sure to add the redirect URI in the following format:
https://xxxxxxx.auth.us-east-1.amazoncognito.com/oauth2/idpresponse

Hopefully that will be helpful to someone.

[davegariepy]

hey @jordanranz so I have come across an obstacle based on the code I included above, Create-React-App ships with Progressive Web App features by default. When CRA is deployed in PWA mode the login with the Cognito Hosted UI does not work when the app has been added to the home screen in iOS 11.3 or later.

Progressive Web Apps in Apple iOS 11.3 and up appear to not allow redirects within a web app that has been added to a mobile home screen.

To illustrate, heres an example of login flow for a create-react-app PWA (manifest.json included in public folder) that uses the Cognito Hosted UI like the code above:

1. user adds web app to home screen
2. click on withOauth button to initiate login or sign up
3. withOauth component triggers a redirect URL to the Cognito Hosted UI
4. iPhone switches to Safari app and loads the Cognito Hosted UI where user can do social sign in (if set up in Cognito console) or signup / login with email
5. after user completes desired action(sign in, sign up, facebook login, etc) the page automatically initiates a redirect back to the app
6. Amplify does some magic and saves accesstoken idtoken, etc to localstorage
7. user is logged into the web app in Safari browser on iOS

When the user tries to login to the create-react-app on the home screen, the redirect occurs and sends them to Safari... there is therefore no way to use PWA with Cognito Hosted UI because Apple does not allow navigating to a different domain than the PWA scope.

From what I understand the only way to use Facebook login for access to an API Gateway endpoint is to turn off Progressive Web App features in create-react-app by removing the link to manifest.json in the public folder of CRA. Doing so will load the Hosted UI within the web app on the users home screen.

So I guess there are two choices, only use email sign in and keep PWA features or add social with Hosted UI and lose PWA features. The ideal for me would be if the Authenticator HOC had the abilities of the Cognito Hosted UI, but didn't require a redirect URL.

Also, a big unknown for me is how the required redirect for the Hosted UI would work in a React Native context.

I would greatly appreciate your thoughts on this!

Thanks!

[jadbox]

@ddddave thanks for the heads up, I've been working with the Hosted UI with the hopes of using it for a PWA on iOS and Android. The issue you mentioned seems rather dire for this strategy. I agree that it would be a lot more idea if the "Authenticator HOC" could encompass the functionality of the Hosted UI, namely, that it populates with all the right fields and has proper verifications. As it sits, it's a huge burden to fork the Authenticator so that it can be modified with the correct fields to work inside my web app.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ericclemmons]

For the @next Authenticator, federated sign in uses Cognito User Pools by default and is solving this specifically:

I agree that it would be a lot more idea if the "Authenticator HOC" could encompass the functionality of the Hosted UI, namely, that it populates with all the right fields and has proper verifications.

Facebook Analytics has been deprecated, but the need for these tokens still exists. We can solve that separately for a specific UX based on: https://docs.amplify.aws/lib/auth/advanced/q/platform/js/#facebook-sign-in-react

[ericclemmons]

Closing this issue for a couple reasons:

• @next supports Cognito Hosted UI by default, and Zero-config + Sign in with Apple #626 will enable it without any additional UI code.
• If there are use-cases for direct usage of the Facebook SDK, we'll need to investigate the implementation, since this is a 3 year old issue.

Visit https://ui.docs.amplify.aws/ for more information on the @next Authenticator. 🙏