Auth page customizations not used when signOut called if user was auto-signed in when starting browser

[joealynn]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Create React App/Webpack 5

What browsers are you seeing the problem on?

Chrome, Safari

Which region are you seeing the problem in?

us-east-1

Please describe your bug.

I am using the Authenticator component with customizations by using the properties formFields, components, and services. If the user is logged in and closes the browser, and then reopens it, they are automatically logged in and the Sign In form does not appear, as expected. If they click the Sign Out button, my code calls the signOut function supplied by Authenticator. Now the Sign In form appears, but my customizations are not rendered. Specifically, the overrides in formFields are not represented, and the handleSignIn service override is not invoked when the Sign In button is clicked.

What's the expected behaviour?

The Sign In form that is displayed should be using the customizations. Everything works correctly if the user is not signed in before opening the browser. In that situation, the Sign In form is displayed with my customizations. After signing in, if the user clicks the Sign Out button, the Sign In form is displayed again with the correct customizations.

Help us reproduce the bug!

Include the Authenticator in a React app, passing formFields, components and services. In formFields, I use placeholders and hide the labels so it is obvious when the form is displayed. Run the app (webpaclk dev server?) and follow these steps:

1. Open the app in a browser and observe that the customized form appears.
2. Sign in to the app, which must provide a Sign Out button.
3. Click Sign Out and observe that the customized Sign In form is displayed.
4. Sign back into the app and close the browser.
5. Open the browser again and run the app. Observe that you are logged in without seeing the Sign In form.
6. Click Sign Out and observe that the Sign In form does not include the customizations

Code Snippet

// Put your code below this line.
  const formFields = {
    signIn: {
      username: {
        placeholder: 'Username',
        labelHidden: true
      },
      password: {
        placeholder: 'Password',
        labelHidden: true
      }
    };
  const components = {
    SignIn: {
      Header: () => {
        const {tokens} = useTheme();

        return (
          <Heading padding={tokens.space.large} level={4} fontWeight={'normal'}>
            Please log in
          </Heading>
        );
      },
    }
  };
  const services = {
    handleSignIn: async (formData) => {
      const { username, password } = formData;
      console.log( username );
      return signIn( {username, password});l
  };
  return (
    <Authenticator formFields={formFields} components={components} services={services} >
      {({ signOut, user }) => (
            <div className="greeting ">
      <span>Hello {user.username}</span>
      <Button
        onClick={signOut}
      >Sign Out</Button>
    </div>
 )}
</Authenticator>

Console log output

No console output is produced

Additional information and screenshots

No response

[esauerbo]

Hi @joealynn, thanks for raising this issue. We've been able to reproduce this bug and are currently working on a fix. I'll update you once that's released.

[esauerbo]

Hi @joealynn this has been fixed in @aws-amplify/ui-react version 6.0.5.
https://www.npmjs.com/package/@aws-amplify/ui-react

Closing this out but feel free to reopen if you have any issues with installing.