Router Guards

import { createFileRoute, redirect } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { auth } from '@clerk/tanstack-react-start/server'

const checkAuth = createServerFn().handler(async () => {
  const { isAuthenticated, userId } = await auth()
  if (!isAuthenticated) {
    throw redirect({ to: '/sign-in' })
  }
  return { userId }
})

export const Route = createFileRoute('/dashboard')({
  beforeLoad: async () => await checkAuth(),
})

export const Route = createFileRoute('/dashboard')({
  beforeLoad: async () => {
    const { userId } = await checkAuth()
    return { userId }
  },
  loader: async ({ context }) => {
    const { userId } = context
    const data = await fetchUserData(userId)
    return { data }
  },
  component: Dashboard,
})

function Dashboard() {
  const { data } = Route.useLoaderData()
  return <div>{JSON.stringify(data)}</div>
}

// src/routes/_authenticated.tsx
import { createFileRoute, redirect, Outlet } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { auth } from '@clerk/tanstack-react-start/server'

const getAuth = createServerFn().handler(async () => {
  const { isAuthenticated, userId } = await auth()
  if (!isAuthenticated) {
    throw redirect({ to: '/sign-in' })
  }
  return { userId }
})

export const Route = createFileRoute('/_authenticated')({
  beforeLoad: async () => await getAuth(),
  component: () => <Outlet />,
})

throw redirect({
  to: '/sign-in',
  search: { redirect: window.location.pathname },
})