Handle authentication errors with a auth_error page as we do in Physics

Author: mlt47

src/app/components/navigation/IsaacApp.tsx

@@ -52,6 +52,7 @@ import {AddGameboard} from "../handlers/AddGameboard";
 import "../../services/scrollManager";
 import "../../services/polyfills";
 import {isTest} from "../../services/constants";
+import {AuthError} from "../pages/AuthError";
 
 export const IsaacApp = () => {
     // Redux state and dispatch
@@ -80,6 +81,7 @@ export const IsaacApp = () => {
                     {/* Errors; these paths work but aren't really used */}
                     <Route exact path={serverError ? undefined : "/error"} component={ServerError} />
                     <Route exact path={goneAwayError ? undefined : "/error_stale"} component={SessionExpired} />
+                    <TrackedRoute exact path={"/auth_error"} component={AuthError} />
 
                     {/* Special case */}
                     <TrackedRoute exact path="/questions/:questionId(_regression_test_)" component={segueEnvironment !== "PROD" || isTest ? Question : NotFound} />

src/app/components/pages/AuthError.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import {Link} from "react-router-dom";
+import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
+import * as RS from "reactstrap";
+
+export const AuthError = ({location: {state: {errorMessage}}}: {location: {state: {errorMessage: string}}}) => {
+
+    return <RS.Container>
+        <TitleAndBreadcrumb currentPageTitle="Authentication error" breadcrumbTitleOverride="Authentication error" />
+        <RS.Row className="pt-4">
+            <RS.Col md={{size: 8, offset: 2}}>
+                <h3>
+                    {errorMessage}
+                </h3>
+                <p>
+                    An error occurred while attempting to log in.
+                    <br />
+                    You may want to return to the <Link to="/home"> home page</Link> and try again, {" "}
+                    check <Link to="/support/student/general#login_issues">this FAQ</Link>
+                    , or <Link to="/contact">contact us</Link> if this keeps happening.
+                </p>
+            </RS.Col>
+        </RS.Row>
+    </RS.Container>
+};

src/app/state/actions.tsx

@@ -293,8 +293,9 @@ export const handleProviderCallback = (provider: AuthenticationProvider, paramet
         } else {
             history.push(nextPage);
         }
-    } catch (e) {
-        dispatch(showErrorToastIfNeeded("Login Failed", e));
+    } catch (error) {
+        history.push({pathname: "/auth_error", state: {errorMessage: isAxiosError(error) ? extractMessage(error) : API_REQUEST_FAILURE_MESSAGE}});
+        dispatch(showErrorToastIfNeeded("Login Failed", error));
     }
 };