[$500] Public room - Sign in button remains when login new user via public room

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.57-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): gocemate+balto920@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Sign out from New dot if you are logged in
2. Open public room link
3. Go to Sign in> Finish the sign in process with NEW account

Expected Result:

User should be signed in and there should be no Sign in button since the user is already signed in

Actual Result:

Sign in button remains on the left top on the screen, when click Sign in user land on login page

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6428782_1711550679646.Recording__2709.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a0f529690a8d5a49
• Upwork Job ID: 1773653174450307072
• Last Price Increase: 2024-03-29
• Automatic offers:
• bernhardoj | Contributor | 0

[melvin-bot]

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[lanitochka17]

@sonialiap FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When the anonymous user successfully signed-in, the sign in button on the top left still shown.

What is the root cause of that problem?

To show the sign in button, we check whether the user is an anonymous user or not imperatively.

App/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx

Lines 60 to 63 in 9dde2d5

	{Session.isAnonymousUser() ? (
	<SignInButton />
	) : (
	<Tooltip text={translate('common.search')}>

However, the component won't re-render when the user type is changed from anon --> non-anon because we are not subscribing to the session data.

But the component somehow re-renders if we login with an existing account which means there is an external factor that triggers the re-render. In our case, TopBar uses a useTranslate hook,

App/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx

Line 32 in a4d01a8

const {translate} = useLocalize();

which triggers the re-render every time the locale or selectedTimezone is updated.

App/src/components/LocaleContextProvider.tsx

Lines 77 to 79 in a4d01a8

	const locale = preferredLocale ?? CONST.LOCALES.DEFAULT;
	const selectedTimezone = useMemo(() => currentUserPersonalDetails?.timezone?.selected, [currentUserPersonalDetails]);

The default locale is en and the timezone of the anonymous account is Los Angeles. When you login to an existing account, both the locale and timezone will be updated to your account locale and timezone.

But if you login with a new account, the timezone is not dynamically updated to your local timezone as shown in the above image. The timezone will only be updated if you open the settings page.

What changes do you think we should make in order to solve the problem?

Subscribe to the session data and check whether it's an anon user or not based on the session data

const isAnonymousUser = session?.authTokenType === CONST.AUTH_TOKEN_TYPES.ANONYMOUS;

{isAnonymousUser ? (
    <SignInButton />
) : (

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01a0f529690a8d5a49

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @sobitneupane (External)

[PierreAdel]

Proposal

• State Management Review: Conduct a thorough review of the state management logic surrounding the sign-in process. This includes verifying if the state correctly updates and propagates through the application upon user authentication.
• Event Handling Optimization: Ensure that event listeners related to the authentication process are optimally implemented, particularly those triggering UI updates post-sign-in.
• Context API/Redux Investigation: For applications using Context API or Redux, inspect the global state management to ensure it accurately reflects the user's sign-in status across all components.
• Component Lifecycles: Review the lifecycle methods or React hooks (e.g., useEffect) responsible for triggering UI updates based on authentication status changes. Ensure they are correctly implemented and invoked.

This proposal is designed to rectify the identified bug not only in the specific occurrence but also in all related instances throughout the application.

Contributor details
Your Expensify account email: pierreadelkamel@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/pierreadel2

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.