feat(auth): display auth error message in user menu

InformaticsMatters · Jun 19, 2023 · 5b295a1 · 5b295a1
1 parent 06a1e21
commit 5b295a1
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 53 deletions.
diff --git a/layouts/navigation/UserMenuContent.tsx b/layouts/navigation/UserMenuContent.tsx
@@ -1,5 +1,5 @@
 import { Person as PersonIcon } from "@mui/icons-material";
-import { Box, Chip, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Alert, Box, Chip, Typography, useMediaQuery, useTheme } from "@mui/material";
 
 import { AuthButton } from "../../components/auth/AuthButton";
 import { CenterLoader } from "../../components/CenterLoader";
@@ -12,44 +12,56 @@ import { useKeycloakUser } from "../../hooks/useKeycloakUser";
  * Content of the user menu
  */
 export const UserMenuContent = () => {
-  const { user, isLoading } = useKeycloakUser();
-  const asRole = useASAuthorizationStatus();
-  const dmRole = useDMAuthorizationStatus();
-
   const theme = useTheme();
-
   const biggerThanMd = useMediaQuery(theme.breakpoints.up("md"));
 
   return (
     <Box textAlign={biggerThanMd ? "center" : undefined}>
       <Typography gutterBottom variant="h3">
         Account
       </Typography>
-      {isLoading ? (
-        <CenterLoader />
-      ) : user.username ? (
-        <>
-          {biggerThanMd && (
-            <Box sx={{ fontSize: 80 }}>
-              <PersonIcon color="disabled" fontSize="inherit" />
-            </Box>
-          )}
-          <Typography fontWeight="bold">{user.username}</Typography>
-          <Typography>
-            Roles:
-            <Chips>
-              <Chip label={dmRole ?? "No DM Role"} size="small" />
-              <Chip label={asRole ?? "No AS Role"} size="small" />
-            </Chips>
-          </Typography>
-          <AuthButton mode="logout" sx={{ marginY: 1 }} />
-        </>
-      ) : (
-        <Typography>
-          <AuthButton mode="login" />
-        </Typography>
-      )}
+      <UserMenuContentInner />
       <DarkModeSwitch />
     </Box>
   );
 };
+
+const UserMenuContentInner = () => {
+  const asRole = useASAuthorizationStatus();
+  const dmRole = useDMAuthorizationStatus();
+  const { user, isLoading, error } = useKeycloakUser();
+
+  const theme = useTheme();
+  const biggerThanMd = useMediaQuery(theme.breakpoints.up("md"));
+
+  if (error) {
+    return <Alert severity="error" title={error.message} />;
+  }
+
+  if (isLoading) {
+    return <CenterLoader />;
+  }
+
+  if (user.username) {
+    return (
+      <>
+        {biggerThanMd && (
+          <Box sx={{ fontSize: 80 }}>
+            <PersonIcon color="disabled" fontSize="inherit" />
+          </Box>
+        )}
+        <Typography fontWeight="bold">{user.username}</Typography>
+        <Typography>
+          Roles:
+          <Chips>
+            <Chip label={dmRole ?? "No DM Role"} size="small" />
+            <Chip label={asRole ?? "No AS Role"} size="small" />
+          </Chips>
+        </Typography>
+        <AuthButton mode="logout" sx={{ marginY: 1 }} />
+      </>
+    );
+  }
+
+  return <AuthButton mode="login" />;
+};
diff --git a/pages/api/auth/[...auth0].ts b/pages/api/auth/[...auth0].ts
diff --git a/pages/api/auth/[auth0].ts b/pages/api/auth/[auth0].ts
@@ -0,0 +1,22 @@
+import { handleAuth, handleLogin } from "@auth0/nextjs-auth0";
+import { captureException } from "@sentry/nextjs";
+
+export default handleAuth({
+  login: handleLogin({
+    authorizationParams: {
+      // Add the `offline_access` scope to also get a Refresh Token
+      scope: "openid profile email offline_access",
+    },
+  }),
+  onError(_req, res, error) {
+    console.error(error);
+    res.status(error.status || 500).end();
+    captureException(error);
+  },
+});
+
+export const config = {
+  api: {
+    externalResolver: true,
+  },
+};
diff --git a/types/nextjs-routes.d.ts b/types/nextjs-routes.d.ts
@@ -12,7 +12,7 @@ declare module "nextjs-routes" {
 
   export type Route =
     | DynamicRoute<"/api/as-api/[...asProxy]", { "asProxy": string[] }>
-    | DynamicRoute<"/api/auth/[...auth0]", { "auth0": string[] }>
+    | DynamicRoute<"/api/auth/[auth0]", { "auth0": string }>
     | StaticRoute<"/api/configuration/ui-version">
     | DynamicRoute<"/api/dm-api/[...dmProxy]", { "dmProxy": string[] }>
     | DynamicRoute<"/api/viewer-proxy/[...viewerProxy]", { "viewerProxy": string[] }>