diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index ab714b93c..d633897e1 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -20,7 +20,7 @@ interface IModal {
   /** Whether the confirmation button is disabled. */
   confirmationDisabled?: boolean,
   /** Confirmation button text. */
-  confirmationText?: string,
+  confirmationText?: React.ReactNode,
   /** Confirmation button theme. */
   confirmationTheme?: 'danger',
   /** Callback when the modal is closed. */
@@ -28,7 +28,7 @@ interface IModal {
   /** Callback when the secondary action is chosen. */
   secondaryAction?: () => void,
   /** Secondary button text. */
-  secondaryText?: string,
+  secondaryText?: React.ReactNode,
   /** Don't focus the "confirm" button on mount. */
   skipFocus?: boolean,
   /** Title text for the modal. */
diff --git a/app/soapbox/features/ui/components/unauthorized_modal.js b/app/soapbox/features/ui/components/unauthorized_modal.js
deleted file mode 100644
index ea32abca6..000000000
--- a/app/soapbox/features/ui/components/unauthorized_modal.js
+++ /dev/null
@@ -1,196 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-
-import { remoteInteraction } from 'soapbox/actions/interactions';
-import snackbar from 'soapbox/actions/snackbar';
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import { Button, Modal, Stack, Text } from 'soapbox/components/ui';
-import { getFeatures } from 'soapbox/utils/features';
-
-const messages = defineMessages({
-  close: { id: 'lightbox.close', defaultMessage: 'Close' },
-  accountPlaceholder: { id: 'remote_interaction.account_placeholder', defaultMessage: 'Enter your username@domain you want to act from' },
-  userNotFoundError: { id: 'remote_interaction.user_not_found_error', defaultMessage: 'Couldn\'t find given user' },
-});
-
-const mapStateToProps = (state, props) => {
-  const instance = state.get('instance');
-  const features = getFeatures(instance);
-  const soapboxConfig = getSoapboxConfig(state);
-
-  if (props.action !== 'FOLLOW') {
-    return {
-      features,
-      siteTitle: state.getIn(['instance', 'title']),
-      remoteInteractionsAPI: features.remoteInteractionsAPI,
-      singleUserMode: soapboxConfig.get('singleUserMode'),
-    };
-  }
-
-  const userName = state.getIn(['accounts', props.account, 'display_name']);
-
-  return {
-    features,
-    siteTitle: state.getIn(['instance', 'title']),
-    userName,
-    remoteInteractionsAPI: features.remoteInteractionsAPI,
-    singleUserMode: soapboxConfig.get('singleUserMode'),
-  };
-};
-
-const mapDispatchToProps = dispatch => ({
-  dispatch,
-  onRemoteInteraction(ap_id, account) {
-    return dispatch(remoteInteraction(ap_id, account));
-  },
-});
-
-@withRouter
-class UnauthorizedModal extends ImmutablePureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    features: PropTypes.object.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onRemoteInteraction: PropTypes.func.isRequired,
-    userName: PropTypes.string,
-    history: PropTypes.object.isRequired,
-    singleUserMode: PropTypes.bool,
-  };
-
-  state = {
-    account: '',
-  };
-
-  onAccountChange = e => {
-    this.setState({ account: e.target.value });
-  }
-
-  onClickClose = () => {
-    this.props.onClose('UNAUTHORIZED');
-  };
-
-  onClickProceed = e => {
-    e.preventDefault();
-
-    const { intl, ap_id, dispatch, onClose, onRemoteInteraction } = this.props;
-    const { account } = this.state;
-
-    onRemoteInteraction(ap_id, account)
-      .then(url => {
-        window.open(url, '_new', 'noopener,noreferrer');
-        onClose('UNAUTHORIZED');
-      })
-      .catch(error => {
-        if (error.message === 'Couldn\'t find user') {
-          dispatch(snackbar.error(intl.formatMessage(messages.userNotFoundError)));
-        }
-      });
-  }
-
-  onLogin = (e) => {
-    e.preventDefault();
-
-    this.props.history.push('/login');
-    this.onClickClose();
-  }
-
-  onRegister = (e) => {
-    e.preventDefault();
-
-    this.props.history.push('/signup');
-    this.onClickClose();
-  }
-
-  renderRemoteInteractions() {
-    const { intl, siteTitle, userName, action, singleUserMode } = this.props;
-    const { account } = this.state;
-
-    let header;
-    let button;
-
-    if (action === 'FOLLOW') {
-      header = <FormattedMessage id='remote_interaction.follow_title' defaultMessage='Follow {user} remotely' values={{ user: userName }} />;
-      button = <FormattedMessage id='remote_interaction.follow' defaultMessage='Proceed to follow' />;
-    } else if (action === 'REPLY') {
-      header = <FormattedMessage id='remote_interaction.reply_title' defaultMessage='Reply to a post remotely' />;
-      button = <FormattedMessage id='remote_interaction.reply' defaultMessage='Proceed to reply' />;
-    } else if (action === 'REBLOG') {
-      header = <FormattedMessage id='remote_interaction.reblog_title' defaultMessage='Reblog a post remotely' />;
-      button = <FormattedMessage id='remote_interaction.reblog' defaultMessage='Proceed to repost' />;
-    } else if (action === 'FAVOURITE') {
-      header = <FormattedMessage id='remote_interaction.favourite_title' defaultMessage='Like a post remotely' />;
-      button = <FormattedMessage id='remote_interaction.favourite' defaultMessage='Proceed to like' />;
-    } else if (action === 'POLL_VOTE') {
-      header = <FormattedMessage id='remote_interaction.poll_vote_title' defaultMessage='Vote in a poll remotely' />;
-      button = <FormattedMessage id='remote_interaction.poll_vote' defaultMessage='Proceed to vote' />;
-    }
-
-    return (
-      <Modal
-        title={header}
-        onClose={this.onClickClose}
-        confirmationAction={!singleUserMode && this.onLogin}
-        confirmationText={<FormattedMessage id='account.login' defaultMessage='Log in' />}
-        secondaryAction={this.onRegister}
-        secondaryText={<FormattedMessage id='account.register' defaultMessage='Sign up' />}
-      >
-        <div className='remote-interaction-modal__content'>
-          <form className='simple_form remote-interaction-modal__fields'>
-            <input
-              type='text'
-              placeholder={intl.formatMessage(messages.accountPlaceholder)}
-              name='remote_follow[acct]'
-              value={account}
-              autoCorrect='off'
-              autoCapitalize='off'
-              onChange={this.onAccountChange}
-              required
-            />
-            <Button theme='primary' onClick={this.onClickProceed}>{button}</Button>
-          </form>
-          <div className='remote-interaction-modal__divider'>
-            <Text align='center'>
-              <FormattedMessage id='remote_interaction.divider' defaultMessage='or' />
-            </Text>
-          </div>
-          {!singleUserMode && (
-            <Text size='lg' weight='medium'>
-              <FormattedMessage id='unauthorized_modal.title' defaultMessage='Sign up for {site_title}' values={{ site_title: siteTitle }} />
-            </Text>
-          )}
-        </div>
-      </Modal>
-    );
-  }
-
-  render() {
-    const { features, siteTitle, action } = this.props;
-
-    if (action && features.remoteInteractionsAPI && features.federating) return this.renderRemoteInteractions();
-
-    return (
-      <Modal
-        title={<FormattedMessage id='unauthorized_modal.title' defaultMessage='Sign up for {site_title}' values={{ site_title: siteTitle }} />}
-        onClose={this.onClickClose}
-        confirmationAction={this.onLogin}
-        confirmationText={<FormattedMessage id='account.login' defaultMessage='Log in' />}
-        secondaryAction={this.onRegister}
-        secondaryText={<FormattedMessage id='account.register' defaultMessage='Sign up' />}
-      >
-        <Stack>
-          <Text>
-            <FormattedMessage id='unauthorized_modal.text' defaultMessage='You need to be logged in to do that.' />
-          </Text>
-        </Stack>
-      </Modal>
-    );
-  }
-
-}
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(UnauthorizedModal));
diff --git a/app/soapbox/features/ui/components/unauthorized_modal.tsx b/app/soapbox/features/ui/components/unauthorized_modal.tsx
new file mode 100644
index 000000000..41faf7c1a
--- /dev/null
+++ b/app/soapbox/features/ui/components/unauthorized_modal.tsx
@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+
+import { remoteInteraction } from 'soapbox/actions/interactions';
+import snackbar from 'soapbox/actions/snackbar';
+import { Button, Modal, Stack, Text } from 'soapbox/components/ui';
+import { useAppSelector, useAppDispatch, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+  accountPlaceholder: { id: 'remote_interaction.account_placeholder', defaultMessage: 'Enter your username@domain you want to act from' },
+  userNotFoundError: { id: 'remote_interaction.user_not_found_error', defaultMessage: 'Couldn\'t find given user' },
+});
+
+interface IUnauthorizedModal {
+  /** Unauthorized action type. */
+  action: 'FOLLOW' | 'REPLY' | 'REBLOG' | 'FAVOURITE' | 'POLL_VOTE',
+  /** Close event handler. */
+  onClose: (modalType: string) => void,
+  /** ActivityPub ID of the account OR status being acted upon. */
+  ap_id?: string,
+  /** Account ID of the account being acted upon. */
+  account?: string,
+}
+
+/** Modal to display when a logged-out user tries to do something that requires login. */
+const UnauthorizedModal: React.FC<IUnauthorizedModal> = ({ action, onClose, account: accountId, ap_id: apId }) => {
+  const intl = useIntl();
+  const history = useHistory();
+  const dispatch = useAppDispatch();
+
+  const { singleUserMode } = useSoapboxConfig();
+  const siteTitle = useAppSelector(state => state.instance.title);
+  const username = useAppSelector(state => state.accounts.get(accountId)?.display_name);
+  const features = useFeatures();
+
+  const [account, setAccount] = useState('');
+
+  const onAccountChange: React.ChangeEventHandler<HTMLInputElement> = e => {
+    setAccount(e.target.value);
+  };
+
+  const onClickClose = () => {
+    onClose('UNAUTHORIZED');
+  };
+
+  const onClickProceed: React.MouseEventHandler = e => {
+    e.preventDefault();
+
+    dispatch(remoteInteraction(apId, account))
+      .then(url => {
+        window.open(url, '_new', 'noopener,noreferrer');
+        onClose('UNAUTHORIZED');
+      })
+      .catch(error => {
+        if (error.message === 'Couldn\'t find user') {
+          dispatch(snackbar.error(intl.formatMessage(messages.userNotFoundError)));
+        }
+      });
+  };
+
+  const onLogin = () => {
+    history.push('/login');
+    onClickClose();
+  };
+
+  const onRegister = () => {
+    history.push('/signup');
+    onClickClose();
+  };
+
+  const renderRemoteInteractions = () => {
+    let header;
+    let button;
+
+    if (action === 'FOLLOW') {
+      header = <FormattedMessage id='remote_interaction.follow_title' defaultMessage='Follow {user} remotely' values={{ user: username }} />;
+      button = <FormattedMessage id='remote_interaction.follow' defaultMessage='Proceed to follow' />;
+    } else if (action === 'REPLY') {
+      header = <FormattedMessage id='remote_interaction.reply_title' defaultMessage='Reply to a post remotely' />;
+      button = <FormattedMessage id='remote_interaction.reply' defaultMessage='Proceed to reply' />;
+    } else if (action === 'REBLOG') {
+      header = <FormattedMessage id='remote_interaction.reblog_title' defaultMessage='Reblog a post remotely' />;
+      button = <FormattedMessage id='remote_interaction.reblog' defaultMessage='Proceed to repost' />;
+    } else if (action === 'FAVOURITE') {
+      header = <FormattedMessage id='remote_interaction.favourite_title' defaultMessage='Like a post remotely' />;
+      button = <FormattedMessage id='remote_interaction.favourite' defaultMessage='Proceed to like' />;
+    } else if (action === 'POLL_VOTE') {
+      header = <FormattedMessage id='remote_interaction.poll_vote_title' defaultMessage='Vote in a poll remotely' />;
+      button = <FormattedMessage id='remote_interaction.poll_vote' defaultMessage='Proceed to vote' />;
+    }
+
+    return (
+      <Modal
+        title={header}
+        onClose={onClickClose}
+        confirmationAction={!singleUserMode ? onLogin : undefined}
+        confirmationText={<FormattedMessage id='account.login' defaultMessage='Log in' />}
+        secondaryAction={onRegister}
+        secondaryText={<FormattedMessage id='account.register' defaultMessage='Sign up' />}
+      >
+        <div className='remote-interaction-modal__content'>
+          <form className='simple_form remote-interaction-modal__fields'>
+            <input
+              type='text'
+              placeholder={intl.formatMessage(messages.accountPlaceholder)}
+              name='remote_follow[acct]'
+              value={account}
+              autoCorrect='off'
+              autoCapitalize='off'
+              onChange={onAccountChange}
+              required
+            />
+            <Button theme='primary' onClick={onClickProceed}>{button}</Button>
+          </form>
+          <div className='remote-interaction-modal__divider'>
+            <Text align='center'>
+              <FormattedMessage id='remote_interaction.divider' defaultMessage='or' />
+            </Text>
+          </div>
+          {!singleUserMode && (
+            <Text size='lg' weight='medium'>
+              <FormattedMessage id='unauthorized_modal.title' defaultMessage='Sign up for {site_title}' values={{ site_title: siteTitle }} />
+            </Text>
+          )}
+        </div>
+      </Modal>
+    );
+  };
+
+  if (action && features.remoteInteractionsAPI && features.federating) {
+    return renderRemoteInteractions();
+  }
+
+  return (
+    <Modal
+      title={<FormattedMessage id='unauthorized_modal.title' defaultMessage='Sign up for {site_title}' values={{ site_title: siteTitle }} />}
+      onClose={onClickClose}
+      confirmationAction={onLogin}
+      confirmationText={<FormattedMessage id='account.login' defaultMessage='Log in' />}
+      secondaryAction={onRegister}
+      secondaryText={<FormattedMessage id='account.register' defaultMessage='Sign up' />}
+    >
+      <Stack>
+        <Text>
+          <FormattedMessage id='unauthorized_modal.text' defaultMessage='You need to be logged in to do that.' />
+        </Text>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default UnauthorizedModal;