@owlmeans/web-client 0.1.18-rc.4 → 0.1.18-rc.41

package/src/login/screen.tsx

@@ -0,0 +1,119 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { FC } from 'react'
+import { useContext } from '@owlmeans/client'
+import { useI18nLib } from '@owlmeans/client-i18n'
+import {
+  LoginIntent, LoginOutcome, LOGIN_INTENT_QUERY, LOGIN_METHOD_QUERY, LOGIN_NEXT_QUERY,
+} from '@owlmeans/client-auth/login'
+import type { LoginService } from '@owlmeans/client-auth/login'
+import type { AppContext } from '../types.js'
+import { LoginSurrogateView, SurrogateStage } from './view.js'
+
+/**
+ * The login window an embedded application opens one level up.
+ *
+ * It is NOT wrapped in `DispatcherHOC`, and that is the point: the HOC's continuation navigates to
+ * `HOME` when it has nothing else to do, which is how a popup ended up rendering the whole
+ * application, with its navigation, inside itself. This screen has no continuation at all — it
+ * either hands something back and closes, or it says what it is waiting for.
+ *
+ * It also never runs the authorization machine. When there is already a session here, that is the
+ * answer, and it goes back to the opener immediately — no provider round trip, no PKCE exchange.
+ * When there is not, it forwards to the dispatcher (`next`), which owns that flow.
+ */
+export const SurrogateScreen: FC = () => {
+  const context = useContext() as unknown as AppContext
+  const [query] = context.router().useSearchParams()
+  const t = useI18nLib('auth')
+
+  const intent = query.get(LOGIN_INTENT_QUERY) === LoginIntent.Logout
+    ? LoginIntent.Logout
+    : LoginIntent.Login
+
+  const [stage, setStage] = useState<SurrogateStage>(SurrogateStage.Working)
+  const [error, setError] = useState<string | undefined>()
+
+  const onAction = useCallback(() => {
+    if (stage === SurrogateStage.Standalone) {
+      window.location.href = '/'
+      return
+    }
+    if (stage === SurrogateStage.Gesture) {
+      const next = query.get(LOGIN_NEXT_QUERY)
+      void context.login().begin({ url: next ?? window.location.href })
+      return
+    }
+    window.close()
+  }, [context, stage, query])
+
+  useEffect(() => {
+    const login = context.service<LoginService>('login-service')
+    // First statement, unconditionally: `markSurrogate` reads `window.name`, and the browser
+    // clears that the moment this window's top-level context goes cross-origin. Recording it
+    // later means recording nothing.
+    login.enter()
+
+    const env = login.env()
+    if (!env.surrogate) {
+      // Somebody opened this address directly, or the window lost its marker. Never navigate on
+      // its behalf — offer a link and stop.
+      setStage(env.embedded ? SurrogateStage.Gesture : SurrogateStage.Standalone)
+      return
+    }
+
+    const run = async (): Promise<void> => {
+      const token = await context.auth().authenticated()
+
+      if (intent === LoginIntent.Logout) {
+        // Revoked FIRST, before anything can be awaited on a channel that may never answer: a
+        // window the user closes half a second later must still have ended the session it opened
+        // to end.
+        await login.revoke()
+        const outcome = await login.logoutComplete()
+        setStage(
+          outcome === LoginOutcome.Handled ? SurrogateStage.Handing
+            : outcome === LoginOutcome.Orphaned ? SurrogateStage.Orphaned
+              : SurrogateStage.Failed
+        )
+        return
+      }
+
+      if (token != null && token !== '') {
+        // Already signed in here. The framed application is the one that asked, so the session
+        // goes to it rather than being displayed to this window.
+        const outcome = await login.resume(token)
+        setStage(
+          outcome === LoginOutcome.Handled ? SurrogateStage.Handing
+            : outcome === LoginOutcome.Orphaned ? SurrogateStage.Orphaned
+              : SurrogateStage.Failed
+        )
+        return
+      }
+
+      // Nothing here yet — the dispatcher owns the authorization round trip, and the provider's
+      // callback lands there rather than on this route. The method the user already chose travels
+      // with it, so the dispatcher does not ask a second time in a window with no one to ask.
+      const next = query.get(LOGIN_NEXT_QUERY)
+      if (next == null || next === '') {
+        setStage(SurrogateStage.Gesture)
+        return
+      }
+      const method = query.get(LOGIN_METHOD_QUERY)
+      const target = method != null && method !== ''
+        ? `${next}${next.includes('?') ? '&' : '?'}${LOGIN_METHOD_QUERY}=${encodeURIComponent(method)}`
+        : next
+      window.location.href = target
+    }
+
+    void run().catch((e: Error) => {
+      console.error(e)
+      setError(e.message)
+      setStage(SurrogateStage.Failed)
+    })
+  }, [context, intent])
+
+  return <LoginSurrogateView
+    stage={stage} intent={intent} onAction={onAction} error={error}
+    translate={(key, defaultValue) => t(key, { defaultValue })}
+  />
+}

package/src/login/service.ts

@@ -0,0 +1,19 @@
+import { appendLogin } from '@owlmeans/client-auth/login'
+import type { BasicConfig, BasicContext } from '@owlmeans/context'
+import { makeRedirectLoginPlugin } from './redirect.js'
+import { makeSurrogateLoginPlugin } from './surrogate.js'
+
+/**
+ * Register the login host and the two browser flows on a context.
+ *
+ * Called by `makeContext`, so every web app has working login — including a framed one — without
+ * registering anything. An app that needs a different mechanic registers its own plugin at a
+ * higher priority; it does not replace this.
+ */
+export const appendWebLogin = <C extends BasicConfig, T extends BasicContext<C>>(ctx: T): T => {
+  const service = appendLogin<C, T>(ctx).login()
+  service.registerPlugin(makeRedirectLoginPlugin())
+  service.registerPlugin(makeSurrogateLoginPlugin())
+
+  return ctx
+}

package/src/login/surrogate.ts

@@ -0,0 +1,211 @@
+import {
+  adoptToken, clearSurrogate, markSurrogate, revokeToken, surrogatePath, LoginIntent, LoginOutcome,
+  LOGIN_LOGOUT_MESSAGE, LOGIN_SURROGATE_HEIGHT, LOGIN_SURROGATE_NAME, LOGIN_SURROGATE_WIDTH,
+  LOGIN_TOKEN_MESSAGE,
+} from '@owlmeans/client-auth/login'
+import type { LoginContext, LoginEnv, LoginPlugin } from '@owlmeans/client-auth/login'
+import { SURROGATE_LOGIN, SURROGATE_LOGIN_PRIORITY } from './consts.js'
+import { awaitSurrogate } from './pump.js'
+
+/**
+ * `window.open` features that size and CENTER the surrogate on the screen the browser window
+ * currently occupies.
+ *
+ * Computed fresh per call, never a constant: centering depends on where the browser window sits
+ * NOW, which can change between one login attempt and the next. `screenLeft`/`screenTop` and
+ * `outerWidth`/`outerHeight` describe the browser's own chrome rather than this document's
+ * viewport — and, unlike `innerWidth` or anything reached through `window.top`, they stay readable
+ * from a cross-origin iframe. That matters here specifically: a generated app's preview runs
+ * framed on a different origin than the manager that embeds it, so `env.embedded` is exactly the
+ * case where `window.top.innerWidth` would throw, and reading this document's own `innerWidth`
+ * instead would center the popup on the IFRAME's rectangle rather than on the actual window a
+ * person sees. Falling back to `window.screen` covers a window that reports no outer geometry at
+ * all (a headless test runner).
+ */
+export const centeredPopupFeatures = (width: number, height: number): string => {
+  const screenLeft = window.screenLeft ?? window.screenX ?? 0
+  const screenTop = window.screenTop ?? window.screenY ?? 0
+  const outerWidth = window.outerWidth || window.screen.width
+  const outerHeight = window.outerHeight || window.screen.height
+
+  const left = Math.round(screenLeft + Math.max(0, (outerWidth - width) / 2))
+  const top = Math.round(screenTop + Math.max(0, (outerHeight - height) / 2))
+
+  return `popup=yes,width=${width},height=${height},left=${left},top=${top}`
+}
+
+/**
+ * Login for a document that cannot complete the flow where it is.
+ *
+ * An app embedded in a frame cannot redirect to an identity provider: the provider refuses to be
+ * embedded (`frame-ancestors`), and its session cookies are third-party there. So the flow runs
+ * one window up, in a surrogate window that is top-level and first-party on this application's own
+ * origin — where the very same flow completes normally — and the token is passed back to the
+ * document that asked for it.
+ *
+ * This plugin is deliberately not OIDC-specific. The mechanic is "run the login route one window
+ * up and hand the token back", and the adoption is the plain auth service, so any relying party
+ * that renders a login route gets it by registering nothing.
+ *
+ * `match` covers BOTH halves of the lifecycle — the framed opener and the surrogate itself, where
+ * `embedded` is false. Inside the surrogate the redirect plugin must not win: that window IS
+ * top-level, so it authorizes by an ordinary redirect and differs only in what it does with the
+ * token at the end.
+ */
+export const makeSurrogateLoginPlugin = (): LoginPlugin => {
+  /**
+   * Give the token to whoever is entitled to it, and get out of the way.
+   *
+   * Shared by `complete` (a token was just issued here) and `resume` (one was already here),
+   * because what happens to it is the same in both cases and only the question differs.
+   */
+  const handBack = async (token: string, env: LoginEnv): Promise<LoginOutcome> => {
+    if (!env.surrogate) {
+      // This document started the flow and finished it in place — it already has what it needs.
+      return LoginOutcome.Passed
+    }
+    if (!env.hasOpener) {
+      // Authenticated with nowhere to send it. `Cross-Origin-Opener-Policy: same-origin` from the
+      // provider severs `window.opener` permanently, so this is not a timing problem to retry.
+      return LoginOutcome.Orphaned
+    }
+
+    clearSurrogate()
+    // Both windows are the same origin (the surrogate is this application's own login route), so
+    // the origin is pinned rather than passed as `*` — the message carries a bearer token.
+    window.opener.postMessage({ type: LOGIN_TOKEN_MESSAGE, token }, window.location.origin)
+    window.close()
+
+    return LoginOutcome.Handled
+  }
+
+  const plugin: LoginPlugin = {
+    alias: SURROGATE_LOGIN,
+    priority: SURROGATE_LOGIN_PRIORITY,
+    mode: 'surrogate',
+    match: env => env.hasWindow && (env.embedded || env.surrogate),
+
+    enter: () => { markSurrogate() },
+
+    begin: (ctx, request, env) => {
+      // Already one window up — nothing to open, just run the flow.
+      if (env.surrogate) {
+        window.location.href = request.url
+
+        return Promise.resolve(LoginOutcome.Redirected)
+      }
+
+      // Opened FIRST and synchronously: `window.open` escapes the popup blocker only while the
+      // user gesture is still being handled, so nothing may be awaited before this line. That is
+      // why this function is not `async`.
+      //
+      // The window opens on the surrogate route rather than on the dispatcher, so its very first
+      // paint is a bare "signing you in" panel instead of the application with its navigation. The
+      // dispatcher address travels as `next`, because the provider's callback still lands there and
+      // whatever flow parameters the caller's URL carried must survive the hop.
+      const path = surrogatePath(ctx as LoginContext, {
+        intent: LoginIntent.Login, next: request.url,
+      })
+      const surrogate = window.open(
+        path ?? request.url, LOGIN_SURROGATE_NAME,
+        centeredPopupFeatures(LOGIN_SURROGATE_WIDTH, LOGIN_SURROGATE_HEIGHT)
+      )
+      if (surrogate == null) {
+        // Distinct from `Failed` below: nothing ever opened, so there is nothing left to wait on.
+        return Promise.resolve(LoginOutcome.Blocked)
+      }
+
+      return awaitSurrogate(surrogate, LOGIN_TOKEN_MESSAGE, async data => {
+        if (data.token == null || data.token === '') {
+          return LoginOutcome.Failed
+        }
+        await adoptToken(ctx as LoginContext, data.token)
+        // Adopting the token is not the end of the flow — running the caller's continuation is,
+        // exactly as the redirect plugin does before it reports `Handled`. Without it the token
+        // lands in the auth service and nothing else happens: the framed app keeps rendering its
+        // signed-out tree, and the user watches the login window close over a preview that never
+        // changes. `Handled` promises the caller there is nothing left to do.
+        await request.navigate?.()
+
+        return LoginOutcome.Handled
+      })
+    },
+
+    authorize: async (_ctx, url, env) => {
+      // The surrogate is top-level, so it redirects like any ordinary tab.
+      if (env.surrogate) {
+        window.location.href = url
+
+        return LoginOutcome.Redirected
+      }
+
+      // Framed, and not yet one window up. A redirect from here would land in the frame and be
+      // refused, and the window that would fix it cannot be opened without a user gesture — so the
+      // caller is told to render a control rather than to navigate.
+      return LoginOutcome.Gesture
+    },
+
+    complete: async (_ctx, token, env) => await handBack(token, env),
+
+    // A session that was already here is worth exactly as much as one just issued — to the window
+    // that asked for it. Without this the surrogate would render the signed-in application to
+    // itself and the framed app would stay signed out, which is the whole reported defect.
+    resume: async (_ctx, token, env) => await handBack(token, env),
+
+    logout: (ctx, request, env) => {
+      // Already one window up — end the session here and tell the opener.
+      if (env.surrogate) {
+        return revokeToken(ctx as LoginContext)
+          .then(async () => await plugin.logoutComplete!(ctx, env))
+      }
+
+      const path = surrogatePath(ctx as LoginContext, { intent: LoginIntent.Logout })
+      // Opened first and synchronously, for the same reason `begin` does.
+      const surrogate = path != null
+        ? window.open(path, LOGIN_SURROGATE_NAME,
+          centeredPopupFeatures(LOGIN_SURROGATE_WIDTH, LOGIN_SURROGATE_HEIGHT))
+        : null
+
+      // The local session goes next, and UNCONDITIONALLY. A blocked window, a severed opener or a
+      // user who closes the popup must never leave THIS document signed in: a logout that only
+      // half happened is bad, and one that did not happen at all is worse.
+      const local = revokeToken(ctx as LoginContext)
+      if (surrogate == null) {
+        // `path == null` is an app whose entrypoint list predates the surrogate route — nothing a
+        // retry would do differently. A `window.open` the browser refused is the one case worth
+        // telling the user about, so only that one reports `Blocked`.
+        const outcome = path != null ? LoginOutcome.Blocked : LoginOutcome.Failed
+
+        return local.then(async () => {
+          await request.navigate?.()
+
+          return outcome
+        })
+      }
+
+      return local.then(async () => await awaitSurrogate(
+        surrogate, LOGIN_LOGOUT_MESSAGE, async () => {
+          await request.navigate?.()
+
+          return LoginOutcome.Handled
+        }
+      ))
+    },
+
+    logoutComplete: async (_ctx, env) => {
+      if (!env.surrogate) {
+        return LoginOutcome.Passed
+      }
+      if (!env.hasOpener) {
+        return LoginOutcome.Orphaned
+      }
+      clearSurrogate()
+      window.opener.postMessage({ type: LOGIN_LOGOUT_MESSAGE, ok: true }, window.location.origin)
+      window.close()
+
+      return LoginOutcome.Handled
+    },
+  }
+
+  return plugin
+}

package/src/login/view.tsx

@@ -0,0 +1,94 @@
+import type { CSSProperties, FC } from 'react'
+import { LoginIntent } from '@owlmeans/client-auth/login'
+
+/** What the surrogate window is doing, from the point of view of the person watching it. */
+export enum SurrogateStage {
+  /** Working. No control — there is nothing for the user to do but wait. */
+  Working = 'working',
+  /** Needs a click: the flow cannot continue without a fresh gesture. */
+  Gesture = 'gesture',
+  /** Done here; handing the result back and closing. */
+  Handing = 'handing',
+  /** Acted, but with no channel back to the window that asked. */
+  Orphaned = 'orphaned',
+  /** Ended with nothing. */
+  Failed = 'failed',
+  /** Not a surrogate at all — someone opened this address directly. */
+  Standalone = 'standalone',
+}
+
+export interface SurrogateViewProps {
+  stage: SurrogateStage
+  intent: LoginIntent
+  onAction?: () => void
+  error?: string
+  translate?: (key: string, defaultValue: string) => string
+}
+
+/**
+ * The whole of what a login window shows.
+ *
+ * Plain elements and inline styles on purpose. This renders in a popup opened by a `web-panel` app,
+ * a `mui-panel` app and a generated Tailwind app alike, and none of their stylesheets is loaded
+ * here — a class name would simply do nothing. It is also the reason this component carries no
+ * dependency on a UI family at all.
+ */
+const box: CSSProperties = {
+  maxWidth: '22rem', margin: '15vh auto', padding: '1.5rem', textAlign: 'center',
+  fontFamily: 'system-ui, sans-serif', lineHeight: 1.5,
+}
+
+const action: CSSProperties = {
+  marginTop: '1rem', padding: '.625rem 1.25rem', fontSize: '1rem',
+  cursor: 'pointer', borderRadius: '.375rem', border: '1px solid currentColor',
+}
+
+const COPY: Record<SurrogateStage, { key: string, en: string, action?: [string, string] }> = {
+  [SurrogateStage.Working]: { key: 'working', en: 'Signing you in…' },
+  [SurrogateStage.Gesture]: {
+    key: 'gesture.title', en: 'Continue to sign in.', action: ['gesture.action', 'Sign in'],
+  },
+  [SurrogateStage.Handing]: { key: 'handing', en: 'Done. Returning to the application…' },
+  [SurrogateStage.Orphaned]: {
+    key: 'orphaned', en: 'Signed in. You can close this window and continue in the application.',
+    action: ['close', 'Close'],
+  },
+  [SurrogateStage.Failed]: {
+    key: 'failed', en: 'That did not complete. You can close this window and try again.',
+    action: ['close', 'Close'],
+  },
+  [SurrogateStage.Standalone]: {
+    key: 'standalone.title', en: 'This page is used to sign in from another window.',
+    action: ['standalone.action', 'Open the application'],
+  },
+}
+
+const LOGOUT_COPY: Partial<Record<SurrogateStage, { key: string, en: string }>> = {
+  [SurrogateStage.Working]: { key: 'working', en: 'Signing you out…' },
+  [SurrogateStage.Gesture]: { key: 'gesture.title', en: 'Continue to sign out.' },
+  [SurrogateStage.Handing]: { key: 'handing', en: 'Signed out. Returning to the application…' },
+  [SurrogateStage.Orphaned]: {
+    key: 'orphaned', en: 'Signed out. You can close this window.',
+  },
+  [SurrogateStage.Failed]: {
+    key: 'failed', en: 'Sign-out did not complete here. You can close this window.',
+  },
+}
+
+export const LoginSurrogateView: FC<SurrogateViewProps> = (
+  { stage, intent, onAction, error, translate }
+) => {
+  const t = translate ?? ((_key: string, defaultValue: string) => defaultValue)
+  const scope = intent === LoginIntent.Logout ? 'logout' : 'login'
+  const base = COPY[stage]
+  const copy = (intent === LoginIntent.Logout ? LOGOUT_COPY[stage] : undefined) ?? base
+
+  return <div style={box} data-surrogate-stage={stage} data-surrogate-intent={intent}>
+    <p>{t(`surrogate.${scope}.${copy.key}`, copy.en)}</p>
+    {error != null && error !== '' &&
+      <p style={{ color: '#b00', fontSize: '.875rem' }} role="alert">{error}</p>}
+    {base.action != null && onAction != null && <button type="button" style={action} onClick={onAction}>
+      {t(`surrogate.${scope}.${base.action[0]}`, base.action[1])}
+    </button>}
+  </div>
+}

package/src/main.tsx

@@ -25,5 +25,14 @@ export const render = (node: ReactNode, opts?: RenderOptions) => {
   opts?.onReady ?? true ? window.addEventListener('DOMContentLoaded', _callback) : _callback()
 }
 
-export const renderApp = <C extends AppConfig, T extends AppContext<C>>(context: T, opts?: RenderOptions) =>
-  render(<WebApp context={context} />, opts)
+/**
+ * Mount the application.
+ *
+ * `children` are rendered inside the context provider and BEFORE the router, which makes them the
+ * app's global overlay slot: a consent dialog, a toast surface, anything that must exist on every
+ * route and outlive navigation. A component mounted inside a route instead is torn down and
+ * rebuilt on every navigation, which for a dialog means it closes itself.
+ */
+export const renderApp = <C extends AppConfig, T extends AppContext<C>>(
+  context: T, opts?: RenderOptions, children?: ReactNode
+) => render(<WebApp context={context}>{children}</WebApp>, opts)

package/src/middleware.ts

@@ -11,18 +11,19 @@ export const logoutMiddleware: Middleware = {
   stage: MiddlewareStage.Loading,
   apply: async context => {
     context.entrypoints<Perked>().forEach(module => {
-      if (module.route.route.type === AppType.Backend && module.call != null) {
+      if (module.route.route.type === AppType.Backend && module.invoke != null) {
         const guards = module.getGuards()
         if (guards.length > 0) {
           if (module._auth_web_middleware_applied === true) {
             return
           }
           module._auth_web_middleware_applied = true
-          // const auth = context.service<GuardService>(service)
-          const call = module.call
-          module.call = async (req, res) => {
+          // Wrapping `invoke` covers `call` too: `call` reads `invoke` off the entrypoint at the
+          // moment it runs, so a rejected session is caught whichever verb the caller used.
+          const invoke = module.invoke
+          module.invoke = (async req => {
             try {
-              return await call(req, res)
+              return await invoke(req)
             } catch (e) {
               if (e instanceof Error) {
                 const err = ResilientError.ensure(e)
@@ -38,7 +39,7 @@ export const logoutMiddleware: Middleware = {
               }
               throw e
             }
-          }
+          }) as typeof module.invoke
 
         }
       }

package/src/service.ts

@@ -16,7 +16,7 @@ export const makeAuthWebService = (alias: string = DEFAULT_ALIAS): AuthService =
     await update(token)
     if (token == null) {
       const module = service.assertCtx().entrypoint<ClientEntrypoint<string>>(DISPATCHER)
-      const [url] = await module.call()
+      const url = await module.url()
       document.location.href = url
     }
   }

package/src/types.ts

@@ -1,4 +1,5 @@
 import type { AuthServiceAppend } from '@owlmeans/client-auth'
+import type { LoginServiceAppend } from '@owlmeans/client-auth/login'
 import type { ClientConfig } from '@owlmeans/client-context'
 import type { ClientContext } from '@owlmeans/client'
 
@@ -13,5 +14,5 @@ export interface AppConfig extends ClientConfig {
 }
 
 export interface AppContext<C extends AppConfig = AppConfig> extends ClientContext<C>,
-  AuthServiceAppend {
+  AuthServiceAppend, LoginServiceAppend {
 }

package/tests/surrogate.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=surrogate.spec.d.ts.map

package/tests/surrogate.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"surrogate.spec.d.ts","sourceRoot":"","sources":["surrogate.spec.ts"],"names":[],"mappings":""}

package/tests/surrogate.spec.js

@@ -0,0 +1,43 @@
+import { describe, test, expect, afterEach } from 'bun:test';
+import { centeredPopupFeatures } from '../src/login/surrogate.js';
+/**
+ * A hand-written `window`, not jsdom: the function under test reads exactly four geometry
+ * properties, and a real DOM would prove a fixture behaves rather than that the math does.
+ */
+const stubWindow = (over) => {
+    globalThis.window = {
+        screenLeft: 0, screenTop: 0, screenX: 0, screenY: 0,
+        outerWidth: 1920, outerHeight: 1080,
+        screen: { width: 1920, height: 1080 },
+        ...over,
+    };
+};
+afterEach(() => {
+    delete globalThis.window;
+});
+describe('centeredPopupFeatures', () => {
+    test('centers on the browser window, at its current screen position', () => {
+        stubWindow({ screenLeft: 100, screenTop: 50, outerWidth: 1200, outerHeight: 800 });
+        expect(centeredPopupFeatures(520, 760)).toBe('popup=yes,width=520,height=760,left=440,top=70');
+    });
+    // A cross-origin iframe: `window.top.innerWidth` would throw, which is exactly why this reads
+    // `outerWidth`/`outerHeight` instead — they describe the browser's own chrome, not this
+    // document's viewport, and stay readable across the origin boundary.
+    test('falls back to screenX/screenY when the legacy aliases are unavailable', () => {
+        stubWindow({
+            screenLeft: undefined, screenTop: undefined, screenX: 20, screenY: 10,
+            outerWidth: 1200, outerHeight: 800,
+        });
+        expect(centeredPopupFeatures(520, 760)).toBe('popup=yes,width=520,height=760,left=360,top=30');
+    });
+    test('falls back to window.screen when outerWidth/outerHeight report zero', () => {
+        // A headless runner: no chrome geometry to report at all.
+        stubWindow({ outerWidth: 0, outerHeight: 0, screen: { width: 1600, height: 900 } });
+        expect(centeredPopupFeatures(520, 760)).toBe('popup=yes,width=520,height=760,left=540,top=70');
+    });
+    test('never places the popup off-screen when it is larger than the window', () => {
+        stubWindow({ outerWidth: 400, outerHeight: 400 });
+        expect(centeredPopupFeatures(520, 760)).toBe('popup=yes,width=520,height=760,left=0,top=0');
+    });
+});
+//# sourceMappingURL=surrogate.spec.js.map

package/tests/surrogate.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surrogate.spec.js","sourceRoot":"","sources":["surrogate.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AAEjE;;;GAGG;AACH,MAAM,UAAU,GAAG,CAAC,IAA6B,EAAQ,EAAE;IACxD,UAA6C,CAAC,MAAM,GAAG;QACtD,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC;QACnD,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI;QACnC,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE;QACrC,GAAG,IAAI;KACR,CAAA;AACH,CAAC,CAAA;AAED,SAAS,CAAC,GAAG,EAAE;IACb,OAAQ,UAAmC,CAAC,MAAM,CAAA;AACpD,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,IAAI,CAAC,+DAA+D,EAAE,GAAG,EAAE;QACzE,UAAU,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,CAAA;QAElF,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,gDAAgD,CAAC,CAAA;IAChG,CAAC,CAAC,CAAA;IAEF,8FAA8F;IAC9F,wFAAwF;IACxF,qEAAqE;IACrE,IAAI,CAAC,uEAAuE,EAAE,GAAG,EAAE;QACjF,UAAU,CAAC;YACT,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE;YACrE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG;SACnC,CAAC,CAAA;QAEF,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,gDAAgD,CAAC,CAAA;IAChG,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,qEAAqE,EAAE,GAAG,EAAE;QAC/E,0DAA0D;QAC1D,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAA;QAEnF,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,gDAAgD,CAAC,CAAA;IAChG,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,qEAAqE,EAAE,GAAG,EAAE;QAC/E,UAAU,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,CAAA;QAEjD,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAA;IAC7F,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/tests/surrogate.spec.ts

@@ -0,0 +1,52 @@
+import { describe, test, expect, afterEach } from 'bun:test'
+import { centeredPopupFeatures } from '../src/login/surrogate.js'
+
+/**
+ * A hand-written `window`, not jsdom: the function under test reads exactly four geometry
+ * properties, and a real DOM would prove a fixture behaves rather than that the math does.
+ */
+const stubWindow = (over: Record<string, unknown>): void => {
+  (globalThis as unknown as { window: unknown }).window = {
+    screenLeft: 0, screenTop: 0, screenX: 0, screenY: 0,
+    outerWidth: 1920, outerHeight: 1080,
+    screen: { width: 1920, height: 1080 },
+    ...over,
+  }
+}
+
+afterEach(() => {
+  delete (globalThis as { window?: unknown }).window
+})
+
+describe('centeredPopupFeatures', () => {
+  test('centers on the browser window, at its current screen position', () => {
+    stubWindow({ screenLeft: 100, screenTop: 50, outerWidth: 1200, outerHeight: 800 })
+
+    expect(centeredPopupFeatures(520, 760)).toBe('popup=yes,width=520,height=760,left=440,top=70')
+  })
+
+  // A cross-origin iframe: `window.top.innerWidth` would throw, which is exactly why this reads
+  // `outerWidth`/`outerHeight` instead — they describe the browser's own chrome, not this
+  // document's viewport, and stay readable across the origin boundary.
+  test('falls back to screenX/screenY when the legacy aliases are unavailable', () => {
+    stubWindow({
+      screenLeft: undefined, screenTop: undefined, screenX: 20, screenY: 10,
+      outerWidth: 1200, outerHeight: 800,
+    })
+
+    expect(centeredPopupFeatures(520, 760)).toBe('popup=yes,width=520,height=760,left=360,top=30')
+  })
+
+  test('falls back to window.screen when outerWidth/outerHeight report zero', () => {
+    // A headless runner: no chrome geometry to report at all.
+    stubWindow({ outerWidth: 0, outerHeight: 0, screen: { width: 1600, height: 900 } })
+
+    expect(centeredPopupFeatures(520, 760)).toBe('popup=yes,width=520,height=760,left=540,top=70')
+  })
+
+  test('never places the popup off-screen when it is larger than the window', () => {
+    stubWindow({ outerWidth: 400, outerHeight: 400 })
+
+    expect(centeredPopupFeatures(520, 760)).toBe('popup=yes,width=520,height=760,left=0,top=0')
+  })
+})

package/tsconfig.json

@@ -7,5 +7,5 @@
     "rootDir": "./src/",
     "outDir": "./build/"
   },
-  "exclude": ["./dist/**/*", "./build/**/*", "./*.ts"]
+  "exclude": ["./dist/**/*", "./build/**/*", "./tests/**/*", "./*.ts"]
 }

package/build/modules.d.ts

@@ -1,2 +0,0 @@
-export declare const modules: import("@owlmeans/client-entrypoint").ClientEntrypoint<{}, import("@owlmeans/client-entrypoint").ClientRequest<{}>>[];
-//# sourceMappingURL=modules.d.ts.map

package/build/modules.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"modules.d.ts","sourceRoot":"","sources":["../src/modules.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,OAAO,uHAAO,CAAA"}

package/build/modules.js

@@ -1,8 +0,0 @@
-import { DISPATCHER } from '@owlmeans/auth';
-import { modules as list } from '@owlmeans/client-auth';
-import { elevate } from '@owlmeans/client-entrypoint';
-import { handler } from '@owlmeans/client';
-import { Dispatcher } from './components/dispatcher/component.js';
-elevate(list, DISPATCHER, handler(Dispatcher), { force: true });
-export const modules = list;
-//# sourceMappingURL=modules.js.map

package/build/modules.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"modules.js","sourceRoot":"","sources":["../src/modules.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAA;AAEjE,OAAO,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAA;AAE/D,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAA"}