Open nirav-baid opened 8 months ago
Also, I see that Cognito provides a way to add a company logo on the Cognito console, but adding it to the Amplify-created Cognito pool doesn't work
hey, 👋 thanks for raising this! I'm going to transfer this over to our Amplify UI repository for better assistance 🙂
Thank you. Please note that I've tried adding the company logo on the Cognitor user pool created by Amplify, and although it shows on the Hosted UI on the Cognito console, it's not getting included in the Authenticator UI in the Flutter app (snippet shown above).
My aim here is to not touch the default Amplify Authenticator UI (which provides me forgot password, social logins, etc. OOB), and let the company logo be handled on the Cloud itself, so that changing my company logo on the Authenticator UI doesn't require an app update.
Hi @nirav-baid,
Amplify Flutter does not provide a simple API for including the logo as described nor do we support Hosted UI customizations from the console. I'm going to mark this as a feature request and leave this open for tracking.
Currently, we only support adding a logo through the steps outlined in full ui customization guide.
You mentioned these instructions are unclear, I'm happy to help clarify. What questions do you have?
@Equartey -
Yes, Amplify doesn't provide Hosted UI Customizations from the website, but Cognito does. If I go into the Cognito user pool created by Amplify, I do see Hosted UI customization option in there where I can add a company logo. Screenshot below:
But even upon adding it in there, the company logo isn't visible on the Authenticator UI. Looks like Amplify doesn't agree with Cognito's UI customization settings.
As I mentioned, the current instructions are too invasive - basically asking me to rebuild the entire Authenticator UI again from scratch, when the Authenticator UI already has all of that functionality by default. As a customer, I feel like it defeats the purpose of having an Authenticator UI.
I would argue this SERIOUSLY affects customer trust when they aren't able to see our company logo in the login screen. I hope you agree with the principle in hand that users who see the login page should always know who is asking them for their credentials.
In my view, this isn't a feature request but a gap in existing functionality, and I would request treating it accordingly.
Here are the next steps that could help:
@nirav-baid
My apologies, I understand your frustration and the value of branding your login UI. Let me add some clarifications.
But even upon adding it in there, the company logo isn't visible on the Authenticator UI. Looks like Amplify doesn't agree with Cognito's UI customization settings.
Correct. This is something we don't support and would need to add this relationship.
As I mentioned, the current instructions are too invasive - basically asking me to rebuild the entire Authenticator UI again from scratch, when the Authenticator UI already has all of that functionality by default.
I think this is where the misunderstanding is. You can add your logo and keep the prebuilt UI 😄
Although the authenticatorBuilder
prop allows for each step to be overridden, it does not require you to rebuild each screen "from scratch". We provide exports for each pre-built screen for this purpose. This allows you to wrap our widgets in a custom widget containing your logo (including other business logic) and preserve the out of the box functionality we provide.
Here is a simplified version of the guide for your use case. Note the widgets being passed into the body
prop of LogoScaffold
are the original screen widgets.
In comparison, to your proposed change, it is more combersome, but it's less burden than recreating each screen from scratch. I also agree the DX would be greatly improved by one of your suggestions. However, since there is a current workflow for adding a logo this is a feature request.
Hope that helps. Please don't hesitate to reach out with more feedback.
Hi @Equartey - thanks for the example, I tried out both yours and the customized example in the UI doc, but the default UI seemed better and in the long run we want to keep it as hands-off as possible (which might align with Amplify's vision as well perhaps?)
Anyway thanks a lot for the help!
Which Specific Feature is your question related to?
Amplify UI
Question
How do I set the company logo in the AWS Amplify Authenticator UI for my Flutter app? The instructions here are too invasive or unclear: https://ui.docs.amplify.aws/flutter/connected-components/authenticator/customization
Isn't there a way to pass the logo as a parameter to the Authenticator UI? Here's a quick snippet of my working UI: