pryv 3.12.1 → 3.14.2

package/src/Browser/LoginButton.js

@@ -5,10 +5,18 @@
 const Cookies = require('./CookieUtils');
 const AuthStates = require('../Auth/AuthStates');
 const AuthController = require('../Auth/AuthController');
+const ProfileStore = require('../Auth/ProfileStore');
 const Messages = require('../Auth/LoginMessages');
+const handoff = require('../lib/handoff');
+const pollUrls = require('../lib/pollUrls');
 const utils = require('../utils');
 
-/* global location, confirm */
+/* global location */
+
+/** Suffix of the cookie that holds the remembered accounts. */
+const PROFILES_COOKIE_SUFFIX = '-profiles';
+/** Encoded length kept under the ~4096-byte cookie limit (name and attributes included). */
+const PROFILES_COOKIE_MAX_LENGTH = 3500;
 
 /**
  * @memberof pryv.Browser
@@ -57,6 +65,10 @@ class LoginButton {
       case AuthStates.NEED_SIGNIN: {
         const loginUrl = state.authUrl || state.url; // url is deprecated
         if (this.authSettings.authRequest.returnURL) { // open on same page (no Popup)
+          // Remember the request this page started: on the way back, only
+          // its key is accepted and only its (server-issued) poll URL is
+          // fetched (see finishAuthProcessAfterRedirection).
+          writeAuthFlow(this._cookieKey, { key: state.key, poll: state.poll, authUrl: loginUrl });
           location.href = loginUrl;
           return;
         } else {
@@ -64,22 +76,32 @@ class LoginButton {
         }
         break;
       }
-      case AuthStates.AUTHORIZED:
-        this.text = state.username;
-        this.saveAuthorizationData({
-          apiEndpoint: state.apiEndpoint,
-          username: state.username
-        });
+      case AuthStates.AUTHORIZED: {
+        const profile = state.profile || ProfileStore.fromAccepted(state);
+        this.text = profileLabel(this, profile);
+        // Never remember a sign-in that cannot call the API (it would be
+        // restored on every page load).
+        if (!ProfileStore.carriesToken(profile?.apiEndpoint)) break;
+        const store = ProfileStore.read(this.getAuthorizationData());
+        // Kept to locate the account app after a reload (see AuthController.accountUrl).
+        const authUrl = withoutQuery(state.authUrl || this.auth?._authUrl) || store.authUrl;
+        this.saveAuthorizationData(ProfileStore.write(Object.assign(
+          ProfileStore.activate(store, profile, this.authSettings.maxProfiles),
+          { authUrl }
+        )));
+        break;
+      }
+      case AuthStates.SWITCHING:
+        this.text = this.messages.SWITCHING || '...';
         break;
       case AuthStates.SIGNOUT: {
-        const message = this.messages.SIGNOUT_CONFIRM ? this.messages.SIGNOUT_CONFIRM : 'Logout ?';
-        if (confirm(message)) {
-          // Awaited: a re-init left running in the background resumes later
-          // (after loading assets) and consumes whatever poll URL the page shows
-          // by then, racing any other sign-in in progress.
-          await this.deleteAuthorizationData();
-          await this.auth.init();
-        }
+        // A confirmed logout (the menu's "Log out", or `auth.signOut()`)
+        // clears the credentials itself.
+        if (this.auth?._signingOut) break;
+        // Menu disabled (`settings.menu: false`): confirm in a small built-in
+        // dialog, then clear the credentials (see buildMenu: the re-init is
+        // awaited there, never left running in the background).
+        this.openMenu({ confirmLogout: true });
         break;
       }
       case AuthStates.ERROR:
@@ -95,16 +117,104 @@ class LoginButton {
     }
   }
 
+  /**
+   * Open the account menu (signed-in account, "Manage my account",
+   * "Log out"). Returns false, and opens nothing, when the menu is disabled
+   * with `settings.menu: false`: the caller then falls back to the logout
+   * confirmation.
+   * @returns {boolean}
+   */
+  showMenu () {
+    if (this.authSettings.menu === false) return false;
+    return this.openMenu({ confirmLogout: false });
+  }
+
+  /**
+   * @private Open the account menu, or (`confirmLogout`) the plain "Log out?"
+   * confirmation used when the menu is disabled.
+   */
+  openMenu ({ confirmLogout }) {
+    if (typeof document === 'undefined') return false;
+    this.closeMenu();
+    this.menu = buildMenu(this, confirmLogout);
+    document.body.appendChild(this.menu.overlay);
+    this.menu.focusables()[0]?.focus();
+    return true;
+  }
+
+  /**
+   * Close the account menu if it is open. Dismissing the "Log out?" question
+   * (anything but "Log out") returns to the signed-in state: SIGNOUT was
+   * already emitted by the click, and the button would otherwise stay inert.
+   * @param {boolean} [loggingOut] - closed by the "Log out" action
+   * @returns {Promise<void>} resolves when any re-init it started is done
+   */
+  closeMenu (loggingOut) {
+    if (this.menu == null) return Promise.resolve();
+    const menu = this.menu;
+    this.menu = null;
+    document.removeEventListener('keydown', menu.onKeyDown, true);
+    if (menu.overlay.parentNode != null) menu.overlay.parentNode.removeChild(menu.overlay);
+    const previousFocus = /** @type {HTMLElement|null} */ (menu.previousFocus);
+    if (previousFocus != null && typeof previousFocus.focus === 'function') {
+      previousFocus.focus();
+    }
+    if (menu.confirmLogout && !loggingOut) {
+      // init() reports its own failures as the ERROR state
+      this.pending = this.auth.init().then(() => {}, (e) => { console.log('Error while re-initializing', e); });
+      return this.pending;
+    }
+    return Promise.resolve();
+  }
+
+  /**
+   * The stored sign-in: the active account from the main cookie (the only
+   * cookie versions without account switching read) and the remembered
+   * accounts from a second one.
+   */
   getAuthorizationData () {
-    return Cookies.get(this._cookieKey);
+    const active = Cookies.get(this._cookieKey);
+    const remembered = Cookies.get(this._cookieKey + PROFILES_COOKIE_SUFFIX);
+    if (remembered == null || !Array.isArray(remembered.profiles)) return active;
+    const data = Object.assign({}, active != null && active.deleted !== true ? active : {}, { profiles: remembered.profiles });
+    if (data.authUrl == null && remembered.authUrl != null) data.authUrl = remembered.authUrl;
+    return data;
   }
 
+  /**
+   * Store the sign-in. The main cookie holds the active account only (or is
+   * removed when none is active), so an older version never reads a list of
+   * remembered accounts as a signed-in one.
+   */
   saveAuthorizationData (authData) {
-    Cookies.set(this._cookieKey, authData);
+    if (authData == null) {
+      Cookies.del(this._cookieKey);
+      Cookies.del(this._cookieKey + PROFILES_COOKIE_SUFFIX);
+      return;
+    }
+    const { profiles, ...active } = authData;
+    if (typeof active.username === 'string' && typeof active.apiEndpoint === 'string') {
+      Cookies.set(this._cookieKey, active);
+    } else {
+      Cookies.del(this._cookieKey);
+    }
+    if (Array.isArray(profiles)) {
+      const remembered = Object.assign({ profiles: profiles.slice() }, active.authUrl != null ? { authUrl: active.authUrl } : {});
+      // A browser drops a cookie over ~4 KB: forget the least recently used
+      // accounts (the list is most recent first) until it fits.
+      while (remembered.profiles.length > 1 &&
+             encodeURIComponent(JSON.stringify(remembered)).length > PROFILES_COOKIE_MAX_LENGTH) {
+        remembered.profiles.pop();
+      }
+      Cookies.set(this._cookieKey + PROFILES_COOKIE_SUFFIX, remembered);
+    } else {
+      Cookies.del(this._cookieKey + PROFILES_COOKIE_SUFFIX);
+    }
   }
 
   async deleteAuthorizationData () {
     Cookies.del(this._cookieKey);
+    Cookies.del(this._cookieKey + PROFILES_COOKIE_SUFFIX);
   }
 
   /**
@@ -118,45 +228,147 @@ class LoginButton {
     // 3. Check if there is a pryvKey / pryvPoll (or legacy prYvkey /
     //    prYvpoll) as result of "out of page login"
     const url = window.location.href;
-    const pollUrl = retrievePollUrl(url);
-    if (pollUrl !== null) {
+    const key = retrieveKey(url);
+    if (key !== null) {
+      // Already signed in (from the stored sign-in): a return that does not
+      // end in a new sign-in (an account switch refused or failed, a stray
+      // link) leaves that account in place, as the popup path does for a
+      // switch. The state is then left as it is (no second AUTHORIZED).
+      const signedIn = authController.state?.status === AuthStates.AUTHORIZED;
+      // Only finish the auth request this page started (kept across the
+      // redirect by onStateChange), and poll the URL the server gave for
+      // it: a link carrying another key or poll URL must not sign the page
+      // in (to a foreign host, or to someone else's account).
+      const flow = readAuthFlow(this._cookieKey);
+      if (flow == null || flow.key !== key || typeof flow.poll !== 'string') {
+        console.warn('pryv: ignoring a sign-in return for a request this page did not start');
+        if (!signedIn) {
+          authController.state = {
+            status: AuthStates.ERROR,
+            message: 'Sign-in return does not match a sign-in started on this page',
+            error: { id: 'unexpected-auth-return' }
+          };
+        }
+        cleanUrl();
+        return;
+      }
+      clearAuthFlow(this._cookieKey);
+      const pollUrl = flow.poll;
+      // an app's connectFromKey(key) on this page then polls the same core
+      pollUrls.remember(key, pollUrl);
+      // the flow of this sign-in: a sign-out clears its cached credential
+      authController._authFlowKey = key;
+      let response, body;
       try {
-        const { body } = await utils.fetchGet(pollUrl);
-        authController.state = body;
+        ({ response, body } = await utils.fetchGet(pollUrl));
       } catch (e) {
-        authController.state = {
+        body = {
           status: AuthStates.ERROR,
           message: 'Cannot fetch result',
           error: e
         };
       }
-      // These params are one-shot; leaving them in the visible URL puts
-      // stale auth state into bookmarks / copied links.
+      if (response?.status === 403 && body?.status === 'REFUSED') {
+        // refused on the auth page: back to the sign-in button (as the popup path)
+        body = { status: AuthStates.INITIALIZED, serviceInfo: authController.serviceInfo };
+      } else if (body?.status == null) {
+        // unknown or expired key, or no answer the button can show
+        body = { status: AuthStates.ERROR, message: 'Cannot fetch result', error: body?.error ?? body };
+      }
+      // Shared-secret delivery: the ACCEPTED body carries a one-time
+      // `handoff` key, not the token. Redeem it exactly as the polling path
+      // does, under the flow key, and never report a token-less AUTHORIZED.
+      // Unlike the polling path, the state keeps its legacy shape (no `key`,
+      // credentials included), which existing redirect apps read.
+      if (handoff.isHandoffBody(body)) {
+        try {
+          const entry = await handoff.resolveHandoff(body, key);
+          body.apiEndpoint = entry.apiEndpoint;
+          body.token = entry.token;
+          body.username = entry.username;
+          delete body.handoff;
+        } catch (e) {
+          body = { status: AuthStates.ERROR, message: 'Credential hand-off failed', error: e };
+        }
+      }
+      if (body?.status === AuthStates.AUTHORIZED && typeof body.username === 'string') {
+        body.profile = ProfileStore.fromAccepted(body);
+        // the auth page of this sign-in locates the account app
+        if (typeof flow.authUrl === 'string') authController._authUrl = flow.authUrl;
+      } else if (signedIn) {
+        // refused or failed: stay on the account already signed in
+        console.warn('pryv: sign-in by redirection did not complete (' +
+          (body?.error?.id ?? body?.message ?? body?.status) + '); keeping the signed-in account');
+        cleanUrl();
+        return;
+      }
+      authController.state = body;
+      cleanUrl();
+    } else if (utils.cleanURLFromPrYvParams(url) !== url) {
+      // leftover one-shot params without a key (e.g. only `prYvstatus`)
+      cleanUrl();
+    }
+
+    // These params are one-shot; leaving them in the visible URL puts
+    // stale auth state into bookmarks / copied links.
+    function cleanUrl () {
       if (window.history && typeof window.history.replaceState === 'function') {
         window.history.replaceState(null, '', utils.cleanURLFromPrYvParams(url));
       }
     }
 
-    function retrievePollUrl (url) {
+    /** The key of the returning auth request, or null when the URL is not a return. */
+    function retrieveKey (url) {
       // Modern lowercase form (pryvKey / pryvPoll) is preferred; the
       // capital-Y form (prYvkey / prYvpoll) is accepted for back-compat
       // with apps emitting the legacy URL contract — see
       // [DEPRECATED] notes on cleanURLFromPrYvParams.
       const params = utils.getQueryParamsFromURL(url);
-      let pollUrl = null;
       const key = params.pryvKey || params.prYvkey;
-      if (key) {
-        pollUrl = authController.serviceInfo.access + key;
-      }
+      if (key) return key;
       const poll = params.pryvPoll || params.prYvpoll;
-      if (poll) {
-        pollUrl = poll;
-      }
-      return pollUrl;
+      // the poll URL ends with the key (`<access>/<key>`); only the key is
+      // used, the poll URL fetched is the one stored when the flow started
+      if (poll) return poll.split(/[?#]/)[0].split('/').filter(Boolean).pop() || null;
+      return null;
     }
   }
 }
 
+// ---- the auth request started by this page, kept across the redirect ----
+// sessionStorage: per tab and origin, gone when the tab closes, readable by
+// no other origin. Any failure (storage blocked) reads as "no flow".
+
+function authFlowStorageKey (cookieKey) {
+  return cookieKey + '-authflow';
+}
+
+function writeAuthFlow (cookieKey, flow) {
+  try {
+    window.sessionStorage.setItem(authFlowStorageKey(cookieKey), JSON.stringify(flow));
+  } catch (e) {
+    // the return will then be refused, as for any unknown request
+  }
+}
+
+function readAuthFlow (cookieKey) {
+  try {
+    const raw = window.sessionStorage.getItem(authFlowStorageKey(cookieKey));
+    const flow = raw == null ? null : JSON.parse(raw);
+    return flow != null && typeof flow === 'object' ? flow : null;
+  } catch (e) {
+    return null;
+  }
+}
+
+function clearAuthFlow (cookieKey) {
+  try {
+    window.sessionStorage.removeItem(authFlowStorageKey(cookieKey));
+  } catch (e) {
+    // nothing stored
+  }
+}
+
 module.exports = LoginButton;
 
 async function startLoginScreen (loginButton, authUrl) {
@@ -185,6 +397,270 @@ async function startLoginScreen (loginButton, authUrl) {
   }
 }
 
+const MENU_OPTIONS = ['logout', 'account', 'switch', 'info'];
+
+/** `kim-doe (via parent-doe)` for an account used through delegation. */
+function profileLabel (loginButton, profile) {
+  if (profile?.actingAs == null) return profile?.username;
+  return profile.username + ' (' + loginButton.messages.VIA + ' ' + profile.actingAs.delegate + ')';
+}
+
+/** The auth page URL without its query and fragment (they may carry a key). */
+function withoutQuery (url) {
+  if (typeof url !== 'string') return undefined;
+  try {
+    const u = new URL(url);
+    return u.origin + u.pathname;
+  } catch (e) {
+    return undefined;
+  }
+}
+
+/**
+ * Which menu entries to show: all by default; `settings.menu.<option>: false`
+ * or `settings.menu.hide: ['<option>', ...]` hides one.
+ */
+function menuOptions (menuSettings) {
+  const options = {};
+  MENU_OPTIONS.forEach((o) => { options[o] = true; });
+  if (menuSettings != null && typeof menuSettings === 'object') {
+    MENU_OPTIONS.forEach((o) => { if (menuSettings[o] === false) options[o] = false; });
+    if (Array.isArray(menuSettings.hide)) {
+      menuSettings.hide.forEach((o) => { if (o in options) options[o] = false; });
+    }
+  }
+  return options;
+}
+
+const MENU_CSS = `
+.pryv-menu-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; display: flex;
+  align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); }
+.pryv-menu { background: #fff; color: #222; min-width: 280px; max-width: 90vw; border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); font: 14px/1.4 system-ui, sans-serif; }
+.pryv-menu-header { display: flex; align-items: flex-start; justify-content: space-between;
+  gap: 16px; padding: 16px 16px 8px; }
+.pryv-menu-username { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
+.pryv-menu-info { color: #666; font-size: 13px; padding: 0 16px 12px; overflow-wrap: anywhere; }
+.pryv-menu-close { border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: #666; }
+.pryv-menu-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
+  padding: 12px 16px 16px; border-top: 1px solid #eee; }
+.pryv-menu-actions button { padding: 6px 12px; border-radius: 4px; border: 1px solid #ccc;
+  background: #f7f7f7; cursor: pointer; font: inherit; }
+.pryv-menu-actions button:focus-visible, .pryv-menu-close:focus-visible,
+.pryv-menu-switch button:focus-visible { outline: 2px solid #4a90d9; }
+.pryv-menu-acting { font-weight: 400; color: #666; font-size: 13px; }
+.pryv-menu-switch { padding: 8px 16px 12px; border-top: 1px solid #eee; }
+.pryv-menu-switch-title { color: #666; font-size: 13px; margin-bottom: 4px; }
+.pryv-menu-switch button { display: block; width: 100%; text-align: left; padding: 6px 8px; border: 0;
+  border-radius: 4px; background: none; cursor: pointer; font: inherit; color: inherit; }
+.pryv-menu-switch button:hover { background: #f2f2f2; }
+.pryv-menu-switch button[aria-current="true"] { font-weight: 600; cursor: default; }
+.pryv-menu-switch .pryv-menu-note { color: #888; font-size: 12px; }
+`;
+
+/** The built-in menu style, added once. A service's button CSS can override
+ * the `.pryv-menu*` classes. */
+function ensureMenuStyle () {
+  if (document.getElementById('pryv-menu-style') != null) return;
+  const style = document.createElement('style');
+  style.id = 'pryv-menu-style';
+  style.textContent = MENU_CSS;
+  // First in <head>: a service stylesheet loaded before or after the menu
+  // opens then wins at equal specificity.
+  document.head.insertBefore(style, document.head.firstChild);
+}
+
+function menuElement (tag, className, text) {
+  const el = document.createElement(tag);
+  if (className) el.className = className;
+  if (text != null) el.textContent = text;
+  return el;
+}
+
+/**
+ * Build the account menu: a modal dialog, closed by its close button,
+ * Escape, or a click outside it, with focus kept inside while open.
+ * `confirmLogout`: the same dialog reduced to the "Log out?" question, for
+ * `settings.menu: false` (SIGNOUT was already emitted by the click).
+ */
+function buildMenu (loginBtn, confirmLogout) {
+  ensureMenuStyle();
+  const auth = loginBtn.auth;
+  const messages = Object.assign({}, loginBtn.messages, auth.messages);
+  const options = confirmLogout
+    ? { logout: true, account: false, info: false }
+    : menuOptions(loginBtn.authSettings.menu);
+  const username = confirmLogout
+    ? (messages.SIGNOUT_CONFIRM || 'Logout?')
+    : (auth.state?.username || '');
+
+  const overlay = menuElement('div', 'pryv-menu-overlay');
+  const dialog = menuElement('div', 'pryv-menu');
+  // A question that needs an answer is an alertdialog; the menu is a dialog.
+  dialog.setAttribute('role', confirmLogout ? 'alertdialog' : 'dialog');
+  dialog.setAttribute('aria-modal', 'true');
+  dialog.setAttribute('aria-labelledby', 'pryv-menu-username');
+  overlay.appendChild(dialog);
+
+  const header = menuElement('div', 'pryv-menu-header');
+  const title = menuElement('div', 'pryv-menu-username', username || messages.MENU_TITLE);
+  title.id = 'pryv-menu-username';
+  const current = confirmLogout ? null : auth.currentProfile();
+  const actingAs = current?.actingAs;
+  if (actingAs != null) {
+    title.appendChild(menuElement('span', 'pryv-menu-acting',
+      ' (' + messages.ACTING_AS + ', ' + messages.VIA + ' ' + actingAs.delegate + ')'));
+  }
+  header.appendChild(title);
+  const close = menuElement('button', 'pryv-menu-close', '×');
+  close.type = 'button';
+  close.setAttribute('aria-label', messages.CLOSE);
+  close.addEventListener('click', () => loginBtn.closeMenu());
+  header.appendChild(close);
+  dialog.appendChild(header);
+
+  if (options.info) {
+    const serviceName = loginBtn.serviceInfo?.name || '';
+    const appId = loginBtn.authSettings.authRequest.requestingAppId;
+    dialog.appendChild(menuElement('div', 'pryv-menu-info', serviceName + ' · ' + messages.APP + ': ' + appId));
+  }
+
+  const profiles = confirmLogout ? [] : auth.profiles();
+  if (options.switch) {
+    const section = switchSection(loginBtn, messages, current, profiles);
+    if (section != null) dialog.appendChild(section);
+  }
+
+  const actions = menuElement('div', 'pryv-menu-actions');
+  if (options.account && auth.accountUrl() != null) {
+    const manageText = actingAs != null
+      ? (messages.MANAGE_ACCOUNT_OF || '').replace('{username}', current.username)
+      : messages.MANAGE_ACCOUNT;
+    const manage = menuElement('button', 'pryv-menu-account', manageText + ' ');
+    const arrow = menuElement('span', null, '↗');
+    arrow.setAttribute('aria-hidden', 'true');
+    manage.appendChild(arrow);
+    manage.type = 'button';
+    manage.addEventListener('click', () => {
+      auth.openAccountApp();
+      loginBtn.closeMenu();
+    });
+    actions.appendChild(manage);
+  }
+  if (options.logout) {
+    const logout = menuElement('button', 'pryv-menu-logout', messages.LOGOUT);
+    logout.type = 'button';
+    logout.addEventListener('click', () => {
+      loginBtn.closeMenu(true);
+      // Kept on the button (`pending`) so the re-init is awaited by whoever
+      // needs it, never left running unnoticed: a stray re-init would later
+      // consume whatever poll URL the page shows.
+      loginBtn.pending = confirmLogout
+        // SIGNOUT was emitted by the click already (legacy contract).
+        ? loginBtn.deleteAuthorizationData().then(() => auth.init()).then(() => {})
+        : auth.signOut();
+    });
+    if (confirmLogout) {
+      const cancel = menuElement('button', 'pryv-menu-cancel', messages.CANCEL);
+      cancel.type = 'button';
+      cancel.addEventListener('click', () => loginBtn.closeMenu());
+      actions.appendChild(cancel);
+    }
+    actions.appendChild(logout);
+    // "Log out" leaves the other remembered accounts; this one forgets them all
+    if (profiles.length > 1) {
+      const logoutAll = menuElement('button', 'pryv-menu-logout-all', messages.LOGOUT_ALL);
+      logoutAll.type = 'button';
+      logoutAll.addEventListener('click', () => {
+        loginBtn.closeMenu(true);
+        loginBtn.pending = auth.signOut({ all: true });
+      });
+      actions.appendChild(logoutAll);
+    }
+  }
+  dialog.appendChild(actions);
+
+  // Close on a click outside the dialog, not on a text selection that
+  // started inside it and ended outside.
+  let pressedOutside = false;
+  overlay.addEventListener('mousedown', (event) => { pressedOutside = event.target === overlay; });
+  overlay.addEventListener('click', (event) => {
+    if (event.target === overlay && pressedOutside) loginBtn.closeMenu();
+    pressedOutside = false;
+  });
+
+  const focusables = () => Array.from(dialog.querySelectorAll('button'));
+  const onKeyDown = (event) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      loginBtn.closeMenu();
+    } else if (event.key === 'Tab') {
+      const list = focusables();
+      if (list.length === 0) return;
+      const first = list[0];
+      const last = list[list.length - 1];
+      const active = document.activeElement;
+      if (event.shiftKey && (active === first || !dialog.contains(active))) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && (active === last || !dialog.contains(active))) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  document.addEventListener('keydown', onKeyDown, true);
+
+  return { overlay, dialog, onKeyDown, focusables, previousFocus: document.activeElement, confirmLogout };
+}
+
+/**
+ * The account switcher: "Switch back to <delegate>" while acting for an
+ * account; otherwise the remembered accounts and "Another account..." (when
+ * the platform has account delegation). Null when there is nothing to offer.
+ */
+function switchSection (loginBtn, messages, current, profiles) {
+  const auth = loginBtn.auth;
+  const run = (action) => {
+    loginBtn.closeMenu();
+    loginBtn.pending = action().catch((e) => { console.log('Error while switching account', e); });
+  };
+  const section = menuElement('div', 'pryv-menu-switch');
+  if (current?.actingAs != null) {
+    const back = menuElement('button', 'pryv-menu-switch-back',
+      (messages.SWITCH_BACK || '').replace('{username}', current.actingAs.delegate));
+    back.type = 'button';
+    back.addEventListener('click', () => run(() => auth.switchTo(null)));
+    section.appendChild(back);
+    return section;
+  }
+  const delegation = loginBtn.serviceInfo?.features?.delegation === true;
+  if (profiles.length < 2 && !delegation) return null;
+  section.appendChild(menuElement('div', 'pryv-menu-switch-title', messages.USE_FOR));
+  profiles.forEach((p) => {
+    const item = menuElement('button', 'pryv-menu-profile', p.username + ' ');
+    item.type = 'button';
+    const note = p.actingAs != null
+      ? messages.VIA + ' ' + p.actingAs.delegate
+      : '(' + messages.ME + ')';
+    item.appendChild(menuElement('span', 'pryv-menu-note',
+      note + (p.available ? '' : ' · ' + messages.UNAVAILABLE)));
+    if (p.active) {
+      item.setAttribute('aria-current', 'true');
+    } else {
+      item.addEventListener('click', () => run(() => auth.switchTo(p.username)));
+    }
+    section.appendChild(item);
+  });
+  if (delegation) {
+    const other = menuElement('button', 'pryv-menu-add-account', messages.OTHER_ACCOUNT);
+    other.type = 'button';
+    other.addEventListener('click', () => run(() => auth.addAccount()));
+    section.appendChild(other);
+  }
+  return section;
+}
+
 function setupButton (loginBtn) {
   loginBtn.loginButtonSpan = document.getElementById(loginBtn.authSettings.spanButtonID);
 

package/src/Connection.js

@@ -116,7 +116,10 @@ class Connection {
    * @param {Object|Array} [params={}] - The params associated with this method
    * @param {string} [expectedKey] - If given, returns the value of this key or throws an error if not present
    * @returns {Promise<Object>} Promise resolving to the API result or the value of expectedKey
-   * @throws {Error} If .error is present in the response or expectedKey is missing
+   * @throws {Error} If .error is present in the response or expectedKey is missing.
+   *   The message names the method and the server's error id and message; the full
+   *   error (or result) is on `innerObject`. The call's params are never in the message:
+   *   they can carry passwords and tokens, and error messages end up in logs and on screen.
    */
   async apiOne (method, params = {}, expectedKey) {
     const result = await this.api([{ method, params }]);
@@ -125,11 +128,18 @@ class Connection {
       result[0].error ||
       (expectedKey != null && result[0][expectedKey] == null)
     ) {
-      const innerObject = result[0]?.error || result;
+      const error = result[0]?.error;
+      const innerObject = error || result;
+      let reason;
+      if (error) {
+        reason = [error.id, error.message].filter((v) => v != null && v !== '').join(': ') || 'error answer';
+      } else if (result[0] == null) {
+        reason = 'no result';
+      } else {
+        reason = `"${expectedKey}" missing in result`;
+      }
       throw new PryvError(
-        `Error for api method: "${method}" with params: ${JSON.stringify(
-          params
-        )} >> Result: ${JSON.stringify(innerObject)}"`,
+        `Error for api method: "${method}" >> ${reason}`,
         innerObject
       );
     }
@@ -197,17 +207,13 @@ class Connection {
         });
       }
       const resRequest = await callHandler(thisBatch);
-      // result checks
+      // result checks: the answer rides on `innerObject`, never in the message
+      // (results can hold tokens, e.g. from accesses.*)
       if (!resRequest || !Array.isArray(resRequest.results)) {
-        throw new Error(
-          'API call result is not an Array: ' + JSON.stringify(resRequest)
-        );
+        throw new PryvError('API call result is not an Array', resRequest);
       }
       if (resRequest.results.length !== thisBatch.length) {
-        throw new Error(
-          'API call result Array does not match request: ' +
-            JSON.stringify(resRequest)
-        );
+        throw new PryvError('API call result Array does not match request', resRequest);
       }
 
       // eventually call handleResult