refactor: Move fetch credentials to the customizations by mfortman11 · Pull Request #11049 · langflow-ai/langflow

mfortman11 · 2025-12-16T22:29:58Z

Creates customizations for adding credentials to fetch calls tied to a new feature flag

This pull request introduces a new feature flag, ENABLE_FETCH_CREDENTIALS, to control whether credentials (like cookies) are included in fetch and axios requests. The main change is the addition of utility functions to standardize credential handling across the codebase, and the subsequent refactoring of API calls to use these utilities. This makes it easier to toggle credential behavior for cross-origin requests from a single configuration point.

Key changes include:

Feature flag and utility functions:

Added the ENABLE_FETCH_CREDENTIALS flag in feature-flags.ts to enable or disable sending credentials with requests.
Introduced getFetchCredentials and getAxiosWithCredentials utility functions to determine credential settings for fetch and axios based on the feature flag.

Refactoring API and fetch calls:

Updated axios instance creation in api.tsx to use getAxiosWithCredentials for the withCredentials option.
Refactored multiple fetch-based API calls (including file download, flow download, and build utilities) to use getFetchCredentials for the credentials option, ensuring consistent behavior. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

Imports and code organization:

Added imports for getFetchCredentials and getAxiosWithCredentials in all affected files to support the new credential handling logic. [1] [2] [3] [4] [5] [6] [7] [8]

These changes centralize credential management for API requests, making it easier to adapt to different deployment environments and security requirements.

Summary by CodeRabbit

Release Notes

New Features
- Added infrastructure for authenticated cross-origin requests (currently disabled by default).
Chores
- Updated network requests across the application to support credential configuration for improved authentication handling.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-12-16T22:30:16Z

Walkthrough

A feature flag and utility module centralize fetch/axios credential configuration across the frontend. Multiple API endpoints are updated to include credentials in requests by importing and applying getFetchCredentials() and getAxiosWithCredentials() functions, enabling authenticated cross-origin requests.

Changes

Cohort / File(s)	Summary
Credentials utility and feature flag `src/frontend/src/customization/utils/get-fetch-credentials.ts`, `src/frontend/src/customization/feature-flags.ts`	New module `get-fetch-credentials.ts` exports `getFetchCredentials()` and `getAxiosWithCredentials()` functions that return credential values based on `ENABLE_FETCH_CREDENTIALS` flag. Feature flag added as new exported constant set to `false`.
Core API setup `src/frontend/src/controllers/API/api.tsx`	Axios instance configured with `getAxiosWithCredentials()`. Streaming requests now include credentials from `getFetchCredentials()`. Parameter type refined to `RequestInit`.
File management queries `src/frontend/src/controllers/API/queries/file-management/use-duplicate-file.ts`, `src/frontend/src/controllers/API/queries/file-management/use-get-download-file.ts`, `src/frontend/src/controllers/API/queries/file-management/use-get-download-files.ts`	Each imports `getFetchCredentials` and applies `credentials: getFetchCredentials()` to fetch calls. Single and batch download paths updated.
File and flow download queries `src/frontend/src/controllers/API/queries/files/use-download-files.ts`, `src/frontend/src/controllers/API/queries/flows/use-get-download-flows.ts`	Imports `getFetchCredentials` and adds credentials to fetch request options for download operations.
Build and polling utilities `src/frontend/src/utils/buildUtils.ts`, `src/frontend/src/customization/utils/custom-poll-build-events.ts`	Both import `getFetchCredentials` and include `credentials: getFetchCredentials()` in fetch calls—build start/cancel operations and polling requests respectively.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Homogeneous pattern: The same credential-injection pattern is applied consistently across 8+ files, reducing cognitive load per file.
Low complexity: Each change is straightforward—importing a utility function and adding a single credentials parameter to fetch/axios calls.
No control-flow changes: All modifications are additive configuration; no logic or error handling is altered.
Areas for attention:
- Verify that ENABLE_FETCH_CREDENTIALS defaults to false to avoid unintended credential inclusion on all requests.
- Confirm that getFetchCredentials() and getAxiosWithCredentials() handle both enabled and disabled states correctly.
- Check that the RequestInit type refinement in api.tsx is correctly applied and maintains compatibility.

Pre-merge checks and finishing touches

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 2 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	PR introduces significant new functionality (credential handling utility, feature flag, API updates across 8+ files) without corresponding test files. Repository has established Jest testing pattern with tests directories.	Add comprehensive test coverage in tests directories following project pattern. Create get-fetch-credentials.test.ts with unit tests for both functions and feature flag, plus integration tests for modified API sites.
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.
Test File Naming And Structure	⚠️ Warning	PR introduces new credential utility module without corresponding test files, leaving critical credential handling logic untested.	Create comprehensive test file at src/frontend/src/customization/utils/tests/get-fetch-credentials.test.ts with Jest tests for both utility functions and modified API calls.
Test Quality And Coverage	❓ Inconclusive	Unable to assess test quality and coverage without pull request details, file changes, test files, or code context.	Provide the pull request information, modified files, test implementations, and codebase structure to evaluate test coverage adequacy.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'refactor: Move fetch credentials to the customizations' accurately describes the main change—moving credential handling to centralized customization utilities. It is clear, concise, and directly reflects the primary objective of the PR.
Excessive Mock Usage Warning	✅ Passed	This PR modifies only production code with no test files added or modified, making the mock usage check not applicable.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch api-call-creds

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2025-12-16T22:31:55Z

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	16.67% (4695/28164)	9.99% (2179/21794)	10.94% (677/6183)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
1829	0 💤	0 ❌	0 🔥	24.469s ⏱️

codecov · 2025-12-16T22:32:13Z

Codecov Report

❌ Patch coverage is 56.25000% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 33.11%. Comparing base (b86351f) to head (125d797).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
src/frontend/src/controllers/API/api.tsx	33.33%	2 Missing ⚠️
.../API/queries/file-management/use-duplicate-file.ts	0.00%	1 Missing ⚠️
.../queries/file-management/use-get-download-files.ts	0.00%	1 Missing ⚠️
...ontrollers/API/queries/files/use-download-files.ts	0.00%	1 Missing ⚠️
...ollers/API/queries/flows/use-get-download-flows.ts	0.00%	1 Missing ⚠️
...d/src/customization/utils/get-fetch-credentials.ts	80.00%	1 Missing ⚠️

❌ Your project status has failed because the head coverage (39.27%) is below the target coverage (60.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #11049   +/-   ##
=======================================
  Coverage   33.11%   33.11%           
=======================================
  Files        1389     1390    +1     
  Lines       65714    65728   +14     
  Branches     9730     9731    +1     
=======================================
+ Hits        21760    21769    +9     
- Misses      42836    42841    +5     
  Partials     1118     1118

Flag	Coverage Δ
frontend	`15.36% <56.25%> (+0.02%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...I/queries/file-management/use-get-download-file.ts	`23.80% <100.00%> (+3.80%)`	⬆️
src/frontend/src/customization/feature-flags.ts	`100.00% <100.00%> (ø)`
...rc/customization/utils/custom-poll-build-events.ts	`13.33% <100.00%> (+2.98%)`	⬆️
src/frontend/src/utils/buildUtils.ts	`5.55% <100.00%> (+0.27%)`	⬆️
.../API/queries/file-management/use-duplicate-file.ts	`0.00% <0.00%> (ø)`
.../queries/file-management/use-get-download-files.ts	`0.00% <0.00%> (ø)`
...ontrollers/API/queries/files/use-download-files.ts	`0.00% <0.00%> (ø)`
...ollers/API/queries/flows/use-get-download-flows.ts	`0.00% <0.00%> (ø)`
...d/src/customization/utils/get-fetch-credentials.ts	`80.00% <80.00%> (ø)`
src/frontend/src/controllers/API/api.tsx	`9.04% <33.33%> (+0.48%)`	⬆️

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/frontend/src/customization/utils/get-fetch-credentials.ts (1)
1-12: LGTM! Consider documenting security implications.

The implementation correctly centralizes credential control for fetch requests. The function properly returns "include" to send credentials cross-origin when the flag is enabled, and undefined to use the default "same-origin" behavior when disabled.

Consider enhancing the JSDoc comment to mention security considerations:
 /**
  * Returns the credentials option for fetch requests based on the ENABLE_FETCH_CREDENTIALS flag.
  * When enabled, returns "include" to send cookies and credentials with cross-origin requests.
  * When disabled, returns undefined (default fetch behavior).
+ * 
+ * @security When enabled, cookies and auth credentials are sent to cross-origin endpoints.
+ * Ensure backend CORS configuration properly restricts allowed origins.
  *
  * @returns {RequestCredentials | undefined} The credentials option for fetch requests
  */

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b86351f and 125d797.

📒 Files selected for processing (10)

src/frontend/src/controllers/API/api.tsx (3 hunks)
src/frontend/src/controllers/API/queries/file-management/use-duplicate-file.ts (2 hunks)
src/frontend/src/controllers/API/queries/file-management/use-get-download-file.ts (2 hunks)
src/frontend/src/controllers/API/queries/file-management/use-get-download-files.ts (3 hunks)
src/frontend/src/controllers/API/queries/files/use-download-files.ts (2 hunks)
src/frontend/src/controllers/API/queries/flows/use-get-download-flows.ts (2 hunks)
src/frontend/src/customization/feature-flags.ts (1 hunks)
src/frontend/src/customization/utils/custom-poll-build-events.ts (2 hunks)
src/frontend/src/customization/utils/get-fetch-credentials.ts (1 hunks)
src/frontend/src/utils/buildUtils.ts (3 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

src/frontend/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)

src/frontend/src/**/*.{ts,tsx}: Use React 18 with TypeScript for frontend development
Use Zustand for state management

Files:

src/frontend/src/customization/utils/custom-poll-build-events.ts
src/frontend/src/customization/feature-flags.ts
src/frontend/src/customization/utils/get-fetch-credentials.ts
src/frontend/src/controllers/API/queries/files/use-download-files.ts
src/frontend/src/controllers/API/api.tsx
src/frontend/src/controllers/API/queries/flows/use-get-download-flows.ts
src/frontend/src/controllers/API/queries/file-management/use-duplicate-file.ts
src/frontend/src/utils/buildUtils.ts
src/frontend/src/controllers/API/queries/file-management/use-get-download-file.ts
src/frontend/src/controllers/API/queries/file-management/use-get-download-files.ts

src/frontend/src/**/*.{tsx,jsx,css,scss}

📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)

Use Tailwind CSS for styling

Files:

src/frontend/src/controllers/API/api.tsx

src/frontend/src/**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)

src/frontend/src/**/*.{tsx,jsx}: Implement dark mode support using the useDarkMode hook and dark store
Use Lucide React for icon components in the application

Files:

src/frontend/src/controllers/API/api.tsx

src/frontend/src/utils/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)

Use named exports for utility functions in the utils/ directory

Files:

src/frontend/src/utils/buildUtils.ts

🧠 Learnings (5)