T
TanStack•12mo ago
other-emerald

Clerk Setup with authenticated routes

I'm experiencing some issues with setting up my authenticated routes with Clerk. I see the examples with Start and the createServerFn function but I am only using react router. In all of the examples the authentication method seems to be fully syncronous, but with Clerk and the useAuth() method, the data may not be immediately loaded. The workaround i found was to check if auth.isLoaded before proceeding with my RouterProvider. But this creates an annoying extra loading page. 
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 { 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;
then my _auth route using the auth context in beforeLoad: 
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 />;
}
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 />;
}
Is there a more conventional method that I am just missing or is this the best solution? Thanks so much!
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?