@owlmeans/web-client 0.1.18-rc.2 → 0.1.18-rc.21

package/src/login/surrogate.ts

@@ -0,0 +1,175 @@
+import {
+  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, 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.
+ *
+ * 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, 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/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/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"}

package/src/modules.ts

@@ -1,9 +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