rich-copper

Authentication / Router question

Hi all, I'm new to Tanstack router and had some questions around setting up auth/nonAuth routes. I saw the post Tanner made in his docs regarding auth routing and I'm trying to get that to work but it doesn't seem to be. I split up my routes so root has Auth and NonAuth, where both of those have all non authenticated routes and authenticated routes. I want it so if the user goes to the root domain "/" without specifying a path it will route them to /dashboard if they're authenticated and /login if they are not. Also, if they are not authenticated and go to /dashboard or authenticated routes it should route them back to login, and if they are authenticated and try to go to /login or nonauthenticated routes it should route them to dashboard. Currently my code in the beforeLoad "to" value throws an error:TS2322: Type "/login" is not assignable to type "/" it looks like it only allows / for some reason here is my code: https://ctxt.io/2/AAAw9pIHFQ

3 Replies

absent-sapphire•2y ago

this looks like the same root cause as here: https://github.com/TanStack/router/issues/896#issuecomment-1872412006

GitHub

Typescript error, some route paths are reported as invalid · Issue ...

Describe the bug Some context in thread https://discord.com/channels/719702312431386674/1190162020440481844 Stackblitz link even though /account/setting is valid it is reported as in valid. Type &#...

rich-copperOP•2y ago

@Manuel Schiller Thanks! that did the trick Silly question but there seem to be a few TS errors here https://ctxt.io/2/AAAwRDSNEA around

const indexRoute = new Route({
    getParentRoute: () => rootRoute,
    path: '/',
    beforeLoad: async () => {
        if (authenticated) {
            throw redirect({ to: '/dashboard' });
        } else {
            throw redirect({ to: '/login' });
        }
    },
});

const indexRoute = new Route({
    getParentRoute: () => rootRoute,
    path: '/',
    beforeLoad: async () => {
        if (authenticated) {
            throw redirect({ to: '/dashboard' });
        } else {
            throw redirect({ to: '/login' });
        }
    },
});

I'm trying to make it so the root domain routes to /dashboard or /login based on authentication on top of the redirects but not sure if this is setup correctly. it's throwing a very lengthy TS error here

const routeTree = rootRoute.addChildren([
    indexRoute,
    authLayoutRoute.addChildren([dashboardRoute, faqRoute, scheduleRoute]),
    nonAuthLayoutRoute.addChildren([loginRoute, registerRoute, verifyRoute, forgotPasswordRoute]),
]);

const routeTree = rootRoute.addChildren([
    indexRoute,
    authLayoutRoute.addChildren([dashboardRoute, faqRoute, scheduleRoute]),
    nonAuthLayoutRoute.addChildren([loginRoute, registerRoute, verifyRoute, forgotPasswordRoute]),
]);

Thanks again !

absent-sapphire•2y ago

There was a bug causing this issue, I fixed it in v 1.1.11

Gaming

Programming

Authentication / Router question

Did you find this page helpful?