-
Notifications
You must be signed in to change notification settings - Fork 271
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cognito Hosted UI capability in Authenticator HOC #343
Comments
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?: As for the FB analytics feature request, it is possible using a custom provider for the Amplify Analytics module: 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). |
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:
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: Hopefully that will be helpful to someone. |
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:
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 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 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! |
@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. |
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. |
For the
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 |
Closing this issue for a couple reasons:
Visit https://ui.docs.amplify.aws/ for more information on the |
Do you want to request a feature or report a bug?
What is the current behavior?
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?
Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions?
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:
I have tried adding federated sign in for Facebook by adding the federated prop to the Authenticator component per the docs:
then in the root component:
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 addingFB
to the globalwindow
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
The text was updated successfully, but these errors were encountered: