Tanstack auth context not working?

Uncaught Error: useAuth must be used within an AuthProvider

Uncaught Error: useAuth must be used within an AuthProvider

import 'mapbox-gl/dist/mapbox-gl.css'
import './styles/old-tailwind.css'
import './styles/index.css'

import { createRouter, RouterProvider } from '@tanstack/react-router'
import figlet from 'figlet'
import { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'

import standard from '@/assets/figlet/standard'
import { ThemeProvider } from '@/context/theme-provider'

import { ErrorComponent } from './components/error'
import { AuthProvider, useAuth } from './context/auth'
import { routeTree } from './routeTree.gen'

const router = createRouter({
  routeTree,
  context: {
    auth: undefined!, // This will be set after we wrap the app in an AuthProvider
  },
})

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

function App() {
  return (
    <AuthProvider>
      <InnerApp />
    </AuthProvider>
  )
}

/** Inner app inserts auth into the context */
function InnerApp() {
  const auth = useAuth()
  return (
    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
      <RouterProvider
        router={router}
        context={{ auth }}
        defaultErrorComponent={() => (
          <ErrorComponent
            error={{
              displayable_message: 'An unknown error occurred',
              detailed_error: 'An unknown error occurred',
            }}
          />
        )}
      />
    </ThemeProvider>
  )
}

const rootElement = document.getElementById('app')!
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <StrictMode>
      <App />
    </StrictMode>,
  )
}

import 'mapbox-gl/dist/mapbox-gl.css'
import './styles/old-tailwind.css'
import './styles/index.css'

import { createRouter, RouterProvider } from '@tanstack/react-router'
import figlet from 'figlet'
import { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'

import standard from '@/assets/figlet/standard'
import { ThemeProvider } from '@/context/theme-provider'

import { ErrorComponent } from './components/error'
import { AuthProvider, useAuth } from './context/auth'
import { routeTree } from './routeTree.gen'

const router = createRouter({
  routeTree,
  context: {
    auth: undefined!, // This will be set after we wrap the app in an AuthProvider
  },
})

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

function App() {
  return (
    <AuthProvider>
      <InnerApp />
    </AuthProvider>
  )
}

/** Inner app inserts auth into the context */
function InnerApp() {
  const auth = useAuth()
  return (
    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
      <RouterProvider
        router={router}
        context={{ auth }}
        defaultErrorComponent={() => (
          <ErrorComponent
            error={{
              displayable_message: 'An unknown error occurred',
              detailed_error: 'An unknown error occurred',
            }}
          />
        )}
      />
    </ThemeProvider>
  )
}

const rootElement = document.getElementById('app')!
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <StrictMode>
      <App />
    </StrictMode>,
  )
}