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

package/src/components/Applications/ApplicationsPanel.tsx

@@ -0,0 +1,342 @@
+/**
+ * The applications a user has authorized, without store or routing.
+ *
+ * The mirror image of the identities page: that one lists the providers
+ * somebody signs in *with*, this one the applications they signed in *to*.
+ *
+ * Shaped like the control panels — a table of what exists, then one
+ * application's details on their own — for the same reason those are: a row
+ * per thing scans, and the detail nobody is looking at costs nothing to read.
+ * The claims in particular are the reason: a person scanning four
+ * applications wants their names, and a person deciding whether to withdraw
+ * one wants every field it can read.
+ *
+ * Two things it is careful about, and both are about not lying to the reader.
+ * It names what each scope actually releases rather than the scope itself,
+ * because "profile" tells a person nothing while "name, preferred_username,
+ * picture" is what they agreed to hand over. And it says out loud that
+ * withdrawing does not stop an access token already issued: those are
+ * self-encoded with no denylist and live out their lifetime, so a screen
+ * promising an instant cutoff would be promising something the server cannot
+ * do.
+ * @module components/Applications/ApplicationsPanel
+ */
+import React from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { Button, Table } from 'semantic-ui-react';
+
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import backSVG from '@plone/volto/icons/back.svg';
+import deleteSVG from '@plone/volto/icons/delete.svg';
+import rightArrowSVG from '@plone/volto/icons/right-key.svg';
+
+import type { OAuthGrant, OAuthGrants } from '../../types';
+
+import './ApplicationsPanel.scss';
+
+const messages = defineMessages({
+  loading: {
+    id: 'Loading the applications you have authorized',
+    defaultMessage: 'Loading the applications you have authorized…',
+  },
+  empty: {
+    id: 'You have not authorized any application.',
+    defaultMessage:
+      'You have not authorized any application. Anything you sign in to with ' +
+      'this account will ask you first, and appear here afterwards.',
+  },
+  unavailable: {
+    id: 'That list could not be loaded.',
+    defaultMessage: 'That list could not be loaded.',
+  },
+  columnApplication: { id: 'Application', defaultMessage: 'Application' },
+  columnAuthorized: { id: 'Authorized', defaultMessage: 'Authorized' },
+  columnReads: { id: 'Reads', defaultMessage: 'Reads' },
+  columnActions: { id: 'Actions', defaultMessage: 'Actions' },
+  details: { id: 'Details', defaultMessage: 'Details' },
+  back: { id: 'Back to the list', defaultMessage: 'Back to the list' },
+  nothing: { id: 'Nothing', defaultMessage: 'Nothing' },
+  fields: {
+    id: '{count, plural, one {# field} other {# fields}}',
+    defaultMessage: '{count, plural, one {# field} other {# fields}}',
+  },
+  granted: {
+    id: 'You authorized this application on {date}.',
+    defaultMessage: 'You authorized this application on {date}.',
+  },
+  canRead: { id: 'It can read:', defaultMessage: 'It can read:' },
+  readsNothing: {
+    id: 'Nothing beyond the fact that you signed in.',
+    defaultMessage: 'Nothing beyond the fact that you signed in.',
+  },
+  scopes: { id: 'Scopes agreed to', defaultMessage: 'Scopes agreed to' },
+  unregistered: {
+    id: 'This application is no longer registered on this site.',
+    defaultMessage:
+      'This application is no longer registered on this site. It cannot ask ' +
+      'for anything, and you can remove the record.',
+  },
+  disabled: {
+    id: 'This application is disabled and is being refused already.',
+    defaultMessage:
+      'This application is disabled and is being refused already.',
+  },
+  withdraw: { id: 'Withdraw access', defaultMessage: 'Withdraw access' },
+  lingering: {
+    id: 'Withdrawing signs it out and makes it ask again.',
+    defaultMessage:
+      'Withdrawing signs an application out everywhere and makes it ask you ' +
+      'again next time. An access token it already holds keeps working for ' +
+      'up to {minutes, plural, one {# minute} other {# minutes}} — this site ' +
+      'cannot recall one that was already issued.',
+  },
+});
+
+interface ApplicationsPanelProps {
+  grants: OAuthGrants | null;
+  loading: boolean;
+  /** Whether the listing could not be read. */
+  error?: unknown;
+  /** The application whose details are on screen, if any. */
+  selected: string | null;
+  /** The client currently being withdrawn, if any. */
+  withdrawing: string | null;
+  onSelect: (clientId: string | null) => void;
+  onWithdraw: (clientId: string) => void;
+}
+
+/**
+ * Every field an application can read, named once.
+ *
+ * Deduplicated across scopes: the reader wants the list of things, not the
+ * list of scopes that happen to contain them.
+ *
+ * @param grant The agreement.
+ * @returns The claim names.
+ */
+function claimsOf(grant: OAuthGrant): string[] {
+  return Array.from(new Set(grant.scopes.flatMap((scope) => scope.claims)));
+}
+
+const ApplicationsPanel: React.FC<ApplicationsPanelProps> = ({
+  grants,
+  loading,
+  error,
+  selected,
+  withdrawing,
+  onSelect,
+  onWithdraw,
+}) => {
+  const intl = useIntl();
+
+  if (loading || (!grants && !error)) {
+    return (
+      <div className="identity-applications" role="status">
+        {intl.formatMessage(messages.loading)}
+      </div>
+    );
+  }
+
+  if (!grants) {
+    return (
+      <div className="identity-applications">
+        <p className="identity-error" role="alert">
+          {intl.formatMessage(messages.unavailable)}
+        </p>
+      </div>
+    );
+  }
+
+  /** How long access already granted can outlive a withdrawal. */
+  const lingering = (
+    <p className="identity-applications__lingering identity-note">
+      <FormattedMessage
+        {...messages.lingering}
+        values={{
+          // Rounded up: saying "up to 1 minute" for 90 seconds would
+          // understate it.
+          minutes: Math.max(1, Math.ceil(grants.access_token_ttl / 60)),
+        }}
+      />
+    </p>
+  );
+
+  const current = selected
+    ? grants.items.find((item) => item.client_id === selected)
+    : undefined;
+
+  if (current) {
+    const claims = claimsOf(current);
+    const busy = withdrawing === current.client_id;
+    return (
+      <div className="identity-applications" data-client={current.client_id}>
+        <button
+          type="button"
+          className="identity-applications__back"
+          onClick={() => onSelect(null)}
+        >
+          <Icon name={backSVG} size="18px" />
+          {intl.formatMessage(messages.back)}
+        </button>
+
+        <h2>
+          {current.title}{' '}
+          <small>
+            <code>{current.client_id}</code>
+          </small>
+        </h2>
+        <p className="identity-note">
+          {intl.formatMessage(messages.granted, {
+            // The date only. The hour somebody clicked Allow is not
+            // something they remember, and printing it invites them to try.
+            date: intl.formatDate(current.granted_at, {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            }),
+          })}
+        </p>
+
+        {!current.registered ? (
+          <p className="identity-note" role="status">
+            {intl.formatMessage(messages.unregistered)}
+          </p>
+        ) : !current.enabled ? (
+          <p className="identity-note" role="status">
+            {intl.formatMessage(messages.disabled)}
+          </p>
+        ) : null}
+
+        <h3>{intl.formatMessage(messages.canRead)}</h3>
+        {claims.length ? (
+          <ul className="identity-applications__claims">
+            {claims.map((claim) => (
+              <li key={claim}>
+                <code>{claim}</code>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="identity-note">
+            {intl.formatMessage(messages.readsNothing)}
+          </p>
+        )}
+
+        {/* The scopes as well as the claims, on the detail view only. They
+            are what the client asked for and what a support conversation
+            will be about; the claims are what the person actually cares
+            about, which is why the list above leads. */}
+        <h3>{intl.formatMessage(messages.scopes)}</h3>
+        <p>
+          <code>{current.scopes.map((scope) => scope.id).join(' ')}</code>
+        </p>
+
+        <button
+          type="button"
+          className="identity-button identity-button--danger"
+          data-action="withdraw"
+          disabled={busy}
+          onClick={() => onWithdraw(current.client_id)}
+        >
+          {intl.formatMessage(messages.withdraw)}
+        </button>
+
+        {lingering}
+      </div>
+    );
+  }
+
+  if (!grants.items.length) {
+    return (
+      <div className="identity-applications">
+        <p className="identity-applications__empty identity-note">
+          {intl.formatMessage(messages.empty)}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="identity-applications">
+      <Table selectable compact>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>
+              {intl.formatMessage(messages.columnApplication)}
+            </Table.HeaderCell>
+            <Table.HeaderCell>
+              {intl.formatMessage(messages.columnAuthorized)}
+            </Table.HeaderCell>
+            <Table.HeaderCell>
+              {intl.formatMessage(messages.columnReads)}
+            </Table.HeaderCell>
+            <Table.HeaderCell textAlign="right">
+              {intl.formatMessage(messages.columnActions)}
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {grants.items.map((grant) => {
+            const count = claimsOf(grant).length;
+            return (
+              <Table.Row key={grant.client_id} data-client={grant.client_id}>
+                <Table.Cell>
+                  {grant.title}
+                  {!grant.registered || !grant.enabled ? (
+                    <p className="identity-note" role="status">
+                      {intl.formatMessage(
+                        grant.registered
+                          ? messages.disabled
+                          : messages.unregistered,
+                      )}
+                    </p>
+                  ) : null}
+                </Table.Cell>
+                <Table.Cell>
+                  {intl.formatDate(grant.granted_at, {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                  })}
+                </Table.Cell>
+                <Table.Cell>
+                  {/* A count in the row, the names on the detail view: four
+                      rows of claim lists is a wall nobody reads. */}
+                  {count
+                    ? intl.formatMessage(messages.fields, { count })
+                    : intl.formatMessage(messages.nothing)}
+                </Table.Cell>
+                <Table.Cell textAlign="right">
+                  <Button
+                    basic
+                    icon
+                    aria-label={intl.formatMessage(messages.details)}
+                    title={intl.formatMessage(messages.details)}
+                    onClick={() => onSelect(grant.client_id)}
+                  >
+                    <Icon name={rightArrowSVG} size="20px" />
+                  </Button>
+                  <Button
+                    basic
+                    icon
+                    data-action="withdraw"
+                    disabled={withdrawing === grant.client_id}
+                    aria-label={intl.formatMessage(messages.withdraw)}
+                    title={intl.formatMessage(messages.withdraw)}
+                    onClick={() => onWithdraw(grant.client_id)}
+                  >
+                    <Icon name={deleteSVG} size="20px" />
+                  </Button>
+                </Table.Cell>
+              </Table.Row>
+            );
+          })}
+        </Table.Body>
+      </Table>
+
+      {lingering}
+    </div>
+  );
+};
+
+export default ApplicationsPanel;

package/src/components/Callback/Callback.scss

@@ -0,0 +1,17 @@
+/**
+ * The page a provider redirects back to: one line, and rarely for long.
+ *
+ * It sits inside `LoginPanel`, so the card, its width and its centring come
+ * from there. This only centres the line within it -- the way
+ * `volto-authomatic` centres its logout message -- and colours a refusal.
+ */
+.identity-callback {
+  padding: var(--identity-gap) 0;
+  margin: 0;
+  color: var(--identity-muted);
+  text-align: center;
+}
+
+.identity-callback--error {
+  color: var(--identity-error);
+}

package/src/components/Callback/Callback.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Callback from './Callback';
+import { FAILED, LOADED, LOADING, withStore } from '../../stories/fixtures';
+
+const meta: Meta<typeof Callback> = {
+  title: 'Identity/Callback',
+  component: Callback,
+  parameters: { reactRouter: { location: '/login-identity?code=a&state=b' } },
+};
+export default meta;
+
+type Story = StoryObj<typeof Callback>;
+
+/** What the user sees for the moment the exchange takes. */
+export const Working: Story = {
+  decorators: [withStore({ identityCallback: LOADING, magicLinkConfirm: {} })],
+};
+
+/**
+ * Every backend refusal reads the same on purpose -- expired, replayed,
+ * forged and wrong-session are one message here, and the audit log carries
+ * the difference.
+ */
+export const Refused: Story = {
+  decorators: [withStore({ identityCallback: FAILED, magicLinkConfirm: {} })],
+};
+
+/**
+ * The success state is a moment: the token goes into the store and the
+ * browser leaves. There is nothing to look at, which is the point.
+ */
+export const SignedIn: Story = {
+  decorators: [
+    withStore({
+      identityCallback: {
+        ...LOADED,
+        data: { token: 'a-token', came_from: '/' },
+      },
+      magicLinkConfirm: {},
+    }),
+  ],
+};

package/src/components/Callback/Callback.test.tsx

@@ -0,0 +1,262 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '../../testing';
+import { Provider } from 'react-redux';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+import React from 'react';
+
+import { LOGIN } from '@plone/volto/constants/ActionTypes';
+import Callback from './Callback';
+
+/**
+ * Render the callback route with a store whose state we control.
+ *
+ * The component is the whole of the frontend's half of a login, and it had no
+ * test at all -- which is how it shipped fetching a token successfully and
+ * then doing nothing with it, leaving the page on "Signing you in…" with a
+ * 200 in the access log.
+ */
+function fakeStore(state: any) {
+  // react-redux only needs the store contract, and `redux` is not a
+  // dependency of this package.
+  const dispatched: any[] = [];
+  return {
+    dispatched,
+    store: {
+      getState: () => state,
+      dispatch: (action: any) => {
+        dispatched.push(action);
+        return action;
+      },
+      subscribe: () => () => {},
+    },
+  };
+}
+
+/**
+ * Reports where the router currently is.
+ *
+ * These used to assert on `window.location.href`, because the component set
+ * it. It routes now, so the observable thing is the router's location -- and
+ * asserting on that is also what proves the page is no longer being thrown
+ * away to navigate.
+ */
+function Where() {
+  return <span data-testid="where">{useLocation().pathname}</span>;
+}
+
+function renderCallback(state: any, search = '?code=abc&state=xyz') {
+  const { store, dispatched } = fakeStore(state);
+  render(
+    <Provider store={store as any}>
+      <MemoryRouter initialEntries={[`/login-identity${search}`]}>
+        <Callback />
+        <Where />
+      </MemoryRouter>
+    </Provider>,
+  );
+  return { dispatched };
+}
+
+const PENDING = { identityCallback: { loading: true }, magicLinkConfirm: {} };
+
+describe('Callback', () => {
+  beforeEach(() => {
+    // jsdom refuses a real navigation; the component only ever sets href.
+    delete (window as any).location;
+    (window as any).location = { href: '' };
+  });
+
+  it('says it is working while the exchange is in flight', () => {
+    renderCallback(PENDING);
+
+    expect(screen.getByRole('status').textContent).toContain('Signing you in');
+  });
+
+  it('signs the user in once the token arrives', () => {
+    // Volto's persistAuthToken subscribes to the store and writes any new
+    // userSession.token out to the cookie, so dispatching its LOGIN_SUCCESS
+    // *is* the sign-in. Without this the page never left "Signing you in…".
+    const { dispatched } = renderCallback({
+      identityCallback: { loaded: true, data: { token: 'a-token' } },
+      magicLinkConfirm: {},
+    });
+
+    expect(
+      dispatched.some(
+        (action) =>
+          action.type === `${LOGIN}_SUCCESS` &&
+          action.result?.token === 'a-token',
+      ),
+    ).toBe(true);
+  });
+
+  it('sends the user where the flow started', () => {
+    renderCallback({
+      identityCallback: {
+        loaded: true,
+        data: { token: 'a-token', came_from: '/some/page' },
+      },
+      magicLinkConfirm: {},
+    });
+
+    expect(screen.getByTestId('where').textContent).toBe('/some/page');
+  });
+
+  it('resumes an authorization request instead of routing to it', () => {
+    // The demo stack, end to end: the relying party sends the browser to
+    // `@@oauth-authorize`, the backend has no session yet and bounces it
+    // through `require_login`, and Plone hands `came_from` back
+    // *site-relative*. Routing that renders Volto's 404 at exactly the
+    // authorization URL, with the request's parameters replaced by Volto's
+    // own `expand=` ones -- so the relying party gets neither a code nor an
+    // error (Érico, 2026-08-30).
+    renderCallback({
+      identityCallback: {
+        loaded: true,
+        data: {
+          token: 'a-token',
+          came_from: '/@@oauth-authorize?response_type=code&client_id=demo-rp',
+        },
+      },
+      magicLinkConfirm: {},
+    });
+
+    // The router stayed where it was: this is a real navigation.
+    expect(screen.getByTestId('where').textContent).toBe('/login-identity');
+    expect(window.location.href).toBe(
+      '/@@oauth-authorize?response_type=code&client_id=demo-rp',
+    );
+  });
+
+  it('falls back to the site root when the flow named nowhere', () => {
+    renderCallback({
+      identityCallback: { loaded: true, data: { token: 'a-token' } },
+      magicLinkConfirm: {},
+    });
+
+    expect(screen.getByTestId('where').textContent).toBe('/');
+  });
+
+  it('lets a caller override what happens with the token', () => {
+    const onToken = vi.fn();
+    const { store } = fakeStore({
+      identityCallback: {
+        loaded: true,
+        data: { token: 'a-token', came_from: '/x' },
+      },
+      magicLinkConfirm: {},
+    });
+    render(
+      <Provider store={store as any}>
+        <MemoryRouter initialEntries={['/login-identity?code=a&state=b']}>
+          <Callback onToken={onToken} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(onToken).toHaveBeenCalledWith('a-token', '/x');
+    // The override replaces the default rather than running alongside it.
+    // The override replaced the default, so nothing navigated.
+    expect(window.location.href).toBe('');
+  });
+
+  it('renders inside the login card, not against the window edge', () => {
+    // It is the login page one redirect later. Rendered as a bare div it had
+    // no container at all, so its one line sat glued to the left edge.
+    renderCallback(PENDING);
+
+    expect(document.querySelector('#page-login .loginForm')).toBeTruthy();
+    expect(
+      document.querySelector('.loginForm .identity-callback'),
+    ).toBeTruthy();
+  });
+
+  it('leaves the description strip out, having nothing to put in it', () => {
+    renderCallback(PENDING);
+
+    expect(document.querySelector('#page-login .description')).toBeNull();
+  });
+
+  it('reports a refusal rather than waiting forever', () => {
+    renderCallback({
+      identityCallback: { error: { status: 401 } },
+      magicLinkConfirm: {},
+    });
+
+    expect(screen.getByRole('alert').textContent).toContain('no longer valid');
+  });
+
+  it('reports a callback that carries no credential at all', () => {
+    renderCallback(PENDING, '?nothing=here');
+
+    expect(screen.getByRole('alert').textContent).toContain('incomplete');
+  });
+
+  it('reports a provider that refused', () => {
+    renderCallback(PENDING, '?error=access_denied');
+
+    expect(screen.getByRole('alert').textContent).toContain('refused');
+  });
+});
+
+describe('Callback and a confirmation link', () => {
+  beforeEach(() => {
+    delete (window as any).location;
+    (window as any).location = { href: '' };
+  });
+
+  it('sends the user back to their identities', () => {
+    // A confirmation link arrives on the same route, carrying the same
+    // `magic_link` parameter as a login link. Only the answer says which one
+    // it was -- and without this branch the page sat on "Signing you in…"
+    // waiting for a token that is never issued.
+    renderCallback(
+      {
+        identityCallback: {},
+        magicLinkConfirm: {
+          loaded: true,
+          data: { linked: { provider: 'email', subject: 'erico@plone.org' } },
+        },
+      },
+      '?magic_link=a-token',
+    );
+
+    expect(screen.getByTestId('where').textContent).toBe('/identities');
+  });
+
+  it('does not sign anybody in', () => {
+    // The caller already had a session, and answering a confirmation with a
+    // fresh one would turn a stolen link into a login.
+    const { dispatched } = renderCallback(
+      {
+        identityCallback: {},
+        magicLinkConfirm: {
+          loaded: true,
+          data: { linked: { provider: 'email', subject: 'erico@plone.org' } },
+        },
+      },
+      '?magic_link=a-token',
+    );
+
+    expect(dispatched.some((a: any) => a.type === `${LOGIN}_SUCCESS`)).toBe(
+      false,
+    );
+  });
+
+  it('says what it is doing while confirming', () => {
+    renderCallback(
+      {
+        identityCallback: {},
+        magicLinkConfirm: {
+          loaded: true,
+          data: { linked: { provider: 'email', subject: 'erico@plone.org' } },
+        },
+      },
+      '?magic_link=a-token',
+    );
+
+    expect(screen.getByRole('status').textContent).toContain(
+      'Confirming your address',
+    );
+  });
+});