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

package/src/components/dispatcher/component.tsx

@@ -1,16 +1,33 @@
 import { DispatcherHOC } from '@owlmeans/client-auth'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useI18nLib } from '@owlmeans/client-i18n'
 import { AUTH_QUERY } from '@owlmeans/auth'
+import {
+  FallbackLoginScreen, LoginIntent, LoginOutcome, ResumeAction, resumeAction,
+} from '@owlmeans/client-auth/login'
+import { LoginSurrogateView, SurrogateStage } from '../../login/view.js'
 import { useContext } from '../../context.js'
 
-export const Dispatcher = DispatcherHOC(({ provideToken }) => {
+export const Dispatcher = DispatcherHOC(({ provideToken, navigate }) => {
   const context = useContext()
   const [query] = context.router().useSearchParams()
 
   const t = useI18nLib('auth', 'dispatcher')
+  const tAuth = useI18nLib('auth')
+
+  // Read in the component body, not in the effect: `window.name` is set by `window.open` before
+  // this document loads and `sessionStorage` carries the marker across the provider round trip, so
+  // the answer is already correct at first paint — and a first paint that showed the application
+  // before an effect corrected it is the defect this exists to prevent.
+  const [env] = useState(() => context.login().env())
+  const [outcome, setOutcome] = useState<LoginOutcome | null>(null)
+  // Nothing to return from and nobody signed in: offer the choice rather than starting a flow.
+  const [choose, setChoose] = useState(false)
 
   useEffect(() => {
+    // First statement of the effect on purpose: everything below can navigate this window away.
+    context.login().enter()
+
     const token = query.get(AUTH_QUERY)
     if (token != null) {
       const params: Record<string, string> = {}
@@ -21,15 +38,54 @@ export const Dispatcher = DispatcherHOC(({ provideToken }) => {
       })
 
       provideToken({ token }, params)
-    } else {
-      context.auth().authenticated().then(authzToken => {
-        if (authzToken == null) {
-          provideToken({ token: '' }, undefined)
-        }
-      })
+
+      return
     }
+
+    void context.auth().authenticated().then(async authzToken => {
+      if (authzToken == null || authzToken === '') {
+        setChoose(true)
+
+        return
+      }
+      // A session already exists in THIS document. Whether it is useful here, or belongs to the
+      // window that opened this one, is the plugin's call — the dispatcher reads no environment.
+      const settled = await context.login().resume(authzToken)
+      switch (resumeAction(settled)) {
+        case ResumeAction.Stop:
+          return
+        case ResumeAction.Render:
+          setOutcome(settled)
+
+          return
+        default:
+          await navigate()
+      }
+    })
   }, [])
 
+  // A surrogate window never renders the application, whatever else is true. Checked ahead of
+  // every other return for exactly that reason.
+  if (env.surrogate) {
+    return <LoginSurrogateView
+      intent={LoginIntent.Login}
+      stage={
+        outcome === LoginOutcome.Orphaned ? SurrogateStage.Orphaned
+          : outcome === LoginOutcome.Failed ? SurrogateStage.Failed
+            : outcome === LoginOutcome.Gesture ? SurrogateStage.Gesture
+              : SurrogateStage.Working
+      }
+      onAction={() => window.close()}
+      translate={(key, defaultValue) => tAuth(key, { defaultValue })}
+    />
+  }
+
+  if (choose) {
+    const Screen = context.login().screen() ?? FallbackLoginScreen
+
+    return <Screen translate={(key, defaultValue) => tAuth(key, { defaultValue })} />
+  }
+
   return query.has(AUTH_QUERY) ? <div style={{
     width: '100%', // Makes the div occupy the full width
     display: 'flex', // Enables flexbox layout

package/src/i18n/auth-be.json

@@ -2,5 +2,37 @@
   "dispatcher": {
     "loading": "Загрузка...",
     "error": "Не ўдалося прайсці аўтэнтыфікацыю: {{error}}"
+  },
+  "surrogate": {
+    "login": {
+      "working": "Выконваем уваход…",
+      "gesture": {
+        "title": "Працягніце, каб увайсці.",
+        "action": "Увайсці"
+      },
+      "handing": "Гатова. Вяртаемся ў праграму…",
+      "orphaned": "Уваход выкананы. Можаце закрыць гэтае акно і вярнуцца ў праграму.",
+      "failed": "Не ўдалося завяршыць. Закрыйце гэтае акно і паспрабуйце зноў.",
+      "standalone": {
+        "title": "Гэтая старонка выкарыстоўваецца для ўваходу з іншага акна.",
+        "action": "Адкрыць праграму"
+      },
+      "close": "Закрыць"
+    },
+    "logout": {
+      "working": "Выконваем выхад…",
+      "gesture": {
+        "title": "Працягніце, каб выйсці.",
+        "action": "Выйсці"
+      },
+      "handing": "Выхад выкананы. Вяртаемся ў праграму…",
+      "orphaned": "Выхад выкананы. Можаце закрыць гэтае акно.",
+      "failed": "Выхад тут не завершаны. Можаце закрыць гэтае акно.",
+      "standalone": {
+        "title": "Гэтая старонка выкарыстоўваецца для выхаду з іншага акна.",
+        "action": "Адкрыць праграму"
+      },
+      "close": "Закрыць"
+    }
   }
 }

package/src/i18n/auth-de.json

@@ -2,5 +2,37 @@
   "dispatcher": {
     "loading": "Wird geladen...",
     "error": "Authentifizierung fehlgeschlagen: {{error}}"
+  },
+  "surrogate": {
+    "login": {
+      "working": "Anmeldung läuft…",
+      "gesture": {
+        "title": "Fortfahren, um sich anzumelden.",
+        "action": "Anmelden"
+      },
+      "handing": "Fertig. Zurück zur Anwendung…",
+      "orphaned": "Angemeldet. Sie können dieses Fenster schließen und in der Anwendung fortfahren.",
+      "failed": "Das wurde nicht abgeschlossen. Schließen Sie dieses Fenster und versuchen Sie es erneut.",
+      "standalone": {
+        "title": "Diese Seite dient der Anmeldung aus einem anderen Fenster.",
+        "action": "Anwendung öffnen"
+      },
+      "close": "Schließen"
+    },
+    "logout": {
+      "working": "Abmeldung läuft…",
+      "gesture": {
+        "title": "Fortfahren, um sich abzumelden.",
+        "action": "Abmelden"
+      },
+      "handing": "Abgemeldet. Zurück zur Anwendung…",
+      "orphaned": "Abgemeldet. Sie können dieses Fenster schließen.",
+      "failed": "Die Abmeldung wurde hier nicht abgeschlossen. Sie können dieses Fenster schließen.",
+      "standalone": {
+        "title": "Diese Seite dient der Abmeldung aus einem anderen Fenster.",
+        "action": "Anwendung öffnen"
+      },
+      "close": "Schließen"
+    }
   }
 }

package/src/i18n/auth-en.json

@@ -2,5 +2,37 @@
   "dispatcher": {
     "loading": "Loading...",
     "error": "Authentication failed: {{error}}"
+  },
+  "surrogate": {
+    "login": {
+      "working": "Signing you in…",
+      "gesture": {
+        "title": "Continue to sign in.",
+        "action": "Sign in"
+      },
+      "handing": "Done. Returning to the application…",
+      "orphaned": "Signed in. You can close this window and continue in the application.",
+      "failed": "That did not complete. You can close this window and try again.",
+      "standalone": {
+        "title": "This page is used to sign in from another window.",
+        "action": "Open the application"
+      },
+      "close": "Close"
+    },
+    "logout": {
+      "working": "Signing you out…",
+      "gesture": {
+        "title": "Continue to sign out.",
+        "action": "Sign out"
+      },
+      "handing": "Signed out. Returning to the application…",
+      "orphaned": "Signed out. You can close this window.",
+      "failed": "Sign-out did not complete here. You can close this window.",
+      "standalone": {
+        "title": "This page is used to sign out from another window.",
+        "action": "Open the application"
+      },
+      "close": "Close"
+    }
   }
 }

package/src/i18n/auth-es.json

@@ -2,5 +2,37 @@
   "dispatcher": {
     "loading": "Cargando...",
     "error": "Error de autenticación: {{error}}"
+  },
+  "surrogate": {
+    "login": {
+      "working": "Iniciando sesión…",
+      "gesture": {
+        "title": "Continúa para iniciar sesión.",
+        "action": "Iniciar sesión"
+      },
+      "handing": "Listo. Volviendo a la aplicación…",
+      "orphaned": "Sesión iniciada. Puedes cerrar esta ventana y continuar en la aplicación.",
+      "failed": "No se completó. Cierra esta ventana e inténtalo de nuevo.",
+      "standalone": {
+        "title": "Esta página se usa para iniciar sesión desde otra ventana.",
+        "action": "Abrir la aplicación"
+      },
+      "close": "Cerrar"
+    },
+    "logout": {
+      "working": "Cerrando sesión…",
+      "gesture": {
+        "title": "Continúa para cerrar sesión.",
+        "action": "Cerrar sesión"
+      },
+      "handing": "Sesión cerrada. Volviendo a la aplicación…",
+      "orphaned": "Sesión cerrada. Puedes cerrar esta ventana.",
+      "failed": "El cierre de sesión no se completó aquí. Puedes cerrar esta ventana.",
+      "standalone": {
+        "title": "Esta página se usa para cerrar sesión desde otra ventana.",
+        "action": "Abrir la aplicación"
+      },
+      "close": "Cerrar"
+    }
   }
 }

package/src/i18n/auth-pl.json

@@ -2,5 +2,37 @@
   "dispatcher": {
     "loading": "Ładowanie...",
     "error": "Uwierzytelnianie nie powiodło się: {{error}}"
+  },
+  "surrogate": {
+    "login": {
+      "working": "Trwa logowanie…",
+      "gesture": {
+        "title": "Kontynuuj, aby się zalogować.",
+        "action": "Zaloguj się"
+      },
+      "handing": "Gotowe. Wracamy do aplikacji…",
+      "orphaned": "Zalogowano. Możesz zamknąć to okno i kontynuować w aplikacji.",
+      "failed": "Nie udało się ukończyć. Zamknij to okno i spróbuj ponownie.",
+      "standalone": {
+        "title": "Ta strona służy do logowania z innego okna.",
+        "action": "Otwórz aplikację"
+      },
+      "close": "Zamknij"
+    },
+    "logout": {
+      "working": "Trwa wylogowywanie…",
+      "gesture": {
+        "title": "Kontynuuj, aby się wylogować.",
+        "action": "Wyloguj się"
+      },
+      "handing": "Wylogowano. Wracamy do aplikacji…",
+      "orphaned": "Wylogowano. Możesz zamknąć to okno.",
+      "failed": "Wylogowanie nie zostało tu ukończone. Możesz zamknąć to okno.",
+      "standalone": {
+        "title": "Ta strona służy do wylogowania z innego okna.",
+        "action": "Otwórz aplikację"
+      },
+      "close": "Zamknij"
+    }
   }
 }

package/src/i18n/auth-ru.json

@@ -2,5 +2,37 @@
   "dispatcher": {
     "loading": "Загрузка...",
     "error": "Не удалось выполнить аутентификацию: {{error}}"
+  },
+  "surrogate": {
+    "login": {
+      "working": "Выполняем вход…",
+      "gesture": {
+        "title": "Продолжите, чтобы войти.",
+        "action": "Войти"
+      },
+      "handing": "Готово. Возвращаемся в приложение…",
+      "orphaned": "Вход выполнен. Можете закрыть это окно и вернуться в приложение.",
+      "failed": "Не удалось завершить. Закройте это окно и попробуйте снова.",
+      "standalone": {
+        "title": "Эта страница используется для входа из другого окна.",
+        "action": "Открыть приложение"
+      },
+      "close": "Закрыть"
+    },
+    "logout": {
+      "working": "Выполняем выход…",
+      "gesture": {
+        "title": "Продолжите, чтобы выйти.",
+        "action": "Выйти"
+      },
+      "handing": "Выход выполнен. Возвращаемся в приложение…",
+      "orphaned": "Выход выполнен. Можете закрыть это окно.",
+      "failed": "Выход здесь не завершён. Можете закрыть это окно.",
+      "standalone": {
+        "title": "Эта страница используется для выхода из другого окна.",
+        "action": "Открыть приложение"
+      },
+      "close": "Закрыть"
+    }
   }
 }

package/src/i18n/auth-uk.json

@@ -2,5 +2,37 @@
   "dispatcher": {
     "loading": "Завантаження...",
     "error": "Не вдалося пройти автентифікацію: {{error}}"
+  },
+  "surrogate": {
+    "login": {
+      "working": "Виконуємо вхід…",
+      "gesture": {
+        "title": "Продовжте, щоб увійти.",
+        "action": "Увійти"
+      },
+      "handing": "Готово. Повертаємось до застосунку…",
+      "orphaned": "Вхід виконано. Можете закрити це вікно й повернутися до застосунку.",
+      "failed": "Не вдалося завершити. Закрийте це вікно та спробуйте ще раз.",
+      "standalone": {
+        "title": "Ця сторінка використовується для входу з іншого вікна.",
+        "action": "Відкрити застосунок"
+      },
+      "close": "Закрити"
+    },
+    "logout": {
+      "working": "Виконуємо вихід…",
+      "gesture": {
+        "title": "Продовжте, щоб вийти.",
+        "action": "Вийти"
+      },
+      "handing": "Вихід виконано. Повертаємось до застосунку…",
+      "orphaned": "Вихід виконано. Можете закрити це вікно.",
+      "failed": "Вихід тут не завершено. Можете закрити це вікно.",
+      "standalone": {
+        "title": "Ця сторінка використовується для виходу з іншого вікна.",
+        "action": "Відкрити застосунок"
+      },
+      "close": "Закрити"
+    }
   }
 }

package/src/login/index.ts

@@ -1,4 +1,7 @@
 export * from './consts.js'
+export * from './pump.js'
 export * from './redirect.js'
 export * from './surrogate.js'
+export * from './view.js'
+export * from './screen.js'
 export * from './service.js'

package/src/login/pump.ts

@@ -0,0 +1,53 @@
+import { LOGIN_WATCH_INTERVAL, LoginOutcome } from '@owlmeans/client-auth/login'
+
+/**
+ * Wait on a surrogate window until it says something, or goes away.
+ *
+ * Extracted so login and logout share one implementation rather than two that agree until one of
+ * them is changed. Every guard here was a real failure at some point:
+ *
+ * - the **origin pin** is not decoration — the message carries a bearer token, and a listener that
+ *   accepted any origin would take one from any page that could reach this window;
+ * - the **`settled` latch** stops a second message, or a close racing a message, resolving twice;
+ * - the **`closed` poll** is the only exit when the user simply closes the window, because a window
+ *   the user closes announces nothing at all;
+ * - the listener and the interval are removed on every path, including the ones that resolve.
+ */
+export const awaitSurrogate = async (
+  surrogate: Window,
+  messageType: string,
+  onMessage: (data: { type?: string, token?: string, ok?: boolean }) => Promise<LoginOutcome>
+): Promise<LoginOutcome> => await 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', handler)
+    if (watch != null) {
+      clearInterval(watch)
+    }
+    resolve(result)
+  }
+
+  function handler(event: MessageEvent): void {
+    if (event.origin !== window.location.origin) {
+      return
+    }
+    const data = event.data as { type?: string, token?: string, ok?: boolean } | null
+    if (data?.type !== messageType) {
+      return
+    }
+    void onMessage(data).then(finish).catch(() => finish(LoginOutcome.Failed))
+  }
+
+  window.addEventListener('message', handler)
+  watch = setInterval(() => {
+    if (surrogate.closed) {
+      finish(LoginOutcome.Failed)
+    }
+  }, LOGIN_WATCH_INTERVAL)
+})

package/src/login/redirect.ts

@@ -1,5 +1,5 @@
-import { LoginOutcome } from '@owlmeans/client-auth/login'
-import type { LoginPlugin } from '@owlmeans/client-auth/login'
+import { revokeToken, LoginOutcome } from '@owlmeans/client-auth/login'
+import type { LoginContext, LoginPlugin } from '@owlmeans/client-auth/login'
 import { REDIRECT_LOGIN } from './consts.js'
 
 /**
@@ -35,4 +35,25 @@ export const makeRedirectLoginPlugin = (): LoginPlugin => ({
 
   // Nothing to hand anywhere — the token was issued in the document that will use it.
   complete: async () => LoginOutcome.Passed,
+
+  // `resume` is deliberately NOT implemented. The host defaults to `Passed`, which is "keep the
+  // session you already have and carry on" — byte for byte what an ordinary tab has always done.
+  // Implementing it here would be the one way to regress every unframed application.
+
+  logout: (ctx, request) => revokeToken(ctx as LoginContext).then(async () => {
+    if (request.navigate != null) {
+      await request.navigate()
+
+      return LoginOutcome.Handled
+    }
+    // A reload rather than a client-side navigation: `useOwlAuth` and its kin read through
+    // cached values, so the honest way to make a whole application forget a session is to
+    // rebuild it. This is what `useLogout` did inline before the mechanic became a plugin.
+    window.location.reload()
+
+    return LoginOutcome.Handled
+  }),
+
+  // Nothing to tell anyone — the session was cleared in the document that owned it.
+  logoutComplete: async () => LoginOutcome.Passed,
 })

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 })}
+  />
+}