diff --git a/src/frontend/lib/types/Auth.tsx b/src/frontend/lib/types/Auth.tsx
index 5f6b0670cf..959b64e5fe 100644
--- a/src/frontend/lib/types/Auth.tsx
+++ b/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 };
}
diff --git a/src/frontend/src/components/nav/MainMenu.tsx b/src/frontend/src/components/nav/MainMenu.tsx
index e18bf98b13..63407c756f 100644
--- a/src/frontend/src/components/nav/MainMenu.tsx
+++ b/src/frontend/src/components/nav/MainMenu.tsx
@@ -17,7 +17,6 @@ import {
IconUserCog
} from '@tabler/icons-react';
import { Link, useNavigate } from 'react-router-dom';
-
import { useShallow } from 'zustand/react/shallow';
import { doLogout } from '../../functions/auth';
import * as classes from '../../main.css';
@@ -32,70 +31,76 @@ export function MainMenu() {
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
return (
-
+
);
}
diff --git a/src/frontend/src/functions/auth.tsx b/src/frontend/src/functions/auth.tsx
index 7a2158e6f5..fec5f68cf9 100644
--- a/src/frontend/src/functions/auth.tsx
+++ b/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');
};
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
index f08d810b47..faf1210fe3 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
@@ -5,6 +5,7 @@ import { t } from '@lingui/core/macro';
import { Trans } from '@lingui/react/macro';
import {
Accordion,
+ ActionIcon,
Alert,
Badge,
Button,
@@ -27,15 +28,17 @@ import {
IconAlertCircle,
IconAt,
IconExclamationCircle,
+ IconRefresh,
IconX
} from '@tabler/icons-react';
import { useQuery } from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
import { useShallow } from 'zustand/react/shallow';
import { api } from '../../../../App';
import { StylishText } from '../../../../components/items/StylishText';
import { ProviderLogin, authApi } from '../../../../functions/auth';
import { useServerApiState } from '../../../../states/ServerApiState';
+import { useUserState } from '../../../../states/UserState';
import { ApiTokenTable } from '../../../../tables/settings/ApiTokenTable';
import { QrRegistrationForm } from './QrRegistrationForm';
import { useReauth } from './useConfirm';
@@ -45,9 +48,11 @@ export function SecurityContent() {
useShallow((state) => [state.auth_config, state.sso_enabled])
);
+ const user = useUserState();
+
return (
-
+
{t`Email Addresses`}
@@ -90,11 +95,64 @@ export function SecurityContent() {
+ {user.isSuperuser() && (
+
+
+ {t`Session Information`}
+
+
+
+
+
+ )}
);
}
+function AuthContextSection() {
+ const [auth_context, setAuthContext] = useServerApiState(
+ useShallow((state) => [state.auth_context, state.setAuthContext])
+ );
+
+ const fetchAuthContext = useCallback(() => {
+ authApi(apiUrl(ApiEndpoints.auth_session)).then((resp) => {
+ setAuthContext(resp.data.data);
+ });
+ }, [setAuthContext]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {t`Timestamp`}
+ {t`Method`}
+
+
+
+ {auth_context?.methods?.map((method: any, index: number) => (
+
+ {parseDate(method.at)}
+ {method.method}
+
+ ))}
+
+
+
+ );
+}
+
function EmailSection() {
const [selectedEmail, setSelectedEmail] = useState('');
const [newEmailValue, setNewEmailValue] = useState('');
@@ -392,9 +450,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) => (
@@ -719,3 +774,6 @@ async function runActionWithFallback(
});
}
}
+
+export const parseDate = (date: number) =>
+ date == null ? 'Never' : new Date(date * 1000).toLocaleString();
diff --git a/src/frontend/src/states/ServerApiState.tsx b/src/frontend/src/states/ServerApiState.tsx
index e2ace8c689..6e0428f7f9 100644
--- a/src/frontend/src/states/ServerApiState.tsx
+++ b/src/frontend/src/states/ServerApiState.tsx
@@ -14,7 +14,7 @@ interface ServerApiStateProps {
fetchServerApiState: () => Promise;
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;