@byline/host-tanstack-start 4.19.0 → 5.1.0

package/dist/server-fns/singletons/restore-version.d.ts

@@ -5,10 +5,14 @@
  *
  * Copyright (c) Infonomic Company Limited
  */
-export declare const restoreSingletonVersion: import("@tanstack/react-start").RequiredFetcher<undefined, (input: {
+export declare const restoreSingletonVersion: import("@tanstack/react-start").RequiredFetcher<readonly [import("@tanstack/react-start").FunctionMiddlewareAfterServer<{}, unknown, undefined, undefined, {
+    bylineExpectedSessionId: string | null;
+}, undefined, undefined>], (input: {
+    expectedRevision: number;
     singleton: string;
     versionId: string;
 }) => {
+    expectedRevision: number;
     singleton: string;
     versionId: string;
 }, Promise<import("@byline/core").SingletonSaveResult>>;

package/dist/server-fns/singletons/restore-version.js

@@ -1,16 +1,22 @@
 import { createServerFn } from "@tanstack/react-start";
 import { getAdminBylineClient } from "@byline/client/server";
+import { adminSessionMiddleware } from "../../integrations/session-middleware.js";
 import { toCommittedDocumentHookFailureResponse } from "../collections/save-outcome.js";
+import { withDocumentMutationErrors } from "../document-mutation-errors.js";
 import { serialise } from "../serialise.js";
 const restoreSingletonVersion = createServerFn({
     method: 'POST'
-}).validator((input)=>input).handler(async ({ data })=>{
+}).middleware([
+    adminSessionMiddleware
+]).validator((input)=>input).handler(withDocumentMutationErrors(async ({ data })=>{
     try {
-        return serialise(await getAdminBylineClient().singleton(data.singleton).restoreVersion(data.versionId));
+        return serialise(await getAdminBylineClient().singleton(data.singleton).restoreVersion(data.versionId, {
+            expectedRevision: data.expectedRevision
+        }));
     } catch (error) {
         const committedFailure = toCommittedDocumentHookFailureResponse(error);
         if (null != committedFailure) return committedFailure;
         throw error;
     }
-});
+}));
 export { restoreSingletonVersion };

package/dist/server-fns/singletons/schedule-publish.d.ts

@@ -5,12 +5,18 @@
  *
  * Copyright (c) Infonomic Company Limited
  */
-export declare const scheduleSingletonPublish: import("@tanstack/react-start").RequiredFetcher<undefined, (input: {
+export declare const scheduleSingletonPublish: import("@tanstack/react-start").RequiredFetcher<readonly [import("@tanstack/react-start").FunctionMiddlewareAfterServer<{}, unknown, undefined, undefined, {
+    bylineExpectedSessionId: string | null;
+}, undefined, undefined>], (input: {
+    expectedRevision: number;
     singleton: string;
     publishAt: string;
     expectedVersionId: string;
 }) => {
+    expectedRevision: number;
     singleton: string;
     publishAt: string;
     expectedVersionId: string;
-}, Promise<import("@byline/client").DocumentPublishScheduleInfo>>;
+}, Promise<import("@byline/client").DocumentPublishScheduleInfo & {
+    revision: number;
+}>>;

package/dist/server-fns/singletons/schedule-publish.js

@@ -1,10 +1,15 @@
 import { createServerFn } from "@tanstack/react-start";
 import { getAdminBylineClient } from "@byline/client/server";
+import { adminSessionMiddleware } from "../../integrations/session-middleware.js";
+import { withDocumentMutationErrors } from "../document-mutation-errors.js";
 import { serialise } from "../serialise.js";
 const scheduleSingletonPublish = createServerFn({
     method: 'POST'
-}).validator((input)=>input).handler(async ({ data })=>serialise(await getAdminBylineClient().singleton(data.singleton).schedulePublish({
+}).middleware([
+    adminSessionMiddleware
+]).validator((input)=>input).handler(withDocumentMutationErrors(async ({ data })=>serialise(await getAdminBylineClient().singleton(data.singleton).schedulePublish({
         publishAt: data.publishAt,
+        expectedRevision: data.expectedRevision,
         expectedVersionId: data.expectedVersionId
-    })));
+    }))));
 export { scheduleSingletonPublish };

package/dist/server-fns/singletons/unpublish.d.ts

@@ -5,8 +5,12 @@
  *
  * Copyright (c) Infonomic Company Limited
  */
-export declare const unpublishSingleton: import("@tanstack/react-start").RequiredFetcher<undefined, (input: {
+export declare const unpublishSingleton: import("@tanstack/react-start").RequiredFetcher<readonly [import("@tanstack/react-start").FunctionMiddlewareAfterServer<{}, unknown, undefined, undefined, {
+    bylineExpectedSessionId: string | null;
+}, undefined, undefined>], (input: {
+    expectedRevision: number;
     singleton: string;
 }) => {
+    expectedRevision: number;
     singleton: string;
 }, Promise<import("@byline/core").UnpublishResult>>;

package/dist/server-fns/singletons/unpublish.js

@@ -1,7 +1,13 @@
 import { createServerFn } from "@tanstack/react-start";
 import { getAdminBylineClient } from "@byline/client/server";
+import { adminSessionMiddleware } from "../../integrations/session-middleware.js";
+import { withDocumentMutationErrors } from "../document-mutation-errors.js";
 import { serialise } from "../serialise.js";
 const unpublishSingleton = createServerFn({
     method: 'POST'
-}).validator((input)=>input).handler(async ({ data })=>serialise(await getAdminBylineClient().singleton(data.singleton).unpublish()));
+}).middleware([
+    adminSessionMiddleware
+]).validator((input)=>input).handler(withDocumentMutationErrors(async ({ data })=>serialise(await getAdminBylineClient().singleton(data.singleton).unpublish({
+        expectedRevision: data.expectedRevision
+    }))));
 export { unpublishSingleton };

package/dist/server-fns/singletons/update.d.ts

@@ -5,10 +5,12 @@
  *
  * Copyright (c) Infonomic Company Limited
  */
-export interface UpdateSingletonInput {
+import type { SingletonSavePrecondition } from '@byline/core';
+export type UpdateSingletonInput = SingletonSavePrecondition & {
     singleton: string;
     data: Record<string, any>;
     locale?: string;
-    expectedVersionId?: string;
-}
-export declare const updateSingleton: import("@tanstack/react-start").RequiredFetcher<undefined, (input: UpdateSingletonInput) => UpdateSingletonInput, Promise<import("@byline/core").SingletonSaveResult>>;
+};
+export declare const updateSingleton: import("@tanstack/react-start").RequiredFetcher<readonly [import("@tanstack/react-start").FunctionMiddlewareAfterServer<{}, unknown, undefined, undefined, {
+    bylineExpectedSessionId: string | null;
+}, undefined, undefined>], (input: UpdateSingletonInput) => UpdateSingletonInput, Promise<import("@byline/core").UpdateSingletonResult>>;

package/dist/server-fns/singletons/update.js

@@ -1,15 +1,19 @@
 import { createServerFn } from "@tanstack/react-start";
 import { getAdminBylineClient } from "@byline/client/server";
+import { adminSessionMiddleware } from "../../integrations/session-middleware.js";
 import { toCommittedDocumentHookFailureResponse } from "../collections/save-outcome.js";
+import { withDocumentMutationErrors } from "../document-mutation-errors.js";
 import { serialise } from "../serialise.js";
 const updateSingleton = createServerFn({
     method: 'POST'
-}).validator((input)=>input).handler(async ({ data })=>{
-    const { singleton, data: fields, locale, expectedVersionId } = data;
+}).middleware([
+    adminSessionMiddleware
+]).validator((input)=>input).handler(withDocumentMutationErrors(async ({ data })=>{
+    const { singleton, data: fields, locale, ...precondition } = data;
     try {
         const result = await getAdminBylineClient().singleton(singleton).update(fields, {
             locale,
-            expectedVersionId
+            ...precondition
         });
         return serialise(result);
     } catch (error) {
@@ -17,5 +21,5 @@ const updateSingleton = createServerFn({
         if (null != committedFailure) return committedFailure;
         throw error;
     }
-});
+}));
 export { updateSingleton };

package/dist/server-fns/structural-receipt.d.ts

@@ -0,0 +1,4 @@
+import { type StructuralMutationReceipt } from '@byline/core';
+/** Copy only the authorized receipt fields emitted by the lifecycle service. */
+export declare function structuralReceipt(value: unknown): StructuralMutationReceipt | null;
+export declare function committedTreeReceipt(error: unknown): StructuralMutationReceipt | null;

package/dist/server-fns/structural-receipt.js

@@ -0,0 +1,31 @@
+import { ErrorCodes, isDocumentRevision } from "@byline/core";
+function structuralReceipt(value) {
+    if ('object' != typeof value || null === value) return null;
+    const documentId = Reflect.get(value, 'documentId');
+    const revision = Reflect.get(value, 'revision');
+    const suspended = Reflect.get(value, 'scheduledPublicationsNeedReconfirmation');
+    const affected = Reflect.get(value, 'affectedDocuments');
+    if ('string' != typeof documentId || !isDocumentRevision(revision) || 'boolean' != typeof suspended || !Array.isArray(affected)) return null;
+    const affectedDocuments = [];
+    for (const row of affected){
+        if ('object' != typeof row || null === row) return null;
+        const id = Reflect.get(row, 'documentId');
+        const token = Reflect.get(row, 'revision');
+        if ('string' != typeof id || !isDocumentRevision(token)) return null;
+        affectedDocuments.push({
+            documentId: id,
+            revision: token
+        });
+    }
+    return {
+        documentId,
+        revision,
+        affectedDocuments,
+        scheduledPublicationsNeedReconfirmation: suspended
+    };
+}
+function committedTreeReceipt(error) {
+    if ('object' != typeof error || null === error || Reflect.get(error, 'code') !== ErrorCodes.TREE_HOOK_COMMITTED) return null;
+    return structuralReceipt(Reflect.get(error, 'details'));
+}
+export { committedTreeReceipt, structuralReceipt };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "4.19.0",
+  "version": "5.1.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -124,16 +124,16 @@
     "clsx": "^2.1.1",
     "react-json-view-lite": "^2.5.0",
     "react-swipeable": "^7.0.2",
-    "zod": "^4.4.3",
-    "@byline/admin": "4.19.0",
-    "@byline/analytics": "4.19.0",
-    "@byline/analytics-agent": "4.19.0",
-    "@byline/ai": "4.19.0",
-    "@byline/core": "4.19.0",
-    "@byline/client": "4.19.0",
-    "@byline/auth": "4.19.0",
-    "@byline/i18n": "4.19.0",
-    "@byline/ui": "4.19.0"
+    "zod": "^4.5.4",
+    "@byline/admin": "5.1.0",
+    "@byline/analytics-agent": "5.1.0",
+    "@byline/analytics": "5.1.0",
+    "@byline/client": "5.1.0",
+    "@byline/ai": "5.1.0",
+    "@byline/auth": "5.1.0",
+    "@byline/core": "5.1.0",
+    "@byline/i18n": "5.1.0",
+    "@byline/ui": "5.1.0"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.167.0",
@@ -143,15 +143,15 @@
     "vite": "^8.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.10",
+    "@biomejs/biome": "2.5.12",
     "@rsbuild/plugin-react": "^2.1.0",
-    "@rslib/core": "^0.23.2",
-    "@tanstack/react-router": "^1.170.32",
-    "@tanstack/react-start": "^1.168.49",
-    "@types/node": "^26.4.0",
+    "@rslib/core": "^1.0.0",
+    "@tanstack/react-router": "^1.170.33",
+    "@tanstack/react-start": "^1.168.50",
+    "@types/node": "^26.5.0",
     "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.5",
-    "@vitejs/plugin-react": "^6.1.0",
+    "@types/react-dom": "19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
     "jsdom": "^30.0.1",
     "npm-run-all": "^4.1.5",
     "react": "^19.2.8",
@@ -159,7 +159,7 @@
     "typescript": "^7.0.2",
     "typescript-plugin-css-modules": "^5.2.0",
     "vite": "^8.2.2",
-    "vitest": "^4.1.11"
+    "vitest": "^5.0.0"
   },
   "publishConfig": {
     "access": "public",
@@ -174,7 +174,7 @@
     "build": "run-s build:*",
     "build:clean": "node scripts/clean.js dist build",
     "build:code": "rslib build",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.revision-tests.json",
     "clean": "node scripts/clean.js node_modules dist build types .turbo",
     "lint": "biome check --write --unsafe --diagnostic-level=error",
     "test": "vitest run --mode=jsdom && vitest run --mode=node",

package/src/admin-shell/chrome/admin-app-bar.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 /**
  * This Source Code is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -22,6 +20,8 @@ import { Branding } from './branding.js'
 import { Breadcrumbs } from './breadcrumbs/breadcrumbs.js'
 import { useBreadcrumbs } from './breadcrumbs/breadcrumbs-provider.js'
 
+;('use client')
+
 interface AdminAppBarProps {
   user: CurrentAdminUser
 }
@@ -37,16 +37,18 @@ export function AdminAppBar({ user }: AdminAppBarProps) {
   const { breadCrumbSettings } = useBreadcrumbs()
   const { t } = useTranslation('byline-admin')
   const [signingOut, setSigningOut] = useState(false)
+  const [signOutError, setSignOutError] = useState(false)
 
   async function handleSignOut() {
     if (signingOut) return
     setSigningOut(true)
+    setSignOutError(false)
     try {
       await adminSignOut()
-    } catch (err) {
-      // Even on transport failure, the server-side handler clears the
-      // cookies best-effort. Navigate to sign-in regardless.
-      console.warn('sign-out request failed', err)
+    } catch {
+      setSignOutError(true)
+      setSigningOut(false)
+      return
     }
     // Full-page navigation so the admin guard re-runs with cleared cookies.
     window.location.assign(getSignInRoutePath())
@@ -71,6 +73,9 @@ export function AdminAppBar({ user }: AdminAppBarProps) {
             {displayNameFor(user)}
           </span>
         </span>
+        {signOutError && (
+          <span role="alert">Sign-out could not be confirmed. Please try again.</span>
+        )}
         <Button size="xs" intent="secondary" onClick={handleSignOut} disabled={signingOut}>
           {signingOut ? t('common.actions.signingOut') : t('common.actions.signOut')}
         </Button>

package/src/admin-shell/chrome/session-change-boundary.test.tsx

@@ -0,0 +1,78 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { act } from 'react'
+
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({ current: vi.fn() }))
+vi.mock('../../server-fns/auth/current-user.js', () => ({ getCurrentAdminUser: mocks.current }))
+vi.mock('../../routes/sign-in-path.js', () => ({ getSignInRoutePath: () => '/sign-in' }))
+
+import { acceptSession, expectedSession } from '../../integrations/session-coordination.js'
+import { SessionChangeBoundary } from './session-change-boundary.js'
+
+const user = (sessionId: string, email: string) => ({
+  sessionId,
+  email,
+  id: email,
+  given_name: null,
+  family_name: null,
+  is_super_admin: false,
+  abilities: [],
+})
+let root: Root
+let container: HTMLDivElement
+beforeEach(() => {
+  vi.clearAllMocks()
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  vi.stubGlobal('BroadcastChannel', undefined)
+  window.sessionStorage.clear()
+  acceptSession('expected-B')
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+  vi.unstubAllGlobals()
+})
+async function render() {
+  await act(async () => {
+    root.render(
+      <SessionChangeBoundary user={user('late-A', 'x@example.test')}>
+        <button type="button">Publish</button>
+      </SessionChangeBoundary>
+    )
+  })
+}
+describe('session-change acknowledgement', () => {
+  it('blocks business UI on the first post-sign-in render when cookies select a different login', async () => {
+    mocks.current.mockResolvedValue(user('late-A', 'x@example.test'))
+    await render()
+    expect(container.textContent).not.toContain('Publish')
+    expect(container.querySelector('[role="alertdialog"]')).not.toBeNull()
+    expect(container.textContent).toContain('Active account: x@example.test')
+    expect(expectedSession()).toBe('expected-B')
+  })
+  it('requires renewed acknowledgement when the server account changes again', async () => {
+    mocks.current.mockResolvedValue(user('late-A', 'x@example.test'))
+    await render()
+    mocks.current.mockResolvedValue(user('new-C', 'z@example.test'))
+    await act(async () => {
+      container.querySelector('button')?.click()
+    })
+    expect(container.textContent).toContain(
+      'The active session changed again. Review the account before continuing.'
+    )
+    expect(expectedSession()).toBe('expected-B')
+    expect(container.textContent).not.toContain('Publish')
+  })
+})

package/src/admin-shell/chrome/session-change-boundary.tsx

@@ -0,0 +1,94 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { type ReactNode, useEffect, useState, useSyncExternalStore } from 'react'
+
+import {
+  acceptSession,
+  expectedSession,
+  flagSessionChanged,
+  observeSession,
+  sessionEpoch,
+  sessionIsChanged,
+  startSessionNotifications,
+  subscribeSessionChange,
+} from '../../integrations/session-coordination.js'
+import { getSignInRoutePath } from '../../routes/sign-in-path.js'
+import { type CurrentAdminUser, getCurrentAdminUser } from '../../server-fns/auth/current-user.js'
+
+/** Blocks the page until the user explicitly acknowledges freshly verified login identity. */
+export function SessionChangeBoundary({
+  user,
+  children,
+}: {
+  user?: CurrentAdminUser
+  children: ReactNode
+}) {
+  const epoch = useSyncExternalStore(subscribeSessionChange, sessionEpoch, () => 0)
+  const changed = sessionIsChanged()
+  const [current, setCurrent] = useState(user)
+  const [error, setError] = useState<string>()
+  const [busy, setBusy] = useState(false)
+  const mismatch =
+    typeof window !== 'undefined' &&
+    !!user &&
+    !!expectedSession() &&
+    expectedSession() !== user.sessionId
+  useEffect(() => {
+    startSessionNotifications()
+    if (user) {
+      try {
+        observeSession(user.sessionId)
+      } catch {
+        /* Interstitial owns this mismatch. */
+      }
+    }
+  }, [user])
+  useEffect(() => {
+    if (!changed && !mismatch) return
+    void getCurrentAdminUser()
+      .then((verified) => {
+        if (sessionEpoch() !== epoch) return
+        setCurrent(verified)
+        setError(undefined)
+      })
+      .catch(() => setError('The session is no longer available. Please sign in again.'))
+  }, [changed, mismatch, epoch])
+  if (!changed && !mismatch) return children
+  async function acknowledge() {
+    setBusy(true)
+    try {
+      const verified = await getCurrentAdminUser()
+      // Require a second acknowledgement if the identity changed while this interstitial was open.
+      if (!current || current.sessionId !== verified.sessionId) {
+        setCurrent(verified)
+        setError('The active session changed again. Review the account before continuing.')
+        return
+      }
+      acceptSession(verified.sessionId)
+      window.location.reload() // Discard queued edits and old page state; never replay them.
+    } catch {
+      flagSessionChanged()
+      setError('Unable to verify the active session. Please sign in again.')
+    } finally {
+      setBusy(false)
+    }
+  }
+  return (
+    <main role="alertdialog" aria-modal="true" aria-labelledby="session-change-title">
+      <h1 id="session-change-title">Your session has changed</h1>
+      <p>Your previous work has not been retried. Check the active account before continuing.</p>
+      {current && <p>Active account: {current.email}</p>}
+      {error && <p role="alert">{error}</p>}
+      <button type="button" disabled={busy || !current} onClick={acknowledge}>
+        Continue as this account
+      </button>
+      <a href={`${getSignInRoutePath()}?reauthenticate=1`}>Sign in again</a>
+    </main>
+  )
+}

package/src/admin-shell/chrome/sign-in-page.tsx

@@ -6,6 +6,8 @@
  * Copyright (c) Infonomic Company Limited
  */
 
+import { useEffect, useState } from 'react'
+
 import { SignInForm } from '@byline/admin/auth/components/sign-in-form'
 import { BylineAdminServicesProvider } from '@byline/admin/services'
 import { getAdminConfig } from '@byline/core'
@@ -15,10 +17,20 @@ import cx from 'clsx'
 
 import { buildLocaleDefinitions } from '../../i18n/locale-definitions.js'
 import { bylineAdminServices } from '../../integrations/byline-admin-services.js'
+import {
+  coordinateAuthAction,
+  expectedSession,
+  flagSessionChanged,
+  observeSession,
+  renewSingleFlight,
+} from '../../integrations/session-coordination.js'
+import { renewAdminSession } from '../../server-fns/auth/renew.js'
 import { setAdminLocaleFn } from '../../server-fns/i18n/index.js'
+import { SessionChangeBoundary } from './session-change-boundary.js'
 import styles from './sign-in-page.module.css'
 
 interface SignInPageProps {
+  reauthenticate?: boolean
   redirectTo: string
   activeLocale: LocaleCode
   homeUrl?: string
@@ -44,14 +56,54 @@ interface SignInPageProps {
  * Threads an optional host-owned `homeUrl` into `SignInForm` so the form's
  * action row can render a plain "Home" link beside the submit button.
  */
-export function SignInPage({ redirectTo, activeLocale, homeUrl }: SignInPageProps) {
+export function SignInPage({
+  redirectTo,
+  activeLocale,
+  homeUrl,
+  reauthenticate = false,
+}: SignInPageProps) {
+  const [checking, setChecking] = useState(!reauthenticate)
+  const [bootstrapError, setBootstrapError] = useState(false)
+  useEffect(() => {
+    if (reauthenticate) return
+    let active = true
+    void renewSingleFlight(() =>
+      coordinateAuthAction(async () => {
+        const result = await renewAdminSession({
+          data: { expectedSessionId: expectedSession() ?? undefined },
+        })
+        observeSession(result.sessionId)
+      })
+    )
+      .then(() => {
+        if (active) window.location.replace(redirectTo)
+      })
+      .catch((error) => {
+        if (error?.code === 'ERR_SESSION_CHANGED') flagSessionChanged()
+        else if (
+          ![
+            'ERR_UNAUTHENTICATED',
+            'ERR_INVALID_TOKEN',
+            'ERR_REVOKED_TOKEN',
+            'ERR_ACCOUNT_DISABLED',
+          ].includes(error?.code)
+        )
+          setBootstrapError(true)
+      })
+      .finally(() => {
+        if (active) setChecking(false)
+      })
+    return () => {
+      active = false
+    }
+  }, [redirectTo, reauthenticate])
   const { i18n } = getAdminConfig()
   const localeDefinitions = buildLocaleDefinitions(i18n.admin.locales, i18n.admin.localeDefinitions)
   const handleSetLocale = async (next: LocaleCode) => {
     await setAdminLocaleFn({ data: { locale: next } })
     window.location.reload()
   }
-  return (
+  const content = (
     <I18nProvider
       bundle={i18n.translations ?? {}}
       activeLocale={activeLocale}
@@ -61,14 +113,27 @@ export function SignInPage({ redirectTo, activeLocale, homeUrl }: SignInPageProp
     >
       <BylineAdminServicesProvider services={bylineAdminServices}>
         <main className={cx('byline-sign-in-page', styles.main)}>
+          <noscript>JavaScript is required to sign in or renew your admin session.</noscript>
           <div className={cx('byline-sign-in-page-bar', styles.bar)}>
             <LanguageMenu />
           </div>
           <div className={cx('byline-sign-in-page-inner', styles.inner)}>
-            <SignInForm redirectTo={redirectTo} homeUrl={homeUrl} />
+            {bootstrapError ? (
+              <div role="alert">
+                <p>Unable to check your session. Please try again.</p>
+                <button type="button" onClick={() => window.location.reload()}>
+                  Try again
+                </button>
+              </div>
+            ) : checking ? (
+              <p role="status">Checking your session…</p>
+            ) : (
+              <SignInForm redirectTo={redirectTo} homeUrl={homeUrl} />
+            )}
           </div>
         </main>
       </BylineAdminServicesProvider>
     </I18nProvider>
   )
+  return reauthenticate ? content : <SessionChangeBoundary>{content}</SessionChangeBoundary>
 }