Add default 404 page and loading state to project example (#1257)

* fix(examples): handle undefined project in React projects example

Add a guard in the ProjectPage component to handle the case where the
project or user membership data hasn't loaded yet, preventing the
"Cannot read properties of undefined (reading 'name')" crash. Also add
a defaultNotFoundComponent to the router to handle invalid routes
gracefully instead of throwing an unconfigured notFoundError.

Fixes #889

https://claude.ai/code/session_01QJP1o2CKx7s9iLPNEkwcuP

* refactor(examples): validate project in loader and extract NotFound component

Throw notFound() from the route loader when the project ID is invalid
or doesn't exist, instead of showing a misleading "Loading..." message.
Extract NotFound into a reusable component using Link for client-side
navigation, consistent with the todo and offline-transactions examples.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(examples): fix auth routing and move project creation to loader

- Move auth API route to catch-all (api/auth/$.ts) so Better Auth
  sub-paths like /api/auth/sign-up/email are handled correctly
- Add baseURL and port 5174 to Better Auth trusted origins
- Move default project creation from useEffect into beforeLoad so
  data is ready before first render, eliminating race conditions
- Wait for project to persist before redirecting to get server-assigned ID
- Remove unused useEffect and isLoading from authenticated layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* ci: apply automated fixes

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

examples/react/projects/src/components/NotFound.tsx

@@ -0,0 +1,22 @@
+import { Link } from '@tanstack/react-router'
+
+export function NotFound() {
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-800 mb-4">
+          Page Not Found
+        </h1>
+        <p className="text-gray-600 mb-6">
+          The page you are looking for does not exist.
+        </p>
+        <Link
+          to="/"
+          className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+        >
+          Go Home
+        </Link>
+      </div>
+    </div>
+  )
+}

examples/react/projects/src/lib/auth.ts

@@ -4,6 +4,7 @@ import { db } from '@/db/connection' // your drizzle instance
 import * as schema from '@/db/auth-schema'
 
 export const auth = betterAuth({
+  baseURL: process.env.BETTER_AUTH_BASE_URL || 'http://localhost:5174',
   database: drizzleAdapter(db, {
     provider: 'pg',
     usePlural: true,
@@ -16,7 +17,5 @@ export const auth = betterAuth({
     disableSignUp: process.env.NODE_ENV === 'production',
     minPasswordLength: process.env.NODE_ENV === 'production' ? 8 : 1,
   },
-  trustedOrigins: [
-    'http://localhost:5173', // Vite dev server
-  ],
+  trustedOrigins: ['http://localhost:5173', 'http://localhost:5174'],
 })

examples/react/projects/src/routeTree.gen.ts

@@ -12,8 +12,8 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
 import { Route as AuthenticatedIndexRouteImport } from './routes/_authenticated/index'
-import { Route as ApiAuthRouteImport } from './routes/api/auth'
 import { Route as ApiTrpcSplatRouteImport } from './routes/api/trpc/$'
+import { Route as ApiAuthSplatRouteImport } from './routes/api/auth/$'
 import { Route as AuthenticatedProjectProjectIdRouteImport } from './routes/_authenticated/project/$projectId'
 
 const LoginRoute = LoginRouteImport.update({
@@ -30,16 +30,16 @@ const AuthenticatedIndexRoute = AuthenticatedIndexRouteImport.update({
   path: '/',
   getParentRoute: () => AuthenticatedRoute,
 } as any)
-const ApiAuthRoute = ApiAuthRouteImport.update({
-  id: '/api/auth',
-  path: '/api/auth',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const ApiTrpcSplatRoute = ApiTrpcSplatRouteImport.update({
   id: '/api/trpc/$',
   path: '/api/trpc/$',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ApiAuthSplatRoute = ApiAuthSplatRouteImport.update({
+  id: '/api/auth/$',
+  path: '/api/auth/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AuthenticatedProjectProjectIdRoute =
   AuthenticatedProjectProjectIdRouteImport.update({
     id: '/project/$projectId',
@@ -48,52 +48,52 @@ const AuthenticatedProjectProjectIdRoute =
   } as any)
 
 export interface FileRoutesByFullPath {
-  '/login': typeof LoginRoute
-  '/api/auth': typeof ApiAuthRoute
   '/': typeof AuthenticatedIndexRoute
+  '/login': typeof LoginRoute
   '/project/$projectId': typeof AuthenticatedProjectProjectIdRoute
+  '/api/auth/$': typeof ApiAuthSplatRoute
   '/api/trpc/$': typeof ApiTrpcSplatRoute
 }
 export interface FileRoutesByTo {
   '/login': typeof LoginRoute
-  '/api/auth': typeof ApiAuthRoute
   '/': typeof AuthenticatedIndexRoute
   '/project/$projectId': typeof AuthenticatedProjectProjectIdRoute
+  '/api/auth/$': typeof ApiAuthSplatRoute
   '/api/trpc/$': typeof ApiTrpcSplatRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/_authenticated': typeof AuthenticatedRouteWithChildren
   '/login': typeof LoginRoute
-  '/api/auth': typeof ApiAuthRoute
   '/_authenticated/': typeof AuthenticatedIndexRoute
   '/_authenticated/project/$projectId': typeof AuthenticatedProjectProjectIdRoute
+  '/api/auth/$': typeof ApiAuthSplatRoute
   '/api/trpc/$': typeof ApiTrpcSplatRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
-    | '/login'
-    | '/api/auth'
     | '/'
+    | '/login'
     | '/project/$projectId'
+    | '/api/auth/$'
     | '/api/trpc/$'
   fileRoutesByTo: FileRoutesByTo
-  to: '/login' | '/api/auth' | '/' | '/project/$projectId' | '/api/trpc/$'
+  to: '/login' | '/' | '/project/$projectId' | '/api/auth/$' | '/api/trpc/$'
   id:
     | '__root__'
     | '/_authenticated'
     | '/login'
-    | '/api/auth'
     | '/_authenticated/'
     | '/_authenticated/project/$projectId'
+    | '/api/auth/$'
     | '/api/trpc/$'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   AuthenticatedRoute: typeof AuthenticatedRouteWithChildren
   LoginRoute: typeof LoginRoute
-  ApiAuthRoute: typeof ApiAuthRoute
+  ApiAuthSplatRoute: typeof ApiAuthSplatRoute
   ApiTrpcSplatRoute: typeof ApiTrpcSplatRoute
 }
 
@@ -109,7 +109,7 @@ declare module '@tanstack/react-router' {
     '/_authenticated': {
       id: '/_authenticated'
       path: ''
-      fullPath: ''
+      fullPath: '/'
       preLoaderRoute: typeof AuthenticatedRouteImport
       parentRoute: typeof rootRouteImport
     }
@@ -120,20 +120,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedIndexRouteImport
       parentRoute: typeof AuthenticatedRoute
     }
-    '/api/auth': {
-      id: '/api/auth'
-      path: '/api/auth'
-      fullPath: '/api/auth'
-      preLoaderRoute: typeof ApiAuthRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/api/trpc/$': {
       id: '/api/trpc/$'
       path: '/api/trpc/$'
       fullPath: '/api/trpc/$'
       preLoaderRoute: typeof ApiTrpcSplatRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/api/auth/$': {
+      id: '/api/auth/$'
+      path: '/api/auth/$'
+      fullPath: '/api/auth/$'
+      preLoaderRoute: typeof ApiAuthSplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_authenticated/project/$projectId': {
       id: '/_authenticated/project/$projectId'
       path: '/project/$projectId'
@@ -161,7 +161,7 @@ const AuthenticatedRouteWithChildren = AuthenticatedRoute._addFileChildren(
 const rootRouteChildren: RootRouteChildren = {
   AuthenticatedRoute: AuthenticatedRouteWithChildren,
   LoginRoute: LoginRoute,
-  ApiAuthRoute: ApiAuthRoute,
+  ApiAuthSplatRoute: ApiAuthSplatRoute,
   ApiTrpcSplatRoute: ApiTrpcSplatRoute,
 }
 export const routeTree = rootRouteImport

examples/react/projects/src/router.tsx

@@ -2,6 +2,7 @@ import { createRouter as createTanstackRouter } from '@tanstack/react-router'
 
 // Import the generated route tree
 import { routeTree } from './routeTree.gen'
+import { NotFound } from './components/NotFound'
 
 import './styles.css'
 
@@ -11,5 +12,6 @@ export function getRouter() {
     routeTree,
     scrollRestoration: true,
     defaultPreloadStaleTime: 0,
+    defaultNotFoundComponent: NotFound,
   })
 }

examples/react/projects/src/routes/_authenticated.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import {
   Link,
   Outlet,
@@ -20,23 +20,7 @@ function AuthenticatedLayout() {
   const [showNewProjectForm, setShowNewProjectForm] = useState(false)
   const [newProjectName, setNewProjectName] = useState(``)
 
-  const { data: projects, isLoading } = useLiveQuery((q) =>
-    q.from({ projectCollection })
-  )
-
-  useEffect(() => {
-    if (session && projects.length === 0 && !isLoading) {
-      projectCollection.insert({
-        id: Math.floor(Math.random() * 100000),
-        name: `Default`,
-        description: `Default project`,
-        owner_id: session.user.id,
-        shared_user_ids: [],
-        created_at: new Date(),
-        updated_at: new Date(),
-      })
-    }
-  }, [session, projects, isLoading])
+  const { data: projects } = useLiveQuery((q) => q.from({ projectCollection }))
 
   const handleLogout = async () => {
     await authClient.signOut()

examples/react/projects/src/routes/_authenticated/index.tsx

@@ -1,54 +1,49 @@
-import { useEffect } from 'react'
-import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router'
-import { useLiveQuery } from '@tanstack/react-db'
+import { createFileRoute, redirect } from '@tanstack/react-router'
 import { projectCollection, todoCollection } from '@/lib/collections'
 import { authClient } from '@/lib/auth-client'
 
 export const Route = createFileRoute(`/_authenticated/`)({
-  component: IndexRedirect,
+  component: () => null,
   ssr: false,
   beforeLoad: async () => {
     const res = await authClient.getSession()
     if (!res.data?.session) {
       throw redirect({
         to: `/login`,
         search: {
-          // Use the current location to power a redirect after login
-          // (Do not use `router.state.resolvedLocation` as it can
-          // potentially lag behind the actual current location)
           redirect: location.href,
         },
       })
     }
-  },
-  loader: async () => {
+
     await projectCollection.preload()
     await todoCollection.preload()
 
-    return null
-  },
-})
-
-function IndexRedirect() {
-  const navigate = useNavigate()
-  const { data: projects } = useLiveQuery((q) => q.from({ projectCollection }))
-
-  useEffect(() => {
-    if (projects.length > 0) {
-      const firstProject = projects[0]
-      navigate({
+    const projects = projectCollection.toArray
+    if (projects.length === 0) {
+      const id = Math.floor(Math.random() * 100000)
+      const tx = projectCollection.insert({
+        id,
+        name: `Default`,
+        description: `Default project`,
+        owner_id: res.data.user.id,
+        shared_user_ids: [],
+        created_at: new Date(),
+        updated_at: new Date(),
+      })
+      await tx.isPersisted.promise
+      const serverProjectId = projectCollection.toArray[0].id
+      throw redirect({
         to: `/project/$projectId`,
-        params: { projectId: firstProject.id.toString() },
+        params: { projectId: serverProjectId.toString() },
         replace: true,
       })
     }
-  }, [projects, navigate])
 
-  return (
-    <div className="p-6">
-      <div className="text-center">
-        <p className="text-gray-500">Loading projects...</p>
-      </div>
-    </div>
-  )
-}
+    throw redirect({
+      to: `/project/$projectId`,
+      params: { projectId: projects[0].id.toString() },
+      replace: true,
+    })
+  },
+})

examples/react/projects/src/routes/_authenticated/project/$projectId.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, notFound } from '@tanstack/react-router'
 import { eq, useLiveQuery } from '@tanstack/react-db'
 import { useState } from 'react'
 import type { Todo } from '@/db/schema'
@@ -12,9 +12,13 @@ import {
 export const Route = createFileRoute(`/_authenticated/project/$projectId`)({
   component: ProjectPage,
   ssr: false,
-  loader: async () => {
+  loader: async ({ params }) => {
     await projectCollection.preload()
     await todoCollection.preload()
+    const projectId = parseInt(params.projectId, 10)
+    if (isNaN(projectId) || !projectCollection.has(projectId)) {
+      throw notFound()
+    }
     return null
   },
 })
@@ -83,6 +87,11 @@ function ProjectPage() {
     todoCollection.delete(id)
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (!project || !usersInProject) {
+    return null
+  }
+
   return (
     <div className="p-6">
       <div className="max-w-2xl mx-auto">

…es/react/projects/src/routes/api/auth.ts …/react/projects/src/routes/api/auth/$.tsexamples/react/projects/src/routes/api/auth.ts renamed to examples/react/projects/src/routes/api/auth/$.ts examples/react/projects/src/routes/api/auth.ts renamed to examples/react/projects/src/routes/api/auth/$.ts

@@ -5,7 +5,7 @@ const serve = ({ request }: { request: Request }) => {
   return auth.handler(request)
 }
 
-export const Route = createFileRoute(`/api/auth`)({
+export const Route = createFileRoute(`/api/auth/$`)({
   server: {
     handlers: {
       GET: serve,