[$250] Pay-403 Forbidden console error when paying a user offline and opening the details

[mitarachim]

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: 9.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: https://test-management.browserstack.com/projects/2219752/folder/13176725/test-cases/41237083
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: MacBook Air 15.6.1 Chrome
App Component: Other

Action Performed:

1. Navigate to the staging.new.expensify.com and sign in
2. Open dev tools/ Console
3. Create a chat with another account, if needed
4. Go offline
5. Click the "+" button in the chat, then Pay User
6. Enter an amount, click Next, then mark as paid or pay with wallet
7. Click the payment preview to open the details

Expected Result:

No errors appear in JS console

Actual Result:

The Post request fails with 403 forbidden error in JS console, when sending a payment offline and opening the payment details

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

Bug6941009_1757547494765.error_403.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021966282055163210667
• Upwork Job ID: 1966282055163210667
• Last Price Increase: 2025-09-11
• Automatic offers:
• nkdengineer | Contributor | 108786194

Issue Owner

Current Issue Owner: @nkdengineer

[melvin-bot]

Triggered auto assignment to @alexpensify (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.

[mukhrr]

Proposal

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

When users go offline and try to open payment details in a chat, the app shows a 403 forbidden error in the JavaScript console.

What is the root cause of that problem?

This happens because the app attempts to authenticate with Pusher (for real-time updates) even when offline, causing the authentication request to fail.

App/src/libs/actions/Session/index.ts

Lines 913 to 923 in 80b3440

	function authenticatePusher(socketID: string, channelName: string, callback?: ChannelAuthorizationCallback) {
	Log.info('[PusherAuthorizer] Attempting to authorize Pusher', false, {channelName});
	const params: AuthenticatePusherParams = {
	// eslint-disable-next-line @typescript-eslint/naming-convention
	socket_id: socketID,
	// eslint-disable-next-line @typescript-eslint/naming-convention
	channel_name: channelName,
	shouldRetry: false,
	forceNetworkRequest: true,
	};

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

We should add an offline check at the beginning of the authenticatePusher function.

    if (isOffline()) {
        Log.info('[PusherAuthorizer] Skipping Pusher authentication because we are offline', false, {channelName});
        const error = new Error('Pusher authentication skipped because we are offline');
        if (callback) {
            callback(error, {auth: ''});
        }
        return Promise.resolve();
    }

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)

[PiyushChandra17]

Proposal

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

Pay-403 Forbidden console error when paying a user offline and opening the details

What is the root cause of that problem?

Console error

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

We need to add here

headers: {
    'Content-Type': 'application/json'
}

function processHTTPRequest(url: string, method: RequestType = 'get', body: FormData | null = null, abortSignal: AbortSignal | undefined = undefined): Promise<Response> {
const startTime = new Date().valueOf();
return fetch(url, {
    headers: {
        'Content-Type': 'application/json',
    },
    // We hook requests to the same Controller signal, so we can cancel them all at once
    signal: abortSignal,
    method,
    body,
    // On Web fetch already defaults to 'omit' for credentials, but it seems that this is not the case for the ReactNative implementation
    // so to avoid sending cookies with the request we set it to 'omit' explicitly
    // this avoids us sending specially the expensifyWeb cookie, which makes a CSRF token required
    // more on that here: https://stackoverflowteams.com/c/expensify/questions/93
    credentials: 'omit',
})

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)

n/A

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.

[melvin-bot]

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

[melvin-bot]

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

[alexpensify]

@DylanDylann - When you get a chance, please review if one of these proposals will fix the issue? Thanks!

[nkdengineer]

Proposal

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

The Post request fails with 403 forbidden error in JS console, when sending a payment offline and opening the payment details

What is the root cause of that problem?

In offline, we call authenticatePusher to subscribe to an optimistic report that doesn't exist in the backend since the SendMoney API isn't called. As a result, 403 error appears.

App/src/pages/home/ReportScreen.tsx

Line 716 in 80b3440

subscribeToReportLeavingEvents(reportIDFromRoute);

App/src/libs/actions/Session/index.ts

Lines 913 to 923 in 80b3440

	function authenticatePusher(socketID: string, channelName: string, callback?: ChannelAuthorizationCallback) {
	Log.info('[PusherAuthorizer] Attempting to authorize Pusher', false, {channelName});
	const params: AuthenticatePusherParams = {
	// eslint-disable-next-line @typescript-eslint/naming-convention
	socket_id: socketID,
	// eslint-disable-next-line @typescript-eslint/naming-convention
	channel_name: channelName,
	shouldRetry: false,
	forceNetworkRequest: true,
	};

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

If the report is optimistic, we shouldn't call subscribeToReportLeavingEvents here

1. Add createChat pendindFields to the optimistic IOU report here. And clear the pending in the success data

pendingFields: {
    createChat: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
},

App/src/libs/actions/IOU.ts

Line 8606 in 96c4f8d

const optimisticIOUReportData: OnyxUpdate = {

2. Check the optimistic report here

if (reportIDFromRoute !== report?.reportID || report?.pendingFields?.createChat) {
    return;
}

App/src/pages/home/ReportScreen.tsx

Line 716 in 80b3440

subscribeToReportLeavingEvents(reportIDFromRoute);

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)

We can prevent side effect API and read API from being called if we're offline here

function processRequest(request: OnyxRequest, type: ApiRequestType): Promise<void | Response> {
    // Write commands can be saved and retried, so push it to the SequentialQueue
    if (type === CONST.API_REQUEST_TYPE.WRITE) {
        pushToSequentialQueue(request);
        return Promise.resolve();
    }

    if (isOffline()) {
        return Promise.resolve();
    }

    // Read requests are processed right away, but don't return the response to the caller
    if (type === CONST.API_REQUEST_TYPE.READ) {
        processWithMiddleware(request);
        return Promise.resolve();
    }

    // Requests with side effects process right away, and return the response to the caller
    return processWithMiddleware(request);
}

App/src/libs/API/index.ts

Line 141 in 96c4f8d

function processRequest(request: OnyxRequest, type: ApiRequestType): Promise<void | Response> {

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.

[DylanDylann]

@nkdengineer's proposal looks good to me. We should skip calling subscribeEvent when the report is still in a pending creation state and the internet connection is offline.

🎀👀🎀 C+ reviewed