Authenticator UI add custom logo

[nirav-baid]

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:

@override
  Widget build(BuildContext context) {
    return Authenticator(
      padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 32),
      // want to pass company logo in here, or let the Cloud handle it
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        builder: Authenticator.builder(),
        home: LandingPage(),
        theme: lightMode,
        darkTheme: darkMode,
      ),
    );
  }

[nirav-baid]

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

[ykethan]

hey, 👋 thanks for raising this! I'm going to transfer this over to our Amplify UI repository for better assistance 🙂

[nirav-baid]

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.

[Equartey]

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?

[nirav-baid]

@Equartey -

1. On your comment: "Amplify Flutter does not provide a simple API for including the logo as described nor do we support Hosted UI customizations from the console."

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.

2. On your comment: "Currently, we only support adding a logo through the steps outlined in full ui customization guide."

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:

1. Let Cognito's Hosted UI customization settings take effect in the Authenticator UI... OR
2. Provide a more apparent mechanism for Authenticator UI opt-ers to pass in the company logo to be shown on the Authenticator UI - that AWS Amplify owns

[Equartey]

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

Logo UI customization example

  ...
 @override
  Widget build(BuildContext context) {
    return Authenticator(
      // `authenticatorBuilder` is used to customize the UI for one or more steps
      authenticatorBuilder: (BuildContext context, AuthenticatorState state) {
        switch (state.currentStep) {
          case AuthenticatorStep.signIn:
            return LogoScaffold(
              // A prebuilt Sign In form from amplify_authenticator
              body: SignInForm(),
            );
          case AuthenticatorStep.signUp:
            return LogoScaffold(
              // A prebuilt Sign Up form from amplify_authenticator
              body: SignUpForm(),
            );
          case AuthenticatorStep.confirmSignUp:
            return LogoScaffold(
              // A prebuilt Confirm Sign Up form from amplify_authenticator
              body: ConfirmSignUpForm(),
            );
          case AuthenticatorStep.resetPassword:
            return LogoScaffold(
              // A prebuilt Reset Password form from amplify_authenticator
              body: ResetPasswordForm(),
            );
          case AuthenticatorStep.confirmResetPassword:
            return const LogoScaffold(
              // A prebuilt Confirm Reset Password form from amplify_authenticator
              body: ConfirmResetPasswordForm(),
            );
          // TODO: Add case statements for other steps for where you want the logo to appear.
          default:
            // Returning null defaults to the prebuilt authenticator for all other steps
            return null;
        }
      },
      child: MaterialApp(
        builder: Authenticator.builder(),
        home: const Scaffold(
          body: Center(
            child: Text('You are logged in!'),
          ),
        ),
      ),
    );
  }

  ...

/// A widget that wraps the body a logo
class LogoScaffold extends StatelessWidget {
  const LogoScaffold({
    super.key,
    required this.body,
  });

  final Widget body;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: SingleChildScrollView(
          child: Column(
            children: [
              // App logo
              const Padding(
                padding: EdgeInsets.only(top: 32),
                child: Center(child: FlutterLogo(size: 100)),
              ),
              Container(
                constraints: const BoxConstraints(maxWidth: 600),
                child: body,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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.