Amplify-js: [React][aws-amplify-react] - Page reload briefly shows authentication screen

[Legym]

I am using withAuthenticator as a HOC to add authentication to my React app. My issue is that if you are logged in and you refresh the app, it will flicker and briefly show the login screen before rendering the component. I have tried <Authenticator /> and also have gotten the same issue.

It is the same issue as #233

I used this example.
https://aws-amplify.github.io/amplify-js/media/authentication_guide.html#using-withauthenticator-hoc

[yalamber]

Same issue for me as well. I also have issue #1334, greetings are not updated after signin. Do you also experience issue with greetings?

[harshayburadkar]

I am now facing the same issue. It makes the experience looks bad and I am afraid we would have to end up not using the UI provided by Amplify if this doesn't get fixed.

These features should be marked Beta in the documentation until the UI/UX provided by Amplify is of the standard that AWS deserves to be at. I am considering Amplify for a serious project but some issues make me want to reconsider. Kindly take note of this and either fix the critical issues or add a beta flag to features everywhere in the documentation which aren't up to the mark yet.

[powerful23]

@Legym Thanks for your feedback. I've added it as a story in our icebox.

[Legym]

I upgraded my npm package aws-amplify-react to the latest version and this issue has been fixed. Really like the new design as well. Thank you!

[yalamber]

for me even upgrading to latest version did not fix the issue. I am using Authenticator though.

[powerful23]

@yalamber the latest version of aws-amplify-react which is 2.0.1. The issue should have been fixed in that version.

[yalamber]

I am using the latest version but using Authenticator component instead of withAuthenticator HOC. I will check with withAuthenticator HOC as well.

<Authenticator hideDefault={true} theme={MyAmplifyTheme} onStateChange={this.handleAuthStateChange}>
          <AppContainer />
          <SignIn />
</Authenticator>

[yalamber]

ok seems like ncu did not update the packages properly. With latest version. it seems to be working great. nice designs as well. great work.

[yalamber]

@powerful23 one strange issue though when I use hideDefault={true} in Authenticator component. if you are logged in it does not show any component. when hideDefault is false it shows component properly.

[powerful23]

@yalamber hideDefault is used to hide those default auth components so you can put your customized ones. I am not fully understanding your question. You mean you the AppContainer doesn't show up when signed in if hideDefault is true?

[flyingace]

Hi. I am experiencing this issue using aws-amplify-react v2.1.4. I am using the withAuthenticator HOC. After authenticating, while the auth token is still valid if I refresh the page I see the sign-in page for a brief second before I am taken to the app.
I could try adding a conditional to the beginning of my LoginPage component's render method that checks whether the authState is 'SignIn' and only render if this is the case but it seems that this goes against the general intention of how Auth is meant to work.