Amplify-js: Logo passed in to AmplifyGreetings is not rendered

[nonbeing]

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="[email protected]"></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._

[ashika01]

@nonbeing This might not be working, we have seen a similar issue like this one before. It was a constraint on using react bindings. Will mark this a bug to work on it. Thank you for reaching out.

[jordanranz]

I think the correct way to implement this is using a "logo" slot and maybe pass a logo url into the logo prop. @ashika01 @nonbeing any thoughts on this?

[nonbeing]

@ashika01 @jordanranz really appreciate the speedy response! Thank you - at least I now know that this is indeed a bug and not "user error" of some kind!

Jordanranz: I actually like the current mechanism of passing a functional logo component as a prop to AmplifyGreetings; this is what I think is intuitive and fairly common. I'm already importing the SVG logo functional component anyway, so all I have to do is pass it into AmplifyGreetings.

[jordanranz]

@nonbeing, The FunctionalComponent type is a Stencil specific prop type and at the moment does not support passing a React into it. I have opened a PR (with usage) to using a slot for the logo inside of the Greetings component. Hopefuly this solution works for you!

[nonbeing]

As long as this actually works, it works for me! :-)
Around when do you think the fix might actually roll out? Thanks. @jordanranz

[jordanranz]

Hey @nonbeing,

The change is in the @unstable version of the UI libraries. Would you mind installing that version and trying:

<AmplifyGreetings username="[email protected]">
  <img slot="logo" src={logo} height="60" width="60"  />
</AmplifyGreetings>

[nonbeing]

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

[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?

[ashika01]

It should also be in the latest version (@aws-amplify/ui-components : 3.0.23) by now. We have done a release out 👍 Closing this issue since the feature has been fixed.