LibreChat/client/src/data-provider/Auth/mutations.ts
Ruben Talstra f0f09138bd
🔒 feat: Two-Factor Authentication with Backup Codes & QR support (#5685)
* 🔒 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>
2025-02-17 19:09:36 -05:00

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);
},
},
);
};