Cognito Hosted UI capability in Authenticator HOC about amplify-ui HOT 7 CLOSED

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!

from amplify-ui.

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).

from amplify-ui.

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.

from amplify-ui.

@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.

from amplify-ui.

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.

from amplify-ui.

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

from amplify-ui.

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. 🙏

from amplify-ui.