@owlmeans/web-client 0.1.18-rc.13 → 0.1.18-rc.14

package/src/login/surrogate.ts

@@ -1,9 +1,10 @@
 import {
-  adoptToken, clearSurrogate, markSurrogate, LoginOutcome,
-  LOGIN_SURROGATE_FEATURES, LOGIN_SURROGATE_NAME, LOGIN_TOKEN_MESSAGE, LOGIN_WATCH_INTERVAL,
+  adoptToken, clearSurrogate, markSurrogate, revokeToken, surrogatePath, LoginIntent, LoginOutcome,
+  LOGIN_LOGOUT_MESSAGE, LOGIN_SURROGATE_FEATURES, LOGIN_SURROGATE_NAME, LOGIN_TOKEN_MESSAGE,
 } from '@owlmeans/client-auth/login'
-import type { LoginContext, LoginPlugin } 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'
 
 /**
  * Login for a document that cannot complete the flow where it is.
@@ -23,94 +24,14 @@ import { SURROGATE_LOGIN, SURROGATE_LOGIN_PRIORITY } from './consts.js'
  * 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 => ({
-  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`.
-    const surrogate = window.open(request.url, LOGIN_SURROGATE_NAME, LOGIN_SURROGATE_FEATURES)
-    if (surrogate == null) {
-      return Promise.resolve(LoginOutcome.Failed)
-    }
-
-    return new Promise<LoginOutcome>(resolve => {
-      let settled = false
-      let watch: ReturnType<typeof setInterval> | undefined
-
-      const finish = (result: LoginOutcome): void => {
-        if (settled) {
-          return
-        }
-        settled = true
-        window.removeEventListener('message', onMessage)
-        if (watch != null) {
-          clearInterval(watch)
-        }
-        resolve(result)
-      }
-
-      function onMessage(event: MessageEvent): void {
-        if (event.origin !== window.location.origin) {
-          return
-        }
-        const data = event.data as { type?: string, token?: string } | null
-        if (data?.type !== LOGIN_TOKEN_MESSAGE || data.token == null || data.token === '') {
-          return
-        }
-        void adoptToken(ctx as LoginContext, data.token)
-          .then(async () => {
-            // 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, so it has to be true before it is returned.
-            await request.navigate?.()
-            finish(LoginOutcome.Handled)
-          })
-          .catch(() => finish(LoginOutcome.Failed))
-      }
-
-      window.addEventListener('message', onMessage)
-      // A window the user simply closes announces nothing, so the only way to stop waiting on it
-      // is to watch for it going away.
-      watch = setInterval(() => {
-        if (surrogate.closed) {
-          finish(LoginOutcome.Failed)
-        }
-      }, LOGIN_WATCH_INTERVAL)
-    })
-  },
-
-  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) => {
+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
@@ -128,5 +49,127 @@ export const makeSurrogateLoginPlugin = (): LoginPlugin => ({
     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, LOGIN_SURROGATE_FEATURES
+      )
+      if (surrogate == null) {
+        return Promise.resolve(LoginOutcome.Failed)
+      }
+
+      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, LOGIN_SURROGATE_FEATURES)
+        : 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) {
+        return local.then(async () => {
+          await request.navigate?.()
+
+          return LoginOutcome.Failed
+        })
+      }
+
+      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/modules.ts

@@ -1,9 +1,20 @@
-import { DISPATCHER } from '@owlmeans/auth'
+import { DISPATCHER, DISPATCHER_SURROGATE } 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'
+import { SurrogateScreen } from './login/screen.js'
 
 elevate(list, DISPATCHER, handler(Dispatcher), { force: true })
 
+/**
+ * Elevated here rather than in a relying-party package on purpose.
+ *
+ * The surrogate mechanic is not OIDC-specific — it is "run the login route one window up and hand
+ * the result back" — and every web application already spreads this list. Putting the screen here
+ * means `web-panel`, `mui-panel` and every generated target gain a working login window with no
+ * edit of their own, which is the only way an application that is already deployed can get it.
+ */
+elevate(list, DISPATCHER_SURROGATE, handler(SurrogateScreen))
+
 export const modules = list