mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-19 01:40:15 +01:00
* 🔒 feat: add Two-Factor Authentication (2FA) with backup codes & QR support (#5684) * working version for generating TOTP and authenticate. * better looking UI * refactored + better TOTP logic * fixed issue with UI * fixed issue: remove initial setup when closing window before completion. * added: onKeyDown for verify and disable * refactored some code and cleaned it up a bit. * refactored some code and cleaned it up a bit. * refactored some code and cleaned it up a bit. * refactored some code and cleaned it up a bit. * fixed issue after updating to new main branch * updated example * refactored controllers * removed `passport-totp` not used. * update the generateBackupCodes function to generate 10 codes by default: * update the backup codes to an object. * fixed issue with backup codes not working * be able to disable 2FA with backup codes. * removed new env. replaced with JWT_SECRET * ✨ style: improved a11y and style for TwoFactorAuthentication * 🔒 fix: small types checks * ✨ feat: improve 2FA UI components * fix: remove unnecessary console log * add option to disable 2FA with backup codes * - add option to refresh backup codes - (optional) maybe show the user which backup codes have already been used? * removed text to be able to merge the main. * removed eng tx to be able to merge * fix: migrated lang to new format. * feat: rewrote whole 2FA UI + refactored 2FA backend * chore: resolving conflicts * chore: resolving conflicts * fix: missing packages, because of resolving conflicts. * fix: UI issue and improved a11y * fix: 2FA backup code not working * fix: update localization keys for UI consistency * fix: update button label to use localized text * fix: refactor backup codes regeneration and update localization keys * fix: remove outdated translation for shared links management * fix: remove outdated 2FA code prompts from translation.json * fix: add cursor styles for backup codes item based on usage state * fix: resolve conflict issue * fix: resolve conflict issue * fix: resolve conflict issue * fix: missing packages in package-lock.json * fix: add disabled opacity to the verify button in TwoFactorScreen * ⚙ fix: update 2FA logic to rely on backup codes instead of TOTP status * ⚙️ fix: Simplify user retrieval in 2FA logic by removing unnecessary TOTP secret query * ⚙️ test: Add unit tests for TwoFactorAuthController and twoFactorControllers * ⚙️ fix: Ensure backup codes are validated as an array before usage in 2FA components * ⚙️ fix: Update module path mappings in tests to use relative paths * ⚙️ fix: Update moduleNameMapper in jest.config.js to remove the caret from path mapping * ⚙️ refactor: Simplify import paths in TwoFactorAuthController and twoFactorControllers test files * ⚙️ test: Mock twoFactorService methods in twoFactorControllers tests * ⚙️ refactor: Comment out unused imports and mock setups in test files for two-factor authentication * ⚙️ refactor: removed files * refactor: Exclude totpSecret from user data retrieval in AuthController, LoginController, and jwtStrategy * refactor: Consolidate backup code verification to apply DRY and remove default array in user schema * refactor: Enhance two-factor authentication ux/flow with improved error handling and loading state management, prevent redirect to /login --------- Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com> Co-authored-by: Danny Avila <danny@librechat.ai>
174 lines
5.4 KiB
TypeScript
174 lines
5.4 KiB
TypeScript
import { useResetRecoilState, useSetRecoilState } from 'recoil';
|
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { MutationKeys, QueryKeys, dataService, request } from 'librechat-data-provider';
|
|
import type { UseMutationResult } from '@tanstack/react-query';
|
|
import type * as t from 'librechat-data-provider';
|
|
import useClearStates from '~/hooks/Config/useClearStates';
|
|
import store from '~/store';
|
|
|
|
/* login/logout */
|
|
export const useLogoutUserMutation = (
|
|
options?: t.LogoutOptions,
|
|
): UseMutationResult<t.TLogoutResponse, unknown, undefined, unknown> => {
|
|
const queryClient = useQueryClient();
|
|
const clearStates = useClearStates();
|
|
const resetDefaultPreset = useResetRecoilState(store.defaultPreset);
|
|
const setQueriesEnabled = useSetRecoilState<boolean>(store.queriesEnabled);
|
|
|
|
return useMutation([MutationKeys.logoutUser], {
|
|
mutationFn: () => dataService.logout(),
|
|
...(options || {}),
|
|
onSuccess: (...args) => {
|
|
setQueriesEnabled(false);
|
|
resetDefaultPreset();
|
|
clearStates();
|
|
queryClient.removeQueries();
|
|
options?.onSuccess?.(...args);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useLoginUserMutation = (
|
|
options?: t.MutationOptions<t.TLoginResponse, t.TLoginUser, unknown, unknown>,
|
|
): UseMutationResult<t.TLoginResponse, unknown, t.TLoginUser, unknown> => {
|
|
const queryClient = useQueryClient();
|
|
const clearStates = useClearStates();
|
|
const resetDefaultPreset = useResetRecoilState(store.defaultPreset);
|
|
const setQueriesEnabled = useSetRecoilState<boolean>(store.queriesEnabled);
|
|
return useMutation([MutationKeys.loginUser], {
|
|
mutationFn: (payload: t.TLoginUser) => dataService.login(payload),
|
|
...(options || {}),
|
|
onMutate: (vars) => {
|
|
resetDefaultPreset();
|
|
clearStates();
|
|
queryClient.removeQueries();
|
|
options?.onMutate?.(vars);
|
|
},
|
|
onSuccess: (...args) => {
|
|
setQueriesEnabled(true);
|
|
options?.onSuccess?.(...args);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useRefreshTokenMutation = (
|
|
options?: t.MutationOptions<t.TRefreshTokenResponse | undefined, undefined, unknown, unknown>,
|
|
): UseMutationResult<t.TRefreshTokenResponse | undefined, unknown, undefined, unknown> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation([MutationKeys.refreshToken], {
|
|
mutationFn: () => request.refreshToken(),
|
|
...(options || {}),
|
|
onMutate: (vars) => {
|
|
queryClient.removeQueries();
|
|
options?.onMutate?.(vars);
|
|
},
|
|
});
|
|
};
|
|
|
|
/* User */
|
|
export const useDeleteUserMutation = (
|
|
options?: t.MutationOptions<unknown, undefined>,
|
|
): UseMutationResult<unknown, unknown, undefined, unknown> => {
|
|
const queryClient = useQueryClient();
|
|
const clearStates = useClearStates();
|
|
const resetDefaultPreset = useResetRecoilState(store.defaultPreset);
|
|
|
|
return useMutation([MutationKeys.deleteUser], {
|
|
mutationFn: () => dataService.deleteUser(),
|
|
...(options || {}),
|
|
onSuccess: (...args) => {
|
|
resetDefaultPreset();
|
|
clearStates();
|
|
queryClient.removeQueries();
|
|
options?.onSuccess?.(...args);
|
|
},
|
|
});
|
|
};
|
|
|
|
// Array.isArray(user?.backupCodes) && user?.backupCodes.length > 0
|
|
|
|
export const useEnableTwoFactorMutation = (): UseMutationResult<
|
|
t.TEnable2FAResponse,
|
|
unknown,
|
|
void,
|
|
unknown
|
|
> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation(() => dataService.enableTwoFactor(), {
|
|
onSuccess: (data) => {
|
|
queryClient.setQueryData([QueryKeys.user, '2fa'], data);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useVerifyTwoFactorMutation = (): UseMutationResult<
|
|
t.TVerify2FAResponse,
|
|
unknown,
|
|
t.TVerify2FARequest,
|
|
unknown
|
|
> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation((payload: t.TVerify2FARequest) => dataService.verifyTwoFactor(payload), {
|
|
onSuccess: (data) => {
|
|
queryClient.setQueryData([QueryKeys.user, '2fa'], data);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useConfirmTwoFactorMutation = (): UseMutationResult<
|
|
t.TVerify2FAResponse,
|
|
unknown,
|
|
t.TVerify2FARequest,
|
|
unknown
|
|
> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation((payload: t.TVerify2FARequest) => dataService.confirmTwoFactor(payload), {
|
|
onSuccess: (data) => {
|
|
queryClient.setQueryData([QueryKeys.user, '2fa'], data);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useDisableTwoFactorMutation = (): UseMutationResult<
|
|
t.TDisable2FAResponse,
|
|
unknown,
|
|
void,
|
|
unknown
|
|
> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation(() => dataService.disableTwoFactor(), {
|
|
onSuccess: (data) => {
|
|
queryClient.setQueryData([QueryKeys.user, '2fa'], null);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useRegenerateBackupCodesMutation = (): UseMutationResult<
|
|
t.TRegenerateBackupCodesResponse,
|
|
unknown,
|
|
void,
|
|
unknown
|
|
> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation(() => dataService.regenerateBackupCodes(), {
|
|
onSuccess: (data) => {
|
|
queryClient.setQueryData([QueryKeys.user, '2fa', 'backup'], data);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useVerifyTwoFactorTempMutation = (
|
|
options?: t.MutationOptions<t.TVerify2FATempResponse, t.TVerify2FATempRequest, unknown, unknown>,
|
|
): UseMutationResult<t.TVerify2FATempResponse, unknown, t.TVerify2FATempRequest, unknown> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation(
|
|
(payload: t.TVerify2FATempRequest) => dataService.verifyTwoFactorTemp(payload),
|
|
{
|
|
...(options || {}),
|
|
onSuccess: (data, ...args) => {
|
|
queryClient.setQueryData([QueryKeys.user, '2fa'], data);
|
|
options?.onSuccess?.(data, ...args);
|
|
},
|
|
},
|
|
);
|
|
};
|