docs: start auth.js example #5962
Conversation
WalkthroughAdds two new "Basic + Auth.js" example apps (React and Solid) with Auth0-based Auth.js integration, route trees, session-aware root layouts, API auth endpoints, protected routes, UI components, build configs, and documentation entries; also renames one Solid example entry in docs/start/config.json. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App as Client App
participant Router
participant AuthAPI as /api/auth
participant Auth0 as Auth0 Provider
User->>App: GET /login
App->>AuthAPI: GET /api/auth/csrf
AuthAPI-->>App: CSRF token
App->>User: Render login form (csrf hidden)
User->>App: Submit form (signin/auth0)
App->>AuthAPI: POST /api/auth/signin/auth0 (CSRF + callbackUrl)
AuthAPI->>Auth0: Start OAuth flow
Auth0-->>AuthAPI: Callback (code)
AuthAPI->>Auth0: Exchange code → tokens + profile
AuthAPI-->>App: Set session cookies / redirect
App->>Router: beforeLoad fetch session
alt session exists
App-->>User: Render authenticated UI
else
Router-->>App: redirect to /login
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🧰 Additional context used📓 Path-based instructions (1)docs/**/*.md📄 CodeRabbit inference engine (AGENTS.md)
Files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🔇 Additional comments (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 |
|
View your CI Pipeline Execution ↗ for commit 2311465
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (12)
examples/solid/start-basic-authjs/.env.example (1)
1-11: Consider reordering Auth0 env keys to satisfy dotenv lintersThe values themselves are fine, but tools like
dotenv-linterexpect the Auth0 keys in a consistent/alphabetical order. You can avoid warnings by movingAUTH_AUTH0_ISSUERaboveAUTH_AUTH0_SECRET:-AUTH_AUTH0_ID=your-auth0-client-id -AUTH_AUTH0_SECRET=your-auth0-client-secret -AUTH_AUTH0_ISSUER=https://your-tenant.auth0.com +AUTH_AUTH0_ID=your-auth0-client-id +AUTH_AUTH0_ISSUER=https://your-tenant.auth0.com +AUTH_AUTH0_SECRET=your-auth0-client-secretexamples/react/start-basic-authjs/.env.example (1)
1-11: Optionally reorder Auth0 env keys for consistency and linter friendlinessAs with the Solid example, you can avoid dotenv key-order warnings by placing
AUTH_AUTH0_ISSUERbeforeAUTH_AUTH0_SECRET:-AUTH_AUTH0_ID=your-auth0-client-id -AUTH_AUTH0_SECRET=your-auth0-client-secret -AUTH_AUTH0_ISSUER=https://your-tenant.auth0.com +AUTH_AUTH0_ID=your-auth0-client-id +AUTH_AUTH0_ISSUER=https://your-tenant.auth0.com +AUTH_AUTH0_SECRET=your-auth0-client-secretThis keeps the Auth0 keys ordered consistently across both examples.
examples/react/start-basic-authjs/src/components/NotFound.tsx (1)
3-24: React NotFound component looks good; consider tighteningchildrentypeImplementation and router integration via
Linkmatch the other examples and look correct. If you want to lean into strict typing, you could narrowchildrenfromanyto a React node type (e.g.React.ReactNode) for better type-safety, but it’s not required for this example.examples/solid/start-basic-authjs/src/components/NotFound.tsx (1)
3-24: Solid NotFound mirrors existing examples; optional stronger typing forchildrenBehavior and styling are consistent with the other Solid examples, and using
Linkfrom@tanstack/solid-routeris correct. If you want stricter types, you could import Solid’s JSX types (e.g.import type { JSX } from 'solid-js') and change the prop tochildren?: JSX.Elementinstead ofany, but this is optional for an example file.examples/react/start-basic-authjs/package.json (1)
1-34: Considerworkspace:*for internal TanStack dependenciesIf this example is meant to consume the local monorepo packages, you may want to switch the TanStack deps (e.g.
@tanstack/react-router,@tanstack/react-router-devtools,@tanstack/react-start) to use theworkspace:*protocol to avoid version skew with the rest of the repo. If the goal is to demonstrate installation from npm with concrete versions for users, the current ranges are fine.examples/solid/start-basic-authjs/package.json (1)
1-31: Optional: useworkspace:*for Solid TanStack deps if they are local packagesFor consistency with monorepo practices, you might consider declaring
@tanstack/solid-router,@tanstack/solid-router-devtools, and@tanstack/solid-startwithworkspace:*if these are meant to track the local packages. If this example is intended as a standalone template using published versions, the current ranges are acceptable.examples/solid/start-basic-authjs/src/routes/login.tsx (2)
14-18: Consider adding error handling for the CSRF token fetch.If the
/api/auth/csrfendpoint fails, the function will throw, but the error won't be surfaced to users. For an example, this is acceptable, but consider adding basic error handling for robustness.async function getCsrfToken(): Promise<string> { const res = await fetch('/api/auth/csrf') + if (!res.ok) { + throw new Error('Failed to fetch CSRF token') + } const data = await res.json() return data.csrfToken }
28-42: Form may submit with empty CSRF token before resource loads.The
Suspenseboundary shows a fallback while loading, but the form withcsrfToken() ?? ''is rendered inside. If the user somehow submits before the token loads, an empty token would be sent. Consider disabling the button until the token is available.<button type="submit" + disabled={!csrfToken()} class="w-full flex items-center justify-center gap-3 px-4 py-3 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors cursor-pointer" >examples/react/start-basic-authjs/src/routes/login.tsx (3)
1-1: Remove unusedSuspenseimport.
Suspenseis imported but not used in this component.-import { useState, useEffect, Suspense } from 'react' +import { useState, useEffect } from 'react'
17-21: Add error handling for the CSRF token fetch.The fetch lacks error handling. If the endpoint fails, the error is silently ignored and the token remains empty.
useEffect(() => { fetch('/api/auth/csrf') - .then((res) => res.json()) - .then((data) => setCsrfToken(data.csrfToken)) + .then((res) => { + if (!res.ok) throw new Error('Failed to fetch CSRF token') + return res.json() + }) + .then((data) => setCsrfToken(data.csrfToken)) + .catch((err) => console.error(err)) }, [])
28-40: Form can be submitted before CSRF token loads.The form is immediately submittable with an empty
csrfToken. Consider disabling the submit button until the token is available for a more defensive implementation.<button type="submit" + disabled={!csrfToken} className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors cursor-pointer" >examples/react/start-basic-authjs/src/utils/auth.ts (1)
36-47: Consider cookie security options for production use.Storing
access_tokenand user profile in cookies works for this example, but in production scenarios consider:
- Adding
httpOnly: trueto prevent XSS access- Adding
secure: truefor HTTPS-only transmission- Setting appropriate
sameSitepolicySince this is example/documentation code, the current implementation is acceptable for demonstrating the pattern.
📜 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 (35)
docs/start/config.json(2 hunks)examples/react/start-basic-authjs/.env.example(1 hunks)examples/react/start-basic-authjs/.gitignore(1 hunks)examples/react/start-basic-authjs/package.json(1 hunks)examples/react/start-basic-authjs/postcss.config.mjs(1 hunks)examples/react/start-basic-authjs/src/components/DefaultCatchBoundary.tsx(1 hunks)examples/react/start-basic-authjs/src/components/NotFound.tsx(1 hunks)examples/react/start-basic-authjs/src/routeTree.gen.ts(1 hunks)examples/react/start-basic-authjs/src/router.tsx(1 hunks)examples/react/start-basic-authjs/src/routes/__root.tsx(1 hunks)examples/react/start-basic-authjs/src/routes/api/auth/$.ts(1 hunks)examples/react/start-basic-authjs/src/routes/index.tsx(1 hunks)examples/react/start-basic-authjs/src/routes/login.tsx(1 hunks)examples/react/start-basic-authjs/src/routes/protected.tsx(1 hunks)examples/react/start-basic-authjs/src/styles/app.css(1 hunks)examples/react/start-basic-authjs/src/utils/auth.ts(1 hunks)examples/react/start-basic-authjs/tsconfig.json(1 hunks)examples/react/start-basic-authjs/vite.config.ts(1 hunks)examples/solid/start-basic-authjs/.env.example(1 hunks)examples/solid/start-basic-authjs/.gitignore(1 hunks)examples/solid/start-basic-authjs/package.json(1 hunks)examples/solid/start-basic-authjs/postcss.config.mjs(1 hunks)examples/solid/start-basic-authjs/src/components/DefaultCatchBoundary.tsx(1 hunks)examples/solid/start-basic-authjs/src/components/NotFound.tsx(1 hunks)examples/solid/start-basic-authjs/src/routeTree.gen.ts(1 hunks)examples/solid/start-basic-authjs/src/router.tsx(1 hunks)examples/solid/start-basic-authjs/src/routes/__root.tsx(1 hunks)examples/solid/start-basic-authjs/src/routes/api/auth/$.ts(1 hunks)examples/solid/start-basic-authjs/src/routes/index.tsx(1 hunks)examples/solid/start-basic-authjs/src/routes/login.tsx(1 hunks)examples/solid/start-basic-authjs/src/routes/protected.tsx(1 hunks)examples/solid/start-basic-authjs/src/styles/app.css(1 hunks)examples/solid/start-basic-authjs/src/utils/auth.ts(1 hunks)examples/solid/start-basic-authjs/tsconfig.json(1 hunks)examples/solid/start-basic-authjs/vite.config.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace protocol for internal dependencies (workspace:*)
Files:
examples/solid/start-basic-authjs/package.jsonexamples/react/start-basic-authjs/package.json
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript strict mode with extensive type safety throughout the codebase
Files:
examples/solid/start-basic-authjs/src/components/DefaultCatchBoundary.tsxexamples/solid/start-basic-authjs/src/components/NotFound.tsxexamples/solid/start-basic-authjs/src/router.tsxexamples/solid/start-basic-authjs/src/routes/api/auth/$.tsexamples/react/start-basic-authjs/src/components/DefaultCatchBoundary.tsxexamples/react/start-basic-authjs/vite.config.tsexamples/react/start-basic-authjs/src/routes/index.tsxexamples/react/start-basic-authjs/src/routes/login.tsxexamples/react/start-basic-authjs/src/routes/protected.tsxexamples/react/start-basic-authjs/src/router.tsxexamples/solid/start-basic-authjs/src/routes/__root.tsxexamples/solid/start-basic-authjs/src/routes/index.tsxexamples/react/start-basic-authjs/src/routes/__root.tsxexamples/solid/start-basic-authjs/src/routes/protected.tsxexamples/react/start-basic-authjs/src/components/NotFound.tsxexamples/react/start-basic-authjs/src/routes/api/auth/$.tsexamples/solid/start-basic-authjs/src/routes/login.tsxexamples/solid/start-basic-authjs/src/utils/auth.tsexamples/react/start-basic-authjs/src/utils/auth.tsexamples/solid/start-basic-authjs/vite.config.tsexamples/react/start-basic-authjs/src/routeTree.gen.tsexamples/solid/start-basic-authjs/src/routeTree.gen.ts
**/src/routes/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use file-based routing in src/routes/ directories or code-based routing with route definitions
Files:
examples/solid/start-basic-authjs/src/routes/api/auth/$.tsexamples/react/start-basic-authjs/src/routes/index.tsxexamples/react/start-basic-authjs/src/routes/login.tsxexamples/react/start-basic-authjs/src/routes/protected.tsxexamples/solid/start-basic-authjs/src/routes/__root.tsxexamples/solid/start-basic-authjs/src/routes/index.tsxexamples/react/start-basic-authjs/src/routes/__root.tsxexamples/solid/start-basic-authjs/src/routes/protected.tsxexamples/react/start-basic-authjs/src/routes/api/auth/$.tsexamples/solid/start-basic-authjs/src/routes/login.tsx
🧠 Learnings (7)
📚 Learning: 2025-11-25T00:18:21.258Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.258Z
Learning: Applies to packages/solid-router/**/*.{ts,tsx} : Solid Router components and primitives should use the tanstack/solid-router package
Applied to files:
examples/solid/start-basic-authjs/package.jsonexamples/react/start-basic-authjs/package.jsonexamples/solid/start-basic-authjs/src/components/DefaultCatchBoundary.tsxexamples/solid/start-basic-authjs/src/components/NotFound.tsxexamples/solid/start-basic-authjs/src/router.tsxexamples/solid/start-basic-authjs/src/routes/api/auth/$.tsexamples/react/start-basic-authjs/src/routes/index.tsxexamples/react/start-basic-authjs/src/routes/login.tsxexamples/react/start-basic-authjs/src/routes/protected.tsxexamples/react/start-basic-authjs/src/router.tsxexamples/solid/start-basic-authjs/src/routes/__root.tsxexamples/solid/start-basic-authjs/tsconfig.jsonexamples/solid/start-basic-authjs/src/routes/index.tsxexamples/react/start-basic-authjs/src/routes/__root.tsxexamples/solid/start-basic-authjs/src/routes/protected.tsxexamples/react/start-basic-authjs/src/routes/api/auth/$.tsexamples/solid/start-basic-authjs/src/routes/login.tsxexamples/solid/start-basic-authjs/vite.config.tsexamples/react/start-basic-authjs/src/routeTree.gen.tsexamples/solid/start-basic-authjs/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/start-basic-authjs/package.jsonexamples/react/start-basic-authjs/package.jsonexamples/react/start-basic-authjs/vite.config.tsexamples/solid/start-basic-authjs/tsconfig.jsonexamples/react/start-basic-authjs/src/routes/api/auth/$.tsexamples/react/start-basic-authjs/src/routeTree.gen.tsexamples/solid/start-basic-authjs/src/routeTree.gen.ts
📚 Learning: 2025-11-25T00:18:21.258Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.258Z
Learning: Applies to packages/react-router/**/*.{ts,tsx} : React Router components and hooks should use the tanstack/react-router package
Applied to files:
examples/react/start-basic-authjs/package.jsonexamples/solid/start-basic-authjs/src/router.tsxexamples/solid/start-basic-authjs/src/routes/api/auth/$.tsexamples/react/start-basic-authjs/src/components/DefaultCatchBoundary.tsxexamples/react/start-basic-authjs/src/routes/index.tsxexamples/react/start-basic-authjs/src/routes/login.tsxexamples/react/start-basic-authjs/src/routes/protected.tsxexamples/react/start-basic-authjs/src/router.tsxexamples/solid/start-basic-authjs/src/routes/__root.tsxexamples/solid/start-basic-authjs/src/routes/index.tsxexamples/react/start-basic-authjs/src/routes/__root.tsxexamples/react/start-basic-authjs/src/components/NotFound.tsxexamples/react/start-basic-authjs/src/routes/api/auth/$.tsexamples/react/start-basic-authjs/src/routeTree.gen.tsexamples/solid/start-basic-authjs/src/routeTree.gen.ts
📚 Learning: 2025-11-25T00:18:21.258Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.258Z
Learning: Applies to **/src/routes/**/*.{ts,tsx} : Use file-based routing in src/routes/ directories or code-based routing with route definitions
Applied to files:
examples/solid/start-basic-authjs/src/router.tsxexamples/solid/start-basic-authjs/src/routes/api/auth/$.tsexamples/react/start-basic-authjs/src/routes/index.tsxexamples/react/start-basic-authjs/src/routes/login.tsxexamples/react/start-basic-authjs/src/routes/protected.tsxexamples/react/start-basic-authjs/src/router.tsxexamples/solid/start-basic-authjs/src/routes/__root.tsxexamples/solid/start-basic-authjs/src/routes/index.tsxexamples/react/start-basic-authjs/src/routes/__root.tsxexamples/solid/start-basic-authjs/src/routes/protected.tsxexamples/react/start-basic-authjs/src/routes/api/auth/$.tsexamples/solid/start-basic-authjs/src/routes/login.tsxexamples/react/start-basic-authjs/src/routeTree.gen.tsexamples/solid/start-basic-authjs/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/start-basic-authjs/src/router.tsxexamples/react/start-basic-authjs/src/router.tsxexamples/react/start-basic-authjs/src/routeTree.gen.tsexamples/solid/start-basic-authjs/src/routeTree.gen.ts
📚 Learning: 2025-11-25T00:18:21.257Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.257Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript strict mode with extensive type safety throughout the codebase
Applied to files:
examples/solid/start-basic-authjs/tsconfig.jsonexamples/react/start-basic-authjs/tsconfig.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/react/start-basic-authjs/src/routeTree.gen.tsexamples/solid/start-basic-authjs/src/routeTree.gen.ts
🧬 Code graph analysis (13)
examples/solid/start-basic-authjs/src/components/NotFound.tsx (9)
examples/react/start-basic-authjs/src/components/NotFound.tsx (1)
NotFound(3-25)examples/solid/start-basic-cloudflare/src/components/NotFound.tsx (1)
NotFound(3-25)examples/solid/start-basic/src/components/NotFound.tsx (1)
NotFound(3-25)examples/solid/start-supabase-basic/src/components/NotFound.tsx (1)
NotFound(4-26)e2e/solid-start/basic-cloudflare/src/components/NotFound.tsx (1)
NotFound(3-25)examples/solid/start-basic-nitro/src/components/NotFound.tsx (1)
NotFound(3-25)e2e/solid-start/server-routes/src/components/NotFound.tsx (1)
NotFound(3-25)examples/react/start-basic-cloudflare/src/components/NotFound.tsx (1)
NotFound(3-25)e2e/react-start/basic-cloudflare/src/components/NotFound.tsx (1)
NotFound(3-25)
examples/solid/start-basic-authjs/src/routes/api/auth/$.ts (6)
examples/react/start-basic-authjs/src/utils/auth.ts (1)
authConfig(24-50)examples/solid/start-basic-authjs/src/utils/auth.ts (1)
authConfig(24-50)examples/react/start-basic-authjs/src/routes/__root.tsx (1)
Route(28-51)examples/react/start-basic-authjs/src/routes/api/auth/$.ts (1)
Route(11-18)examples/solid/start-basic-authjs/src/routes/__root.tsx (1)
Route(30-53)examples/solid/start-basic-authjs/src/routes/index.tsx (1)
Route(4-6)
examples/react/start-basic-authjs/src/components/DefaultCatchBoundary.tsx (4)
e2e/react-start/server-routes/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)e2e/solid-start/server-routes/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)e2e/solid-start/basic-cloudflare/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)e2e/react-start/basic-cloudflare/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)
examples/react/start-basic-authjs/src/routes/index.tsx (3)
examples/react/start-basic-authjs/src/routes/__root.tsx (1)
Route(28-51)examples/react/start-basic-authjs/src/routes/login.tsx (1)
Route(4-12)examples/react/start-basic-authjs/src/routes/protected.tsx (1)
Route(3-10)
examples/react/start-basic-authjs/src/routes/protected.tsx (2)
examples/react/start-basic-authjs/src/routes/__root.tsx (1)
Route(28-51)examples/react/start-basic-authjs/src/routes/login.tsx (1)
Route(4-12)
examples/react/start-basic-authjs/src/router.tsx (2)
examples/react/start-basic-authjs/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)examples/react/start-basic-authjs/src/components/NotFound.tsx (1)
NotFound(3-25)
examples/solid/start-basic-authjs/src/routes/__root.tsx (7)
packages/start-server-core/src/request-response.ts (2)
getRequest(72-75)getSession(283-288)examples/solid/start-basic-authjs/src/utils/auth.ts (1)
authConfig(24-50)examples/react/start-basic-authjs/src/routes/__root.tsx (1)
Route(28-51)examples/react/start-basic-authjs/src/routes/api/auth/$.ts (1)
Route(11-18)examples/solid/start-basic-authjs/src/routes/api/auth/$.ts (1)
Route(11-18)examples/solid/start-basic-authjs/src/routes/login.tsx (1)
Route(4-12)examples/solid/start-basic-authjs/src/routes/protected.tsx (1)
Route(4-11)
examples/solid/start-basic-authjs/src/routes/index.tsx (3)
examples/solid/start-basic-authjs/src/routes/__root.tsx (1)
Route(30-53)examples/solid/start-basic-authjs/src/routes/login.tsx (1)
Route(4-12)examples/solid/start-basic-authjs/src/routes/protected.tsx (1)
Route(4-11)
examples/solid/start-basic-authjs/src/routes/protected.tsx (3)
examples/react/start-basic-authjs/src/routes/protected.tsx (1)
Route(3-10)examples/solid/start-basic-authjs/src/routes/__root.tsx (1)
Route(30-53)examples/solid/start-basic-authjs/src/routes/login.tsx (1)
Route(4-12)
examples/react/start-basic-authjs/src/components/NotFound.tsx (2)
e2e/react-start/server-routes/src/components/NotFound.tsx (1)
NotFound(3-25)examples/react/start-basic-cloudflare/src/components/NotFound.tsx (1)
NotFound(3-25)
examples/react/start-basic-authjs/src/routes/api/auth/$.ts (1)
examples/react/start-basic-authjs/src/utils/auth.ts (1)
authConfig(24-50)
examples/solid/start-basic-authjs/src/routes/login.tsx (4)
examples/react/start-basic-authjs/src/routes/login.tsx (1)
Route(4-12)examples/solid/start-basic-authjs/src/routes/__root.tsx (1)
Route(30-53)examples/solid/start-basic-authjs/src/routes/api/auth/$.ts (1)
Route(11-18)examples/solid/start-basic-authjs/src/routes/protected.tsx (1)
Route(4-11)
examples/solid/start-basic-authjs/src/routeTree.gen.ts (1)
examples/react/start-basic-authjs/src/routeTree.gen.ts (6)
FileRoutesByFullPath(38-43)FileRoutesByTo(44-49)FileRoutesById(50-56)FileRouteTypes(57-64)RootRouteChildren(65-70)routeTree(111-113)
🪛 dotenv-linter (4.0.0)
examples/solid/start-basic-authjs/.env.example
[warning] 11-11: [UnorderedKey] The AUTH_AUTH0_ISSUER key should go before the AUTH_AUTH0_SECRET key
(UnorderedKey)
examples/react/start-basic-authjs/.env.example
[warning] 11-11: [UnorderedKey] The AUTH_AUTH0_ISSUER key should go before the AUTH_AUTH0_SECRET key
(UnorderedKey)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Preview
🔇 Additional comments (35)
examples/solid/start-basic-authjs/.gitignore (1)
1-6: LGTM!This .gitignore correctly excludes build artifacts, dependencies, environment files (especially important for Auth.js secrets), OS-specific metadata, and framework-specific directories. The entries are appropriate and consistent with standard practices for Node.js projects.
examples/react/start-basic-authjs/.gitignore (1)
1-6: Ignore patterns are appropriate for this example app
node_modules, build artifacts, local env files, and tooling folders are all correctly excluded; nothing blocking here.examples/solid/start-basic-authjs/postcss.config.mjs (1)
1-5: Tailwind PostCSS configuration looks correctUsing the
@tailwindcss/postcssplugin as the sole PostCSS plugin is consistent with the modern Tailwind setup; no changes needed here.examples/react/start-basic-authjs/vite.config.ts (1)
1-18: React Vite + TanStack Start config looks solidPlugin ordering and options (tsconfig paths, React plugin, dev server on port 10000 with
strictPort) are all reasonable and consistent with the TS config.docs/start/config.json (1)
338-344: Solid “Basic + Auth.js” and renamed Convex example entries look consistentThe rename to “Basic + Convex + Better Auth” and the new “Basic + Auth.js” Solid example both use Solid framework paths and fit the surrounding naming scheme.
examples/solid/start-basic-authjs/vite.config.ts (1)
1-18: Solid Vite + TanStack Start SSR config looks goodThe combination of
tanstackStart,tsConfigPaths, andviteSolid({ ssr: true })is appropriate here. Note that this example shares port 10000 with the React Auth.js example; that’s fine if you run them separately, but you’ll need to change one port if you ever want both dev servers up at the same time.examples/react/start-basic-authjs/tsconfig.json (1)
1-24: TypeScript config aligns well with strict-mode guidelines
strict: trueand the additional checks (noUnusedLocals,noUnusedParameters, etc.) plusmoduleResolution: "bundler"and the~/*path alias are all appropriate for a React + Vite setup and satisfy the strict TS requirement for this example.examples/solid/start-basic-authjs/tsconfig.json (1)
1-25: TS config aligns with strict-mode guidelines
strict: trueplus the additional flags (noUnusedLocals,noUnusedParameters,noFallthroughCasesInSwitch,isolatedModules, etc.) give you the desired strictness, and the JSX / module settings look appropriate for Solid + Vite. No changes needed.examples/react/start-basic-authjs/src/styles/app.css (1)
1-1: Tailwind CSS import is appropriate for this setupUsing
@import 'tailwindcss';matches the Tailwind + PostCSS configuration described for this example and should correctly expose the utility classes used in the components.examples/solid/start-basic-authjs/src/styles/app.css (1)
1-1: Tailwind import matches the Solid example’s styling setupThe
@import 'tailwindcss';directive is consistent with the PostCSS/Tailwind configuration and will make the utility classes available for the Solid example.examples/solid/start-basic-authjs/src/router.tsx (1)
1-16: Router configuration looks consistent with other Solid Start examples
getRouterwiresrouteTree,DefaultCatchBoundary, andNotFoundintocreateRouterwithdefaultPreload: 'intent'andscrollRestoration: true, which matches the established pattern for Solid Start examples and uses@tanstack/solid-routeras expected. This looks good as long as it stays aligned with the other example routers in the repo.examples/react/start-basic-authjs/src/router.tsx (1)
1-15: LGTM! Router configuration is well-structured.The router setup properly configures all essential options including route tree, preloading strategy, error handling, and scroll restoration. The use of an arrow function wrapper for
defaultNotFoundComponentis appropriate sinceNotFoundexpects optional props, whiledefaultErrorComponentcorrectly receivesErrorComponentPropsfrom the router.examples/solid/start-basic-authjs/src/routes/api/auth/$.ts (1)
1-18: LGTM! Auth.js API route handler correctly configured.The implementation properly sets up Auth.js route handling using file-based routing with
@tanstack/solid-router. The pattern of passingnew Response()to the GET and POST handlers matches the React implementation and appears to be the expected StartAuthJS API pattern.examples/react/start-basic-authjs/src/routes/index.tsx (1)
1-50: LGTM! Clean implementation of the home route.The route properly demonstrates Auth.js integration with clear conditional rendering based on session state. The component correctly uses
Route.useRouteContext()to access the session and handles both authenticated and unauthenticated states gracefully with appropriate fallbacks.examples/react/start-basic-authjs/postcss.config.mjs (1)
1-5: LGTM! Standard PostCSS configuration for Tailwind.The configuration correctly sets up the Tailwind PostCSS plugin, which aligns with the Tailwind usage throughout the example application.
examples/solid/start-basic-authjs/src/routes/index.tsx (1)
1-55: LGTM! Proper Solid.js implementation of the home route.The component correctly uses Solid.js patterns including:
Showcomponents for conditional rendering- Reactive accessors (calling
routeContext()andsession()as functions)classinstead ofclassNamefor JSX- Proper handling of optional values with nested
ShowcomponentsThe implementation effectively mirrors the React version while following Solid.js idioms.
examples/react/start-basic-authjs/src/routes/api/auth/$.ts (1)
1-18: LGTM! Auth.js API route handler properly configured.The implementation correctly sets up Auth.js route handling using file-based routing with
@tanstack/react-router. The structure mirrors the Solid implementation, demonstrating good cross-framework consistency. The JSDoc comment effectively documents the route's purpose.examples/solid/start-basic-authjs/src/components/DefaultCatchBoundary.tsx (1)
1-53: LGTM! Well-structured error boundary for Solid.The component properly implements error handling with:
- Correct use of
@tanstack/solid-routerAPIs- Reactive patterns (calling
isRoot()as a function)- Appropriate error logging for debugging
- User-friendly recovery options (Try Again, navigation)
- Conditional navigation logic based on route context
The implementation follows Solid.js conventions and provides a good user experience when errors occur.
examples/react/start-basic-authjs/src/routes/protected.tsx (1)
1-55: LGTM! Excellent protected route implementation.The route effectively demonstrates authentication guards with:
- Proper
beforeLoadguard that redirects unauthenticated users to/login- Safe access to session data with optional chaining and fallback values
- Clear UI showing user information and authentication state
- Debug section helpful for understanding session structure in an example context
- Good accessibility with alt text for the avatar image
This provides a clear example of how to implement protected routes with Auth.js.
examples/solid/start-basic-authjs/src/routes/protected.tsx (2)
1-11: LGTM! Route guard implementation is correct.The
beforeLoadguard properly checks for session and redirects unauthenticated users. This pattern aligns with the React counterpart and the login route's inverse logic.
13-58: LGTM! Component implementation follows Solid.js idioms.The use of
routeContext()as a reactive getter andShowfor conditional rendering is idiomatic Solid.js. The debug panel displaying session data is appropriate for an example application.examples/solid/start-basic-authjs/src/routes/login.tsx (1)
1-12: LGTM! Login route guard correctly prevents authenticated users from accessing the login page.examples/react/start-basic-authjs/src/components/DefaultCatchBoundary.tsx (1)
1-53: LGTM! Error boundary implementation follows established patterns.The component correctly implements error handling with retry functionality and conditional navigation. The pattern is consistent with other examples in the codebase (e.g.,
e2e/react-start/server-routes/src/components/DefaultCatchBoundary.tsx).examples/solid/start-basic-authjs/src/routes/__root.tsx (4)
1-28: LGTM! Server-side session fetching is correctly implemented.The
fetchSessionserver function properly usesgetRequest()andgetSession()to retrieve the authenticated session server-side, making it available to routes via context.
30-53: LGTM! Root route configuration is correct.The
beforeLoadhook properly preloads session data, and theheadconfiguration includes appropriate meta tags and stylesheet link.
63-78: Note:HeadContentis placed in<body>instead of<head>.The
HeadContentcomponent is rendered inside<body>whileHydrationScriptis in<head>. This appears intentional for Solid's streaming SSR, but verify this is the expected pattern for TanStack Solid Router.
80-120: LGTM! NavBar correctly consumes reactive route context.The use of
routeContext()as a reactive getter and<Show>for conditional rendering follows Solid.js patterns. Using a regular<a>tag for the sign-out link is appropriate since/api/auth/signoutis a server endpoint.examples/react/start-basic-authjs/src/utils/auth.ts (1)
6-19: LGTM! Session type augmentation is correctly defined.The module augmentation properly extends the
@auth/core/typesSession interface to include the custom user and account properties needed by this example.examples/solid/start-basic-authjs/src/utils/auth.ts (1)
1-50: LGTM! Configuration mirrors the React example correctly.The Solid version correctly uses
@tanstack/solid-start/serverforsetCookiewhile maintaining the same auth configuration pattern as the React example. This consistency makes it easier for users to understand both implementations.examples/react/start-basic-authjs/src/routes/__root.tsx (4)
1-26: LGTM! Server-side session fetching implementation is correct.The
fetchSessionserver function properly retrieves the session, and the imports correctly use@tanstack/react-routerand@tanstack/react-startpackages as per coding guidelines.
28-51: LGTM! Root route configuration follows established patterns.The route definition with
beforeLoadfor session preloading andheadfor document metadata is correctly implemented.
61-75: LGTM! Document structure is correct for React.Unlike the Solid version,
HeadContentis correctly placed within the<head>element, which is the expected pattern for TanStack React Router.
77-117: LGTM! NavBar correctly renders session-aware navigation.The component properly accesses
routeContext.sessionand conditionally renders sign-in/sign-out UI. Using a regular<a>tag for the sign-out link is appropriate since it's a server endpoint.examples/solid/start-basic-authjs/src/routeTree.gen.ts (1)
1-122: Skipping review of autogenerated file.This is an autogenerated
routeTree.gen.tsfile created by TanStack Router. Per repository conventions, these files should not be manually modified and are excluded from code review. Based on learnings from previous reviews.examples/react/start-basic-authjs/src/routeTree.gen.ts (1)
1-122: Skipping review of autogenerated file.This is an autogenerated
routeTree.gen.tsfile created by TanStack Router. Per repository conventions, these files should not be manually modified and are excluded from code review. Based on learnings from previous reviews.
| { | ||
| "label": "Basic + Auth.js", | ||
| "to": "framework/solid/examples/start-basic-authjs" | ||
| }, |
There was a problem hiding this comment.
React “Basic + Auth.js” example likely points to the wrong route
This React example entry uses a Solid docs path:
{
"label": "Basic + Auth.js",
"to": "framework/solid/examples/start-basic-authjs"
}If there is a dedicated React example page, this should probably be:
- "to": "framework/solid/examples/start-basic-authjs"
+ "to": "framework/react/examples/start-basic-authjs"Otherwise, readers clicking the React example will land in the Solid section.
🤖 Prompt for AI Agents
In docs/start/config.json around lines 304 to 307, the nav entry labeled "Basic
+ Auth.js" currently points to the Solid examples path; update the "to" value to
the correct React examples route (e.g.
"framework/react/examples/start-basic-authjs") if a React example exists,
otherwise create or move the example under the React docs and/or add a redirect
so the link resolves to the intended React page.
Summary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.