feat(frontend): show page when login fails

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Route, Switch } from "react-router-dom";
+import { LoginFailure } from "./components/LoginFailure";
 import { NavBar } from "./components/NavBar";
 import { useAuth } from "./hooks/use-auth";
 import "./tailwind/generated.css";
@@ -7,8 +8,6 @@ import "./tailwind/generated.css";
 export function App() {
   const { isLoaded } = useAuth();
 
-  console.log("App", { isLoaded });
-
   if (!isLoaded) {
     return <div>Loading...</div>;
   }
@@ -20,6 +19,7 @@ export function App() {
       </header>
       <Switch>
         <Route path="/" exact />
+        <Route path="/login/failure" exact component={LoginFailure} />
       </Switch>
     </div>
   );

frontend/src/api/api.ts

@@ -21,7 +21,7 @@ const getDefaultHeaders = (): Headers => {
 };
 
 export const getUsersMe = async (): Promise<User> => {
-  const res = await fetch(`api/v1/users/me`, { headers: getDefaultHeaders() });
+  const res = await fetch(`/api/v1/users/me`, { headers: getDefaultHeaders() });
 
   switch (res.status) {
     case 200: {

frontend/src/components/LoginFailure.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useQuery } from "../hooks/use-query";
+
+export const LoginFailure: React.FC = () => {
+  const query = useQuery();
+
+  const source = query.get("source");
+  const reason = query.get("reason");
+
+  return (
+    <div
+      className="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 m-8"
+      role="alert"
+    >
+      <p className="font-bold">Login Failure</p>
+      <p>Something not ideal might be happening.</p>
+      <p className="m-5 bg-gray-100 p-5">
+        <ul className="text-xs text-gray-700 font-mono">
+          <li>Source: {source}</li>
+          <li>Reason: {reason}</li>
+        </ul>
+      </p>
+    </div>
+  );
+};

frontend/src/hooks/use-query.tsx

@@ -0,0 +1,5 @@
+import { useLocation } from "react-router-dom";
+
+export function useQuery(): URLSearchParams {
+  return new URLSearchParams(useLocation().search);
+}

src/auth/auth.controller.ts

@@ -37,6 +37,6 @@ export class AuthController {
     });
 
     // Redirect User to SPA
-    res.redirect("/login/success?type=spotify");
+    res.redirect("/login/success?source=spotify");
   }
 }

src/auth/spotify.filter.ts

@@ -23,6 +23,6 @@ export class SpotifyAuthFilter implements ExceptionFilter {
       exception.stack
     );
 
-    response.redirect(`/login/failure?reason=${reason}&type=spotify`);
+    response.redirect(`/login/failure?reason=${reason}&source=spotify`);
   }
 }