Add auth error page (#2880)

* Add auth error page

* Fix page

* update tests

* remove async

containers/ecr-viewer/src/app/error/auth/page.tsx

@@ -0,0 +1,42 @@
+"use client";
+import React from "react";
+import { Icon } from "@trussworks/react-uswds";
+import Header from "../../Header";
+
+/**
+ * @returns The error auth page JSX component.
+ */
+const ErrorAuthPage = () => (
+  <div className="height-viewport width-viewport display-flex flex-column">
+    <Header />
+    <main className="display-flex flex-justify-center height-full">
+      <div className="display-inline-block margin-y-auto">
+        <h2 className="font-family-serif font-serif-xl margin-bottom-0">
+          <Icon.Error
+            size={5}
+            className="margin-right-105 text-middle"
+            aria-hidden
+          />
+          Authentication Failed
+        </h2>
+        <div className="text-semibold font-sans-md margin-top-1">
+          Check your credentials and try again.
+        </div>
+        <div className="bg-info-lighter border border-info-light radius-md font-sans-md line-height-sans-4 padding-3 margin-top-2">
+          Please try the following:
+          <ul className="margin-0 padding-left-3">
+            <li>
+              <b>Return to NBS:</b> Return to NBS and try to reopen the eCR.
+            </li>
+            <li>
+              <b>Contact support:</b> If the problem persists, please reach out
+              to your eCR coordinator.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </main>
+  </div>
+);
+
+export default ErrorAuthPage;

containers/ecr-viewer/src/middleware.test.js

@@ -58,9 +58,10 @@ describe("Middleware", () => {
     const req = new NextRequest("https://www.example.com/api/fhir-data/");
 
     const resp = await middleware(req);
-    const respJson = await resp.json();
-    expect(respJson.message).toBe("Auth required");
-    expect(resp.status).toBe(401);
+    expect(resp.headers.get("location")).toBe(
+      "https://www.example.com/error/auth",
+    );
+    expect(resp.status).toBe(307);
   });
 
   it("should authorize the api endpoints with auth", async () => {
@@ -79,6 +80,9 @@ describe("Middleware", () => {
   it("should not authorize non api endpoints ", async () => {
     const req = new NextRequest("https://www.example.com/view-data?id=1234");
     const resp = await middleware(req);
-    expect(resp.status).toBe(401);
+    expect(resp.headers.get("location")).toBe(
+      "https://www.example.com/error/auth",
+    );
+    expect(resp.status).toBe(307);
   });
 });

containers/ecr-viewer/src/middleware.ts

@@ -26,7 +26,7 @@ export async function middleware(req: NextRequest): Promise<NextResponse> {
       if (nbsAuth) {
         return nbsAuth;
       } else {
-        return NextResponse.json({ message: "Auth required" }, { status: 401 });
+        return NextResponse.redirect(new URL("/error/auth", req.url));
       }
     }
   } else {