dc576d0818
## Description This PR adds recaptcha on login form. One can add any one of three recaptcha vendor - 1. Google Recaptcha - https://developers.google.com/recaptcha/docs/v3#programmatically_invoke_the_challenge 2. HCaptcha - https://docs.hcaptcha.com/invisible#programmatically-invoke-the-challenge 3. Turnstile - https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#execution-modes ### Issue - #3546 ### Environment variables - 1. `CAPTCHA_DRIVER` - `google-recaptcha` | `hcaptcha` | `turnstile` 2. `CAPTCHA_SITE_KEY` - site key 3. `CAPTCHA_SECRET_KEY` - secret key ### Engineering choices 1. If some of the above env variable provided, then, backend generates an error - <img width="990" alt="image" src="https://github.com/twentyhq/twenty/assets/60139930/9fb00fab-9261-4ff3-b23e-2c2e06f1bf89"> Please note that login/signup form will keep working as expected. 2. I'm using a Captcha guard that intercepts the request. If "captchaToken" is present in the body and all env is set, then, the captcha token is verified by backend through the service. 3. One can use this guard on any resolver to protect it by the captcha. 4. On frontend, two hooks `useGenerateCaptchaToken` and `useInsertCaptchaScript` is created. `useInsertCaptchaScript` adds the respective captcha JS script on frontend. `useGenerateCaptchaToken` returns a function that one can use to trigger captcha token generation programatically. This allows one to generate token keeping recaptcha invisible. ### Note This PR contains some changes in unrelated files like indentation, spacing, inverted comma etc. I ran "yarn nx fmt:fix twenty-front" and "yarn nx lint twenty-front -- --fix". ### Screenshots <img width="869" alt="image" src="https://github.com/twentyhq/twenty/assets/60139930/a75f5677-9b66-47f7-9730-4ec916073f8c"> --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
274 lines
8.6 KiB
TypeScript
274 lines
8.6 KiB
TypeScript
import { useCallback } from 'react';
|
|
import { useApolloClient } from '@apollo/client';
|
|
import {
|
|
snapshot_UNSTABLE,
|
|
useGotoRecoilSnapshot,
|
|
useRecoilCallback,
|
|
useRecoilState,
|
|
useSetRecoilState,
|
|
} from 'recoil';
|
|
import { iconsState } from 'twenty-ui';
|
|
|
|
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
|
|
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
|
|
import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadingState';
|
|
import { isVerifyPendingState } from '@/auth/states/isVerifyPendingState';
|
|
import { workspacesState } from '@/auth/states/workspaces';
|
|
import { authProvidersState } from '@/client-config/states/authProvidersState';
|
|
import { billingState } from '@/client-config/states/billingState';
|
|
import { captchaProviderState } from '@/client-config/states/captchaProviderState';
|
|
import { isClientConfigLoadedState } from '@/client-config/states/isClientConfigLoadedState';
|
|
import { isDebugModeState } from '@/client-config/states/isDebugModeState';
|
|
import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
|
|
import { supportChatState } from '@/client-config/states/supportChatState';
|
|
import { telemetryState } from '@/client-config/states/telemetryState';
|
|
import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
|
|
import { REACT_APP_SERVER_BASE_URL } from '~/config';
|
|
import {
|
|
useChallengeMutation,
|
|
useCheckUserExistsLazyQuery,
|
|
useSignUpMutation,
|
|
useVerifyMutation,
|
|
} from '~/generated/graphql';
|
|
import { isDefined } from '~/utils/isDefined';
|
|
|
|
import { currentUserState } from '../states/currentUserState';
|
|
import { tokenPairState } from '../states/tokenPairState';
|
|
|
|
export const useAuth = () => {
|
|
const [, setTokenPair] = useRecoilState(tokenPairState);
|
|
const setCurrentUser = useSetRecoilState(currentUserState);
|
|
const setCurrentWorkspaceMember = useSetRecoilState(
|
|
currentWorkspaceMemberState,
|
|
);
|
|
|
|
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
|
|
const setIsVerifyPendingState = useSetRecoilState(isVerifyPendingState);
|
|
const setWorkspaces = useSetRecoilState(workspacesState);
|
|
|
|
const [challenge] = useChallengeMutation();
|
|
const [signUp] = useSignUpMutation();
|
|
const [verify] = useVerifyMutation();
|
|
const [checkUserExistsQuery, { data: checkUserExistsData }] =
|
|
useCheckUserExistsLazyQuery();
|
|
|
|
const client = useApolloClient();
|
|
|
|
const goToRecoilSnapshot = useGotoRecoilSnapshot();
|
|
|
|
const handleChallenge = useCallback(
|
|
async (email: string, password: string, captchaToken?: string) => {
|
|
const challengeResult = await challenge({
|
|
variables: {
|
|
email,
|
|
password,
|
|
captchaToken,
|
|
},
|
|
});
|
|
|
|
if (isDefined(challengeResult.errors)) {
|
|
throw challengeResult.errors;
|
|
}
|
|
|
|
if (!challengeResult.data?.challenge) {
|
|
throw new Error('No login token');
|
|
}
|
|
|
|
return challengeResult.data.challenge;
|
|
},
|
|
[challenge],
|
|
);
|
|
|
|
const handleVerify = useCallback(
|
|
async (loginToken: string) => {
|
|
const verifyResult = await verify({
|
|
variables: { loginToken },
|
|
});
|
|
|
|
if (isDefined(verifyResult.errors)) {
|
|
throw verifyResult.errors;
|
|
}
|
|
|
|
if (!verifyResult.data?.verify) {
|
|
throw new Error('No verify result');
|
|
}
|
|
|
|
setTokenPair(verifyResult.data?.verify.tokens);
|
|
|
|
const user = verifyResult.data?.verify.user;
|
|
let workspaceMember = null;
|
|
setCurrentUser(user);
|
|
if (isDefined(user.workspaceMember)) {
|
|
workspaceMember = {
|
|
...user.workspaceMember,
|
|
colorScheme: user.workspaceMember?.colorScheme as ColorScheme,
|
|
};
|
|
setCurrentWorkspaceMember(workspaceMember);
|
|
}
|
|
const workspace = user.defaultWorkspace ?? null;
|
|
setCurrentWorkspace(workspace);
|
|
if (isDefined(verifyResult.data?.verify.user.workspaces)) {
|
|
const validWorkspaces = verifyResult.data?.verify.user.workspaces
|
|
.filter(
|
|
({ workspace }) => workspace !== null && workspace !== undefined,
|
|
)
|
|
.map((validWorkspace) => validWorkspace.workspace)
|
|
.filter(isDefined);
|
|
|
|
setWorkspaces(validWorkspaces);
|
|
}
|
|
return {
|
|
user,
|
|
workspaceMember,
|
|
workspace,
|
|
tokens: verifyResult.data?.verify.tokens,
|
|
};
|
|
},
|
|
[
|
|
verify,
|
|
setTokenPair,
|
|
setCurrentUser,
|
|
setCurrentWorkspaceMember,
|
|
setCurrentWorkspace,
|
|
setWorkspaces,
|
|
],
|
|
);
|
|
|
|
const handleCrendentialsSignIn = useCallback(
|
|
async (email: string, password: string, captchaToken?: string) => {
|
|
const { loginToken } = await handleChallenge(
|
|
email,
|
|
password,
|
|
captchaToken,
|
|
);
|
|
setIsVerifyPendingState(true);
|
|
|
|
const { user, workspaceMember, workspace } = await handleVerify(
|
|
loginToken.token,
|
|
);
|
|
|
|
setIsVerifyPendingState(false);
|
|
|
|
return {
|
|
user,
|
|
workspaceMember,
|
|
workspace,
|
|
};
|
|
},
|
|
[handleChallenge, handleVerify, setIsVerifyPendingState],
|
|
);
|
|
|
|
const handleSignOut = useRecoilCallback(
|
|
({ snapshot }) =>
|
|
async () => {
|
|
const emptySnapshot = snapshot_UNSTABLE();
|
|
const iconsValue = snapshot.getLoadable(iconsState).getValue();
|
|
const authProvidersValue = snapshot
|
|
.getLoadable(authProvidersState)
|
|
.getValue();
|
|
const billing = snapshot.getLoadable(billingState).getValue();
|
|
const isSignInPrefilled = snapshot
|
|
.getLoadable(isSignInPrefilledState)
|
|
.getValue();
|
|
const supportChat = snapshot.getLoadable(supportChatState).getValue();
|
|
const telemetry = snapshot.getLoadable(telemetryState).getValue();
|
|
const isDebugMode = snapshot.getLoadable(isDebugModeState).getValue();
|
|
const captchaProvider = snapshot
|
|
.getLoadable(captchaProviderState)
|
|
.getValue();
|
|
const isClientConfigLoaded = snapshot
|
|
.getLoadable(isClientConfigLoadedState)
|
|
.getValue();
|
|
const isCurrentUserLoaded = snapshot
|
|
.getLoadable(isCurrentUserLoadedState)
|
|
.getValue();
|
|
|
|
const initialSnapshot = emptySnapshot.map(({ set }) => {
|
|
set(iconsState, iconsValue);
|
|
set(authProvidersState, authProvidersValue);
|
|
set(billingState, billing);
|
|
set(isSignInPrefilledState, isSignInPrefilled);
|
|
set(supportChatState, supportChat);
|
|
set(telemetryState, telemetry);
|
|
set(isDebugModeState, isDebugMode);
|
|
set(captchaProviderState, captchaProvider);
|
|
set(isClientConfigLoadedState, isClientConfigLoaded);
|
|
set(isCurrentUserLoadedState, isCurrentUserLoaded);
|
|
return undefined;
|
|
});
|
|
|
|
goToRecoilSnapshot(initialSnapshot);
|
|
|
|
await client.clearStore();
|
|
sessionStorage.clear();
|
|
},
|
|
[client, goToRecoilSnapshot],
|
|
);
|
|
|
|
const handleCredentialsSignUp = useCallback(
|
|
async (
|
|
email: string,
|
|
password: string,
|
|
workspaceInviteHash?: string,
|
|
captchaToken?: string,
|
|
) => {
|
|
setIsVerifyPendingState(true);
|
|
|
|
const signUpResult = await signUp({
|
|
variables: {
|
|
email,
|
|
password,
|
|
workspaceInviteHash,
|
|
captchaToken,
|
|
},
|
|
});
|
|
|
|
if (isDefined(signUpResult.errors)) {
|
|
throw signUpResult.errors;
|
|
}
|
|
|
|
if (!signUpResult.data?.signUp) {
|
|
throw new Error('No login token');
|
|
}
|
|
|
|
const { user, workspace, workspaceMember } = await handleVerify(
|
|
signUpResult.data?.signUp.loginToken.token,
|
|
);
|
|
|
|
setIsVerifyPendingState(false);
|
|
|
|
return { user, workspaceMember, workspace };
|
|
},
|
|
[setIsVerifyPendingState, signUp, handleVerify],
|
|
);
|
|
|
|
const handleGoogleLogin = useCallback((workspaceInviteHash?: string) => {
|
|
const authServerUrl = REACT_APP_SERVER_BASE_URL;
|
|
window.location.href =
|
|
`${authServerUrl}/auth/google/${
|
|
workspaceInviteHash ? '?inviteHash=' + workspaceInviteHash : ''
|
|
}` || '';
|
|
}, []);
|
|
|
|
const handleMicrosoftLogin = useCallback((workspaceInviteHash?: string) => {
|
|
const authServerUrl = REACT_APP_SERVER_BASE_URL;
|
|
window.location.href =
|
|
`${authServerUrl}/auth/microsoft/${
|
|
workspaceInviteHash ? '?inviteHash=' + workspaceInviteHash : ''
|
|
}` || '';
|
|
}, []);
|
|
|
|
return {
|
|
challenge: handleChallenge,
|
|
verify: handleVerify,
|
|
|
|
checkUserExists: { checkUserExistsData, checkUserExistsQuery },
|
|
|
|
signOut: handleSignOut,
|
|
signUpWithCredentials: handleCredentialsSignUp,
|
|
signInWithCredentials: handleCrendentialsSignIn,
|
|
signInWithGoogle: handleGoogleLogin,
|
|
signInWithMicrosoft: handleMicrosoftLogin,
|
|
};
|
|
};
|