[$250] iOS&Android - App crashed when opening deeplink for changing workspace owner

[jponikarchuk]

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: v9.2.9-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #70030
Email or phone of affected tester (no customers): tester@applausecard.expensifail.com
Issue reported by: Applause Internal Team
Device used: Realme C67 - Android 14, Apple iPhone 15 Pro - iOS 26.0
App Component: Other

Action Performed:

1. Open App and login
2. Open workspaces/:workspaceID/change-owner/78878/noBillingCard (for Native apps, paste this link to any chat and open it)

Expected Result:

Changing workspace owner page opens

Actual Result:

App crashed

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

troubleshoot (1).zip

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021967688851615177453
• Upwork Job ID: 1967688851615177453
• Last Price Increase: 2025-09-15

Issue Owner

Current Issue Owner: @bernhardoj

[melvin-bot]

Triggered auto assignment to @lydiabarclay (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[daledah]

Proposal

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

App crashed

What is the root cause of that problem?

We get this erorr

Because of we are calling the window.addEventListener in native os

App/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx

Lines 58 to 63 in 73127a2

	useEffect(() => {
	window.addEventListener('message', handleSCAAuthentication);
	return () => {
	window.removeEventListener('message', handleSCAAuthentication);
	};
	}, [handleSCAAuthentication]);

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

We can check the os like we did here

App/src/components/Search/SearchRouter/SearchRouterContext.tsx

Line 35 in 73127a2

const canListenPopState = typeof window !== 'undefined' && typeof window.addEventListener === 'function';

App/src/components/Search/SearchRouter/SearchRouterContext.tsx

Lines 43 to 45 in 73127a2

	if (!canListenPopState) {
	return;
	}

    const canListenHandleAuthentication = typeof window !== 'undefined' && typeof window.addEventListener === 'function';
    ...
    useEffect(() => {
        if (!canListenHandleAuthentication) {
            return;
        }
        window.addEventListener('message', handleSCAAuthentication);
        return () => {
            window.removeEventListener('message', handleSCAAuthentication);
        };
    }, [handleSCAAuthentication, canListenHandleAuthentication]);

Or we can create a new file index.native.ts to handle this

Note: we will have a bug that when back from the Transfer owner screen, the page not found will appear, will be fixed in this PR

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[Eskalifer1]

Proposal

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

iOS&Android - App crashed when opening deepling for changing workspace owner

What is the root cause of that problem?

We use a component that can only be used in a browser environment, since its logic is tied to receiving the ‘message’ event, and window does not exist on native devices, which is why an error occurs.

App/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx

Lines 58 to 63 in 73127a2

	useEffect(() => {
	window.addEventListener('message', handleSCAAuthentication);
	return () => {
	window.removeEventListener('message', handleSCAAuthentication);
	};
	}, [handleSCAAuthentication]);

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

We can discuss what decision we expect during the PR stage, but my main idea is as follows:
Since we cannot simply ignore the hook (because part of the logic depends on it, and if it is missing, the application will not work as it should), I suggest using the same approach that we use on another page:
The AddPaymentCard page is only available for the web environment:

App/src/pages/settings/Subscription/PaymentCard/index.native.tsx

Lines 1 to 19 in f123caf

	import React from 'react';
	import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
	import ScreenWrapper from '@components/ScreenWrapper';
	function AddPaymentCard() {
	return (
	<ScreenWrapper
	testID={AddPaymentCard.displayName}
	includeSafeAreaPaddingBottom
	shouldEnableMaxHeight
	>
	<FullPageNotFoundView shouldShow />
	</ScreenWrapper>
	);
	}
	AddPaymentCard.displayName = 'AddPaymentCard';
	export default AddPaymentCard;

We need to do the same here, either cut out the entire page for native devices (return notFound and remove the link to it from the application) or only the part that relates to this logic (if possible), but this requires detailed discussion.

For example, here we display this window, which will trigger the flow from CardAuthenticationModal depending on two parameters:

App/src/pages/workspace/members/WorkspaceOwnerChangeWrapperPage.tsx

Lines 84 to 95 in f123caf

	{!policy?.isLoading && !shouldShowPaymentCardForm && (
	<WorkspaceOwnerChangeCheck
	policy={policy}
	accountID={accountID}
	error={error}
	/>
	)}
	<CardAuthenticationModal
	headerTitle={translate('subscription.authenticatePaymentCard')}
	policyID={policyID}
	/>
	</View>

!policy?.isLoading && !shouldShowPaymentCardForm

We can add another parameter, isNative, or create a separate component that will return notFound on native devices with information that it is only available in the browser, and on the web — what is currently available.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Or we can make this CardAuthenticationModal component on native devices as some kind of informational window that will say that this functionality is only available in the web application, and display it on the web as it is now.
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[bernhardoj]

Proposal

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

App crashes when deep link to change workspace owner page.

What is the root cause of that problem?

It crashes because the page renders CardAuthenticationModal, which uses a web API.

App/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx

Lines 58 to 63 in f123caf

	useEffect(() => {
	window.addEventListener('message', handleSCAAuthentication);
	return () => {
	window.removeEventListener('message', handleSCAAuthentication);
	};
	}, [handleSCAAuthentication]);

We encounter this issue on this PR when adding the transfer owner button, but as mentioned in the comment here, this component is only intended for the web.

So, they hide the transfer owner button on native, except if fund list exist.

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

First, we should show not found page for the transfer owner page if it's not supposed to be shown.

App/src/pages/workspace/members/WorkspaceOwnerChangeWrapperPage.tsx

Lines 64 to 67 in f123caf

	<AccessOrNotFoundWrapper
	accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
	policyID={policyID}
	>

shouldBeBlocked={!shouldRenderTransferOwnerButton(fundList)}

Also, since the user can't add a card on native, we should show not found page too when the error is noBillingCard.

But if the user has a fund list, then the issue will happen again. So, we need to create a native file for CardAuthenticationModal that returns null.

export default () => null;

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[melvin-bot]

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

[melvin-bot]

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