Skip to content

fix: detect Vite port for TanStack Start and validate redirect URI port#185

Closed
nicknisi wants to merge 1 commit into
mainfrom
nicknisi/port-detection
Closed

fix: detect Vite port for TanStack Start and validate redirect URI port#185
nicknisi wants to merge 1 commit into
mainfrom
nicknisi/port-detection

Conversation

@nicknisi

@nicknisi nicknisi commented Jul 8, 2026

Copy link
Copy Markdown
Member

What

  • detectPort now parses vite.config.{ts,js,mjs} first for TanStack Start projects (via a shared parseViteConfigPortFromDir helper), falling back to the legacy app.config.ts parsing.
  • All three JS redirect validators (Next.js, React Router, TanStack Start) now compare the WORKOS_REDIRECT_URI port against the detected dev port on local hosts and report a mismatch as a validation error — "Validation passed" no longer renders over a broken install.
  • Route-mismatch remediation hints use the actual redirect-URI origin instead of a hardcoded localhost:3000.

Why

From Akshay Maniyar's AuthKit friction log: on a Lovable-style TanStack Start app (Vite dev server on 8080, port configured only in vite.config.ts), the installer wrote port 3000 into .env.local and the dashboard (redirect URI, CORS origins, homepage), then reported "Validation passed" because the validators parsed the redirect URI and discarded the port. Login redirected to a dead port with a green checkmark on the install.

Testing

  • New port-detection.spec.ts fixture cases for the vite.config shape (ts/js/mjs, legacy app.config precedence preserved).
  • New validator cases: redirect-URI port mismatch flips validation to failed for all three frameworks.
  • Pre-fix verification: the 11 new regression tests were confirmed to fail on the pre-fix code (stash check) and pass with the fix.
  • Full gate: pnpm build && pnpm test && pnpm typecheck green.

Stack 1/7 (akshay-friction-log): this is the base PR — merges directly to main. The rest of the stack follows.

detectPort now reads vite.config.{ts,js,mjs} for tanstack-start (modern
@tanstack/react-start is Vite-based), falling back to legacy Vinxi
app.config.ts, and the shared react/react-router/vanilla-js Vite loop is
extracted into a parseViteConfigPortFromDir helper.

Redirect-URI validators (Next.js, React Router, TanStack Start) now compare
the URI's effective port to the detected dev-server port for local hosts and
push an error-severity issue on mismatch, flipping validation to failed
instead of silently passing. Route-mismatch hints use the redirect URI's real
origin instead of a hardcoded localhost:3000.

Fixes the Akshay friction-log trust failure where a Lovable TanStack Start
app on port 8080 was configured against localhost:3000 yet certified as
"Validation passed".
@greptile-apps

greptile-apps Bot commented Jul 8, 2026

Copy link
Copy Markdown

Greptile Summary

This PR updates dev-port detection and redirect URI validation for JS framework installs. The main changes are:

  • TanStack Start now checks vite.config.{ts,js,mjs} before the legacy app.config port.
  • Shared Vite port detection is reused for React, React Router, Vanilla JS, and TanStack Start.
  • Next.js, React Router, and TanStack Start validators now fail local redirect URI port mismatches.
  • Route mismatch hints now use the redirect URI’s actual origin instead of localhost:3000.

Confidence Score: 5/5

Safe to merge with low risk.

The changes are narrowly scoped to port detection and validation messaging, with focused tests for the updated TanStack Start, Vite, and redirect URI mismatch behavior.

No files require special attention.

T-Rex T-Rex Logs

What T-Rex did

  • Ran the regression port-validation proof with Vitest and captured a log showing the command, working directory, Vitest output, and exit code 0.
  • Ran the TypeScript typecheck proof and captured its log showing the command, working directory, TypeScript output, and exit code 0.
  • Validated both logs confirm successful completion, indicated by exit codes 0 in each proof.

View all artifacts

T-Rex Ran code and verified through T-Rex

Important Files Changed

Filename Overview
src/doctor/checks/framework.spec.ts Adds coverage confirming TanStack Start framework detection reports the Vite-configured dev port.
src/lib/port-detection.spec.ts Adds tests for TanStack Start Vite port parsing, legacy fallback behavior, and shared Vite framework defaults.
src/lib/port-detection.ts Refactors Vite port detection into a shared helper and applies it before legacy TanStack Start config parsing.
src/lib/validation/validator.spec.ts Adds redirect URI port mismatch and origin-aware route hint tests across supported JS framework validators.
src/lib/validation/validator.ts Adds local redirect URI port validation against detected dev ports and uses the configured redirect origin in route mismatch hints.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
participant Validator as validateInstallation
participant Framework as Framework-specific redirect validator
participant Port as detectPort
participant Config as Project config files
participant Issues as Validation issues

Validator->>Framework: validate redirect URI
Framework->>Framework: parse WORKOS redirect URI
Framework->>Port: detectPort(framework, projectDir)
Port->>Config: read vite.config / app.config / package.json
Config-->>Port: configured port or default
Port-->>Framework: detected dev port
Framework->>Framework: compare local URI port to detected port
alt port mismatch
    Framework->>Issues: add error issue
else port matches or non-local host
    Framework-->>Validator: continue route validation
end
Loading
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
participant Validator as validateInstallation
participant Framework as Framework-specific redirect validator
participant Port as detectPort
participant Config as Project config files
participant Issues as Validation issues

Validator->>Framework: validate redirect URI
Framework->>Framework: parse WORKOS redirect URI
Framework->>Port: detectPort(framework, projectDir)
Port->>Config: read vite.config / app.config / package.json
Config-->>Port: configured port or default
Port-->>Framework: detected dev port
Framework->>Framework: compare local URI port to detected port
alt port mismatch
    Framework->>Issues: add error issue
else port matches or non-local host
    Framework-->>Validator: continue route validation
end
Loading

Reviews (1): Last reviewed commit: "fix: detect Vite port for TanStack Start..." | Re-trigger Greptile

@devin-ai-integration devin-ai-integration Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.

Open in Devin Review

@nicknisi

nicknisi commented Jul 8, 2026

Copy link
Copy Markdown
Member Author

Closing in favor of a single combined PR from nicknisi/akshay.

@nicknisi nicknisi closed this Jul 8, 2026
@nicknisi nicknisi deleted the nicknisi/port-detection branch July 8, 2026 01:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant