Make consumer strategy buttons work

app/soapbox/actions/consumer-auth.ts

@@ -0,0 +1,55 @@
+import axios from 'axios';
+
+import * as BuildConfig from 'soapbox/build_config';
+import { isURL } from 'soapbox/utils/auth';
+import sourceCode from 'soapbox/utils/code';
+import { getFeatures } from 'soapbox/utils/features';
+
+import { createApp } from './apps';
+
+import type { AppDispatch, RootState } from 'soapbox/store';
+
+const createProviderApp = () => {
+  return async(dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const { scopes } = getFeatures(state.instance);
+
+    const params = {
+      client_name:   sourceCode.displayName,
+      redirect_uris: `${window.location.origin}/login/external`,
+      website:       sourceCode.homepage,
+      scopes,
+    };
+
+    return dispatch(createApp(params));
+  };
+};
+
+export const prepareRequest = (provider: string) => {
+  return async(dispatch: AppDispatch, getState: () => RootState) => {
+    const baseURL = isURL(BuildConfig.BACKEND_URL) ? BuildConfig.BACKEND_URL : '';
+
+    const state = getState();
+    const { scopes } = getFeatures(state.instance);
+    const app = await dispatch(createProviderApp());
+    const { client_id, redirect_uri } = app;
+
+    localStorage.setItem('soapbox:external:app', JSON.stringify(app));
+    localStorage.setItem('soapbox:external:baseurl', baseURL);
+    localStorage.setItem('soapbox:external:scopes', scopes);
+
+    const params = {
+      provider,
+      authorization: {
+        client_id,
+        redirect_uri,
+        scope: scopes,
+      },
+    };
+
+    const formdata = axios.toFormData(params);
+    const query = new URLSearchParams(formdata as any);
+
+    location.href = `${baseURL}/oauth/prepare_request?${query.toString()}`;
+  };
+};

app/soapbox/features/auth_login/components/consumer-button.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
+import { prepareRequest } from 'soapbox/actions/consumer-auth';
 import { IconButton, Tooltip } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
 
 const messages = defineMessages({
   tooltip: { id: 'oauth_consumer.tooltip', defaultMessage: 'Sign in with {provider}' },
@@ -30,14 +32,21 @@ interface IConsumerButton {
 /** OAuth consumer button for logging in with a third-party service. */
 const ConsumerButton: React.FC<IConsumerButton> = ({ provider }) => {
   const intl = useIntl();
+  const dispatch = useAppDispatch();
+
   const icon = BRAND_ICONS[provider] || require('@tabler/icons/key.svg');
 
+  const handleClick = () => {
+    dispatch(prepareRequest(provider));
+  };
+
   return (
     <Tooltip text={intl.formatMessage(messages.tooltip, { provider: capitalize(provider) })}>
       <IconButton
         className='p-2.5 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500'
         iconClassName='w-6 h-6'
         src={icon}
+        onClick={handleClick}
       />
     </Tooltip>
   );