docs(solid-router): authenticated-routes example #5825
Conversation
WalkthroughAdds a complete authenticated routes example for Solid.js using TanStack Router, featuring authentication context, protected routes with beforeLoad guards, data loading, login/redirect flows, and Tailwind CSS styling. Changes
Sequence DiagramsequenceDiagram
participant User
participant App
participant Router
participant Auth
participant Storage as localStorage
rect rgb(200, 220, 240)
Note over User,Storage: Initial App Load
User->>App: Open /dashboard
App->>Auth: useAuth() → isAuthenticated?
Auth->>Storage: Check 'tanstack.auth.user'
Storage-->>Auth: null (not logged in)
Auth-->>App: false
end
rect rgb(220, 200, 240)
Note over User,Router: beforeLoad Guard
App->>Router: beforeLoad redirect check
Router->>Router: isAuthenticated === false
Router->>User: Redirect to /login?redirect=/dashboard
end
rect rgb(200, 240, 220)
Note over User,Storage: Login Flow
User->>App: Submit login form (username)
App->>Auth: login('alice')
Auth->>Auth: Simulate delay
Auth->>Storage: setStoredUser('alice')
Storage-->>Auth: ✓
Auth-->>App: Promise resolved
App->>Router: Invalidate & navigate to /dashboard
end
rect rgb(240, 220, 200)
Note over User,Storage: Protected Route Access
Router->>Auth: beforeLoad checks isAuthenticated
Auth->>Storage: getStoredUser()
Storage-->>Auth: 'alice'
Auth-->>Router: true ✓
Router->>App: Render /_auth/dashboard
App-->>User: Show "Welcome, alice!"
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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 |
|
View your CI Pipeline Execution ↗ for commit 5feb7e2
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/nitro-v2-vite-plugin
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-router-ssr-query
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-static-server-functions
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (4)
examples/solid/authenticated-routes/README.md (1)
1-1: Consider a more descriptive heading.The heading "# Example" is generic. Updating it to "# Authenticated Routes Example" or similar would make the purpose of the example immediately clear to readers, aligning with the directory name and example's functionality.
-# Example +# Authenticated Routes Exampleexamples/solid/authenticated-routes/src/posts.tsx (1)
19-19: Consider safer initialization pattern.The non-null assertion (
null!) could lead to runtime errors ifinvoicesis accessed before initialization completes. While the current usage withensureInvoices()appears safe, this is fragile.Consider initializing as:
-let invoices: Array<Invoice> = null! +let invoices: Array<Invoice> | undefined = undefinedThen add a guard in
fetchInvoicesandfetchInvoiceByIdif needed.examples/solid/authenticated-routes/index.html (1)
1-12: Consider updating the title to be more descriptive.The generic "Vite App" title could be more descriptive, e.g., "TanStack Router - Authenticated Routes Example".
Apply this diff:
- <title>Vite App</title> + <title>TanStack Router - Authenticated Routes Example</title>examples/solid/authenticated-routes/src/routes/login.tsx (1)
13-14: Remove unnecessary const assertion.The
as constassertion on a string literal is redundant since TypeScript already infers the exact literal type'/dashboard'. The eslint-disable comment confirms this is unnecessary.-// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion -const fallback = '/dashboard' as const +const fallback = '/dashboard'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (22)
examples/solid/authenticated-routes/.gitignore(1 hunks)examples/solid/authenticated-routes/.vscode/settings.json(1 hunks)examples/solid/authenticated-routes/README.md(1 hunks)examples/solid/authenticated-routes/index.html(1 hunks)examples/solid/authenticated-routes/package.json(1 hunks)examples/solid/authenticated-routes/postcss.config.mjs(1 hunks)examples/solid/authenticated-routes/src/auth.tsx(1 hunks)examples/solid/authenticated-routes/src/main.tsx(1 hunks)examples/solid/authenticated-routes/src/posts.tsx(1 hunks)examples/solid/authenticated-routes/src/routeTree.gen.ts(1 hunks)examples/solid/authenticated-routes/src/routes/__root.tsx(1 hunks)examples/solid/authenticated-routes/src/routes/_auth.dashboard.tsx(1 hunks)examples/solid/authenticated-routes/src/routes/_auth.invoices.$invoiceId.tsx(1 hunks)examples/solid/authenticated-routes/src/routes/_auth.invoices.index.tsx(1 hunks)examples/solid/authenticated-routes/src/routes/_auth.invoices.tsx(1 hunks)examples/solid/authenticated-routes/src/routes/_auth.tsx(1 hunks)examples/solid/authenticated-routes/src/routes/index.tsx(1 hunks)examples/solid/authenticated-routes/src/routes/login.tsx(1 hunks)examples/solid/authenticated-routes/src/styles.css(1 hunks)examples/solid/authenticated-routes/src/utils.ts(1 hunks)examples/solid/authenticated-routes/tsconfig.json(1 hunks)examples/solid/authenticated-routes/vite.config.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/solid/authenticated-routes/README.mdexamples/solid/authenticated-routes/src/routes/_auth.dashboard.tsxexamples/solid/authenticated-routes/src/routes/index.tsxexamples/solid/authenticated-routes/index.htmlexamples/solid/authenticated-routes/src/routes/_auth.invoices.index.tsxexamples/solid/authenticated-routes/src/routes/__root.tsxexamples/solid/authenticated-routes/src/utils.tsexamples/solid/authenticated-routes/src/styles.cssexamples/solid/authenticated-routes/src/routes/login.tsxexamples/solid/authenticated-routes/postcss.config.mjsexamples/solid/authenticated-routes/src/posts.tsxexamples/solid/authenticated-routes/src/routes/_auth.invoices.$invoiceId.tsxexamples/solid/authenticated-routes/src/routes/_auth.tsxexamples/solid/authenticated-routes/src/main.tsxexamples/solid/authenticated-routes/src/routeTree.gen.tsexamples/solid/authenticated-routes/src/routes/_auth.invoices.tsxexamples/solid/authenticated-routes/tsconfig.jsonexamples/solid/authenticated-routes/src/auth.tsxexamples/solid/authenticated-routes/package.jsonexamples/solid/authenticated-routes/vite.config.js
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/authenticated-routes/src/routes/_auth.dashboard.tsxexamples/solid/authenticated-routes/src/routes/index.tsxexamples/solid/authenticated-routes/src/routes/_auth.invoices.index.tsxexamples/solid/authenticated-routes/src/routes/__root.tsxexamples/solid/authenticated-routes/src/utils.tsexamples/solid/authenticated-routes/src/routes/login.tsxexamples/solid/authenticated-routes/src/posts.tsxexamples/solid/authenticated-routes/src/routes/_auth.invoices.$invoiceId.tsxexamples/solid/authenticated-routes/src/routes/_auth.tsxexamples/solid/authenticated-routes/src/main.tsxexamples/solid/authenticated-routes/src/routeTree.gen.tsexamples/solid/authenticated-routes/src/routes/_auth.invoices.tsxexamples/solid/authenticated-routes/src/auth.tsx
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/solid/authenticated-routes/src/routes/_auth.dashboard.tsxexamples/solid/authenticated-routes/src/routes/index.tsxexamples/solid/authenticated-routes/src/routes/_auth.invoices.index.tsxexamples/solid/authenticated-routes/src/routes/__root.tsxexamples/solid/authenticated-routes/src/routes/login.tsxexamples/solid/authenticated-routes/src/routes/_auth.invoices.$invoiceId.tsxexamples/solid/authenticated-routes/src/routes/_auth.tsxexamples/solid/authenticated-routes/src/routes/_auth.invoices.tsx
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/solid/authenticated-routes/package.json
🧠 Learnings (10)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Learnt from: FatahChan
Repo: TanStack/router PR: 5475
File: e2e/react-start/basic-prerendering/src/routes/redirect/$target/via-beforeLoad.tsx:8-0
Timestamp: 2025-10-14T18:59:33.990Z
Learning: In TanStack Router e2e test files, when a route parameter is validated at the route level (e.g., using zod in validateSearch or param validation), switch statements on that parameter do not require a default case, as the validation ensures only expected values will reach the switch.
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
examples/solid/authenticated-routes/.vscode/settings.jsonexamples/solid/authenticated-routes/.gitignoreexamples/solid/authenticated-routes/src/routes/index.tsxexamples/solid/authenticated-routes/src/routes/_auth.invoices.index.tsxexamples/solid/authenticated-routes/src/routeTree.gen.tsexamples/solid/authenticated-routes/src/routes/_auth.invoices.tsxexamples/solid/authenticated-routes/tsconfig.json
📚 Learning: 2025-10-08T08:11:47.088Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
Applied to files:
examples/solid/authenticated-routes/.vscode/settings.jsonexamples/solid/authenticated-routes/.gitignoreexamples/solid/authenticated-routes/src/routes/index.tsxexamples/solid/authenticated-routes/src/routeTree.gen.tsexamples/solid/authenticated-routes/src/routes/_auth.invoices.tsxexamples/solid/authenticated-routes/tsconfig.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Applied to files:
examples/solid/authenticated-routes/src/routes/_auth.dashboard.tsxexamples/solid/authenticated-routes/.gitignoreexamples/solid/authenticated-routes/src/routes/index.tsxexamples/solid/authenticated-routes/src/routes/_auth.invoices.index.tsxexamples/solid/authenticated-routes/src/routes/__root.tsxexamples/solid/authenticated-routes/src/routes/login.tsxexamples/solid/authenticated-routes/src/routes/_auth.tsxexamples/solid/authenticated-routes/src/main.tsxexamples/solid/authenticated-routes/src/routeTree.gen.tsexamples/solid/authenticated-routes/src/routes/_auth.invoices.tsxexamples/solid/authenticated-routes/tsconfig.jsonexamples/solid/authenticated-routes/package.jsonexamples/solid/authenticated-routes/vite.config.js
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/src/routes/** : Place file-based routes under src/routes/ directories
Applied to files:
examples/solid/authenticated-routes/src/routes/index.tsxexamples/solid/authenticated-routes/src/routeTree.gen.ts
📚 Learning: 2025-10-01T18:30:26.591Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 5330
File: packages/router-core/src/router.ts:2231-2245
Timestamp: 2025-10-01T18:30:26.591Z
Learning: In `packages/router-core/src/router.ts`, the `resolveRedirect` method intentionally strips the router's origin from redirect URLs when they match (e.g., `https://foo.com/bar` → `/bar` for same-origin redirects) while preserving the full URL for cross-origin redirects. This logic should not be removed or simplified to use `location.publicHref` directly.
Applied to files:
examples/solid/authenticated-routes/src/routes/_auth.tsx
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{router-cli,router-generator,router-plugin,virtual-file-routes}/** : Keep CLI, generators, bundler plugins, and virtual file routing utilities in their dedicated tooling package directories
Applied to files:
examples/solid/authenticated-routes/src/routeTree.gen.tsexamples/solid/authenticated-routes/package.json
📚 Learning: 2025-11-02T16:16:24.898Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.
Applied to files:
examples/solid/authenticated-routes/src/routeTree.gen.tsexamples/solid/authenticated-routes/tsconfig.jsonexamples/solid/authenticated-routes/package.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/router-core/** : Keep framework-agnostic core router logic in packages/router-core/
Applied to files:
examples/solid/authenticated-routes/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript in strict mode with extensive type safety across the codebase
Applied to files:
examples/solid/authenticated-routes/tsconfig.json
🧬 Code graph analysis (10)
examples/solid/authenticated-routes/src/routes/_auth.dashboard.tsx (2)
examples/solid/authenticated-routes/src/routes/_auth.tsx (1)
Route(11-23)examples/solid/authenticated-routes/src/auth.tsx (1)
useAuth(57-63)
examples/solid/authenticated-routes/src/routes/index.tsx (6)
examples/solid/authenticated-routes/src/routes/_auth.invoices.$invoiceId.tsx (1)
Route(5-12)examples/solid/authenticated-routes/src/routes/_auth.invoices.tsx (1)
Route(5-10)examples/solid/authenticated-routes/src/routes/_auth.tsx (1)
Route(11-23)examples/solid/authenticated-routes/src/routes/login.tsx (1)
Route(16-26)examples/solid/authenticated-routes/src/routes/__root.tsx (1)
Route(10-17)examples/solid/authenticated-routes/src/routes/_auth.dashboard.tsx (1)
Route(5-7)
examples/solid/authenticated-routes/src/routes/_auth.invoices.index.tsx (3)
examples/solid/authenticated-routes/src/routes/_auth.invoices.$invoiceId.tsx (1)
Route(5-12)examples/solid/authenticated-routes/src/routes/_auth.invoices.tsx (1)
Route(5-10)examples/solid/authenticated-routes/src/routes/_auth.tsx (1)
Route(11-23)
examples/solid/authenticated-routes/src/routes/__root.tsx (1)
examples/solid/authenticated-routes/src/auth.tsx (1)
AuthContext(5-10)
examples/solid/authenticated-routes/src/routes/login.tsx (3)
examples/solid/authenticated-routes/src/routes/_auth.tsx (1)
Route(11-23)examples/solid/authenticated-routes/src/auth.tsx (1)
useAuth(57-63)examples/solid/authenticated-routes/src/utils.ts (1)
sleep(1-3)
examples/solid/authenticated-routes/src/routes/_auth.invoices.$invoiceId.tsx (4)
examples/solid/authenticated-routes/src/routes/_auth.invoices.tsx (1)
Route(5-10)examples/solid/authenticated-routes/src/routes/_auth.tsx (1)
Route(11-23)examples/solid/authenticated-routes/src/routes/_auth.invoices.index.tsx (1)
Route(3-5)examples/solid/authenticated-routes/src/posts.tsx (1)
fetchInvoiceById(40-50)
examples/solid/authenticated-routes/src/routes/_auth.tsx (2)
examples/solid/authenticated-routes/src/routes/login.tsx (1)
Route(16-26)examples/solid/authenticated-routes/src/auth.tsx (1)
useAuth(57-63)
examples/solid/authenticated-routes/src/main.tsx (1)
examples/solid/authenticated-routes/src/auth.tsx (2)
useAuth(57-63)AuthProvider(28-55)
examples/solid/authenticated-routes/src/routes/_auth.invoices.tsx (4)
examples/solid/authenticated-routes/src/routes/_auth.invoices.$invoiceId.tsx (1)
Route(5-12)examples/solid/authenticated-routes/src/routes/_auth.tsx (1)
Route(11-23)examples/solid/authenticated-routes/src/routes/_auth.invoices.index.tsx (1)
Route(3-5)examples/solid/authenticated-routes/src/posts.tsx (1)
fetchInvoices(36-38)
examples/solid/authenticated-routes/src/auth.tsx (1)
examples/solid/authenticated-routes/src/utils.ts (1)
sleep(1-3)
🔇 Additional comments (21)
examples/solid/authenticated-routes/tsconfig.json (1)
1-12: TypeScript configuration is properly set up for Solid.js.The configuration correctly enables strict mode, preserves JSX for Solid's compiler, and targets modern JavaScript with appropriate library definitions. All settings align with TanStack Router's TypeScript standards and Solid.js requirements.
examples/solid/authenticated-routes/.gitignore (1)
1-5: LGTM! Standard and appropriate .gitignore entries.The file includes all necessary exclusions for a Solid.js + Vite project: dependencies, build outputs, OS-specific files, and local config. The ordering is logical and the patterns are correct.
examples/solid/authenticated-routes/vite.config.js (1)
1-14: LGTM! Clean Vite configuration for Solid.js with TanStack Router.The configuration is well-structured:
- Plugin order is correct (TanStack Router plugin before Solid plugin ensures route files are transformed first)
autoCodeSplitting: trueis a good default for examples, demonstrating best practices- Minimal and focused, appropriate for an example project
examples/solid/authenticated-routes/.vscode/settings.json (1)
1-11: LGTM!The VSCode settings appropriately handle the autogenerated
routeTree.gen.tsfile by excluding it from watchers/search and marking it as readonly to prevent accidental modifications.examples/solid/authenticated-routes/src/utils.ts (1)
1-3: LGTM!The
sleeputility function is correctly implemented for introducing asynchronous delays.examples/solid/authenticated-routes/postcss.config.mjs (1)
1-5: LGTM!Standard PostCSS configuration for Tailwind CSS v4 integration.
examples/solid/authenticated-routes/src/posts.tsx (2)
23-34: LGTM!The lazy initialization pattern with shared promise prevents duplicate fetches and handles concurrent access correctly.
36-50: LGTM!The exported functions correctly apply the loader delay and handle the invoice not found case with an appropriate error.
examples/solid/authenticated-routes/src/styles.css (1)
1-21: LGTM!The Tailwind CSS v4 syntax is correctly used with the new
@import 'tailwindcss'directive,@layer,@apply, and standard utility classes.examples/solid/authenticated-routes/src/routes/_auth.invoices.index.tsx (1)
1-5: LGTM!The index route correctly provides a placeholder message when no invoice is selected. The route definition follows TanStack Router conventions and appropriately relies on the parent route's loader for data.
examples/solid/authenticated-routes/src/routes/_auth.invoices.tsx (2)
5-10: LGTM!The route definition correctly uses the loader pattern to fetch invoices asynchronously and the structure follows TanStack Router conventions.
12-42: LGTM!The component correctly accesses loader data via signal accessor, implements a responsive layout using Tailwind CSS v4, and properly sets up nested routing with the Outlet. The invoice list rendering and link navigation are well-structured.
examples/solid/authenticated-routes/src/auth.tsx (4)
5-10: LGTM!The AuthContext interface is well-defined with appropriate method signatures for authentication operations.
12-14: LGTM!The context initialization with null default is appropriate given the useAuth hook enforces usage within the provider.
16-26: LGTM!The storage helper functions correctly handle reading and writing user data to localStorage, including proper cleanup when user is null.
57-63: LGTM!The useAuth hook correctly enforces usage within the AuthProvider with a clear error message.
examples/solid/authenticated-routes/src/routes/login.tsx (2)
16-26: LGTM!The route definition correctly validates the search params with Zod, implements a beforeLoad guard to redirect authenticated users, and follows TanStack Router conventions.
28-97: LGTM!The login component correctly handles form submission, authentication flow, and navigation. The acknowledged
sleep(1)hack on line 52 is acceptable for an example application demonstrating authentication patterns.examples/solid/authenticated-routes/src/routes/_auth.tsx (2)
11-23: LGTM!The beforeLoad guard correctly implements authentication checking and redirects unauthenticated users to the login page while preserving the intended destination.
25-71: LGTM!The AuthLayout component correctly implements the logout flow with user confirmation and proper promise chaining. The navigation structure and Outlet placement are appropriate for the authenticated route layout.
examples/solid/authenticated-routes/src/routeTree.gen.ts (1)
1-195: Skipping review of generated file.This file is autogenerated by TanStack Router and should not be manually modified or reviewed. Based on learnings.
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", | ||
| "@tanstack/router-plugin": "^1.135.2", |
There was a problem hiding this comment.
Use workspace:* protocol for internal TanStack dependencies.
Internal monorepo dependencies should use the workspace:* protocol instead of version ranges to ensure proper monorepo dependency resolution.
As per coding guidelines.
Apply this diff:
- "@tanstack/solid-router": "^1.135.2",
- "@tanstack/solid-router-devtools": "^1.135.2",
- "@tanstack/router-plugin": "^1.135.2",
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/solid-router-devtools": "workspace:*",
+ "@tanstack/router-plugin": "workspace:*",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "@tanstack/solid-router": "^1.135.2", | |
| "@tanstack/solid-router-devtools": "^1.135.2", | |
| "@tanstack/router-plugin": "^1.135.2", | |
| "@tanstack/solid-router": "workspace:*", | |
| "@tanstack/solid-router-devtools": "workspace:*", | |
| "@tanstack/router-plugin": "workspace:*", |
🤖 Prompt for AI Agents
In examples/solid/authenticated-routes/package.json around lines 13 to 15 the
internal TanStack dependencies use version ranges; replace the version ranges
for "@tanstack/solid-router", "@tanstack/solid-router-devtools", and
"@tanstack/router-plugin" with the workspace:* protocol so they read as
workspace:* to ensure monorepo dependency resolution per guidelines.
| Solid.createEffect(() => { | ||
| setUser(getStoredUser()) | ||
| }) |
There was a problem hiding this comment.
Remove or properly implement the createEffect for storage synchronization.
This effect runs on every render cycle and redundantly reads from localStorage without any dependencies. The initial user state is already correctly initialized from storage on line 29.
If the intent is to synchronize authentication state across browser tabs, implement a proper storage event listener instead:
- Solid.createEffect(() => {
- setUser(getStoredUser())
- })
+ Solid.onMount(() => {
+ const handleStorageChange = (e: StorageEvent) => {
+ if (e.key === key) {
+ setUser(e.newValue)
+ }
+ }
+ window.addEventListener('storage', handleStorageChange)
+ Solid.onCleanup(() => window.removeEventListener('storage', handleStorageChange))
+ })Alternatively, if cross-tab sync is not needed, simply remove the effect.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In examples/solid/authenticated-routes/src/auth.tsx around lines 46 to 48, the
Solid.createEffect currently reads localStorage on every render; remove this
effect or replace it with a single-run mount handler that either (a) removes the
Solid.createEffect entirely since initial state is already set from storage on
line 29, or (b) implements proper cross-tab sync by adding a
window.addEventListener('storage', ...) on mount that checks the auth key, calls
setUser(getStoredUser()) when that key changes, and removes the listener on
cleanup so it only runs in response to storage events rather than every render.
| async function loaderDelayFn<T>(fn: (...args: Array<any>) => Promise<T> | T) { | ||
| const delay = Number(sessionStorage.getItem('loaderDelay') ?? 0) | ||
| const delayPromise = new Promise((r) => setTimeout(r, delay)) | ||
|
|
||
| await delayPromise | ||
| const res = await fn() | ||
|
|
||
| return res | ||
| } |
There was a problem hiding this comment.
Fix the loaderDelayFn parameter signature.
The function signature declares fn: (...args: Array<any>) suggesting it accepts arguments, but Line 8 calls fn() without passing any arguments. This is misleading and could cause issues if a function expecting parameters is passed in.
Apply this diff to fix the signature:
-async function loaderDelayFn<T>(fn: (...args: Array<any>) => Promise<T> | T) {
+async function loaderDelayFn<T>(fn: () => Promise<T> | T) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| async function loaderDelayFn<T>(fn: (...args: Array<any>) => Promise<T> | T) { | |
| const delay = Number(sessionStorage.getItem('loaderDelay') ?? 0) | |
| const delayPromise = new Promise((r) => setTimeout(r, delay)) | |
| await delayPromise | |
| const res = await fn() | |
| return res | |
| } | |
| async function loaderDelayFn<T>(fn: () => Promise<T> | T) { | |
| const delay = Number(sessionStorage.getItem('loaderDelay') ?? 0) | |
| const delayPromise = new Promise((r) => setTimeout(r, delay)) | |
| await delayPromise | |
| const res = await fn() | |
| return res | |
| } |
🤖 Prompt for AI Agents
In examples/solid/authenticated-routes/src/posts.tsx around lines 3 to 11, the
loaderDelayFn parameter is typed as fn: (...args: Array<any>) which implies it
expects arguments but the implementation always calls fn() with no args; change
the parameter signature to fn: () => Promise<T> | T so it correctly represents a
no-argument callback (update the type only, leaving the call site as fn()).
| <Link to="/dashboard" class="text-blue-500 hover:opacity-75"> | ||
| Go to the auth-only dashboard page. | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link to="/invoices" class="text-blue-500 hover:opacity-75"> | ||
| Go to the auth-only invoices page. |
There was a problem hiding this comment.
Fix dashboard/invoices link targets.
These links point to /dashboard and /invoices, but the only registered routes are /_auth/dashboard and /_auth/invoices. Clicking them currently lands on an undefined route, so users never reach the protected pages or their guards. Update the to values to the actual paths.
- <Link to="/dashboard" class="text-blue-500 hover:opacity-75">
+ <Link to="/_auth/dashboard" class="text-blue-500 hover:opacity-75">
Go to the auth-only dashboard page.
</Link>
</li>
<li>
- <Link to="/invoices" class="text-blue-500 hover:opacity-75">
+ <Link to="/_auth/invoices" class="text-blue-500 hover:opacity-75">
Go to the auth-only invoices page.
</Link>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Link to="/dashboard" class="text-blue-500 hover:opacity-75"> | |
| Go to the auth-only dashboard page. | |
| </Link> | |
| </li> | |
| <li> | |
| <Link to="/invoices" class="text-blue-500 hover:opacity-75"> | |
| Go to the auth-only invoices page. | |
| <Link to="/_auth/dashboard" class="text-blue-500 hover:opacity-75"> | |
| Go to the auth-only dashboard page. | |
| </Link> | |
| </li> | |
| <li> | |
| <Link to="/_auth/invoices" class="text-blue-500 hover:opacity-75"> | |
| Go to the auth-only invoices page. |
🤖 Prompt for AI Agents
In examples/solid/authenticated-routes/src/routes/index.tsx around lines 33 to
39, the Link components point to /dashboard and /invoices but the app registers
routes at /_auth/dashboard and /_auth/invoices; update the Link `to` props to
use the actual registered paths /_auth/dashboard and /_auth/invoices so clicks
navigate to the protected pages and their guards.
birkskyum
deleted the
docs(solid-router)--authenticated-routes-example
branch
Summary by CodeRabbit
Release Notes
New Features
Documentation