This is a sample application demonstrating how to integrate Asgardeo authentication with TanStack Router using the @asgardeo/tanstack-router package.

• ✅ Authentication with Asgardeo
• ✅ Protected routes using ProtectedRoute component
• ✅ TanStack Router integration
• ✅ TypeScript support
• ✅ Vite for fast development

• Node.js (v18 or higher)
• pnpm
• An Asgardeo account and application

1. Create an account at Asgardeo
2. Create a new Single Page Application (SPA)
3. Note down your:
   • Organization name
   • Client ID
4. Configure the following in your Asgardeo application:
   • Authorized redirect URLs: https://localhost:5173
   • Allowed origins: https://localhost:5173

Create a .env.local file in the root of this sample directory:

cp .env.local.example .env.local

Edit .env.local and add your Asgardeo credentials:

VITE_ASGARDEO_BASE_URL='https://api.asgardeo.io/t/<your_organization_name>'
VITE_ASGARDEO_CLIENT_ID='<your_client_id>'

From the root of the monorepo, run:

pnpm install

cd samples/react-tanstack-router
pnpm dev

The application will be available at https://localhost:5173

src/
├── pages/
│   ├── Home.tsx          # Unprotected home page
│   └── Dashboard.tsx     # Protected dashboard page
├── main.tsx              # App entry point with router configuration
├── index.css             # Global styles
└── vite-env.d.ts        # Vite type definitions

The Dashboard page is protected using the ProtectedRoute component from @asgardeo/tanstack-router:

import {ProtectedRoute} from '@asgardeo/tanstack-router';
import Dashboard from './pages/Dashboard';

const dashboardRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/dashboard',
  component: () => (
    <ProtectedRoute redirectTo="/">
      <Dashboard />
    </ProtectedRoute>
  ),
});

The application uses TanStack Router's imperative API to create routes:

import {createRouter, createRootRoute, createRoute} from '@tanstack/react-router';

const rootRoute = createRootRoute();
const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: Home,
});

const routeTree = rootRoute.addChildren([indexRoute, dashboardRoute]);
const router = createRouter({routeTree});

The app is wrapped with AsgardeoProvider in main.tsx:

<AsgardeoProvider
  baseUrl={import.meta.env.VITE_ASGARDEO_BASE_URL}
  clientId={import.meta.env.VITE_ASGARDEO_CLIENT_ID}
  signInUrl="/signin"
  signUpUrl="/signup"
  scopes="openid profile email"
>
  <RouterProvider router={router} />
</AsgardeoProvider>

1. User visits the home page (unprotected)
2. User clicks "Sign In" button
3. User is redirected to Asgardeo for authentication
4. After successful authentication, user is redirected back to the application
5. User can now access protected routes like the Dashboard
6. Attempting to access protected routes without authentication redirects to the home page

• Asgardeo Documentation
• TanStack Router Documentation
• @asgardeo/react Documentation
• @asgardeo/tanstack-router Package

Apache-2.0