Current Limitation

Currently, the Asgardeo React SDK only provides a wrapper package for React Router (@asgardeo/react-router) [1] to secure routes with authentication. Applications using other router libraries like TanStack Router do not have first-class support, which creates integration challenges:

Current State:

• No Asgardeo package exists for TanStack Router
• Developers need to manually wire authentication logic (useAsgardeo) into TanStack Router route definitions
• No ProtectedRoute equivalent for TanStack Router
• Repeated boilerplate code for securing routes
• Inconsistent developer experience compared to @asgardeo/react-router

[1] https://wso2.com/asgardeo/docs/sdks/react/guides/protecting-routes/

Suggested Improvement

Create a new package: @asgardeo/tanstack-router
This should provide seamless integration between Asgardeo authentication and TanStack Router, similar to what @asgardeo/react-router offers.

Proposed Features:

1. ProtectedRoute Component / Wrapper

   • Drop-in support for protecting TanStack Router routes

   • Example:

     import { createRouteConfig, Router } from '@tanstack/react-router'
     import { ProtectedRoute } from '@asgardeo/tanstack-router'
     import { Dashboard } from './Dashboard'
     
     const dashboardRoute = createRouteConfig({
       path: '/dashboard',
       component: () => (
         <ProtectedRoute redirectTo="/signin">
           <Dashboard />
         </ProtectedRoute>
       )
     })

2. Consistent Developer Experience

   • Align with the existing @asgardeo/react-router API to minimize learning curve

3. Samples

4. Documentation

Please select the package issue is related to

@asgardeo/tanstack-router

Version

current

Reporter Checklist

• I have searched the existing issues and this is not a duplicate.
• I have provided all the necessary information.
• I have verified the improvement is not available in the latest version of the package.