Skip to Content
AuthReact (CheckToken)

React (@sumx/ssr-auth-react)

Client auth shell: CheckToken, dependency injection, and LoginSkeleton.

Install

pnpm add @sumx/ssr-auth-react @sumx/ui

Peers: react, react-dom, @sumx/ui, @sumx/ssr-auth-core (transitive types/utils), TanStack Query (via portal deps).

CheckToken (default export)

Wrap protected app content in _app.tsx:

import CheckToken from '@sumx/ssr-auth-react';
import { CheckTokenDepsProvider } from '@sumx/ssr-auth-react';
import { buildCheckTokenPortalDeps } from '@/hoc/check-token/build-check-token-portal-deps';
 
const deps = buildCheckTokenPortalDeps(queryClient);
 
export default function App({ Component, pageProps }) {
  return (
    <CheckTokenDepsProvider value={deps}>
      <CheckToken>
        <Component {...pageProps} />
      </CheckToken>
    </CheckTokenDepsProvider>
  );
}

Behavior

  1. Shows LoginSkeleton while OIDC / session sync runs.
  2. Redirects unauthenticated users to IdP (respects return path).
  3. Syncs with GET/POST session API.
  4. Shows cross-tab session Dialog from @sumx/ui when another tab logs in.
  5. Hard reload on pipeline identity change.

CheckTokenDepsProvider / useCheckTokenDeps

Host app supplies all portal-specific integrations via CheckTokenPortalDeps:

AreaFields
EnvgetPublicEnv(), siteConfig
CookiescookieKeys, cookieUtils
ProfilefetchUserProfile, getProfile
StoresuseLoggedInStore, useCommonStore, usePermissionStore, useGlobalFilterStore
QueryuseQueryClient, permissionGetAllQueryKey
HTTPcaptureAndApplyUserRequestContextHeaders, cancelPendingBrowserApiRequests

Type: CheckTokenPortalDeps in check-token-deps.types.ts.

Portal builds this once in build-check-token-portal-deps.ts — do not bundle a second TanStack Query instance.

LoginSkeleton

import { LoginSkeleton } from '@sumx/ssr-auth-react';
 
<LoginSkeleton />

Lottie animation bundled in the package (no extra asset copy in portal). Portal may re-export from @/shared/components/.../login-skeleton.

UI dependencies

API route handlersOverview