@plone-collective/volto-identity 1.0.0-alpha.1

package/src/actions/index.ts

@@ -0,0 +1,530 @@
+/**
+ * Actions for the identity login flows.
+ *
+ * Every one of them is a plain Volto API action: the `request` key is picked
+ * up by Volto's api middleware, which does the fetch and dispatches the
+ * `_PENDING` / `_SUCCESS` / `_FAIL` triple.
+ * @module actions
+ */
+
+import {
+  COMPLETE_CALLBACK,
+  CONFIRM_MAGIC_LINK,
+  GET_CONSENT_REQUEST,
+  LIST_GRANTS,
+  WITHDRAW_GRANT,
+  CREATE_CLIENT,
+  CREATE_PROVIDER,
+  DELETE_CLIENT,
+  DELETE_PROVIDER,
+  GET_MY_PROFILE,
+  GET_USER_ACCOUNT,
+  GET_USER_PROFILE,
+  LIST_GROUP_MEMBERS,
+  LIST_CLIENTS,
+  LIST_DRIVERS,
+  LIST_KEYS,
+  LIST_IDENTITIES,
+  LIST_LOGIN_PROVIDERS,
+  LIST_PROVIDERS,
+  ROTATE_CLIENT_SECRET,
+  ROTATE_KEY,
+  SEND_MAGIC_LINK,
+  SET_PREFERRED_EMAIL,
+  START_LINKING,
+  START_PROVIDER_LOGIN,
+  TEST_PROVIDER,
+  UNLINK_IDENTITY,
+  UPDATE_CLIENT,
+  UPDATE_PROVIDER,
+} from '../constants/ActionTypes';
+
+/**
+ * List the providers this site offers.
+ */
+export function listLoginProviders() {
+  return {
+    type: LIST_LOGIN_PROVIDERS,
+    request: { op: 'get', path: '/@login-providers' },
+  };
+}
+
+/**
+ * Start an authorization-code flow against one provider.
+ *
+ * Separate from the listing on purpose: this mints the state, PKCE verifier
+ * and nonce, so calling it for every provider on page load would leave a pile
+ * of unused attempts behind.
+ *
+ * @param providerId Provider to log in with.
+ * @param cameFrom Where to send the user afterwards.
+ */
+export function startProviderLogin(providerId: string, cameFrom = '') {
+  const query = cameFrom ? `?came_from=${encodeURIComponent(cameFrom)}` : '';
+  return {
+    type: START_PROVIDER_LOGIN,
+    request: { op: 'get', path: `/@login-providers/${providerId}${query}` },
+  };
+}
+
+/**
+ * Hand the provider's answer back to the backend.
+ *
+ * @param provider Provider the code came from.
+ * @param code The authorization code.
+ * @param state The state the provider echoed back.
+ */
+export function completeCallback(
+  provider: string,
+  code: string,
+  state: string,
+) {
+  return {
+    type: COMPLETE_CALLBACK,
+    request: {
+      op: 'post',
+      path: '/@identity-callback',
+      data: { provider, code, state },
+    },
+  };
+}
+
+/**
+ * Ask for a magic link.
+ *
+ * @param email Address to send it to.
+ */
+export function sendMagicLink(email: string) {
+  return {
+    type: SEND_MAGIC_LINK,
+    request: { op: 'post', path: '/@magic-link', data: { email } },
+  };
+}
+
+/**
+ * Redeem a magic link.
+ *
+ * @param token The token from the emailed link.
+ */
+export function confirmMagicLink(token: string) {
+  return {
+    type: CONFIRM_MAGIC_LINK,
+    request: {
+      op: 'post',
+      path: '/@magic-link-confirm',
+      data: { token },
+    },
+  };
+}
+
+/**
+ * Read a user, with what this add-on knows about them.
+ *
+ * `@users/<userid>` is Plone's own endpoint; this package's serializer adds
+ * `identities`, `source` and `profile_url` to it, which is what the toolbar
+ * and the profile links read. Held separately from Volto's `state.users.user`
+ * on purpose: that one is fetched when the user menu opens and cleared
+ * around it, and the avatar has to survive a page the menu was never opened
+ * on.
+ *
+ * @param userid The user to read.
+ */
+export function getUserProfile(userid: string) {
+  return {
+    type: GET_USER_PROFILE,
+    request: { op: 'get', path: `/@users/${userid}` },
+  };
+}
+
+/**
+ * List the identities the signed-in user owns.
+ *
+ * The answer also carries `available`: every *enabled* provider the caller
+ * has not linked yet. That is a different question from what the login screen
+ * offers -- a provider taken off the login page is still one an existing user
+ * may attach -- so it is the endpoint's own answer rather than the expanded
+ * `login-providers` listing, which remains available for a caller that wants
+ * the login screen's view of things.
+ *
+ * @param withProviders Whether to expand the login providers alongside.
+ */
+export function listIdentities(withProviders = false) {
+  const query = withProviders ? '?expand=login-providers' : '';
+  return {
+    type: LIST_IDENTITIES,
+    request: { op: 'get', path: `/@identities${query}` },
+  };
+}
+
+/**
+ * Start a flow that attaches another provider to the caller's account.
+ *
+ * Answers one of two shapes. A redirect provider gives back an
+ * `authorize_url` to follow; the email provider gives back `sent`, because
+ * its flow continues in a mailbox rather than in this tab.
+ *
+ * @param providerId Provider to link.
+ * @param cameFrom Where to send the user afterwards.
+ * @param email Address to confirm, for the email provider only.
+ */
+export function startLinking(providerId: string, cameFrom = '', email = '') {
+  return {
+    type: START_LINKING,
+    request: {
+      op: 'post',
+      path: '/@identities',
+      // Sent only when there is one: the backend requires an address for the
+      // email provider and takes none for any other.
+      data: email
+        ? { provider: providerId, came_from: cameFrom, email }
+        : { provider: providerId, came_from: cameFrom },
+    },
+  };
+}
+
+/**
+ * Detach one identity.
+ *
+ * @param provider Provider id.
+ * @param subject Provider-side subject.
+ */
+export function unlinkIdentity(provider: string, subject: string) {
+  return {
+    type: UNLINK_IDENTITY,
+    request: {
+      op: 'del',
+      path: `/@identities/${encodeURIComponent(provider)}/${encodeURIComponent(subject)}`,
+    },
+  };
+}
+
+/**
+ * List the members of one group, nested memberships included.
+ *
+ * plone.restapi's `@groups/<id>` already carries member userids and already
+ * sees the nesting; what it cannot do is name each person, search within the
+ * group, or say what feeds into it. This does all three.
+ *
+ * @param groupId The group to read.
+ * @param query Case-insensitive substring, matched against name and login.
+ */
+export function listGroupMembers(groupId: string, query = '') {
+  const search = query ? `?query=${encodeURIComponent(query)}` : '';
+  return {
+    type: LIST_GROUP_MEMBERS,
+    request: {
+      op: 'get',
+      path: `/@group-members/${encodeURIComponent(groupId)}${search}`,
+    },
+  };
+}
+
+/**
+ * Read how one account gets in, and when it last did.
+ *
+ * `Manage users`, except when a caller asks about themselves.
+ *
+ * @param userid The account to read.
+ */
+export function getUserAccount(userid: string) {
+  return {
+    type: GET_USER_ACCOUNT,
+    request: {
+      op: 'get',
+      path: `/@user-account/${encodeURIComponent(userid)}`,
+    },
+  };
+}
+
+/**
+ * List the drivers, with the schema the control-panel form renders from.
+ */
+export function listDrivers() {
+  return {
+    type: LIST_DRIVERS,
+    request: { op: 'get', path: '/@identity-drivers' },
+  };
+}
+
+/**
+ * List the configured providers.
+ */
+export function listProviders() {
+  return {
+    type: LIST_PROVIDERS,
+    request: { op: 'get', path: '/@identity-providers' },
+  };
+}
+
+/**
+ * Create a provider.
+ *
+ * @param data The provider record.
+ */
+export function createProvider(data: Record<string, unknown>) {
+  return {
+    type: CREATE_PROVIDER,
+    request: { op: 'post', path: '/@identity-providers', data },
+  };
+}
+
+/**
+ * Update a provider in place.
+ *
+ * @param providerId Provider to update.
+ * @param data The fields to change.
+ */
+/**
+ * Move one of your addresses to the front of your profile's list.
+ *
+ * Which address stands for you is the order of that list -- the backend
+ * derives `email` from it, preferring the first verified one -- so choosing is
+ * a reorder rather than a field of its own. A `PATCH` on the profile is what
+ * saving the edit form does, and the same permission covers both.
+ *
+ * The whole list is sent, not just the address, because that is what the field
+ * is: sending one entry would replace the list with it.
+ *
+ * @param profilePath App-relative path of the profile.
+ * @param addresses The addresses in their new order.
+ */
+export function setPreferredEmail(profilePath: string, addresses: string[]) {
+  return {
+    type: SET_PREFERRED_EMAIL,
+    request: {
+      op: 'patch',
+      path: profilePath,
+      data: { emails: addresses },
+    },
+  };
+}
+
+export function updateProvider(
+  providerId: string,
+  data: Record<string, unknown>,
+) {
+  return {
+    type: UPDATE_PROVIDER,
+    request: {
+      op: 'patch',
+      path: `/@identity-providers/${encodeURIComponent(providerId)}`,
+      data,
+    },
+  };
+}
+
+/**
+ * Remove a provider.
+ *
+ * @param providerId Provider to remove.
+ */
+export function deleteProvider(providerId: string) {
+  return {
+    type: DELETE_PROVIDER,
+    request: {
+      op: 'del',
+      path: `/@identity-providers/${encodeURIComponent(providerId)}`,
+    },
+  };
+}
+
+/**
+ * Check that a provider can actually be reached.
+ *
+ * @param providerId Provider to check.
+ */
+export function testProvider(providerId: string) {
+  return {
+    type: TEST_PROVIDER,
+    request: {
+      op: 'post',
+      path: `/@identity-providers/${encodeURIComponent(providerId)}/test-connection`,
+      data: {},
+    },
+  };
+}
+
+/**
+ * Ask where the signed-in user's own Profile is, and how far along it is.
+ *
+ * Used for first-login routing: a user whose Profile is still `incomplete`
+ * should be asked to fill it in before being sent on their way. Answers
+ * usably for a user who has no Profile, so the caller does not have to know
+ * whether there is one.
+ */
+export function getMyProfile() {
+  return {
+    type: GET_MY_PROFILE,
+    request: { op: 'get', path: '/@my-profile' },
+  };
+}
+
+/** Base path of the OAuth client registry. */
+const CLIENTS = '/@identity-clients';
+
+/** Base path of the signing key ring. */
+const KEYS = '/@identity-keys';
+
+/**
+ * List the OAuth clients registered against this site.
+ *
+ * The other direction from `listProviders`: those are who this site lets
+ * people log in *with*, these are who may log in *to* it.
+ */
+export function listClients() {
+  return {
+    type: LIST_CLIENTS,
+    request: { op: 'get', path: CLIENTS },
+  };
+}
+
+/**
+ * Register an OAuth client.
+ *
+ * The answer carries the client secret, and it is the only time it exists:
+ * the server stores a hash and cannot read it back. Whatever handles this
+ * result has to put it in front of the operator immediately.
+ *
+ * @param data The registration.
+ */
+export function createClient(data: Record<string, unknown>) {
+  return {
+    type: CREATE_CLIENT,
+    request: { op: 'post', path: CLIENTS, data },
+  };
+}
+
+/**
+ * Amend a client registration.
+ *
+ * `client_id` and `auth_method` are not editable and the backend refuses
+ * them, along with any field it does not know: silently dropping one is how
+ * somebody comes to believe they changed something they did not.
+ *
+ * @param clientId The client to amend.
+ * @param data The fields to change.
+ */
+export function updateClient(clientId: string, data: Record<string, unknown>) {
+  return {
+    type: UPDATE_CLIENT,
+    request: {
+      op: 'patch',
+      path: `${CLIENTS}/${encodeURIComponent(clientId)}`,
+      data,
+    },
+  };
+}
+
+/**
+ * Unregister a client.
+ *
+ * Also a revocation: access tokens carry the client id as their audience and
+ * it is checked against the registry on every request, so this stops its
+ * tokens working at once.
+ *
+ * @param clientId The client to remove.
+ */
+export function deleteClient(clientId: string) {
+  return {
+    type: DELETE_CLIENT,
+    request: { op: 'del', path: `${CLIENTS}/${encodeURIComponent(clientId)}` },
+  };
+}
+
+/**
+ * Mint a client a fresh secret, discarding the old one.
+ *
+ * As with registration the answer carries the only copy.
+ *
+ * @param clientId The client to rotate.
+ */
+export function rotateClientSecret(clientId: string) {
+  return {
+    type: ROTATE_CLIENT_SECRET,
+    request: {
+      op: 'post',
+      path: `${CLIENTS}/${encodeURIComponent(clientId)}/rotate-secret`,
+      data: {},
+    },
+  };
+}
+
+/** Describe the signing key ring. Metadata only; never key material. */
+export function listKeys() {
+  return {
+    type: LIST_KEYS,
+    request: { op: 'get', path: KEYS },
+  };
+}
+
+/**
+ * Rotate the signing key.
+ *
+ * Previous keys stay in the ring so tokens already issued keep verifying by
+ * `kid`. The ring is bounded, so rotating past that bound inside one
+ * access-token lifetime does invalidate tokens still in flight.
+ */
+export function rotateKey() {
+  return {
+    type: ROTATE_KEY,
+    request: { op: 'post', path: `${KEYS}/rotate`, data: {} },
+  };
+}
+
+/**
+ * Describe the authorization request the browser arrived with.
+ *
+ * Read-only, and deliberately so: this records no consent and issues no
+ * code. The answer goes back to the authorization endpoint, which decides
+ * again from scratch -- a client disabled between the question and the
+ * answer is refused on the way out as surely as on the way in.
+ *
+ * @param search The query string the consent route was reached with,
+ *   including its leading `?`. Passed straight through rather than rebuilt
+ *   from parsed parameters: an authorization request is compared byte for
+ *   byte further down the flow, and a round trip through a parser is a
+ *   chance to change it.
+ */
+export function getConsentRequest(search: string) {
+  return {
+    type: GET_CONSENT_REQUEST,
+    request: { op: 'get', path: `/@oauth-consent${search}` },
+  };
+}
+
+/** Base path of the caller's own OAuth grants. */
+const GRANTS = '/@oauth-grants';
+
+/**
+ * List the applications the caller has authorized.
+ *
+ * The counterpart of `listIdentities`: that answers which providers they
+ * sign in with, this which applications they signed in to.
+ */
+export function listGrants() {
+  return {
+    type: LIST_GRANTS,
+    request: { op: 'get', path: GRANTS },
+  };
+}
+
+/**
+ * Withdraw the caller's agreement with one client.
+ *
+ * The backend forgets the agreement *and* revokes that client's refresh
+ * tokens for this user, because forgetting alone would only decide the next
+ * authorization. It answers with how many sessions ended and how long an
+ * access token already minted may still work, neither of which this can
+ * know on its own.
+ *
+ * @param clientId The client to withdraw from.
+ */
+export function withdrawGrant(clientId: string) {
+  return {
+    type: WITHDRAW_GRANT,
+    request: {
+      op: 'del',
+      path: `${GRANTS}/${encodeURIComponent(clientId)}`,
+    },
+  };
+}

package/src/components/Applications/Applications.tsx

@@ -0,0 +1,169 @@
+/**
+ * Applications container: the authorized-applications page in user settings.
+ *
+ * Chrome and store, the way the identities page has them; the panel below
+ * does the rendering. This one adds the confirmation, because withdrawing is
+ * the destructive half and the person doing it should know what it costs
+ * before it happens rather than read about it afterwards.
+ * @module components/Applications/Applications
+ */
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useLocation } from 'react-router-dom';
+import { createPortal } from 'react-dom';
+import { Container, Segment } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { toast } from 'react-toastify';
+
+import { Helmet } from '@plone/volto/helpers/Helmet/Helmet';
+import { useClient } from '@plone/volto/hooks/client/useClient';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import backSVG from '@plone/volto/icons/back.svg';
+
+import { listGrants, withdrawGrant } from '../../actions';
+import ApplicationsPanel from './ApplicationsPanel';
+import ConfirmModal from '../ControlPanel/ConfirmModal';
+
+const messages = defineMessages({
+  title: { id: 'Applications', defaultMessage: 'Applications' },
+  back: { id: 'Back', defaultMessage: 'Back' },
+  confirm: {
+    id: 'Withdraw access for {client}?',
+    defaultMessage:
+      'Withdraw access for {client}? It will be signed out everywhere and ' +
+      'will have to ask you again next time.',
+  },
+  withdraw: { id: 'Withdraw access', defaultMessage: 'Withdraw access' },
+  withdrawn: {
+    id: 'Access withdrawn',
+    defaultMessage: 'Access withdrawn',
+  },
+  error: { id: 'Error', defaultMessage: 'Error' },
+});
+
+const Applications: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const isClient = useClient();
+  const { pathname } = useLocation();
+  // Which client is being withdrawn, so only that row's button goes dead
+  // rather than the whole list.
+  const [withdrawing, setWithdrawing] = useState<string | null>(null);
+  // Which one's details are on screen. Held here rather than in the URL: a
+  // detail view is a way of reading one row of this page, not a page of its
+  // own, and a bookmark to somebody's authorization of one application is
+  // not a thing worth being able to share.
+  const [selected, setSelected] = useState<string | null>(null);
+
+  const grants = useSelector((state: any) => state.oauthGrants);
+
+  useEffect(() => {
+    dispatch(listGrants());
+  }, [dispatch]);
+
+  // Which application the question is being asked about, or null when it is
+  // not being asked. A blocking browser dialog was doing this, which froze
+  // the page and read as a different application than the one around it.
+  const [confirming, setConfirming] = useState<{
+    clientId: string;
+    title: string;
+  } | null>(null);
+
+  const onWithdraw = useCallback(
+    (clientId: string) => {
+      const grant = grants?.data?.items?.find(
+        (item: { client_id: string }) => item.client_id === clientId,
+      );
+      setConfirming({ clientId, title: grant?.title || clientId });
+    },
+    [grants],
+  );
+
+  const onConfirmWithdraw = useCallback(() => {
+    const asked = confirming;
+    setConfirming(null);
+    if (!asked) {
+      return;
+    }
+    const clientId = asked.clientId;
+    setWithdrawing(clientId);
+    (dispatch(withdrawGrant(clientId)) as any)
+      .then(() => {
+        toast.success(
+          <Toast success title={intl.formatMessage(messages.withdrawn)} />,
+        );
+        // Back to the list: the application whose details were on screen
+        // is the one that just stopped existing.
+        setSelected(null);
+        // Re-read rather than drop the row locally: the listing is what
+        // says whether anything is left, and a locally pruned one would
+        // disagree with the server the moment anything else changed.
+        dispatch(listGrants());
+      })
+      .catch((err: any) => {
+        toast.error(
+          <Toast
+            error
+            title={intl.formatMessage(messages.error)}
+            content={err?.response?.body?.error?.message ?? String(err)}
+          />,
+        );
+      })
+      .finally(() => setWithdrawing(null));
+  }, [confirming, dispatch, intl]);
+
+  return (
+    <Container id="page-applications">
+      <ConfirmModal
+        open={confirming !== null}
+        header={confirming?.title ?? ''}
+        content={intl.formatMessage(messages.confirm, {
+          client: confirming?.title ?? '',
+        })}
+        confirmLabel={intl.formatMessage(messages.withdraw)}
+        onCancel={() => setConfirming(null)}
+        onConfirm={onConfirmWithdraw}
+      />
+      <Helmet title={intl.formatMessage(messages.title)} />
+      <Segment.Group raised>
+        <Segment className="primary">
+          {intl.formatMessage(messages.title)}
+        </Segment>
+        <Segment>
+          <ApplicationsPanel
+            grants={grants?.data ?? null}
+            loading={Boolean(grants?.loading)}
+            error={grants?.error}
+            selected={selected}
+            withdrawing={withdrawing}
+            onSelect={setSelected}
+            onWithdraw={onWithdraw}
+          />
+        </Segment>
+      </Segment.Group>
+      {isClient &&
+        createPortal(
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <Link to={`${getBaseUrl(pathname)}`} className="item">
+                <Icon
+                  name={backSVG}
+                  className="contents circled"
+                  size="30px"
+                  title={intl.formatMessage(messages.back)}
+                />
+              </Link>
+            }
+          />,
+          document.getElementById('toolbar') as HTMLElement,
+        )}
+    </Container>
+  );
+};
+
+export default Applications;