TanStack Router

@asgardeo/tanstack-router is a supplementary package that provides seamless integration between Asgardeo authentication and TanStack Router. It offers components to easily protect routes and handle authentication flows in your React applications using TanStack Router.

Installation

npm

npm install @asgardeo/tanstack-router

yarn

yarn add @asgardeo/tanstack-router

pnpm

pnpm add @asgardeo/tanstack-router

Basic Setup with ProtectedRoute

src/App.tsx

import React from 'react'
import { createRouter, createRoute, createRootRoute, RouterProvider } from '@tanstack/react-router'
import { AsgardeoProvider } from '@asgardeo/react'
import { ProtectedRoute } from '@asgardeo/tanstack-router'
import Dashboard from './components/Dashboard'
import Profile from './components/Profile'
import SignIn from './components/SignIn'

const rootRoute = createRootRoute({
  component: () => <div>Root Layout</div>,
})

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => <div>Public Home Page</div>,
})

const signinRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/signin',
  component: SignIn,
})

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

const profileRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/profile',
  component: () => (
    <ProtectedRoute redirectTo="/signin">
      <Profile />
    </ProtectedRoute>
  ),
})

const routeTree = rootRoute.addChildren([indexRoute, signinRoute, dashboardRoute, profileRoute])

const router = createRouter({ routeTree })

function App() {
  return (
    <AsgardeoProvider
      baseUrl="https://api.asgardeo.io/t/your-org"
      clientId="your-client-id"
      platform="AsgardeoV2"
    >
      <RouterProvider router={router} />
    </AsgardeoProvider>
  )
}

export default App

Custom Fallback and Loading States

src/routes.tsx

import { ProtectedRoute } from '@asgardeo/tanstack-router'

// Redirect to custom login page
const dashboardRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/dashboard',
  component: () => (
    <ProtectedRoute redirectTo="/login">
      <Dashboard />
    </ProtectedRoute>
  ),
})

// Custom fallback component
const dashboardRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/dashboard',
  component: () => (
    <ProtectedRoute
      fallback={
        <div className="auth-required">
          <h2>Please sign in</h2>
          <p>You need to be signed in to access this page.</p>
        </div>
      }
    >
      <Dashboard />
    </ProtectedRoute>
  ),
})

// Custom loading state
const dashboardRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/dashboard',
  component: () => (
    <ProtectedRoute redirectTo="/signin" loader={<div className="spinner">Loading...</div>}>
      <Dashboard />
    </ProtectedRoute>
  ),
})

Integration with Layouts

src/App.tsx

import React from 'react'
import { createRouter, createRoute, createRootRoute, RouterProvider } from '@tanstack/react-router'
import { AsgardeoProvider } from '@asgardeo/react'
import { ProtectedRoute } from '@asgardeo/tanstack-router'
import Home from './components/Home'
import About from './components/About'
import SignIn from './components/SignIn'
import AppLayout from './components/AppLayout'
import Dashboard from './components/Dashboard'
import Profile from './components/Profile'
import Settings from './components/Settings'

const rootRoute = createRootRoute({
  component: () => <div>Root Layout</div>,
})

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

const aboutRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/about',
  component: About,
})

const signinRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/signin',
  component: SignIn,
})

// Protected routes with layout
const appLayoutRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/app',
  component: AppLayout,
})

const appDashboardRoute = createRoute({
  getParentRoute: () => appLayoutRoute,
  path: '/dashboard',
  component: () => (
    <ProtectedRoute redirectTo="/signin">
      <Dashboard />
    </ProtectedRoute>
  ),
})

const appProfileRoute = createRoute({
  getParentRoute: () => appLayoutRoute,
  path: '/profile',
  component: () => (
    <ProtectedRoute redirectTo="/signin">
      <Profile />
    </ProtectedRoute>
  ),
})

const appSettingsRoute = createRoute({
  getParentRoute: () => appLayoutRoute,
  path: '/settings',
  component: () => (
    <ProtectedRoute redirectTo="/signin">
      <Settings />
    </ProtectedRoute>
  ),
})

const routeTree = rootRoute.addChildren([
  indexRoute,
  aboutRoute,
  signinRoute,
  appLayoutRoute.addChildren([appDashboardRoute, appProfileRoute, appSettingsRoute]),
])

const router = createRouter({ routeTree })

function App() {
  return (
    <AsgardeoProvider
      baseUrl="https://api.asgardeo.io/t/your-org"
      clientId="your-client-id"
      platform="AsgardeoV2"
    >
      <RouterProvider router={router} />
    </AsgardeoProvider>
  )
}

export default App