7cacccf0b8
# Gmail OAuth authentication flow issues ### TLDR This error is not an error and therefore should be treated as a simple redirect with a snackbar. ### More details Fixing incomplete OAuth token exchange processes and improving error handling for empty Gmail inboxes. The changes include modifications to OAuth guards, to ensure that if a user clicks "cancel" instead of completing the authentication workflow if fails ## Before: Redirection from `/settings/accounts` to `app.twenty.com` with an `UNAUTHORIZED` error ## After : <img width="948" alt="Screenshot 2025-05-26 at 18 04 37" src="https://github.com/user-attachments/assets/62c8721e-c2b3-4e3d-ad0b-e4059dfb7a98" /> Fixes https://github.com/twentyhq/twenty/issues/11895 --------- Co-authored-by: Charles Bochet <charles@twenty.com>
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useSearchParams } from 'react-router-dom';
|
|
|
|
import { useIsLogged } from '@/auth/hooks/useIsLogged';
|
|
import { useVerifyLogin } from '@/auth/hooks/useVerifyLogin';
|
|
import { clientConfigApiStatusState } from '@/client-config/states/clientConfigApiStatusState';
|
|
import { AppPath } from '@/types/AppPath';
|
|
import { useRecoilValue } from 'recoil';
|
|
import { isDefined } from 'twenty-shared/utils';
|
|
import { useNavigateApp } from '~/hooks/useNavigateApp';
|
|
|
|
export const VerifyLoginTokenEffect = () => {
|
|
const [searchParams] = useSearchParams();
|
|
const loginToken = searchParams.get('loginToken');
|
|
|
|
const isLogged = useIsLogged();
|
|
const navigate = useNavigateApp();
|
|
const { verifyLoginToken } = useVerifyLogin();
|
|
|
|
const { isLoaded: clientConfigLoaded } = useRecoilValue(
|
|
clientConfigApiStatusState,
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!clientConfigLoaded) return;
|
|
|
|
if (isDefined(loginToken)) {
|
|
verifyLoginToken(loginToken);
|
|
} else if (!isLogged) {
|
|
navigate(AppPath.SignInUp);
|
|
}
|
|
// Verify only needs to run once at mount
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [clientConfigLoaded]);
|
|
|
|
return <></>;
|
|
};
|