SPA login system with only protected routes

[wolflu05]

Hello,

thank you for this awesome router and type safety.

I'm trying to build a SPA which has only protected routes. My goal is to have routes like /login and /register or the protected routes like /dashboard, /books, ... . My goal is after loading to check if the user is logged in (check session storage for a jwt token, then call an API endpoint to validate the session). If the session is not valid, redirect from / to /login (on the login page is a link to register). Then if the user logs in, the login and register route is not accessible and only the /dashboard, ... routes. But I'm currently a bit flooded from that new technology and have no idea how to implement this. I would be happy about hints for this use case.

[Patrick-Ullrich]

The Kitchen Sink Authenticated file should have everything you need:
https://tanstack.com/router/v1/docs/examples/react/kitchen-sink-multi-file?file=src%2Fmain.tsx

Specifically this file:
src/routes/authenticated/index.tsx

Your route config may look something like this:

// 1. Create an Authenticated layout instead of a route
const authRoute = rootRoute.createRoute({
  component: AuthenticatedLayout, // From the kitchen sink
  id: 'authenticated-layout',
});

export const authenticatedIndexRoute = authenticatedRoute.createRoute({
  path: '/', // home
  component: Home,
})

export const authenticatedBooksRoute = authenticatedRoute.createRoute({
  path: '/books', // home
  component: Books,
})

// 2. Unauthenticated routes
const unauthenticatedRoute = rootRoute.createRoute({
  path: '/login',
  component: Login
})

Lastly implement your auth. You can take some inspiration from the Kitchen sink example

[wolflu05]

Thank you for your answer, I already discovered the kitchen sink example, but didn't managed to implement this without any sub routes. My login should be directly at the top level, I have no unauthenticated layouts. I don't want to have for each authenticated Lay-out a subroute like /authenticated/books. And I also don't want to even load the authenticated routes if the user is not authenticated (and other direction).

[Patrick-Ullrich]

Because the authRoute in my example does not have a path (it's just an id), your route won't be /authenticated/books but simply /books.
See more: https://tanstack.com/router/v1/docs/guide/layout-routes

Not loading the routes can be done using lazy loading.
e.g.

const booksRoute = authRoute.createRoute({
  path: '/books',
  component: lazy(() => import('./BooksPage')),
});

Not using another layout is fine, you can just skip it and add it straight to the root.

const rootRoute = createRouteConfig();

// Adds the layout **without** a route path
const authRoute = rootRoute.createRoute({
  component: AuthenticatedLayout, // From the kitchen sink
  id: 'authenticated-layout', // unique identifier needed, since we dont have a path
});

// Registers the books  page to `/books` with an Authenticated Layout
export const booksRoute = authenticatedRoute.createRoute({
  path: '/books', // home
  component: lazy(() => import('./BooksPage')), // lazy loaded
})

export const loginRoute = rootRoute.createRoute({
  path: '/' (or /login or whatever)
  component: Login,
})

// This gives us:
// / => Login (no layout)
// /books => Books (with AuthenticatedLayout)
const routeConfig = rootRoute.addChildren([loginRoute, authRoute.addChildren([booksRoute])]);

export const router = createReactRouter({ routeConfig });

Just typed it in here, but that should get you close. If it doesn't work you could toss up a stackblitz and point you in the right direction.

[wolflu05]

I think a combination of both of your answers could be my solution. But where do I put this checking function from the other answer in your example?

[maxwellwalin]

I liked the example in the Kitchen Sink, but I didn't want my protected routes to even load at all if the user was not authenticated.

Here is what I implemented to accomplish this:

async function protectedRouteBeforeLoad() {
  try {
    // validate token
    await validateToken();

    // if there is a current session, validateToken returns immediately (for performace),
    // but if there isn't then it makes an API call to validate the token
  } catch {
    // if there is no session AND validate token fails, redirect to signin
    router.navigate({
      to: '/signin',
    });
  }
}

You would put this on the { beforeLoad } option for your protected route. Works like a charm for me.

BONUS - use react query for performance

async function protectedRouteBeforeLoad() {
  try {
    // validate token
   queryClient.getQueryData<TSession>(queryKeys.session()) ??
      (await queryClient.fetchQuery(queryKeys.session(), validateToken));

    // if there is session data, it will immediately resolve the try and load the route,
    // if there isn't, call the validateToken() API, which throws an error if the token is invalid
  } catch {
    // if there is no session AND validate token fails, redirect to signin
    router.navigate({
      to: '/signin',
    });
  }
}

[maxwellwalin]

Got it. I was actually still on v0.28 so I didn't even see the onLoadError option! Just upgraded and updated my answer. Thanks, Tanner.

[wolflu05]

Thank you all for your answer this now looks promising. I'll try to implement this in the next days. But I still have one question left. What is the use of this declare module thing, I already discovered this a few times in the examples, but there commented out.

[maxwellwalin]

I've found that it is currently necessary in order to get type safety when navigating to routes. Without it, you could

router.navigate({ to: '/anything and it won't throw a type error' })

But when you declare the Register Router interface, it will throw a type error if the route does not match any configured routes.

Tanner will have a much better answer than I do, but it is definitely necessary for typesafety currently.

[tannerlinsley]

It’s not commented out any more, and is 100% recommended if not required now. Essentially this is what makes the module imports like Link and useMatch magically type safe. Without it, they wouldnt know about your routes and you would be forced to pass your router instance around everywhere.

[wolflu05]

Ok. This makes sense now. But is there really no simpler solution than having to add this?

[vijaypushkin]

For anyone using beta version or later, the Kitchen Sink example has been updated to newer APIs.

TL;DR;

const authenticatedRoute = new Route({
  getParentRoute: () => rootRoute,
  path: 'authenticated',
  component: function Auth() {
    const auth = useAuth()
 
    return auth.status === 'loggedIn' ? (
      <Outlet />
    ) : (
      <div>
        <div>You must log in!</div>
      </div>
    )
  },
})

export const authenticatedIndexRoute = new Route({
  getParentRoute: () => authenticatedRoute,
  path: '/',
  component: function Authenticated() {
    return (
      <div>
        You're authenticated!
      </div>
    )
  },
})

const routeTree = rootRoute.addChildren([
  publicRoute,
  authenticatedRoute.addChildren([authenticatedIndexRoute]),
])