TanStack · birkskyum · Nov 12, 2025 · Nov 11, 2025 · Nov 12, 2025 · Nov 12, 2025
diff --git a/docs/router/config.json b/docs/router/config.json
@@ -634,6 +634,10 @@
               "label": "Kitchen Sink + Solid Query (code-based)",
               "to": "framework/solid/examples/kitchen-sink-solid-query"
             },
+            {
+              "label": "Authenticated Routes",
+              "to": "framework/solid/examples/authenticated-routes"
+            },
             {
               "label": "View Transitions",
               "to": "framework/solid/examples/view-transitions"

diff --git a/examples/solid/authenticated-routes-firebase/.env.example b/examples/solid/authenticated-routes-firebase/.env.example
@@ -0,0 +1,8 @@
+# Firebase Configuration: Copy this file to `.env.local` and add your Firebase credentials
+# Obtain these values from your Firebase Console (see README.md for detailed setup instructions)
+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=
diff --git a/examples/solid/authenticated-routes-firebase/.gitignore b/examples/solid/authenticated-routes-firebase/.gitignore
@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+.env.*
+!.env.example
diff --git a/examples/solid/authenticated-routes-firebase/.vscode/settings.json b/examples/solid/authenticated-routes-firebase/.vscode/settings.json
@@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}
diff --git a/examples/solid/authenticated-routes-firebase/README.md b/examples/solid/authenticated-routes-firebase/README.md
@@ -0,0 +1,40 @@
+# Firebase Setup
+
+1. Create a [Firebase project](https://console.firebase.google.com/)
+   1. By default, firebase will configure an accepted domain for localhost...update if necessary!
+2. Enable Authentication in the Firebase console
+3. Add GitHub as an authentication provider:
+   - Go to **Authentication** > **Sign-in method** > **GitHub**
+   - Enable GitHub authentication
+   - You'll need to set up OAuth in your GitHub account:
+     - Go to [GitHub Developer Settings](https://github.com/settings/developers)
+     - Create a new OAuth app
+     - Set the homepage URL to your local or production URL
+     - Set the callback URL to: `https://your-firebase-project-id.firebaseapp.com/__/auth/handler`
+     - Copy the Client ID and Client Secret
+   - Return to Firebase console and paste the GitHub Client ID and Client Secret
+   - Save the changes
+
+4. Create a web app in your Firebase project:
+   - Go to **Project Overview** > **Add app** > **Web**
+   - Register the app with a nickname
+   - Copy the Firebase configuration object for later use
+
+## Setup .env.local
+
+Copy the .env.example provided and configure with your firebase credentials
+
+````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=```
+
+## Run the app
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm start` or `yarn start`
+````
diff --git a/examples/solid/authenticated-routes-firebase/index.html b/examples/solid/authenticated-routes-firebase/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/solid/authenticated-routes-firebase/package.json b/examples/solid/authenticated-routes-firebase/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "tanstack-router-solid-example-authenticated-routes-firebase",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "build": "vite build && tsc --noEmit",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "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": "^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"
+  }
-  "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"
+  }
+}
diff --git a/examples/solid/authenticated-routes-firebase/postcss.config.mjs b/examples/solid/authenticated-routes-firebase/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
diff --git a/examples/solid/authenticated-routes-firebase/src/auth.tsx b/examples/solid/authenticated-routes-firebase/src/auth.tsx
@@ -0,0 +1,63 @@
+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'
+
+export type AuthContextType = {
+  isAuthenticated: () => boolean
+  isInitialLoading: () => boolean
+  login: (provider: AuthProvider) => Promise<void>
+  logout: () => Promise<void>
+  user: () => User | null
+}
+
+const AuthContext = Solid.createContext<AuthContextType | null>(null)
+
+export function AuthContextProvider(props: { children: Solid.JSX.Element }) {
+  const [user, setUser] = Solid.createSignal<User | null>(auth.currentUser)
+  const [isInitialLoading, setIsInitialLoading] = Solid.createSignal(true)
+  const isAuthenticated = () => !!user()
+
+  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) => {
-      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)
+  }
-  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)
+  }
+
+  return (
+    <AuthContext.Provider
+      value={{ isInitialLoading, isAuthenticated, user, login, logout }}
+    >
+      {props.children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const context = Solid.useContext(AuthContext)
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}
diff --git a/examples/solid/authenticated-routes-firebase/src/firebase/config.ts b/examples/solid/authenticated-routes-firebase/src/firebase/config.ts
@@ -0,0 +1,19 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from 'firebase/app'
+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
+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,
+}
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig)
+export const auth = getAuth(app)
diff --git a/examples/solid/authenticated-routes-firebase/src/main.tsx b/examples/solid/authenticated-routes-firebase/src/main.tsx
@@ -0,0 +1,51 @@
+import { render } from 'solid-js/web'
+import { RouterProvider, createRouter } from '@tanstack/solid-router'
+
+import { routeTree } from './routeTree.gen'
+import { AuthContextProvider, useAuth } from './auth'
+
+import './styles.css'
+
+// Set up a Router instance
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  scrollRestoration: true,
+  context: {
+    auth: undefined!, // This will be set after we wrap the app in AuthContextProvider
+  },
+})
+
+// Register things for typesafety
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+function InnerApp() {
+  const auth = useAuth()
+
+  // If the provider is initially loading, do not render the router
+  if (auth.isInitialLoading()) {
+    return (
+      <div class="flex h-screen w-full items-center justify-center p-4">
+        <div class="size-10 rounded-full border-4 border-gray-200 border-t-foreground animate-spin" />
+      </div>
+    )
+  }
+
+  return <RouterProvider router={router} context={{ auth }} />
+}
+
+function App() {
+  return (
+    <AuthContextProvider>
+      <InnerApp />
+    </AuthContextProvider>
+  )
+}
+
+const rootElement = document.getElementById('app')!
+
+render(() => <App />, rootElement)
diff --git a/examples/solid/authenticated-routes-firebase/src/posts.tsx b/examples/solid/authenticated-routes-firebase/src/posts.tsx
@@ -0,0 +1,50 @@
+import axios from 'redaxios'
+
+async function loaderDelayFn<T>(fn: (...args: Array<any>) => Promise<T> | T) {
+  const delay = Number(sessionStorage.getItem('loaderDelay') ?? 0)
+  const delayPromise = new Promise((r) => setTimeout(r, delay))
+
+  await delayPromise
+  const res = await fn()
+
+  return res
+}
+
+type Invoice = {
+  id: number
+  title: string
+  body: string
+}
+
+let invoices: Array<Invoice> = null!
+
+let invoicesPromise: Promise<void> | undefined = undefined
+
+const ensureInvoices = async () => {
+  if (!invoicesPromise) {
+    invoicesPromise = Promise.resolve().then(async () => {
+      const { data } = await axios.get(
+        'https://jsonplaceholder.typicode.com/posts',
+      )
+      invoices = data.slice(0, 10)
+    })
+  }
+
+  await invoicesPromise
+}
+
+export async function fetchInvoices() {
+  return loaderDelayFn(() => ensureInvoices().then(() => invoices))
+}
+
+export async function fetchInvoiceById(id: number) {
+  return loaderDelayFn(() =>
+    ensureInvoices().then(() => {
+      const invoice = invoices.find((d) => d.id === id)
+      if (!invoice) {
+        throw new Error('Invoice not found')
+      }
+      return invoice
+    }),
+  )
+}