Clerk Setup with authenticated routes

import { RouterProvider, createRouter } from '@tanstack/react-router';
import { useAuth } from '@clerk/clerk-react';
import Loading from './pages/Loading';
import useAxios from './utils/useAxios';
import ErrorPage from './pages/ErrorPage';
import NotFound from './pages/NotFound';
import { routeTree } from './routeTree.gen';

const router = createRouter({
    routeTree,
    defaultPreload: 'intent',
    defaultNotFoundComponent: NotFound,
    defaultPendingComponent: Loading,
    defaultErrorComponent: ({ error }) => <ErrorPage error={error} />,
    context: {
        auth: undefined,
        axios: undefined,
    },
});

function App() {
    const auth = useAuth();
    const axios = useAxios();

    if (!auth.isLoaded) {
        return <Loading />;
    }

    return <RouterProvider router={router} context={{ auth, axios }} />;
}

export default App;

import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';

export const Route = createFileRoute('/_auth')({
    beforeLoad: ({ context }) => {
        if (!context.auth.isSignedIn) {
            throw redirect({
                to: '/sign-in',
                search: {
                    redirect_url: location.pathname,
                },
            });
        }
    },
    component: AuthRoute,
});

function AuthRoute() {
    return <Outlet />;
}