feat(frontend): Add authentication debug window

src/frontend/lib/types/Auth.tsx

@@ -1,5 +1,16 @@
 export interface AuthContext {
   status: number;
+  user?: {
+    id: number;
+    display: string;
+    has_usable_password: boolean;
+    username: string;
+  };
+  methods?: {
+    method: string;
+    at: number;
+    username: string;
+  }[];
   data: { flows: Flow[] };
   meta: { is_authenticated: boolean };
 }

src/frontend/src/components/nav/MainMenu.tsx

@@ -1,14 +1,19 @@
 import { Trans } from '@lingui/react/macro';
 import {
+  Button,
   Group,
+  HoverCard,
+  List,
   Menu,
   Skeleton,
+  Table,
   Text,
   UnstyledButton,
   useMantineColorScheme
 } from '@mantine/core';
 import {
   IconChevronDown,
+  IconInfoCircle,
   IconLogout,
   IconMoonStars,
   IconSettings,
@@ -18,10 +23,15 @@ import {
 } from '@tabler/icons-react';
 import { Link, useNavigate } from 'react-router-dom';
 
+import { ApiEndpoints, apiUrl } from '@lib/index';
+import type { AuthContext } from '@lib/types/Auth';
 import { useShallow } from 'zustand/react/shallow';
-import { doLogout } from '../../functions/auth';
+import { authApi, doLogout } from '../../functions/auth';
 import * as classes from '../../main.css';
+import { parseDate } from '../../pages/Index/Settings/AccountSettings/SecurityContent';
+import { useServerApiState } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
+import type { ServerAPIProps } from '../../states/states';
 import { vars } from '../../theme';
 
 export function MainMenu() {
@@ -30,72 +40,168 @@ export function MainMenu() {
     useShallow((state) => [state.user, state.username])
   );
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-
+  const [server, auth_context] = useServerApiState(
+    useShallow((state) => [state.server, state.auth_context])
+  );
   return (
-    <Menu width={260} position='bottom-end'>
-      <Menu.Target>
-        <UnstyledButton className={classes.layoutHeaderUser}>
-          <Group gap={7}>
-            {username() ? (
-              <Text fw={500} size='sm' style={{ lineHeight: 1 }} mr={3}>
-                {username()}
-              </Text>
-            ) : (
-              <Skeleton height={20} width={40} radius={vars.radiusDefault} />
-            )}
-            <IconChevronDown />
-          </Group>
-        </UnstyledButton>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <Menu.Label>
-          <Trans>Settings</Trans>
-        </Menu.Label>
-        <Menu.Item
-          leftSection={<IconUserCog />}
-          component={Link}
-          to='/settings/user'
-        >
-          <Trans>Account Settings</Trans>
-        </Menu.Item>
-        {user?.is_staff && (
+    <>
+      {user?.is_superuser && (
+        <HoverCard shadow='md' openDelay={500} closeDelay={500} withArrow>
+          <HoverCard.Target>
+            <IconInfoCircle />
+          </HoverCard.Target>
+          <HoverCard.Dropdown>
+            {
+              <AuthContextInformation
+                server={server}
+                auth_context={auth_context}
+              />
+            }
+          </HoverCard.Dropdown>
+        </HoverCard>
+      )}
+      <Menu width={260} position='bottom-end'>
+        <Menu.Target>
+          <UnstyledButton className={classes.layoutHeaderUser}>
+            <Group gap={7}>
+              {username() ? (
+                <Text fw={500} size='sm' style={{ lineHeight: 1 }} mr={3}>
+                  {username()}
+                </Text>
+              ) : (
+                <Skeleton height={20} width={40} radius={vars.radiusDefault} />
+              )}
+              <IconChevronDown />
+            </Group>
+          </UnstyledButton>
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Label>
+            <Trans>Settings</Trans>
+          </Menu.Label>
           <Menu.Item
-            leftSection={<IconSettings />}
+            leftSection={<IconUserCog />}
             component={Link}
-            to='/settings/system'
+            to='/settings/user'
           >
-            <Trans>System Settings</Trans>
+            <Trans>Account Settings</Trans>
           </Menu.Item>
-        )}
-        {user?.is_staff && (
+          {user?.is_staff && (
+            <Menu.Item
+              leftSection={<IconSettings />}
+              component={Link}
+              to='/settings/system'
+            >
+              <Trans>System Settings</Trans>
+            </Menu.Item>
+          )}
+          {user?.is_staff && (
+            <Menu.Item
+              leftSection={<IconUserBolt />}
+              component={Link}
+              to='/settings/admin'
+            >
+              <Trans>Admin Center</Trans>
+            </Menu.Item>
+          )}
+          {user?.is_staff && <Menu.Divider />}
           <Menu.Item
-            leftSection={<IconUserBolt />}
-            component={Link}
-            to='/settings/admin'
+            onClick={toggleColorScheme}
+            leftSection={
+              colorScheme === 'dark' ? <IconSun /> : <IconMoonStars />
+            }
+            c={
+              colorScheme === 'dark'
+                ? vars.colors.yellow[4]
+                : vars.colors.blue[6]
+            }
           >
-            <Trans>Admin Center</Trans>
+            <Trans>Change Color Mode</Trans>
           </Menu.Item>
-        )}
-        {user?.is_staff && <Menu.Divider />}
-        <Menu.Item
-          onClick={toggleColorScheme}
-          leftSection={colorScheme === 'dark' ? <IconSun /> : <IconMoonStars />}
-          c={
-            colorScheme === 'dark' ? vars.colors.yellow[4] : vars.colors.blue[6]
-          }
-        >
-          <Trans>Change Color Mode</Trans>
-        </Menu.Item>
-        <Menu.Divider />
-        <Menu.Item
-          leftSection={<IconLogout />}
-          onClick={() => {
-            doLogout(navigate);
-          }}
-        >
-          <Trans>Logout</Trans>
-        </Menu.Item>
-      </Menu.Dropdown>
-    </Menu>
+          <Menu.Divider />
+          <Menu.Item
+            leftSection={<IconLogout />}
+            onClick={() => {
+              doLogout(navigate);
+            }}
+          >
+            <Trans>Logout</Trans>
+          </Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+    </>
+  );
+}
+
+function AuthContextInformation({
+  server,
+  auth_context
+}: Readonly<{
+  server: ServerAPIProps;
+  auth_context: AuthContext | undefined;
+}>) {
+  const [setAuthContext] = useServerApiState(
+    useShallow((state) => [state.setAuthContext])
+  );
+
+  function fetchAuthContext() {
+    authApi(apiUrl(ApiEndpoints.auth_session)).then((resp) => {
+      setAuthContext(resp.data.data);
+    });
+  }
+
+  const rows = [
+    { name: 'Server version', value: server.version },
+    { name: 'API version', value: server.apiVersion },
+    { name: 'User ID', value: auth_context?.user?.id }
+  ];
+  return (
+    <>
+      <Table>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>
+              <Trans>Name</Trans>
+            </Table.Th>
+            <Table.Th>
+              <Trans>Value</Trans>
+            </Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {rows.map((element) => (
+            <Table.Tr key={element.name}>
+              <Table.Td>{element.name}</Table.Td>
+              <Table.Td>{element.value}</Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+      {auth_context?.methods && (
+        <>
+          <Text size='sm'>
+            <Trans>Methods</Trans>
+          </Text>
+
+          <List type='ordered'>
+            {auth_context?.methods.map((method: any) => (
+              <List.Item key={method.at}>
+                <strong>{parseDate(method.at)}</strong>: {method.method}
+              </List.Item>
+            ))}
+          </List>
+        </>
+      )}
+      <Button
+        variant='light'
+        size='compact-md'
+        onClick={(e) => {
+          e.preventDefault();
+          fetchAuthContext();
+        }}
+      >
+        <Trans>Reload</Trans>
+      </Button>
+    </>
   );
 }

src/frontend/src/functions/auth.tsx

@@ -169,6 +169,7 @@ export async function doBasicLogin(
  */
 export const doLogout = async (navigate: NavigateFunction) => {
   const { clearUserState, isLoggedIn } = useUserState.getState();
+  const { setAuthContext } = useServerApiState.getState();
 
   // Logout from the server session
   if (isLoggedIn() || !!getCsrfCookie()) {
@@ -183,6 +184,7 @@ export const doLogout = async (navigate: NavigateFunction) => {
 
   clearUserState();
   clearCsrfCookie();
+  setAuthContext(undefined);
   navigate('/login');
 };
 

src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx

@@ -388,9 +388,6 @@ function MfaSection() {
     );
   };
 
-  const parseDate = (date: number) =>
-    date == null ? 'Never' : new Date(date * 1000).toLocaleString();
-
   const rows = useMemo(() => {
     if (isLoading || !data) return null;
     return data.map((token: any) => (
@@ -713,3 +710,6 @@ async function runActionWithFallback(
       });
   }
 }
+
+export const parseDate = (date: number) =>
+  date == null ? 'Never' : new Date(date * 1000).toLocaleString();

src/frontend/src/states/ApiState.tsx

@@ -14,7 +14,7 @@ interface ServerApiStateProps {
   fetchServerApiState: () => void;
   auth_config?: AuthConfig;
   auth_context?: AuthContext;
-  setAuthContext: (auth_context: AuthContext) => void;
+  setAuthContext: (auth_context: AuthContext | undefined) => void;
   sso_enabled: () => boolean;
   registration_enabled: () => boolean;
   sso_registration_enabled: () => boolean;

src/frontend/tests/pages/pui_core.spec.ts

@@ -15,7 +15,7 @@ test('Core User/Group/Contact', async ({ browser }) => {
 
   // users
   await loadTab(page, 'Users');
-  await page.getByRole('cell', { name: 'admin' }).click();
+  await page.getByRole('cell', { name: 'admin', exact: true }).click();
   await page.getByText('User: admin', { exact: true }).waitFor();
   await page.getByLabel('User Details').waitFor();
   await page.getByLabel('breadcrumb-1-users').click();