Logo passed in to AmplifyGreetings is not rendered

Describe the bug I am trying to customize the AmplifyGreetings component in my React app. I’m using the instructions at the official amplify docs.

I am using "@aws-amplify/ui-react": "^0.2.8".

I am passing props to the AmplifyGreetings component in my App.js like so: <AmplifyGreetings logo={Hello} username={userEmail}></AmplifyGreetings>, just as described in the docs. However the logo never displays, it’s always undefined (see screenshot below).

To Reproduce Steps to reproduce the behavior:

Here’s a more complete example:

const App = () => {
  const Hello = () => <h1>Hello!</h1>

  return (
    <AmplifyAuthenticator usernameAlias='email'>
      <AmplifySignIn
        headerText='Sign In to Your Account'
        slot='sign-in'
      ></AmplifySignIn>
      <AmplifyGreetings logo={Hello} username="[e-mail]"></AmplifyGreetings>
      <div className='App'>
      // nothing special here, just a form and a button
      </div>
    </AmplifyAuthenticator>
  )
}

In my App.css I have managed to customize the colors using:

amplify-greetings {
  --background-color: #02387b;
  --border-color: #02387b;
  color: #eff0f4;

}

Expected behavior

I actually want to pass in an SVG component to the logo prop of AmplifyGreetings. I am able to import a logo component like so: import svglogo from './logo/svglogo' and render svglogo inside <div className='App'>. In other words, I know the SVG component is working and I am able to show it in the app, but it doesn’t work in AmplifyGreetings.

The docs for AmplifyGreetings say:

The problem with the above docs is that FunctionalComponent<{}> is really very ambiguous, and I have been scouring the Internet on how to pass this FunctionalComponent<{}> logo to AmplifyGreetings, but haven’t been able to find a single example. As you can see from the snippet I shared above, const Hello = () => <h1>Hello!</h1> is a simple, purely-functional React component, but even this is also getting rendered as undefined. There is no help from Amplify’s console logs on what I am doing wrong - no warnings or errors or feedback of any kind. This is very frustrating.

I am blocked on this issue, because I have to get my client’s logo rendered in the header. So I would immensely appreciate it if you could please share a working example of passing a sample logo FunctionalComponent<{}> (whatever that is supposed to be) to AmplifyGreetings.

Expected: The functional logo component I am passing in to AmplifyGreetings should get rendered, instead of the undefined that is displayed. OR please share a working example for me to emulate, in case I am not using the right Type when passing the prop to AmplifyGreetings. OR please suggest a suitable workaround for now.

Code Snippet Shared above (in Steps to Reproduce)

Screenshots Please see this:

What is Configured? If applicable, please provide what is configured for Amplify CLI:

• Which steps did you follow via Amplify CLI when configuring your resources.
• Which resources do you have configured? Not required, imo, because auth is working functionally: sign-up, sign-in, sign-out are working fine. The problem is limited to passing a logo to AmplifyGreetings and having it rendered correctly.

Smartphone (please complete the following information): N/A

Additional context None.

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = ‘DEBUG’; in your app.

[nonbeing]

Confirmed the fix using "@aws-amplify/ui-react": "^0.2.15-unstable.2" and "aws-amplify": "^3.0.23".

Relevant code:

import logo from './logo/Nautical_star.svg'
.
.
.
      <AmplifyGreetings username={userEmail}>
        <img slot="logo" src={logo} height="60" width="60" />
      </AmplifyGreetings>

Screenshot:

Thanks @jordanranz ! 👍👍

When is this fix likely to make it to the mainline?

[nonbeing]

Sure, will try to do this today or tomorrow. Thanks @jordanranz