@numa/providers

React context providers and shared hooks that wire authentication, data fetching, theming, and user essentials across all apps.

What’s inside


packages/providers/
├── index.tsx                        # GProviders — root provider wrapper
├── rq.tsx                           # QueryClientProvider (TanStack Query)
├── theme-variables.tsx              # ThemeVariables — CSS variable injection
├── essentials-context.tsx           # EssentialsProvider — user context
├── essentials-splash.tsx            # Loading splash during essentials fetch
├── hydrate-essentials-from-client.tsx  # Client-side /me fallback
├── oidc.ts                          # OIDC configuration
├── oidc-provider.tsx                # OidcProvider — SSO integration
├── user-manager-settings.ts         # OIDC UserManager settings
├── cross-subdomain-user-store.ts    # Cookie-aware OIDC user store
├── sso-essentials.ts                # SSO essentials helpers
├── next-intl-bridge.tsx             # Client-side next-intl wrapper
└── hooks/
    ├── use-user-essentials.ts       # /me query + platform redirect
    ├── use-auth.ts                  # useAuth / useSSO hook
    ├── use-router.ts                # Router hook
    └── use-selected-locale.ts       # Locale selection hook

GProviders

The root provider wrapper that every app’s layout uses:


import GProviders from "@numa/providers";
 
<GProviders locale={lang} messages={messages}>
  {children}
</GProviders>

Internally, GProviders composes:

QueryClientProvider — TanStack Query with singleton client
NextIntlClientProvider — i18n messages for the active locale
OidcProvider — OIDC/SSO authentication (optional requireAuthentication)
UserEssentialsRunner — fetches /me and syncs permissions
ThemeVariables — injects CSS theme variables
Toaster — sonner toast notifications

Authentication

OidcProvider

Uses react-oidc-context + oidc-client-ts for OIDC/SSO:


import { ThemeVariables } from "@numa/providers/theme-variables";
import { useAppEssentials } from "@numa/providers/hooks/use-app-essentials";

When NEXT_PUBLIC_AUTH_COOKIE_DOMAIN is set, the provider uses a shared cookie-aware user store (cross-subdomain-user-store.ts) for multi-subdomain SSO.

Token handling

Tokens stored as cookies: VAR_ACCESS_TOKEN, VAR_REFRESH_TOKEN
oidc-provider.tsx syncs OIDC tokens to cookies via setTokens from @numa/api/axios-instance

EssentialsProvider

Provides the authenticated user context to private routes:


import { useAppEssentials } from "@numa/providers/hooks/use-user-essentials";
 
const { user, platforms } = useAppEssentials();

How it works

Private layout fetches /me server-side (fetchUserEssentials)
User data passed to EssentialsProvider
If SSR fetch fails, HydrateEssentialsFromClient loads /me client-side
On every /me success, syncPermittedPlatformsCookieFromMe updates the permissions cookie

Hooks

Hook	Purpose
`useAppEssentials`	Access user profile and platform permissions
`useAuth` / `useSSO`	Authentication state and SSO helpers
`useRouterQuery`	Router with query parameter helpers
`useSelectedLocale`	Current locale and locale switching