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

package/src/components/Callback/Callback.tsx

@@ -0,0 +1,170 @@
+/**
+ * The route the provider redirects back to.
+ *
+ * This is the frontend half of the Volto-route callback shape: the provider
+ * sends the browser here with `code` and `state` on the query string, or the
+ * emailed magic link arrives with `magic_link`. Either way the credential is
+ * handed to the backend, which is the only thing that can validate it.
+ *
+ * It renders inside `LoginPanel`, the same card the login page is, because it
+ * is the same flow one redirect later -- this is what `volto-authomatic` does
+ * with its own callback. A bare `<div>` here put its one line against the left
+ * edge of the window, which reads as a broken page rather than a step.
+ * @module components/Callback/Callback
+ */
+import React, { useEffect, useRef, useState } from 'react';
+import type { MessageDescriptor } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import { LOGIN } from '@plone/volto/constants/ActionTypes';
+
+import {
+  completeCallback,
+  confirmMagicLink,
+  listIdentities,
+} from '../../actions';
+import { readCallback } from '../../helpers/callback';
+import { IDENTITIES_PATH } from '../../config/routes';
+import LoginPanel from '../Login/LoginPanel';
+
+import './Callback.scss';
+import { goTo } from '../../helpers/navigate';
+
+const messages = defineMessages({
+  // The same id the login page's heading uses: the same card, so the same
+  // word, and one translation covers both.
+  title: { id: 'Log in', defaultMessage: 'Log in' },
+  working: { id: 'Signing you in', defaultMessage: 'Signing you in…' },
+  linking: {
+    id: 'Confirming your address',
+    defaultMessage: 'Confirming your address…',
+  },
+  refused: {
+    id: 'The provider refused the sign-in.',
+    defaultMessage: 'The provider refused the sign-in.',
+  },
+  incomplete: {
+    id: 'This sign-in link is incomplete.',
+    defaultMessage: 'This sign-in link is incomplete.',
+  },
+  invalid: {
+    id: 'That sign-in link is no longer valid. Please start again.',
+    defaultMessage: 'That sign-in link is no longer valid. Please start again.',
+  },
+});
+
+interface CallbackProps {
+  /** Called with the issued token instead of the default sign-in. */
+  onToken?: (token: string, cameFrom: string) => void;
+}
+
+const Callback: React.FC<CallbackProps> = ({ onToken }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const { push } = useHistory();
+  const dispatched = useRef(false);
+  // The descriptor rather than the formatted string: what is stored is
+  // which refusal happened, and rendering it is the renderer's job.
+  const [refusal, setRefusal] = useState<MessageDescriptor | null>(null);
+
+  const callback = useSelector((state: any) => state.identityCallback);
+  const magic = useSelector((state: any) => state.magicLinkConfirm);
+
+  useEffect(() => {
+    if (dispatched.current) {
+      return;
+    }
+    dispatched.current = true;
+
+    const parsed = readCallback(location.search);
+    if (parsed.kind === 'magic-link') {
+      dispatch(confirmMagicLink(parsed.token as string));
+    } else if (parsed.kind === 'code') {
+      dispatch(
+        completeCallback(
+          parsed.provider as string,
+          parsed.code as string,
+          parsed.state as string,
+        ),
+      );
+    } else {
+      setRefusal(
+        parsed.kind === 'error' ? messages.refused : messages.incomplete,
+      );
+    }
+  }, [dispatch, location.search]);
+
+  const answered = callback?.loaded ? callback : magic?.loaded ? magic : null;
+
+  // A confirmation link carries the same `magic_link` parameter as a login
+  // link -- the difference is in the token, so it is the answer that reveals
+  // which one arrived.
+  const linked = Boolean(answered?.data?.linked);
+
+  useEffect(() => {
+    if (!linked) {
+      return;
+    }
+    // Back to where the flow was started from, through the router. The list
+    // there was fetched before this address existed, so it is refetched --
+    // which is what the full page load this used to do was really for, at the
+    // cost of throwing the whole application away to get it.
+    dispatch(listIdentities());
+    goTo(IDENTITIES_PATH, push);
+  }, [linked, dispatch, push]);
+
+  useEffect(() => {
+    const token = answered?.data?.token;
+    if (!token) {
+      return;
+    }
+    const cameFrom = answered?.data?.came_from ?? '';
+    if (onToken) {
+      onToken(token, cameFrom);
+      return;
+    }
+
+    // The default, and the reason this is not an optional prop with no
+    // fallback: the route is registered as a bare component, so nothing
+    // passes onToken, and a page that fetched a token and then did nothing
+    // with it sat on "Signing you in…" forever with a 200 in the access log.
+    //
+    // Volto's own LOGIN_SUCCESS is the whole sign-in: `persistAuthToken`
+    // subscribes to the store at client start and writes any new
+    // `userSession.token` out to the cookie, so putting the token in the
+    // store is what makes the browser signed in. Reproducing that by writing
+    // the cookie here would be a second implementation of it.
+    dispatch({ type: `${LOGIN}_SUCCESS`, result: { token } });
+    // Through the router: the store changing is what re-renders everything
+    // that was rendered for an anonymous user, which is what the page load
+    // this used to do was standing in for. `came_from` arrives in a query
+    // string, so `goTo` is also what stops it being an open redirect.
+    goTo(cameFrom || '/', push);
+  }, [answered, onToken, dispatch, push]);
+
+  // 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. A refusal parsed off the query string is the one thing
+  // this page can say more precisely, because no credential ever reached the
+  // backend for it to be vague about.
+  const failure =
+    refusal ?? (callback?.error || magic?.error ? messages.invalid : null);
+
+  return (
+    <LoginPanel title={intl.formatMessage(messages.title)}>
+      {failure ? (
+        <p className="identity-callback identity-callback--error" role="alert">
+          {intl.formatMessage(failure)}
+        </p>
+      ) : (
+        <p className="identity-callback" role="status">
+          {intl.formatMessage(linked ? messages.linking : messages.working)}
+        </p>
+      )}
+    </LoginPanel>
+  );
+};
+
+export default Callback;

package/src/components/Consent/Consent.test.tsx

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest';
+
+import { answerUrl } from './Consent';
+import type { ConsentRequest } from '../../types';
+
+const REQUEST: ConsentRequest = {
+  '@id': 'http://id.example.org/@oauth-consent',
+  client: { id: 'app', title: 'Example App' },
+  user: { id: 'alice', label: 'Alice Liddell' },
+  scopes: [{ id: 'openid', claims: [] }],
+  authorize_url: 'http://id.example.org/@@oauth-authorize',
+  params: {
+    response_type: 'code',
+    client_id: 'app',
+    redirect_uri: 'https://app.example.org/cb',
+    scope: 'openid profile',
+    state: 'xyz',
+  },
+  authenticator: 'tok3n',
+};
+
+/**
+ * The answer's parameters.
+ *
+ * @param allow Whether the user agreed.
+ * @returns The query parameters of the URL the browser would be sent to.
+ */
+function answer(allow: boolean) {
+  const url = new URL(answerUrl(REQUEST, allow));
+  return { url, params: Object.fromEntries(url.searchParams.entries()) };
+}
+
+describe('answerUrl', () => {
+  it('sends the answer to the endpoint that decides', () => {
+    // Not to the relying party. Every check runs again there, so a client
+    // disabled between the question and the answer is refused on the way out.
+    expect(answer(true).url.origin + answer(true).url.pathname).toBe(
+      'http://id.example.org/@@oauth-authorize',
+    );
+  });
+
+  it('hands the request back unchanged', () => {
+    const { params } = answer(true);
+
+    for (const [name, value] of Object.entries(REQUEST.params)) {
+      expect(params[name]).toBe(value);
+    }
+  });
+
+  it('spells agreement out', () => {
+    // `allow` is the only value that means yes, because consent is the thing
+    // that has to be given explicitly.
+    expect(answer(true).params.consent).toBe('allow');
+  });
+
+  it('sends a refusal rather than nothing', () => {
+    // Silence would leave the relying party waiting for a browser that is
+    // never coming back.
+    expect(answer(false).params.consent).toBe('deny');
+  });
+
+  it('carries the token the answer is checked against', () => {
+    // A forged consent request is an attempt to authorize a client on
+    // somebody else's behalf.
+    expect(answer(true).params._authenticator).toBe('tok3n');
+  });
+
+  it('adds nothing the request did not carry', () => {
+    const { params } = answer(true);
+
+    expect(Object.keys(params).sort()).toEqual(
+      [...Object.keys(REQUEST.params), 'consent', '_authenticator'].sort(),
+    );
+  });
+});

package/src/components/Consent/Consent.tsx

@@ -0,0 +1,98 @@
+/**
+ * Consent container: store, and the navigation back out to the server.
+ *
+ * The answer is a browser navigation rather than a fetch, and that is the
+ * whole shape of this component. `@@oauth-authorize` answers a decision with
+ * a 302 to the relying party's redirect URI -- it is the browser that has to
+ * arrive there, carrying whatever cookies the relying party set on the way
+ * out. An XHR would follow the redirect itself and hand this page a response
+ * body nobody can do anything with.
+ *
+ * So the page reads the request over the API, renders it, and then leaves.
+ * @module components/Consent/Consent
+ */
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { Helmet } from '@plone/volto/helpers/Helmet/Helmet';
+
+import { getConsentRequest } from '../../actions';
+import type { ConsentRequest } from '../../types';
+import ConsentPanel from './ConsentPanel';
+import { goTo } from '../../helpers/navigate';
+
+const messages = defineMessages({
+  title: { id: 'Authorize', defaultMessage: 'Authorize' },
+});
+
+/**
+ * Build the URL that carries an answer back to the authorization endpoint.
+ *
+ * The request travels back exactly as it arrived. `consent=allow` is the only
+ * value that means yes -- anything else is a refusal, because consent is the
+ * thing that has to be given explicitly.
+ *
+ * @param request What the server said about this authorization request.
+ * @param allow Whether the user agreed.
+ * @returns The absolute URL to send the browser to.
+ */
+export function answerUrl(request: ConsentRequest, allow: boolean): string {
+  const params = new URLSearchParams(request.params);
+  params.set('consent', allow ? 'allow' : 'deny');
+  // plone.protect's token. The endpoint refuses an answer without a valid
+  // one: a forged consent request is an attempt to authorize a client on
+  // somebody else's behalf.
+  params.set('_authenticator', request.authenticator);
+  return `${request.authorize_url}?${params.toString()}`;
+}
+
+const Consent: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { search } = useLocation();
+  const { push } = useHistory();
+  // Set when the browser is on its way out. The buttons go dead rather than
+  // letting a second click send a second answer to a request that has
+  // already been decided.
+  const [answering, setAnswering] = useState(false);
+
+  const consent = useSelector((state: any) => state.consentRequest);
+
+  useEffect(() => {
+    // The query string is handed on verbatim: an authorization request is
+    // compared byte for byte further down the flow.
+    dispatch(getConsentRequest(search));
+  }, [dispatch, search]);
+
+  const onAnswer = useCallback(
+    (allow: boolean) => {
+      if (!consent?.data) {
+        return;
+      }
+      setAnswering(true);
+      goTo(answerUrl(consent.data, allow), push, { external: true });
+    },
+    [consent?.data, push],
+  );
+
+  return (
+    <>
+      <Helmet title={intl.formatMessage(messages.title)}>
+        {/* This page is one step of somebody's sign-in, reached with their
+            authorization request in the URL. It is not a page to index. */}
+        <meta name="robots" content="noindex, nofollow" />
+      </Helmet>
+      <ConsentPanel
+        request={consent?.data ?? null}
+        loading={Boolean(consent?.loading)}
+        error={consent?.error}
+        answering={answering}
+        onAnswer={onAnswer}
+      />
+    </>
+  );
+};
+
+export default Consent;

package/src/components/Consent/ConsentPanel.scss

@@ -0,0 +1,37 @@
+/**
+ * The consent screen.
+ *
+ * Sized like the login card, because it is the same moment of the same
+ * journey: a person is being asked one question and should see one column of
+ * text, not a page-wide layout. The card, the note and the button come from
+ * the root stylesheet.
+ */
+.identity-consent {
+  width: var(--identity-login-width);
+  max-width: 100%;
+  margin: 3rem auto;
+  line-height: 1.5;
+
+  h1 {
+    margin-top: 0;
+    font-size: 1.25rem;
+  }
+}
+
+.identity-consent__who {
+  margin-top: -0.5rem;
+}
+
+.identity-consent__claims {
+  padding-left: 1.25rem;
+
+  li {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.identity-consent__actions {
+  display: flex;
+  margin-top: 1.5rem;
+  gap: 0.75rem;
+}

package/src/components/Consent/ConsentPanel.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ConsentPanel from './ConsentPanel';
+import { CONSENT_REQUEST, FAILED } from '../../stories/fixtures';
+
+/**
+ * The consent screen.
+ *
+ * The reason it is a Volto route at all: a relying party sent this browser
+ * here to be asked something personal, and a screen that looks nothing like
+ * the site the person thinks they are signing in to is the screen they should
+ * not trust.
+ */
+const meta: Meta<typeof ConsentPanel> = {
+  title: 'Identity/Consent/ConsentPanel',
+  component: ConsentPanel,
+  args: {
+    request: CONSENT_REQUEST,
+    loading: false,
+    answering: false,
+    onAnswer: () => {},
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ConsentPanel>;
+
+export const Asking: Story = {};
+
+/** `openid` alone: an identity, and nothing else released. */
+export const NothingReleased: Story = {
+  args: {
+    request: { ...CONSENT_REQUEST, scopes: [{ id: 'openid', claims: [] }] },
+  },
+};
+
+/** A client asking for everything this server publishes. */
+export const EverythingReleased: Story = {
+  args: {
+    request: {
+      ...CONSENT_REQUEST,
+      scopes: [
+        { id: 'openid', claims: [] },
+        {
+          id: 'profile',
+          claims: [
+            'name',
+            'preferred_username',
+            'website',
+            'picture',
+            'description',
+          ],
+        },
+        { id: 'email', claims: ['email', 'email_verified'] },
+        { id: 'address', claims: ['address'] },
+      ],
+    },
+  },
+};
+
+/** A client registered without a title is named by its id. */
+export const AnUntitledClient: Story = {
+  args: {
+    request: { ...CONSENT_REQUEST, client: { id: 'app', title: 'app' } },
+  },
+};
+
+export const Loading: Story = { args: { request: null, loading: true } };
+
+/** The answer is on its way and the browser is leaving. */
+export const Answering: Story = { args: { answering: true } };
+
+/**
+ * A request this server would not honour: an unknown client, or a redirect
+ * URI that matches nothing registered. No buttons — an "Allow" here would be
+ * agreeing to something the page could not describe.
+ */
+export const Unavailable: Story = {
+  args: { request: null, error: FAILED.error },
+};

package/src/components/Consent/ConsentPanel.test.tsx

@@ -0,0 +1,138 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../testing';
+import React from 'react';
+
+import ConsentPanel from './ConsentPanel';
+import type { ConsentRequest } from '../../types';
+
+const REQUEST: ConsentRequest = {
+  '@id': 'http://id.example.org/@oauth-consent',
+  client: { id: 'app', title: 'Example App' },
+  user: { id: 'alice', label: 'Alice Liddell' },
+  scopes: [
+    { id: 'openid', claims: [] },
+    { id: 'profile', claims: ['name', 'preferred_username'] },
+    { id: 'email', claims: ['email', 'email_verified'] },
+  ],
+  authorize_url: 'http://id.example.org/@@oauth-authorize',
+  params: { response_type: 'code', client_id: 'app' },
+  authenticator: 'token',
+};
+
+function renderPanel(
+  props: Partial<React.ComponentProps<typeof ConsentPanel>> = {},
+) {
+  const onAnswer = vi.fn();
+  render(
+    <ConsentPanel
+      request={REQUEST}
+      loading={false}
+      answering={false}
+      onAnswer={onAnswer}
+      {...props}
+    />,
+  );
+  return { onAnswer };
+}
+
+describe('ConsentPanel', () => {
+  it('names the application doing the asking', () => {
+    renderPanel();
+
+    expect(screen.getByRole('heading').textContent).toContain('Example App');
+  });
+
+  it('says who would be agreeing', () => {
+    // The browser may hold a session the user forgot about, and agreeing on
+    // behalf of the wrong account is the mistake this screen exists to make
+    // visible.
+    renderPanel();
+
+    expect(screen.getByText(/Alice Liddell/)).toBeTruthy();
+  });
+
+  it('lists what would actually be released, not the scope names', () => {
+    // "profile" means nothing to the person being asked.
+    renderPanel();
+
+    expect(screen.getByText('preferred_username')).toBeTruthy();
+    expect(screen.queryByText('profile')).toBeNull();
+  });
+
+  it('names each claim once however many scopes carry it', () => {
+    renderPanel({
+      request: {
+        ...REQUEST,
+        scopes: [
+          { id: 'profile', claims: ['name'] },
+          { id: 'other', claims: ['name'] },
+        ],
+      },
+    });
+
+    expect(screen.getAllByText('name')).toHaveLength(1);
+  });
+
+  it('says plainly when a request releases nothing', () => {
+    // `openid` alone asks for an identity and gates no claim. An empty list
+    // under "It will be able to read:" reads as a rendering failure.
+    renderPanel({
+      request: { ...REQUEST, scopes: [{ id: 'openid', claims: [] }] },
+    });
+
+    expect(screen.getByText(/nothing beyond the fact/)).toBeTruthy();
+  });
+
+  it('offers both answers', () => {
+    renderPanel();
+
+    expect(screen.getByRole('button', { name: 'Allow' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Deny' })).toBeTruthy();
+  });
+
+  it('reports agreement', () => {
+    const { onAnswer } = renderPanel();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Allow' }));
+
+    expect(onAnswer).toHaveBeenCalledWith(true);
+  });
+
+  it('reports refusal', () => {
+    const { onAnswer } = renderPanel();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Deny' }));
+
+    expect(onAnswer).toHaveBeenCalledWith(false);
+  });
+
+  it('takes no second answer once one is on its way', () => {
+    renderPanel({ answering: true });
+
+    expect(
+      (screen.getByRole('button', { name: 'Allow' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+  });
+
+  it('says so while the request is loading', () => {
+    renderPanel({ request: null, loading: true });
+
+    expect(screen.getByRole('status').textContent).toContain('Loading');
+  });
+
+  it('waits rather than refusing before the first answer arrives', () => {
+    // No request and no error yet is the first render, not a failure.
+    renderPanel({ request: null, loading: false });
+
+    expect(screen.getByRole('status')).toBeTruthy();
+  });
+
+  it('offers no answer to a request it could not describe', () => {
+    // An "Allow" here would be agreeing to something the page cannot show.
+    renderPanel({ request: null, error: new Error('nope') });
+
+    expect(screen.getByRole('alert')).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Allow' })).toBeNull();
+  });
+});