TanStack Router adapter for Wacht authentication library
npm install @wacht/tanstack-routerTanStack Router adapter for Wacht authentication library. This package provides platform-specific routing integration for TanStack Router applications using the Wacht authentication system.
``bash`
pnpm add @wacht/tanstack-router @wacht/jsx @tanstack/react-router
`tsx
import React from 'react';
import { RouterProvider, createRouter } from '@tanstack/react-router';
import { DeploymentProvider } from '@wacht/tanstack-router';
import { routeTree } from './routeTree.gen';
const router = createRouter({ routeTree });
function App() {
return (
);
}
`
You can also place the DeploymentProvider inside your root route:
`tsx
// routes/__root.tsx
import { Outlet } from '@tanstack/react-router';
import { DeploymentProvider } from '@wacht/tanstack-router';
export function Root() {
return (
);
}
`
Once the platform adapter is configured, all Wacht navigation components will automatically use TanStack Router for navigation:
`tsx
import { NavigateToSignIn, NavigationLink } from '@wacht/tanstack-router';
function MyComponent() {
return (
{/ This will redirect to sign-in using TanStack Router /}
$3
`tsx
import { useNavigation } from '@wacht/tanstack-router';function MyComponent() {
const { navigate } = useNavigation();
const handleClick = () => {
// This will use TanStack Router navigation
navigate('/profile', { replace: true });
};
return ;
}
`$3
All Wacht authentication components work seamlessly with TanStack Router:
`tsx
import { SignInForm, UserButton, SignedIn, SignedOut } from '@wacht/tanstack-router';function AuthRoute() {
return (
<>
>
);
}
`API
$3
The main component that wraps your TanStack Router application with Wacht authentication. Automatically handles TanStack Router integration.
Props:
-
publicKey: string - Your Wacht deployment public key
- children: ReactNode - Your application contentFeatures:
- Automatic TanStack Router context detection
- Smart fallback to browser APIs when Router context not available
- Type-safe navigation with TanStack Router
- Zero configuration required
$3
For advanced use cases where you need direct access to the platform adapter.
Returns:
PlatformAdapterExample:
`tsx
import { createTanStackRouterAdapter } from '@wacht/tanstack-router';
import { DeploymentProvider as BaseProvider } from '@wacht/jsx';function CustomProvider({ children, publicKey }) {
const adapter = createTanStackRouterAdapter();
return (
{children}
);
}
``- React 19+
- @tanstack/react-router 1.0+
- @wacht/jsx
TanStack Router provides excellent TypeScript support. The Wacht adapter maintains full type safety when used with TanStack Router's type-safe navigation.
| Feature | @wacht/nextjs | @wacht/react-router | @wacht/tanstack-router |
|---------|---------------|---------------------|------------------------|
| Type-safe routing | ✅ | ❌ | ✅ |
| File-based routing | ✅ | ❌ | ✅ |
| Server-side rendering | ✅ | ❌ | ❌ |
| Client-side only | ❌ | ✅ | ✅ |
| Search params | ✅ | ✅ | ✅ (Type-safe) |
MIT