How to setup a proper admin dashbaord with tanstack-start

[gpats61]

Hi everyone 👋

I’ve set up a TanStack Start app using: npm create @tanstack/start@latest

Setup Steps I followed

┌  Let's configure your TanStack Start application
│
◇  What would you like to name your project?
│  frontend
│
◇  Would you like to use Tailwind CSS?
│  Yes
│
◇  Select toolchain
│  ESLint
│
◇  What add-ons would you like for your project?
│  Shadcn, Table, Query
│
◇  Would you like any examples?
│  none
│
◇  Initialized git repository

Goal

I want to have two main layouts in my project to maintain a consistent design structure:

• AuthLayout → For all authentication-related pages (Login, Signup, etc.)
• DashboardLayout → For all protected pages (after login)

Desired Routing Structure

Auth Routes

Page	Path
Login	/
Signup	/signup
Forget Password	/forget-password

Dashboard Routes

Page	Path
Dashboard Home	/
Users	/user

The Main Problem

I’m struggling to conditionally render the correct layout (either AuthLayout or DashboardLayout) on the base route (/) depending on whether the user is authenticated.
Basically:

• If the user is not authenticated → show AuthLayout with Login page
• If the user is authenticated → show DashboardLayout with Dashboard page

I’ve tried multiple approaches but couldn’t make it work with createFileRoute

What I Need Help With

Could someone please explain or show an example of how to structure my files and routes to achieve this layout setup in TanStack Start?
You can just mimic user authentication with a boolean constant for now.

Thanks in Advance!

[jherr]

This is a great discussion. But it would be better placed in the Router repo. This repo is about bootstrapping applications. The Router repo is for discussions about the best application of the router.

[gpats61]

Ok thanks