Routing reference

// Authentication required
<ProtectedRoute>
  <MyPage />
</ProtectedRoute>

// Scope-based (user must have at least one of the listed scopes)
<ProtectedRoute requiredScopes={["users:viewAll", "roles:view"]}>
  <AdminPage />
</ProtectedRoute>

"/tasks/:id": {
  render: (routeParams) => <TaskPage id={routeParams?.id ?? ""} />,
},

"/projects/:owner/:repo": {
  render: (routeParams, searchParams) => (
    <ProjectPage owner={routeParams?.owner ?? ""} repo={routeParams?.repo ?? ""} />
  ),
},

<a href="/tasks">Tasks</a>
<a href="/tasks/123">Task 123</a>

import { useApp } from "@synthetiq/app-framework/web";

function MyComponent() {
  const { basePath } = useApp();

  const navigateTo = (path: string) => {
    window.history.pushState({}, "", basePath.concat(path));
    window.dispatchEvent(new PopStateEvent("popstate"));
  };

  return <button onClick={() => navigateTo("/settings")}>Settings</button>;
}

import { useApp } from "@synthetiq/app-framework/web";

function Layout({ children }: { children: React.ReactNode }) {
  const { basePath } = useApp();
  const currentPath = window.location.pathname.replace(basePath, '') || '/';

  return (
    <div className="flex">
      <nav>
        <a href="/" className={currentPath === '/' ? 'bg-background-secondary' : ''}>Dashboard</a>
        <a href="/tasks" className={currentPath.startsWith('/tasks') ? 'bg-background-secondary' : ''}>Tasks</a>
      </nav>
      <main>{children}</main>
    </div>
  );
}

import { useAuth } from "@synthetiq/app-framework/web";

const {
  user,            // SynthetiqUser | null
  scopes,          // string[] — user's permission scopes
  loading,         // boolean — auth initialization in progress
  isAuthenticated, // boolean
  hasAppAccess,    // boolean — whether user can access this app
  currentOrgId,    // string | null — selected organization
  organizations,   // { id: string; name: string }[] — user's orgs
  setCurrentOrgId, // (orgId: string) => void — used by built-in UserMenu org switcher
  login,           // () => Promise<void>
  logout,          // () => void
} = useAuth();

const { scopes } = useAuth();
const hasViewAll = scopes.includes('tasks:viewAll');

const { data } = hasViewAll
  ? trpcReact.tasks.getAllTasks.useQuery()
  : trpcReact.tasks.getMyTasks.useQuery();