diff --git a/app/soapbox/features/external_login/components/external-login-form.tsx b/app/soapbox/features/external_login/components/external-login-form.tsx
index 605cb95fd..f56f6678a 100644
--- a/app/soapbox/features/external_login/components/external-login-form.tsx
+++ b/app/soapbox/features/external_login/components/external-login-form.tsx
@@ -1,13 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
-import { useDispatch } from 'react-redux';
 
 import { externalLogin, loginWithCode } from 'soapbox/actions/external_auth';
+import snackbar from 'soapbox/actions/snackbar';
 import { Button, Form, FormActions, FormGroup, Input, Spinner } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import type { AxiosError } from 'axios';
 
 const messages = defineMessages({
   instanceLabel: { id: 'login.fields.instance_label', defaultMessage: 'Instance' },
   instancePlaceholder: { id: 'login.fields.instance_placeholder', defaultMessage: 'example.com' },
+  instanceFailed: { id: 'login_external.errors.instance_fail', defaultMessage: 'The instance returned an error.' },
+  networkFailed: { id: 'login_external.errors.network_fail', defaultMessage: 'Connection failed. Is a browser extension blocking it?' },
 });
 
 /** Form for logging into a remote instance */
@@ -15,7 +20,7 @@ const ExternalLoginForm: React.FC = () => {
   const code = new URLSearchParams(window.location.search).get('code');
 
   const intl = useIntl();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const [host, setHost] = useState('');
   const [isLoading, setLoading] = useState(false);
@@ -27,9 +32,20 @@ const ExternalLoginForm: React.FC = () => {
   const handleSubmit = () => {
     setLoading(true);
 
-    dispatch(externalLogin(host) as any)
+    dispatch(externalLogin(host))
       .then(() => setLoading(false))
-      .catch(() => setLoading(false));
+      .catch((error: AxiosError) => {
+        console.error(error);
+        const status = error.response?.status;
+
+        if (status) {
+          dispatch(snackbar.error(intl.formatMessage(messages.instanceFailed)));
+        } else if (!status && error.code === 'ERR_NETWORK') {
+          dispatch(snackbar.error(intl.formatMessage(messages.networkFailed)));
+        }
+
+        setLoading(false);
+      });
   };
 
   useEffect(() => {