Cognito Hosted UI capability in Authenticator HOC

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

[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!

[ericclemmons]

Closing this issue for a couple reasons:

• @next supports Cognito Hosted UI by default, and #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. 🙏