fix: improve env setup and prevent malformed auth API URLs#417
Conversation
- Add frontend and backend .env.example files - Document required environment variables - Add fallback for VITE_BACKEND_URL in auth pages - Prevent malformed undefined/api/auth/... requests
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @vv-verse for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
📝 WalkthroughWalkthroughThis PR adds environment configuration templates and implements fallback handling for missing environment variables in authentication flows. Frontend and backend ChangesEnvironment Configuration and Auth URL Fallback
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (3)
backend/.env.example (1)
4-5: ⚡ Quick winAdd a security warning for SESSION_SECRET.
The placeholder value
your_session_secret_hereis weak and developers might accidentally deploy with it. Consider adding a comment warning that this must be replaced with a strong random string in production and should never be committed to version control.🔒 Suggested improvement with security warning
-# Session secret - use a strong random string -SESSION_SECRET=your_session_secret_here +# Session secret - IMPORTANT: Replace with a strong random string for production +# Generate with: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" +# NEVER commit real secrets to version control +SESSION_SECRET=your_session_secret_here🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@backend/.env.example` around lines 4 - 5, Add a clear security warning above the SESSION_SECRET entry: explain that the placeholder value "your_session_secret_here" is insecure, must be replaced with a strong random string in production, must never be committed to version control, and suggest using env management or a secrets manager; update the SESSION_SECRET line in .env.example to keep it as a placeholder but add the comment referencing SESSION_SECRET so developers are warned.src/pages/Login/Login.tsx (1)
7-7: ⚡ Quick winConsider adding validation for missing VITE_BACKEND_URL.
The fallback to empty string prevents malformed URLs (as intended), but requests will still fail when the env var is not configured—just with a different error (404 instead of malformed URL). For better developer experience, consider adding early validation that warns when
VITE_BACKEND_URLis missing.💡 Optional enhancement: Early validation
-const backendUrl = import.meta.env.VITE_BACKEND_URL || ''; +const backendUrl = import.meta.env.VITE_BACKEND_URL || ''; + +if (!import.meta.env.VITE_BACKEND_URL) { + console.warn('VITE_BACKEND_URL is not configured. Authentication requests will fail.'); +}Alternatively, you could show a user-facing error message in the UI when the env var is missing, rather than letting the axios request fail with a cryptic network error.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Login/Login.tsx` at line 7, The code currently falls back to an empty string for import.meta.env.VITE_BACKEND_URL (const backendUrl = import.meta.env.VITE_BACKEND_URL || ''), which hides a missing env var and leads to confusing runtime failures; add explicit validation in the Login component initialization (or a small helper run during app startup) to detect when import.meta.env.VITE_BACKEND_URL is undefined/empty, log a clear developer-facing error (e.g., processLogger.error or console.error) and surface a user-facing message or disable login UI until it is fixed; ensure the check references the existing backendUrl constant (or the raw import.meta.env.VITE_BACKEND_URL) and short-circuits any axios/fetch calls when invalid so requests are not attempted with a blank URL.src/pages/Signup/Signup.tsx (1)
9-9: ⚡ Quick winConsider extracting backend URL to a shared constant.
The
backendUrlinitialization pattern is duplicated betweenLogin.tsx(line 7) andSignup.tsx(line 9). Consider extracting this to a shared constant or configuration module to maintain consistency and reduce duplication.♻️ Suggested refactor: Extract to shared config
Create a new file
src/config/api.ts:// Fallback to empty string to prevent malformed URLs // Production deployment requires VITE_BACKEND_URL to be configured export const backendUrl = import.meta.env.VITE_BACKEND_URL || ''; if (!import.meta.env.VITE_BACKEND_URL) { console.warn('VITE_BACKEND_URL is not configured. API requests will fail.'); }Then import in both Login and Signup:
+import { backendUrl } from '../../config/api'; -const backendUrl = import.meta.env.VITE_BACKEND_URL || '';🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Signup/Signup.tsx` at line 9, Duplicate backendUrl initialization in Signup.tsx and Login.tsx should be extracted to a shared constant: create a new module that exports backendUrl (derived from import.meta.env.VITE_BACKEND_URL || '') and optionally logs a warning when the env var is missing, then replace the local const backendUrl in Signup.tsx and the one in Login.tsx with imports from that module; update any references to backendUrl in the Signup component (and Login) to use the imported symbol so both components share a single source of truth.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@backend/.env.example`:
- Around line 4-5: Add a clear security warning above the SESSION_SECRET entry:
explain that the placeholder value "your_session_secret_here" is insecure, must
be replaced with a strong random string in production, must never be committed
to version control, and suggest using env management or a secrets manager;
update the SESSION_SECRET line in .env.example to keep it as a placeholder but
add the comment referencing SESSION_SECRET so developers are warned.
In `@src/pages/Login/Login.tsx`:
- Line 7: The code currently falls back to an empty string for
import.meta.env.VITE_BACKEND_URL (const backendUrl =
import.meta.env.VITE_BACKEND_URL || ''), which hides a missing env var and leads
to confusing runtime failures; add explicit validation in the Login component
initialization (or a small helper run during app startup) to detect when
import.meta.env.VITE_BACKEND_URL is undefined/empty, log a clear
developer-facing error (e.g., processLogger.error or console.error) and surface
a user-facing message or disable login UI until it is fixed; ensure the check
references the existing backendUrl constant (or the raw
import.meta.env.VITE_BACKEND_URL) and short-circuits any axios/fetch calls when
invalid so requests are not attempted with a blank URL.
In `@src/pages/Signup/Signup.tsx`:
- Line 9: Duplicate backendUrl initialization in Signup.tsx and Login.tsx should
be extracted to a shared constant: create a new module that exports backendUrl
(derived from import.meta.env.VITE_BACKEND_URL || '') and optionally logs a
warning when the env var is missing, then replace the local const backendUrl in
Signup.tsx and the one in Login.tsx with imports from that module; update any
references to backendUrl in the Signup component (and Login) to use the imported
symbol so both components share a single source of truth.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 799ab1c4-fb54-43b0-ab50-32d66d6e85e1
📒 Files selected for processing (4)
.env.examplebackend/.env.examplesrc/pages/Login/Login.tsxsrc/pages/Signup/Signup.tsx
1 participant
Summary
This PR improves environment setup and prevents malformed auth API request URLs when
VITE_BACKEND_URLis missing.Closes #410
Problem
The deployed frontend currently generates malformed auth requests such as:
This happens when
VITE_BACKEND_URLis not configured in the deployment environment.Changes Made
.env.examplebackend/.env.exampleVITE_BACKEND_URLundefined/api/auth/...requestsREADME.mdTesting
Frontend runs successfully with
npm run devVerified
.env.examplefilesVerified auth pages no longer generate malformed URLs
No new runtime or TypeScript errors introduced
Screenshots (if applicable)
N/A
Type of Change
Bug fix
Documentation update
Note for Maintainers
The production deployment still requires configuring:
in the Netlify environment settings.
Summary by CodeRabbit
Release Notes
Chores
Bug Fixes