aws-amplify/ui-react - renders component when user is not signed in

[onlybakam]

Describe the bug

@aws-amplify/ui-react": "^0.2.3

With

export default withAuthenticator(App)

user is not signed in but App is still "rendered" (though not visible). The useEffect hooks are triggered, indicated that it was rendered. the App should not be rendered until a user has signed in.

[ashika01]

@onlybakam : could you provide us with a sample of your code?

[onlybakam]

import Amplify from 'aws-amplify'
import { withAuthenticator } from '@aws-amplify/ui-react'
Amplify.configure(awsconfig)

function App() {
  React.useEffect(() => {
    console.log('called') // <- logged even if user is not authenticated
  }, [])
  return (

    <div>hi</div>
  )
}

export default withAuthenticator(App)

[onlybakam]

expectation is that App is not rendered if state is not signedIn. so something like

{state.signedIn ? <Component /> : null}

[jordanranz]

Investigating a change to this behavior

[jordanranz]

The auth state handling is now baked into the withAuthenticator. Please try the @aws-amplify/ui-react@unstable. Working on documenting the same behavior for AmplifyAuthenticator

[mtliendo]

Hey @jordanranz thanks for all your work on the the amplify components and quick turnaround times on issues/feedback!

I was wanting to make a suggestion in holding off on closing issues until any changes are pushed to the main library as opposed to @unstable.

My use case is that I have a few blog posts coming out regarding the auth components, but want to avoid using the @unstable package. It would be easier for tracking if I could follow open issues.

[kmbro]

Any update on the AmplifyAuthenticator version of this? I am seeing this issue, and seems to be a very strange behavior.

v2, which I use in different projects does not render the app, but here I have the following:

const App = () => (
  <AmplifyAuthenticator>
    {/* Customize Amplify Auth Components (https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#sign-up) */}
    {AuthenticationComponents}

    {/* Application */}
    <Provider store={store}>
      <Router>
        <Navigation defaultExpand={true}>
          {/* Main content */}
          <Routes />
        </Navigation>
      </Router>
    </Provider>
  </AmplifyAuthenticator>
);

export default App;

Where AuthenticationComponents are my custom SignIn/SIgnUp components as a list. I can view everything below <Provider> if I am signed in or not.

Could you advise on how to use your fix if it is already in master? or if not, can I follow your merge request when you put it up? thanks

[trungtin]

any update on the Authenticator component part? Still having problem with @aws-amplify/[email protected]
Thanks

[jordanranz]

@mtliendo this is good feedback. It auto closes from the hook in the PR but it may be better to hold off on using that.

@kmbro and @trungtin, this is a known limitation to the web component default slot. The recommended way to to manage the application mounting would be to use this guide: https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#manage-auth-state-and-conditional-app-rendering

[kmbro]

@jordanranz This worked great for me. Thanks for the linked doc above!

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.