> ## Documentation Index > Fetch the complete documentation index at: https://docs.nesolva.com/llms.txt > Use this file to discover all available pages before exploring further. # Quickstart > Wire ailita-library into a new app in under 10 minutes. By the end of this guide you will have `AilitaProvider` wrapping your app, `AuthGuard` protecting a route, `LoginForm` handling authentication, and `useAuth` displaying the current user. ## What you'll build * `providers.tsx` — AilitaProvider wrapper with tenant config * `(protected)/layout.tsx` or `ProtectedRoute.tsx` — AuthGuard route protection * `login/page.tsx` or `LoginPage.tsx` — Login page with LoginForm * `dashboard/page.tsx` or `DashboardPage.tsx` — Protected page using useAuth *** See [Installation](/ailita/installation) for full setup details including Tailwind CSS. ```bash theme={null} npm install ailita-library ``` ```tsx theme={null} // Root layout or entry file import 'ailita-library/styles' ``` Always include `onSessionExpired`. Without it, expired sessions silently break the app — users get stuck with no feedback and no path back to login. ```tsx Next.js App Router theme={null} // app/providers.tsx 'use client' import { AilitaProvider } from 'ailita-library' import { useRouter } from 'next/navigation' export function Providers({ children }: { children: React.ReactNode }) { const router = useRouter() return ( router.push('/login')} loadingFallback={

} errorFallback={

Could not reach the server.

} > {children} ) } ``` ```tsx React Router theme={null} // src/providers.tsx import { AilitaProvider } from 'ailita-library' import { useNavigate } from 'react-router-dom' export function AppProviders({ children }: { children: React.ReactNode }) { const navigate = useNavigate() return ( navigate('/login')} loadingFallback={

} errorFallback={

Could not reach the server.

} > {children} ) } ``` ```tsx Next.js App Router theme={null} // app/layout.tsx import { Providers } from './providers' import 'ailita-library/styles' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } ``` ```tsx React Router theme={null} // src/main.tsx import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import { BrowserRouter } from 'react-router-dom' import { AppProviders } from './providers' import App from './App' import 'ailita-library/styles' createRoot(document.getElementById('root')!).render( ) ``` Always include `loadingFallback`. Omitting it causes a redirect flash for every authenticated user on each page load during the \~200–500ms silent token refresh on mount. ```tsx Next.js App Router theme={null} // app/(protected)/layout.tsx 'use client' import { AuthGuard } from 'ailita-library' import { useRouter } from 'next/navigation' import { useEffect } from 'react' export default function ProtectedLayout({ children }: { children: React.ReactNode }) { return ( } loadingFallback={

} > {children} ) } function RedirectToLogin() { const router = useRouter() useEffect(() => { router.push('/login') }, [router]) return null } ``` ```tsx React Router theme={null} // src/components/ProtectedRoute.tsx import { AuthGuard } from 'ailita-library' import { Navigate } from 'react-router-dom' export function ProtectedRoute({ children }: { children: React.ReactNode }) { return ( } loadingFallback={

} > {children} ) } ``` ```tsx theme={null} import { LoginForm } from 'ailita-library' // Next.js: app/login/page.tsx | React Router: src/pages/LoginPage.tsx export default function LoginPage() { return (

) } ``` `LoginForm` handles all login states internally: password submission, OTP challenges, TOTP verification, and TOTP setup on first admin login. No additional wiring required for the basic case. ```tsx theme={null} import { useAuth } from 'ailita-library' export default function DashboardPage() { const { user, logout } = useAuth() return (

Welcome, {user?.firstName}

{user?.email}

) } ``` `user` is `null` on initial render while the silent refresh runs. `AuthGuard` ensures this page only renders when `isAuthenticated` is `true`, so by the time this component mounts, `user` will be populated. *** ## Next steps Full prop reference for clientId, baseUrl, onSessionExpired, and more. Role-based access, loadingFallback, and the UX-gate security model.