docs(solid-router): authenticated-routes-firebase #5826
Conversation
|
View your CI Pipeline Execution ↗ for commit 5a3680a
☁️ Nx Cloud last updated this comment at |
|
Caution Review failedThe pull request is closed. WalkthroughA new Solid.js "Authenticated Routes" example was added: documentation entry plus a full example project demonstrating Firebase-based authentication, protected routes, route guards, loaders, generated route types, and Tailwind styling. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App as App/Main
participant Auth as AuthContext
participant Firebase
participant Router as TanStack Router
participant Route as Protected Route
User->>App: Open app
App->>Auth: Mount AuthContextProvider
Auth->>Firebase: init & subscribe onAuthStateChanged
Firebase-->>Auth: current user (or null)
Auth-->>App: isInitialLoading -> false
rect rgb(240,220,240)
Note over User,Router: Unauthenticated navigation
User->>Router: Navigate to /_auth/invoices
Router->>Route: beforeLoad guard
Route->>Auth: isAuthenticated()
Auth-->>Route: false
Route->>Router: redirect to /login?redirectTo=original
Router-->>User: Render /login
end
rect rgb(220,240,220)
Note over User,Firebase: Login flow
User->>App: Click GitHub sign-in
App->>Auth: login('github')
Auth->>Firebase: signInWithPopup(GithubProvider)
Firebase-->>Auth: authenticated user
Auth-->>Router: trigger refresh / invalidate
Router-->>User: navigate to original target
end
rect rgb(220,235,255)
Note over User,Router: Authenticated navigation
User->>Router: Navigate to /_auth/invoices
Router->>Route: beforeLoad guard
Route->>Auth: isAuthenticated()
Auth-->>Route: true
Route->>Route: loader -> fetchInvoices()
Route-->>Router: render InvoicesRoute with data
Router-->>User: Show invoices UI
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–25 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
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 |
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: 8
🧹 Nitpick comments (8)
examples/solid/authenticated-routes-firebase/src/utils.ts (1)
1-3: Consider adding an explicit return type.The function implementation is correct. For improved TypeScript documentation and clarity, consider adding an explicit return type annotation.
Apply this diff to add the explicit return type:
-export async function sleep(ms: number) { +export async function sleep(ms: number): Promise<void> { return new Promise((resolve) => setTimeout(resolve, ms)) }examples/solid/authenticated-routes-firebase/index.html (1)
6-6: Consider a more descriptive title.The generic title "Vite App" could be more descriptive to reflect that this is an authenticated routes example with Firebase.
Apply this diff to use a more descriptive title:
- <title>Vite App</title> + <title>Authenticated Routes - Firebase Example</title>examples/solid/authenticated-routes-firebase/src/routes/_auth.tsx (1)
4-8: Remove debug console.log or use proper logging.Lines 6, 14, and 22 contain console.log statements that should either be removed for production or replaced with a proper logging utility if debug output is needed in the example.
Apply this diff to remove the debug statements:
beforeLoad: ({ context }) => { - // Log for debugging - console.log('Checking context on index.tsx:', context) // Check if user is authenticated if (context.auth.isAuthenticated()) { - console.log('User authenticated, proceeding...') throw redirect({Or in _auth.tsx:
beforeLoad: ({ context, location }) => { // Check if user is authenticated if (!context.auth.isAuthenticated()) { - console.log('User not authenticated, redirecting to login...') throw redirect({ to: '/login', search: { redirect: location.href, }, }) } - console.log('User authenticated, proceeding...') },examples/solid/authenticated-routes-firebase/src/firebase/config.ts (2)
4-5: Remove or address the TODO comment.The TODO comment appears to be boilerplate from Firebase's setup template. Either remove it or add actual Firebase SDKs if needed for this example.
Apply this diff to remove the TODO:
import { getAuth } from 'firebase/auth' -// TODO: Add SDKs for Firebase products that you want to use -// https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration
7-19: Consider validating Firebase configuration at initialization.The Firebase config reads from environment variables without validation. If any required variable is missing or empty, Firebase initialization will fail at runtime with potentially unclear error messages. Consider adding validation to provide clearer developer feedback.
Example validation approach:
// Your web app's Firebase configuration const firebaseConfig = { apiKey: import.meta.env.VITE_PUBLIC_FIREBASE_API_KEY, authDomain: import.meta.env.VITE_PUBLIC_FIREBASE_AUTH_DOMAIN, projectId: import.meta.env.VITE_PUBLIC_FIREBASE_PROJECT_ID, storageBucket: import.meta.env.VITE_PUBLIC_FIREBASE_STORAGE_BUCKET, messagingSenderId: import.meta.env.VITE_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, appId: import.meta.env.VITE_PUBLIC_FIREBASE_APP_ID, } // Validate required config values const requiredKeys = ['apiKey', 'authDomain', 'projectId', 'appId'] as const for (const key of requiredKeys) { if (!firebaseConfig[key]) { throw new Error( `Missing required Firebase config: VITE_PUBLIC_FIREBASE_${key.toUpperCase()}` ) } } // Initialize Firebase const app = initializeApp(firebaseConfig) export const auth = getAuth(app)examples/solid/authenticated-routes-firebase/src/routes/index.tsx (1)
3-15: Remove debug console.log or use proper logging.The console.log statements on lines 6 and 8 should either be removed for production or replaced with a proper logging utility if debug output is needed in the example.
Apply this diff:
beforeLoad: ({ context }) => { - // Log for debugging - console.log('Checking context on index.tsx:', context) // Check if user is authenticated + // Check if user is authenticated if (context.auth.isAuthenticated()) { - console.log('User authenticated, proceeding...') throw redirect({ to: '/dashboard', }) } },examples/solid/authenticated-routes-firebase/src/routes/login.tsx (2)
37-56: Consider explicit navigation after login.Currently,
router.invalidate()is used to trigger route revalidation after login, relying on the route guards to handle redirection. While this works, consider using explicit navigation for clarity:const search = Route.useSearch() const handleSignIn = async (provider: 'github') => { console.log(`Clicked ${provider} sign in!`) try { const providers = { github: new GithubAuthProvider(), } const typedProvider = providers[provider] ?? (() => { throw new Error('Invalid provider') })() await login(typedProvider) await router.navigate({ to: search.redirect || fallback }) } catch (error) { console.error('Sign in error:', error) } }
63-66: Add explicittype="button"attribute.Instead of using a biome-ignore comment, explicitly add
type="button"to prevent the button from acting as a form submit button.Apply this diff:
- {/* biome-ignore lint/a11y/useButtonType: <explanation> */} <button + type="button" class="w-full h-12 font-medium bg-background hover:bg-secondary border-2 transition-all hover:scale-[1.02]" onClick={() => handleSignIn('github')} >
📜 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 (26)
docs/router/config.json(1 hunks)examples/solid/authenticated-routes-firebase/.env.example(1 hunks)examples/solid/authenticated-routes-firebase/.gitignore(1 hunks)examples/solid/authenticated-routes-firebase/.vscode/settings.json(1 hunks)examples/solid/authenticated-routes-firebase/README.md(1 hunks)examples/solid/authenticated-routes-firebase/index.html(1 hunks)examples/solid/authenticated-routes-firebase/package.json(1 hunks)examples/solid/authenticated-routes-firebase/postcss.config.mjs(1 hunks)examples/solid/authenticated-routes-firebase/src/auth.tsx(1 hunks)examples/solid/authenticated-routes-firebase/src/firebase/config.ts(1 hunks)examples/solid/authenticated-routes-firebase/src/main.tsx(1 hunks)examples/solid/authenticated-routes-firebase/src/posts.tsx(1 hunks)examples/solid/authenticated-routes-firebase/src/routeTree.gen.ts(1 hunks)examples/solid/authenticated-routes-firebase/src/routes/__root.tsx(1 hunks)examples/solid/authenticated-routes-firebase/src/routes/_auth.dashboard.tsx(1 hunks)examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.$invoiceId.tsx(1 hunks)examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.index.tsx(1 hunks)examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.tsx(1 hunks)examples/solid/authenticated-routes-firebase/src/routes/_auth.tsx(1 hunks)examples/solid/authenticated-routes-firebase/src/routes/index.tsx(1 hunks)examples/solid/authenticated-routes-firebase/src/routes/login.tsx(1 hunks)examples/solid/authenticated-routes-firebase/src/styles.css(1 hunks)examples/solid/authenticated-routes-firebase/src/utils.ts(1 hunks)examples/solid/authenticated-routes-firebase/src/vite.d.ts(1 hunks)examples/solid/authenticated-routes-firebase/tsconfig.json(1 hunks)examples/solid/authenticated-routes-firebase/vite.config.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/solid/authenticated-routes-firebase/postcss.config.mjsexamples/solid/authenticated-routes-firebase/src/firebase/config.tsexamples/solid/authenticated-routes-firebase/src/styles.cssexamples/solid/authenticated-routes-firebase/src/routes/index.tsxexamples/solid/authenticated-routes-firebase/src/vite.d.tsexamples/solid/authenticated-routes-firebase/src/routes/login.tsxexamples/solid/authenticated-routes-firebase/vite.config.jsexamples/solid/authenticated-routes-firebase/src/routes/_auth.tsxexamples/solid/authenticated-routes-firebase/src/auth.tsxexamples/solid/authenticated-routes-firebase/src/utils.tsexamples/solid/authenticated-routes-firebase/src/routes/_auth.dashboard.tsxexamples/solid/authenticated-routes-firebase/index.htmlexamples/solid/authenticated-routes-firebase/README.mdexamples/solid/authenticated-routes-firebase/src/routes/__root.tsxexamples/solid/authenticated-routes-firebase/src/main.tsxexamples/solid/authenticated-routes-firebase/src/posts.tsxexamples/solid/authenticated-routes-firebase/src/routeTree.gen.tsexamples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.tsxexamples/solid/authenticated-routes-firebase/package.jsonexamples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.index.tsxexamples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.$invoiceId.tsxexamples/solid/authenticated-routes-firebase/tsconfig.json
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/authenticated-routes-firebase/src/firebase/config.tsexamples/solid/authenticated-routes-firebase/src/routes/index.tsxexamples/solid/authenticated-routes-firebase/src/vite.d.tsexamples/solid/authenticated-routes-firebase/src/routes/login.tsxexamples/solid/authenticated-routes-firebase/src/routes/_auth.tsxexamples/solid/authenticated-routes-firebase/src/auth.tsxexamples/solid/authenticated-routes-firebase/src/utils.tsexamples/solid/authenticated-routes-firebase/src/routes/_auth.dashboard.tsxexamples/solid/authenticated-routes-firebase/src/routes/__root.tsxexamples/solid/authenticated-routes-firebase/src/main.tsxexamples/solid/authenticated-routes-firebase/src/posts.tsxexamples/solid/authenticated-routes-firebase/src/routeTree.gen.tsexamples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.tsxexamples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.index.tsxexamples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.$invoiceId.tsx
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/router/config.json
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/solid/authenticated-routes-firebase/src/routes/index.tsxexamples/solid/authenticated-routes-firebase/src/routes/login.tsxexamples/solid/authenticated-routes-firebase/src/routes/_auth.tsxexamples/solid/authenticated-routes-firebase/src/routes/_auth.dashboard.tsxexamples/solid/authenticated-routes-firebase/src/routes/__root.tsxexamples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.tsxexamples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.index.tsxexamples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.$invoiceId.tsx
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/solid/authenticated-routes-firebase/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-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:
docs/router/config.jsonexamples/solid/authenticated-routes-firebase/src/routes/index.tsxexamples/solid/authenticated-routes-firebase/src/routes/login.tsxexamples/solid/authenticated-routes-firebase/vite.config.jsexamples/solid/authenticated-routes-firebase/src/routes/_auth.tsxexamples/solid/authenticated-routes-firebase/src/routes/__root.tsxexamples/solid/authenticated-routes-firebase/src/main.tsxexamples/solid/authenticated-routes-firebase/src/routeTree.gen.tsexamples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.tsxexamples/solid/authenticated-routes-firebase/package.jsonexamples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.index.tsxexamples/solid/authenticated-routes-firebase/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 examples/{react,solid}/** : Keep example applications under examples/react/ and examples/solid/
Applied to files:
docs/router/config.json
📚 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-firebase/.gitignoreexamples/solid/authenticated-routes-firebase/.vscode/settings.jsonexamples/solid/authenticated-routes-firebase/src/routes/__root.tsxexamples/solid/authenticated-routes-firebase/src/main.tsxexamples/solid/authenticated-routes-firebase/src/routeTree.gen.ts
📚 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-firebase/.gitignoreexamples/solid/authenticated-routes-firebase/.vscode/settings.jsonexamples/solid/authenticated-routes-firebase/src/routes/__root.tsxexamples/solid/authenticated-routes-firebase/src/main.tsxexamples/solid/authenticated-routes-firebase/src/routeTree.gen.ts
📚 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-firebase/src/main.tsxexamples/solid/authenticated-routes-firebase/src/routeTree.gen.tsexamples/solid/authenticated-routes-firebase/package.jsonexamples/solid/authenticated-routes-firebase/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/router-core/** : Keep framework-agnostic core router logic in packages/router-core/
Applied to files:
examples/solid/authenticated-routes-firebase/src/main.tsxexamples/solid/authenticated-routes-firebase/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 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-firebase/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 **/src/routes/** : Place file-based routes under src/routes/ directories
Applied to files:
examples/solid/authenticated-routes-firebase/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-firebase/tsconfig.json
🧬 Code graph analysis (10)
examples/solid/authenticated-routes-firebase/src/routes/index.tsx (3)
examples/solid/authenticated-routes-firebase/src/routes/_auth.tsx (1)
Route(10-25)examples/solid/authenticated-routes-firebase/src/routes/login.tsx (1)
Route(21-31)examples/solid/authenticated-routes-firebase/src/routes/__root.tsx (1)
Route(9-16)
examples/solid/authenticated-routes-firebase/src/routes/login.tsx (4)
examples/solid/authenticated-routes-firebase/src/routes/_auth.tsx (1)
Route(10-25)examples/solid/authenticated-routes-firebase/src/routes/index.tsx (1)
Route(3-15)examples/solid/authenticated-routes-firebase/src/routes/__root.tsx (1)
Route(9-16)examples/solid/authenticated-routes-firebase/src/auth.tsx (1)
useAuth(57-63)
examples/solid/authenticated-routes-firebase/src/routes/_auth.tsx (7)
examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.$invoiceId.tsx (1)
Route(4-11)examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.tsx (1)
Route(5-10)examples/solid/authenticated-routes-firebase/src/routes/index.tsx (1)
Route(3-15)examples/solid/authenticated-routes-firebase/src/routes/login.tsx (1)
Route(21-31)examples/solid/authenticated-routes-firebase/src/routes/_auth.dashboard.tsx (1)
Route(5-7)examples/solid/authenticated-routes-firebase/src/routes/__root.tsx (1)
Route(9-16)examples/solid/authenticated-routes-firebase/src/auth.tsx (1)
useAuth(57-63)
examples/solid/authenticated-routes-firebase/src/auth.tsx (2)
examples/solid/authenticated-routes/src/auth.tsx (2)
AuthProvider(28-55)AuthContext(5-10)examples/solid/authenticated-routes-firebase/src/firebase/config.ts (1)
auth(19-19)
examples/solid/authenticated-routes-firebase/src/routes/_auth.dashboard.tsx (1)
examples/solid/authenticated-routes-firebase/src/auth.tsx (1)
useAuth(57-63)
examples/solid/authenticated-routes-firebase/src/routes/__root.tsx (4)
examples/solid/authenticated-routes-firebase/src/auth.tsx (1)
AuthContextType(8-14)examples/solid/authenticated-routes-firebase/src/routes/_auth.tsx (1)
Route(10-25)examples/solid/authenticated-routes-firebase/src/routes/index.tsx (1)
Route(3-15)examples/solid/authenticated-routes-firebase/src/routes/login.tsx (1)
Route(21-31)
examples/solid/authenticated-routes-firebase/src/main.tsx (2)
examples/solid/authenticated-routes-firebase/src/firebase/config.ts (1)
auth(19-19)examples/solid/authenticated-routes-firebase/src/auth.tsx (2)
useAuth(57-63)AuthContextProvider(18-55)
examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.tsx (5)
examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.$invoiceId.tsx (1)
Route(4-11)examples/solid/authenticated-routes-firebase/src/routes/_auth.tsx (1)
Route(10-25)examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.index.tsx (1)
Route(3-5)examples/solid/authenticated-routes-firebase/src/routes/__root.tsx (1)
Route(9-16)examples/solid/authenticated-routes-firebase/src/posts.tsx (1)
fetchInvoices(36-38)
examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.index.tsx (3)
examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.$invoiceId.tsx (1)
Route(4-11)examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.tsx (1)
Route(5-10)examples/solid/authenticated-routes-firebase/src/routes/_auth.tsx (1)
Route(10-25)
examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.$invoiceId.tsx (3)
examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.tsx (1)
Route(5-10)examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.index.tsx (1)
Route(3-5)examples/solid/authenticated-routes-firebase/src/posts.tsx (1)
fetchInvoiceById(40-50)
🪛 dotenv-linter (4.0.0)
examples/solid/authenticated-routes-firebase/.env.example
[warning] 7-7: [UnorderedKey] The VITE_PUBLIC_FIREBASE_MESSAGING_SENDER_ID key should go before the VITE_PUBLIC_FIREBASE_PROJECT_ID key
(UnorderedKey)
[warning] 8-8: [UnorderedKey] The VITE_PUBLIC_FIREBASE_APP_ID key should go before the VITE_PUBLIC_FIREBASE_AUTH_DOMAIN key
(UnorderedKey)
🪛 ESLint
examples/solid/authenticated-routes-firebase/src/routes/login.tsx
[error] 5-5: 'useRouterState' is defined but never used.
(unused-imports/no-unused-imports)
[error] 10-10: 'GoogleAuthProvider' is defined but never used.
(unused-imports/no-unused-imports)
[error] 11-11: Member 'GithubAuthProvider' of the import declaration should be sorted alphabetically.
(sort-imports)
[error] 12-12: 'OAuthProvider' is defined but never used.
(unused-imports/no-unused-imports)
[error] 15-15: 'sleep' is defined but never used.
(unused-imports/no-unused-imports)
[error] 16-16: simple-icons import should occur before import of ../auth
(import/order)
[error] 16-16: 'siApple' is defined but never used.
(unused-imports/no-unused-imports)
[error] 16-16: 'siGoogle' is defined but never used.
(unused-imports/no-unused-imports)
🔇 Additional comments (15)
examples/solid/authenticated-routes-firebase/src/styles.css (1)
19-21: LGTM!The body styling with background and text colors for both light and dark modes is well-implemented using Tailwind utilities.
examples/solid/authenticated-routes-firebase/postcss.config.mjs (1)
1-5: LGTM!Standard PostCSS configuration for Tailwind CSS. The setup is correct and follows Tailwind v4 conventions.
examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.index.tsx (1)
1-5: LGTM!The route definition is correct and serves as a proper index route placeholder for the invoices section.
examples/solid/authenticated-routes-firebase/src/vite.d.ts (1)
1-14: LGTM!The ambient type declarations correctly define all Firebase configuration environment variables with proper readonly modifiers and standard Vite naming conventions.
examples/solid/authenticated-routes-firebase/src/routes/_auth.tsx (2)
10-25: LGTM!The authentication guard correctly checks authentication status and redirects unauthenticated users to login while preserving the original location for post-login redirect.
27-40: LGTM!The logout flow properly sequences confirmation, logout, router invalidation, and navigation. The use of
.finally()ensures navigation happens regardless of invalidation outcome.examples/solid/authenticated-routes-firebase/vite.config.js (1)
1-14: LGTM!The Vite configuration correctly orders plugins (TanStack Router before Solid) and uses appropriate settings for a Solid.js application with code splitting enabled.
examples/solid/authenticated-routes-firebase/src/routes/index.tsx (1)
17-65: LGTM!The home component provides clear, informative content explaining the template structure and authentication flow. The navigation links are appropriately styled and labeled.
examples/solid/authenticated-routes-firebase/src/routes/_auth.dashboard.tsx (1)
1-18: LGTM!The dashboard route correctly consumes the authentication context and safely handles potentially missing user data with appropriate fallbacks.
examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.$invoiceId.tsx (1)
13-30: LGTM!The component correctly uses Solid.js reactive patterns with
Route.useLoaderData()and properly accesses the loader data through function calls.examples/solid/authenticated-routes-firebase/src/main.tsx (3)
10-24: LGTM!The router setup correctly initializes with a placeholder context (
auth: undefined!) that will be properly provided by theRouterProviderat line 38. The module augmentation ensures type safety throughout the application.
26-39: LGTM!The component correctly waits for initial auth state before rendering the router, preventing authentication-related UI flashes. The auth context is properly passed to the
RouterProvider.
41-51: LGTM!The application structure properly wraps the router with the authentication provider, establishing the correct context hierarchy.
examples/solid/authenticated-routes-firebase/src/routes/__root.tsx (1)
1-16: LGTM!The root route correctly defines the typed router context with
AuthContextTypeand sets up the component withOutletand devtools. This establishes the foundation for typed, authenticated routing throughout the application.examples/solid/authenticated-routes-firebase/src/auth.tsx (1)
57-63: LGTM!The
useAuthhook correctly validates that it's used within the provider context and provides proper error messaging.
| "dependencies": { | ||
| "@tailwindcss/postcss": "^4.1.15", | ||
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", | ||
| "@tanstack/router-plugin": "^1.135.2", | ||
| "firebase": "^11.4.0", | ||
| "postcss": "^8.5.1", | ||
| "solid-js": "^1.9.10", | ||
| "redaxios": "^0.5.1", | ||
| "simple-icons": "^14.9.0", | ||
| "tailwindcss": "^4.1.15", | ||
| "zod": "^3.24.2" | ||
| }, | ||
| "devDependencies": { | ||
| "vite-plugin-solid": "^2.11.10", | ||
| "typescript": "^5.7.2", | ||
| "vite": "^7.1.7" | ||
| } |
There was a problem hiding this comment.
Use workspace:* for internal TanStack packages.
Per the repo guideline for package.json files, internal @tanstack/* deps should use the workspace protocol so the example stays in lockstep with the monorepo. Leaving the caret ranges pulls from npm instead of the local packages, risking mismatched or unreleased APIs.
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.
| "dependencies": { | |
| "@tailwindcss/postcss": "^4.1.15", | |
| "@tanstack/solid-router": "^1.135.2", | |
| "@tanstack/solid-router-devtools": "^1.135.2", | |
| "@tanstack/router-plugin": "^1.135.2", | |
| "firebase": "^11.4.0", | |
| "postcss": "^8.5.1", | |
| "solid-js": "^1.9.10", | |
| "redaxios": "^0.5.1", | |
| "simple-icons": "^14.9.0", | |
| "tailwindcss": "^4.1.15", | |
| "zod": "^3.24.2" | |
| }, | |
| "devDependencies": { | |
| "vite-plugin-solid": "^2.11.10", | |
| "typescript": "^5.7.2", | |
| "vite": "^7.1.7" | |
| } | |
| "dependencies": { | |
| "@tailwindcss/postcss": "^4.1.15", | |
| "@tanstack/solid-router": "workspace:*", | |
| "@tanstack/solid-router-devtools": "workspace:*", | |
| "@tanstack/router-plugin": "workspace:*", | |
| "firebase": "^11.4.0", | |
| "postcss": "^8.5.1", | |
| "solid-js": "^1.9.10", | |
| "redaxios": "^0.5.1", | |
| "simple-icons": "^14.9.0", | |
| "tailwindcss": "^4.1.15", | |
| "zod": "^3.24.2" | |
| }, | |
| "devDependencies": { | |
| "vite-plugin-solid": "^2.11.10", | |
| "typescript": "^5.7.2", | |
| "vite": "^7.1.7" | |
| } |
🤖 Prompt for AI Agents
In examples/solid/authenticated-routes-firebase/package.json around lines 11 to
28, the internal @tanstack packages are using caret ranges which will pull from
npm instead of the monorepo; change the version specifiers for
"@tanstack/solid-router", "@tanstack/solid-router-devtools", and
"@tanstack/router-plugin" to use the workspace protocol (e.g. "workspace:*") so
the example resolves to the local packages and stays in lockstep with the repo;
ensure any other @tanstack/* entries in this file also use "workspace:*".
| ````VITE_FIREBASE_API_KEY= | ||
| VITE_FIREBASE_AUTH_DOMAIN= | ||
| VITE_FIREBASE_PROJECT_ID= | ||
| VITE_FIREBASE_STORAGE_BUCKET= | ||
| VITE_FIREBASE_MESSAGING_SENDER_ID= | ||
| VITE_FIREBASE_APP_ID=``` |
There was a problem hiding this comment.
Fix the environment variable names in the README.
.env.example (and the code that consumes it) expects the VITE_PUBLIC_FIREBASE_* variables, but this snippet directs readers to configure VITE_FIREBASE_*. Following the current instructions leaves the actual env vars unset at runtime, so auth never initializes. Please align the README with the real variable names.
Apply this diff to update the snippet:
-```VITE_FIREBASE_API_KEY=
-VITE_FIREBASE_AUTH_DOMAIN=
-VITE_FIREBASE_PROJECT_ID=
-VITE_FIREBASE_STORAGE_BUCKET=
-VITE_FIREBASE_MESSAGING_SENDER_ID=
-VITE_FIREBASE_APP_ID=```
+```VITE_PUBLIC_FIREBASE_API_KEY=
+VITE_PUBLIC_FIREBASE_AUTH_DOMAIN=
+VITE_PUBLIC_FIREBASE_PROJECT_ID=
+VITE_PUBLIC_FIREBASE_STORAGE_BUCKET=
+VITE_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
+VITE_PUBLIC_FIREBASE_APP_ID=```🤖 Prompt for AI Agents
In examples/solid/authenticated-routes-firebase/README.md around lines 27 to 32,
the README shows environment variable names prefixed with VITE_FIREBASE_* but
the project expects VITE_PUBLIC_FIREBASE_*; update the snippet to use
VITE_PUBLIC_FIREBASE_API_KEY, VITE_PUBLIC_FIREBASE_AUTH_DOMAIN,
VITE_PUBLIC_FIREBASE_PROJECT_ID, VITE_PUBLIC_FIREBASE_STORAGE_BUCKET,
VITE_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, and VITE_PUBLIC_FIREBASE_APP_ID so
they match .env.example and the code that consumes them.
| import * as Solid from 'solid-js' | ||
|
|
||
| import { onAuthStateChanged, signInWithPopup, signOut } from 'firebase/auth' | ||
| import { flushSync } from 'react-dom' |
There was a problem hiding this comment.
Remove React import from Solid.js application.
This is a Solid.js application, but it's importing flushSync from react-dom. This is incorrect and will not work as intended. In Solid.js, state updates are already synchronous and tracked, so you should remove this import and the flushSync wrapper calls.
Apply this diff:
import * as Solid from 'solid-js'
import { onAuthStateChanged, signInWithPopup, signOut } from 'firebase/auth'
-import { flushSync } from 'react-dom'
import { auth } from './firebase/config'
import type { AuthProvider, User } from 'firebase/auth'Then remove the flushSync wrappers at lines 25-28 and 42-45.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In examples/solid/authenticated-routes-firebase/src/auth.tsx around line 4, the
file incorrectly imports flushSync from 'react-dom' and uses flushSync wrappers
at lines 25-28 and 42-45; remove the import line "import { flushSync } from
'react-dom'" and delete the flushSync(...) wrapper calls so the Solid.js state
updates use native Solid mechanisms (simply perform the state updates directly
without flushSync).
| Solid.createEffect(() => { | ||
| const unsubscribe = onAuthStateChanged(auth, (user) => { | ||
| flushSync(() => { | ||
| setUser(user) | ||
| setIsInitialLoading(false) | ||
| }) | ||
| }) | ||
| return () => unsubscribe() | ||
| }) | ||
|
|
||
| const logout = async () => { | ||
| console.log('Logging out...') | ||
| await signOut(auth) | ||
| setUser(null) | ||
| setIsInitialLoading(false) | ||
| } | ||
|
|
||
| const login = async (provider: AuthProvider) => { | ||
| const result = await signInWithPopup(auth, provider) | ||
| flushSync(() => { | ||
| setUser(result.user) | ||
| setIsInitialLoading(false) | ||
| }) | ||
| } |
There was a problem hiding this comment.
Remove flushSync wrappers - not needed in Solid.js.
The flushSync calls at lines 25-28 and 42-45 are not needed in Solid.js. Solid.js state updates are already synchronous and tracked by the reactivity system. Simply call the setters directly.
Apply this diff:
Solid.createEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
- flushSync(() => {
- setUser(user)
- setIsInitialLoading(false)
- })
+ setUser(user)
+ setIsInitialLoading(false)
})
return () => unsubscribe()
})
// ...
const login = async (provider: AuthProvider) => {
const result = await signInWithPopup(auth, provider)
- flushSync(() => {
- setUser(result.user)
- setIsInitialLoading(false)
- })
+ setUser(result.user)
+ setIsInitialLoading(false)
}📝 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.
| Solid.createEffect(() => { | |
| const unsubscribe = onAuthStateChanged(auth, (user) => { | |
| flushSync(() => { | |
| setUser(user) | |
| setIsInitialLoading(false) | |
| }) | |
| }) | |
| return () => unsubscribe() | |
| }) | |
| const logout = async () => { | |
| console.log('Logging out...') | |
| await signOut(auth) | |
| setUser(null) | |
| setIsInitialLoading(false) | |
| } | |
| const login = async (provider: AuthProvider) => { | |
| const result = await signInWithPopup(auth, provider) | |
| flushSync(() => { | |
| setUser(result.user) | |
| setIsInitialLoading(false) | |
| }) | |
| } | |
| Solid.createEffect(() => { | |
| const unsubscribe = onAuthStateChanged(auth, (user) => { | |
| setUser(user) | |
| setIsInitialLoading(false) | |
| }) | |
| return () => unsubscribe() | |
| }) | |
| const logout = async () => { | |
| console.log('Logging out...') | |
| await signOut(auth) | |
| setUser(null) | |
| setIsInitialLoading(false) | |
| } | |
| const login = async (provider: AuthProvider) => { | |
| const result = await signInWithPopup(auth, provider) | |
| setUser(result.user) | |
| setIsInitialLoading(false) | |
| } |
🤖 Prompt for AI Agents
In examples/solid/authenticated-routes-firebase/src/auth.tsx around lines 23 to
46, the review calls out unnecessary use of flushSync; remove the flushSync
wrappers around the state updates in both the onAuthStateChanged callback and
the login function and call setUser and setIsInitialLoading directly (i.e.,
replace flushSync(() => { setUser(...); setIsInitialLoading(...); }) with direct
setter calls), ensuring the unsubscribe return remains unchanged.
| export const Route = createFileRoute('/_auth/invoices/$invoiceId')({ | ||
| loader: async ({ params: { invoiceId } }) => { | ||
| return { | ||
| invoice: await fetchInvoiceById(Number.parseInt(invoiceId)), |
There was a problem hiding this comment.
Add radix parameter to Number.parseInt and consider validation.
The Number.parseInt call is missing the radix parameter (should be 10). Additionally, consider validating that the parsed result is a valid number before passing it to fetchInvoiceById.
Apply this diff:
- invoice: await fetchInvoiceById(Number.parseInt(invoiceId)),
+ invoice: await fetchInvoiceById(Number.parseInt(invoiceId, 10)),📝 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.
| invoice: await fetchInvoiceById(Number.parseInt(invoiceId)), | |
| invoice: await fetchInvoiceById(Number.parseInt(invoiceId, 10)), |
🤖 Prompt for AI Agents
In
examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.$invoiceId.tsx
around line 7, the Number.parseInt call is missing the radix and lacks
validation; change to Number.parseInt(invoiceId, 10) and validate the result
before calling fetchInvoiceById (e.g., const id = Number.parseInt(invoiceId,
10); if (Number.isNaN(id)) handle the invalid id case—throw an error, return a
400/redirect, or similar—otherwise pass id to fetchInvoiceById).
| {loaderData().invoices.map((invoice) => ( | ||
| <li> | ||
| <Link | ||
| to="/invoices/$invoiceId" | ||
| params={{ invoiceId: invoice.id.toString() }} | ||
| class="text-blue-600 hover:opacity-75" | ||
| activeProps={{ class: 'font-bold underline' }} | ||
| > | ||
| <span class="tabular-nums"> | ||
| #{invoice.id.toString().padStart(2, '0')} | ||
| </span>{' '} | ||
| - {invoice.title.slice(0, 16)}... | ||
| </Link> | ||
| </li> | ||
| ))} |
There was a problem hiding this comment.
Add key to list items.
In Solid.js, when mapping over arrays to create elements, each item should have a unique key attribute for proper reconciliation and performance.
Apply this diff:
<ol class="grid gap-2">
{loaderData().invoices.map((invoice) => (
- <li>
+ <li key={invoice.id}>
<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.
| {loaderData().invoices.map((invoice) => ( | |
| <li> | |
| <Link | |
| to="/invoices/$invoiceId" | |
| params={{ invoiceId: invoice.id.toString() }} | |
| class="text-blue-600 hover:opacity-75" | |
| activeProps={{ class: 'font-bold underline' }} | |
| > | |
| <span class="tabular-nums"> | |
| #{invoice.id.toString().padStart(2, '0')} | |
| </span>{' '} | |
| - {invoice.title.slice(0, 16)}... | |
| </Link> | |
| </li> | |
| ))} | |
| {loaderData().invoices.map((invoice) => ( | |
| <li key={invoice.id}> | |
| <Link | |
| to="/invoices/$invoiceId" | |
| params={{ invoiceId: invoice.id.toString() }} | |
| class="text-blue-600 hover:opacity-75" | |
| activeProps={{ class: 'font-bold underline' }} | |
| > | |
| <span class="tabular-nums"> | |
| #{invoice.id.toString().padStart(2, '0')} | |
| </span>{' '} | |
| - {invoice.title.slice(0, 16)}... | |
| </Link> | |
| </li> | |
| ))} |
🤖 Prompt for AI Agents
In examples/solid/authenticated-routes-firebase/src/routes/_auth.invoices.tsx
around lines 20 to 34, the mapped <li> elements lack a unique key, which Solid
needs for correct list reconciliation; add a stable unique key prop to each <li>
(e.g., key={invoice.id} or key={invoice.id.toString()}) so each list item has a
unique identifier.
| import { | ||
| createFileRoute, | ||
| redirect, | ||
| useRouter, | ||
| useRouterState, | ||
| } from '@tanstack/solid-router' | ||
| import { z } from 'zod' | ||
|
|
||
| import { | ||
| GoogleAuthProvider, | ||
| GithubAuthProvider, | ||
| OAuthProvider, | ||
| } from 'firebase/auth' | ||
| import { useAuth } from '../auth' | ||
| import { sleep } from '../utils' | ||
| import { siApple, siGithub, siGoogle } from 'simple-icons' |
There was a problem hiding this comment.
Remove unused imports.
Multiple imports are not used in this file: useRouterState, GoogleAuthProvider, OAuthProvider, sleep, siApple, and siGoogle. Consider removing them to keep the code clean.
Apply this diff:
import {
createFileRoute,
redirect,
useRouter,
- useRouterState,
} from '@tanstack/solid-router'
import { z } from 'zod'
import {
- GoogleAuthProvider,
GithubAuthProvider,
- OAuthProvider,
} from 'firebase/auth'
import { useAuth } from '../auth'
-import { sleep } from '../utils'
-import { siApple, siGithub, siGoogle } from 'simple-icons'
+import { siGithub } from 'simple-icons'📝 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.
| import { | |
| createFileRoute, | |
| redirect, | |
| useRouter, | |
| useRouterState, | |
| } from '@tanstack/solid-router' | |
| import { z } from 'zod' | |
| import { | |
| GoogleAuthProvider, | |
| GithubAuthProvider, | |
| OAuthProvider, | |
| } from 'firebase/auth' | |
| import { useAuth } from '../auth' | |
| import { sleep } from '../utils' | |
| import { siApple, siGithub, siGoogle } from 'simple-icons' | |
| import { | |
| createFileRoute, | |
| redirect, | |
| useRouter, | |
| } from '@tanstack/solid-router' | |
| import { z } from 'zod' | |
| import { | |
| GithubAuthProvider, | |
| } from 'firebase/auth' | |
| import { useAuth } from '../auth' | |
| import { siGithub } from 'simple-icons' |
🧰 Tools
🪛 ESLint
[error] 5-5: 'useRouterState' is defined but never used.
(unused-imports/no-unused-imports)
[error] 10-10: 'GoogleAuthProvider' is defined but never used.
(unused-imports/no-unused-imports)
[error] 11-11: Member 'GithubAuthProvider' of the import declaration should be sorted alphabetically.
(sort-imports)
[error] 12-12: 'OAuthProvider' is defined but never used.
(unused-imports/no-unused-imports)
[error] 15-15: 'sleep' is defined but never used.
(unused-imports/no-unused-imports)
[error] 16-16: simple-icons import should occur before import of ../auth
(import/order)
[error] 16-16: 'siApple' is defined but never used.
(unused-imports/no-unused-imports)
[error] 16-16: 'siGoogle' is defined but never used.
(unused-imports/no-unused-imports)
🤖 Prompt for AI Agents
In examples/solid/authenticated-routes-firebase/src/routes/login.tsx around
lines 1 to 16, several imports are unused; remove useRouterState,
GoogleAuthProvider, OAuthProvider, sleep, siApple, and siGoogle from the top
imports and adjust the import statements so only the actually used symbols
remain (e.g., keep createFileRoute, redirect, useRouter, z, GithubAuthProvider
if used, useAuth, and simple-icons import entries that are referenced
elsewhere); update any trailing commas and formatting accordingly.
| *, | ||
| ::after, | ||
| ::before, | ||
| ::backdrop, | ||
| ::file-selector-button { | ||
| border-color: var(--color-gray-200, currentcolor); | ||
| } | ||
| } | ||
|
|
||
| html { | ||
| color-scheme: light dark; | ||
| } | ||
| * { | ||
| @apply border-gray-200 dark:border-gray-800; | ||
| } |
There was a problem hiding this comment.
Redundant border color definitions.
The border color is defined twice with different approaches:
- Lines 4-10: Base layer using an undefined CSS variable
--color-gray-200with acurrentcolorfallback - Lines 16-18: Using Tailwind's
@applywithborder-gray-200anddark:border-gray-800
The second definition (lines 16-18) will override the first, making the base layer definition redundant. Additionally, the CSS variable --color-gray-200 is referenced but never defined in this file or any visible context.
Consider removing the redundant base layer definition:
-@layer base {
- *,
- ::after,
- ::before,
- ::backdrop,
- ::file-selector-button {
- border-color: var(--color-gray-200, currentcolor);
- }
-}
-
html {
color-scheme: light dark;
}📝 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.
| *, | |
| ::after, | |
| ::before, | |
| ::backdrop, | |
| ::file-selector-button { | |
| border-color: var(--color-gray-200, currentcolor); | |
| } | |
| } | |
| html { | |
| color-scheme: light dark; | |
| } | |
| * { | |
| @apply border-gray-200 dark:border-gray-800; | |
| } | |
| html { | |
| color-scheme: light dark; | |
| } | |
| * { | |
| @apply border-gray-200 dark:border-gray-800; | |
| } |
🤖 Prompt for AI Agents
In examples/solid/authenticated-routes-firebase/src/styles.css around lines 4 to
18, the file sets border color twice — first via a base rule using an undefined
CSS variable (--color-gray-200) on lines 4–10 and then via Tailwind @apply on
lines 16–18 which overrides it; remove the redundant base-layer border-color
rule (or define the CSS variable if you intend to use it) so only the intended
border styling remains (prefer keeping the Tailwind @apply rules and delete
lines 4–10).
* auth-firebase * docs(solid-router): authenticated-routes-firebase * add authenticated-routes to example overview * solid example * format * ci: apply automated fixes * call user function --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Summary by CodeRabbit