From cb1a38c40561cba755a313e236564ec2075ec61f Mon Sep 17 00:00:00 2001 From: simeng-li Date: Mon, 20 May 2024 09:19:46 +0800 Subject: [PATCH] refactor(experience): add global loading status on page redirect (#5774) * refactor(experience): add global loading status on page redirect add global loading status on page redirect * chore: add changeset --- .changeset/friendly-chicken-pump.md | 7 +++++ .../use-social-link-related-user.ts | 6 +++-- .../use-continue-flow-code-verification.ts | 14 +++++++--- .../use-register-flow-code-verification.ts | 11 +++++--- .../use-sign-in-flow-code-verification.ts | 27 ++++++++++--------- .../src/hooks/use-global-redirect-to.ts | 26 ++++++++++++++++++ .../src/hooks/use-password-sign-in.ts | 8 +++--- .../src/hooks/use-send-mfa-payload.ts | 6 +++-- packages/experience/src/hooks/use-skip-mfa.ts | 6 +++-- .../src/hooks/use-social-link-account.ts | 6 +++-- .../src/hooks/use-social-register.ts | 6 +++-- .../experience/src/pages/Consent/index.tsx | 6 +++-- .../src/pages/Continue/SetPassword/index.tsx | 16 +++++++---- .../Continue/SetUsername/use-set-username.ts | 8 +++--- .../src/pages/RegisterPassword/index.tsx | 15 +++++++---- .../use-single-sign-on-listener.ts | 10 ++++--- 16 files changed, 128 insertions(+), 50 deletions(-) create mode 100644 .changeset/friendly-chicken-pump.md create mode 100644 packages/experience/src/hooks/use-global-redirect-to.ts diff --git a/.changeset/friendly-chicken-pump.md b/.changeset/friendly-chicken-pump.md new file mode 100644 index 000000000..6d8700daf --- /dev/null +++ b/.changeset/friendly-chicken-pump.md @@ -0,0 +1,7 @@ +--- +"@logto/experience": patch +--- + +show global loading icon on page relocate + +This is to address the issue where the user is redirected back to the client after a successful login, but the page is not yet fully loaded. This will show a global loading icon to indicate that the page is still loading. Preventing the user from interacting with the current sign-in page and avoid page idling confusion. diff --git a/packages/experience/src/containers/SocialLinkAccount/use-social-link-related-user.ts b/packages/experience/src/containers/SocialLinkAccount/use-social-link-related-user.ts index 31cada941..694772f32 100644 --- a/packages/experience/src/containers/SocialLinkAccount/use-social-link-related-user.ts +++ b/packages/experience/src/containers/SocialLinkAccount/use-social-link-related-user.ts @@ -3,11 +3,13 @@ import { useCallback } from 'react'; import { bindSocialRelatedUser } from '@/apis/interaction'; import useApi from '@/hooks/use-api'; import useErrorHandler from '@/hooks/use-error-handler'; +import useGlobalRedirectTo from '@/hooks/use-global-redirect-to'; import usePreSignInErrorHandler from '@/hooks/use-pre-sign-in-error-handler'; const useBindSocialRelatedUser = () => { const handleError = useErrorHandler(); const preSignInErrorHandler = usePreSignInErrorHandler(); + const redirectTo = useGlobalRedirectTo(); const asyncBindSocialRelatedUser = useApi(bindSocialRelatedUser); @@ -22,10 +24,10 @@ const useBindSocialRelatedUser = () => { } if (result?.redirectTo) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } }, - [asyncBindSocialRelatedUser, handleError, preSignInErrorHandler] + [asyncBindSocialRelatedUser, handleError, preSignInErrorHandler, redirectTo] ); }; diff --git a/packages/experience/src/containers/VerificationCode/use-continue-flow-code-verification.ts b/packages/experience/src/containers/VerificationCode/use-continue-flow-code-verification.ts index 15fb2bb19..e500de483 100644 --- a/packages/experience/src/containers/VerificationCode/use-continue-flow-code-verification.ts +++ b/packages/experience/src/containers/VerificationCode/use-continue-flow-code-verification.ts @@ -1,12 +1,13 @@ import type { EmailVerificationCodePayload, PhoneVerificationCodePayload } from '@logto/schemas'; import { SignInIdentifier } from '@logto/schemas'; -import { useMemo, useCallback } from 'react'; +import { useCallback, useMemo } from 'react'; import { useSearchParams } from 'react-router-dom'; import { addProfileWithVerificationCodeIdentifier } from '@/apis/interaction'; import useApi from '@/hooks/use-api'; import type { ErrorHandlers } from '@/hooks/use-error-handler'; import useErrorHandler from '@/hooks/use-error-handler'; +import useGlobalRedirectTo from '@/hooks/use-global-redirect-to'; import usePreSignInErrorHandler from '@/hooks/use-pre-sign-in-error-handler'; import type { VerificationCodeIdentifier } from '@/types'; import { SearchParameters } from '@/types'; @@ -21,6 +22,7 @@ const useContinueFlowCodeVerification = ( errorCallback?: () => void ) => { const [searchParameters] = useSearchParams(); + const redirectTo = useGlobalRedirectTo(); const handleError = useErrorHandler(); const verifyVerificationCode = useApi(addProfileWithVerificationCodeIdentifier); @@ -76,10 +78,16 @@ const useContinueFlowCodeVerification = ( } if (result?.redirectTo) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } }, - [errorCallback, handleError, verifyVerificationCode, verifyVerificationCodeErrorHandlers] + [ + errorCallback, + handleError, + redirectTo, + verifyVerificationCode, + verifyVerificationCodeErrorHandlers, + ] ); return { diff --git a/packages/experience/src/containers/VerificationCode/use-register-flow-code-verification.ts b/packages/experience/src/containers/VerificationCode/use-register-flow-code-verification.ts index 2bb745509..1608c2336 100644 --- a/packages/experience/src/containers/VerificationCode/use-register-flow-code-verification.ts +++ b/packages/experience/src/containers/VerificationCode/use-register-flow-code-verification.ts @@ -1,6 +1,6 @@ import type { EmailVerificationCodePayload, PhoneVerificationCodePayload } from '@logto/schemas'; import { SignInIdentifier, SignInMode } from '@logto/schemas'; -import { useMemo, useCallback } from 'react'; +import { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; @@ -12,6 +12,7 @@ import useApi from '@/hooks/use-api'; import { useConfirmModal } from '@/hooks/use-confirm-modal'; import type { ErrorHandlers } from '@/hooks/use-error-handler'; import useErrorHandler from '@/hooks/use-error-handler'; +import useGlobalRedirectTo from '@/hooks/use-global-redirect-to'; import usePreSignInErrorHandler from '@/hooks/use-pre-sign-in-error-handler'; import { useSieMethods } from '@/hooks/use-sie'; import type { VerificationCodeIdentifier } from '@/types'; @@ -28,6 +29,7 @@ const useRegisterFlowCodeVerification = ( const { t } = useTranslation(); const { show } = useConfirmModal(); const navigate = useNavigate(); + const redirectTo = useGlobalRedirectTo(); const { signInMode } = useSieMethods(); @@ -74,13 +76,14 @@ const useRegisterFlowCodeVerification = ( } if (result?.redirectTo) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } }, [ handleError, method, navigate, preSignInErrorHandler, + redirectTo, show, showIdentifierErrorAlert, signInMode, @@ -117,10 +120,10 @@ const useRegisterFlowCodeVerification = ( } if (result?.redirectTo) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } }, - [errorCallback, errorHandlers, handleError, verifyVerificationCode] + [errorCallback, errorHandlers, handleError, redirectTo, verifyVerificationCode] ); return { diff --git a/packages/experience/src/containers/VerificationCode/use-sign-in-flow-code-verification.ts b/packages/experience/src/containers/VerificationCode/use-sign-in-flow-code-verification.ts index 5ddbac4e7..4c410e91f 100644 --- a/packages/experience/src/containers/VerificationCode/use-sign-in-flow-code-verification.ts +++ b/packages/experience/src/containers/VerificationCode/use-sign-in-flow-code-verification.ts @@ -1,17 +1,18 @@ import type { EmailVerificationCodePayload, PhoneVerificationCodePayload } from '@logto/schemas'; import { SignInIdentifier, SignInMode } from '@logto/schemas'; -import { useMemo, useCallback } from 'react'; +import { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { - signInWithVerificationCodeIdentifier, registerWithVerifiedIdentifier, + signInWithVerificationCodeIdentifier, } from '@/apis/interaction'; import useApi from '@/hooks/use-api'; import { useConfirmModal } from '@/hooks/use-confirm-modal'; import type { ErrorHandlers } from '@/hooks/use-error-handler'; import useErrorHandler from '@/hooks/use-error-handler'; +import useGlobalRedirectTo from '@/hooks/use-global-redirect-to'; import usePreSignInErrorHandler from '@/hooks/use-pre-sign-in-error-handler'; import { useSieMethods } from '@/hooks/use-sie'; import type { VerificationCodeIdentifier } from '@/types'; @@ -28,6 +29,7 @@ const useSignInFlowCodeVerification = ( const { t } = useTranslation(); const { show } = useConfirmModal(); const navigate = useNavigate(); + const redirectTo = useGlobalRedirectTo(); const { signInMode } = useSieMethods(); const handleError = useErrorHandler(); @@ -77,19 +79,20 @@ const useSignInFlowCodeVerification = ( } if (result?.redirectTo) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } }, [ - handleError, - method, - navigate, - registerWithIdentifierAsync, - preSignInErrorHandler, - show, - showIdentifierErrorAlert, signInMode, + show, t, + method, target, + registerWithIdentifierAsync, + showIdentifierErrorAlert, + navigate, + handleError, + preSignInErrorHandler, + redirectTo, ]); const errorHandlers = useMemo( @@ -118,10 +121,10 @@ const useSignInFlowCodeVerification = ( } if (result?.redirectTo) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } }, - [asyncSignInWithVerificationCodeIdentifier, errorHandlers, handleError] + [asyncSignInWithVerificationCodeIdentifier, errorHandlers, handleError, redirectTo] ); return { diff --git a/packages/experience/src/hooks/use-global-redirect-to.ts b/packages/experience/src/hooks/use-global-redirect-to.ts new file mode 100644 index 000000000..e9a0b41dd --- /dev/null +++ b/packages/experience/src/hooks/use-global-redirect-to.ts @@ -0,0 +1,26 @@ +import { useCallback, useContext } from 'react'; + +import PageContext from '@/Providers/PageContextProvider/PageContext'; + +/** + * This hook provides a function that process the app redirection after user successfully signs in. + * Use window.location.replace to handle the redirection. + * Set the global loading state to true before redirecting. + * This is to prevent the user from interacting with the app while the redirection is in progress. + */ + +function useGlobalRedirectTo() { + const { setLoading } = useContext(PageContext); + + const redirectTo = useCallback( + (url: string | URL) => { + setLoading(true); + window.location.replace(url); + }, + [setLoading] + ); + + return redirectTo; +} + +export default useGlobalRedirectTo; diff --git a/packages/experience/src/hooks/use-password-sign-in.ts b/packages/experience/src/hooks/use-password-sign-in.ts index 965afa6d6..459cfa15c 100644 --- a/packages/experience/src/hooks/use-password-sign-in.ts +++ b/packages/experience/src/hooks/use-password-sign-in.ts @@ -1,4 +1,4 @@ -import { useState, useMemo, useCallback } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import type { PasswordSignInPayload } from '@/apis/interaction'; import { signInWithPasswordIdentifier } from '@/apis/interaction'; @@ -7,11 +7,13 @@ import useCheckSingleSignOn from '@/hooks/use-check-single-sign-on'; import type { ErrorHandlers } from '@/hooks/use-error-handler'; import useErrorHandler from '@/hooks/use-error-handler'; +import useGlobalRedirectTo from './use-global-redirect-to'; import usePreSignInErrorHandler from './use-pre-sign-in-error-handler'; const usePasswordSignIn = () => { const [errorMessage, setErrorMessage] = useState(); const { onSubmit: checkSingleSignOn } = useCheckSingleSignOn(); + const redirectTo = useGlobalRedirectTo(); const clearErrorMessage = useCallback(() => { setErrorMessage(''); @@ -51,10 +53,10 @@ const usePasswordSignIn = () => { } if (result?.redirectTo) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } }, - [asyncSignIn, checkSingleSignOn, errorHandlers, handleError] + [asyncSignIn, checkSingleSignOn, errorHandlers, handleError, redirectTo] ); return { diff --git a/packages/experience/src/hooks/use-send-mfa-payload.ts b/packages/experience/src/hooks/use-send-mfa-payload.ts index d748fd8a8..9d72a9471 100644 --- a/packages/experience/src/hooks/use-send-mfa-payload.ts +++ b/packages/experience/src/hooks/use-send-mfa-payload.ts @@ -6,6 +6,7 @@ import { UserMfaFlow } from '@/types'; import useApi from './use-api'; import useErrorHandler, { type ErrorHandlers } from './use-error-handler'; +import useGlobalRedirectTo from './use-global-redirect-to'; import usePreSignInErrorHandler from './use-pre-sign-in-error-handler'; export type SendMfaPayloadApiOptions = @@ -29,6 +30,7 @@ const useSendMfaPayload = () => { const asyncSendMfaPayload = useApi(sendMfaPayloadApi); const preSignInErrorHandler = usePreSignInErrorHandler({ replace: true }); const handleError = useErrorHandler(); + const redirectTo = useGlobalRedirectTo(); return useCallback( async ( @@ -48,10 +50,10 @@ const useSendMfaPayload = () => { } if (result) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } }, - [asyncSendMfaPayload, handleError, preSignInErrorHandler] + [asyncSendMfaPayload, handleError, preSignInErrorHandler, redirectTo] ); }; diff --git a/packages/experience/src/hooks/use-skip-mfa.ts b/packages/experience/src/hooks/use-skip-mfa.ts index 23aef172e..233bfed1d 100644 --- a/packages/experience/src/hooks/use-skip-mfa.ts +++ b/packages/experience/src/hooks/use-skip-mfa.ts @@ -4,10 +4,12 @@ import { skipMfa } from '@/apis/interaction'; import useApi from './use-api'; import useErrorHandler from './use-error-handler'; +import useGlobalRedirectTo from './use-global-redirect-to'; import usePreSignInErrorHandler from './use-pre-sign-in-error-handler'; const useSkipMfa = () => { const asyncSkipMfa = useApi(skipMfa); + const redirectTo = useGlobalRedirectTo(); const handleError = useErrorHandler(); const preSignInErrorHandler = usePreSignInErrorHandler({ replace: true }); @@ -20,9 +22,9 @@ const useSkipMfa = () => { } if (result) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } - }, [asyncSkipMfa, handleError, preSignInErrorHandler]); + }, [asyncSkipMfa, handleError, preSignInErrorHandler, redirectTo]); }; export default useSkipMfa; diff --git a/packages/experience/src/hooks/use-social-link-account.ts b/packages/experience/src/hooks/use-social-link-account.ts index aefbda765..16c38e7f3 100644 --- a/packages/experience/src/hooks/use-social-link-account.ts +++ b/packages/experience/src/hooks/use-social-link-account.ts @@ -4,10 +4,12 @@ import { linkWithSocial } from '@/apis/interaction'; import useApi from '@/hooks/use-api'; import useErrorHandler from './use-error-handler'; +import useGlobalRedirectTo from './use-global-redirect-to'; const useLinkSocial = () => { const handleError = useErrorHandler(); const asyncLinkWithSocial = useApi(linkWithSocial); + const redirectTo = useGlobalRedirectTo(); return useCallback( async (connectorId: string) => { @@ -20,10 +22,10 @@ const useLinkSocial = () => { } if (result?.redirectTo) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } }, - [asyncLinkWithSocial, handleError] + [asyncLinkWithSocial, handleError, redirectTo] ); }; diff --git a/packages/experience/src/hooks/use-social-register.ts b/packages/experience/src/hooks/use-social-register.ts index 3312103cd..8d128f538 100644 --- a/packages/experience/src/hooks/use-social-register.ts +++ b/packages/experience/src/hooks/use-social-register.ts @@ -4,11 +4,13 @@ import { registerWithVerifiedSocial } from '@/apis/interaction'; import useApi from './use-api'; import useErrorHandler from './use-error-handler'; +import useGlobalRedirectTo from './use-global-redirect-to'; import usePreSignInErrorHandler from './use-pre-sign-in-error-handler'; const useSocialRegister = (connectorId?: string, replace?: boolean) => { const handleError = useErrorHandler(); const asyncRegisterWithSocial = useApi(registerWithVerifiedSocial); + const redirectTo = useGlobalRedirectTo(); const preSignInErrorHandler = usePreSignInErrorHandler({ linkSocial: connectorId, replace }); @@ -23,10 +25,10 @@ const useSocialRegister = (connectorId?: string, replace?: boolean) => { } if (result?.redirectTo) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } }, - [asyncRegisterWithSocial, handleError, preSignInErrorHandler] + [asyncRegisterWithSocial, handleError, preSignInErrorHandler, redirectTo] ); }; diff --git a/packages/experience/src/pages/Consent/index.tsx b/packages/experience/src/pages/Consent/index.tsx index e09bd73b9..0f5c012c8 100644 --- a/packages/experience/src/pages/Consent/index.tsx +++ b/packages/experience/src/pages/Consent/index.tsx @@ -10,6 +10,7 @@ import TermsLinks from '@/components/TermsLinks'; import TextLink from '@/components/TextLink'; import useApi from '@/hooks/use-api'; import useErrorHandler from '@/hooks/use-error-handler'; +import useGlobalRedirectTo from '@/hooks/use-global-redirect-to'; import OrganizationSelector, { type Organization } from './OrganizationSelector'; import ScopesListCard from './ScopesListCard'; @@ -21,6 +22,7 @@ const Consent = () => { const handleError = useErrorHandler(); const asyncConsent = useApi(consent); const { t } = useTranslation(); + const redirectTo = useGlobalRedirectTo(); const [consentData, setConsentData] = useState(); const [selectedOrganization, setSelectedOrganization] = useState(); @@ -37,9 +39,9 @@ const Consent = () => { } if (result?.redirectTo) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } - }, [asyncConsent, handleError, selectedOrganization?.id]); + }, [asyncConsent, handleError, redirectTo, selectedOrganization?.id]); useEffect(() => { const getConsentInfoHandler = async () => { diff --git a/packages/experience/src/pages/Continue/SetPassword/index.tsx b/packages/experience/src/pages/Continue/SetPassword/index.tsx index b0f57c667..a76f374d8 100644 --- a/packages/experience/src/pages/Continue/SetPassword/index.tsx +++ b/packages/experience/src/pages/Continue/SetPassword/index.tsx @@ -6,6 +6,7 @@ import { addProfile } from '@/apis/interaction'; import SetPasswordForm from '@/containers/SetPassword'; import { useConfirmModal } from '@/hooks/use-confirm-modal'; import type { ErrorHandlers } from '@/hooks/use-error-handler'; +import useGlobalRedirectTo from '@/hooks/use-global-redirect-to'; import usePasswordAction, { type SuccessHandler } from '@/hooks/use-password-action'; import usePreSignInErrorHandler from '@/hooks/use-pre-sign-in-error-handler'; import { usePasswordPolicy } from '@/hooks/use-sie'; @@ -18,6 +19,7 @@ const SetPassword = () => { const navigate = useNavigate(); const { show } = useConfirmModal(); + const redirectTo = useGlobalRedirectTo(); const preSignInErrorHandler = usePreSignInErrorHandler(); @@ -31,11 +33,15 @@ const SetPassword = () => { }), [navigate, preSignInErrorHandler, show] ); - const successHandler: SuccessHandler = useCallback((result) => { - if (result?.redirectTo) { - window.location.replace(result.redirectTo); - } - }, []); + const successHandler: SuccessHandler = useCallback( + (result) => { + if (result?.redirectTo) { + redirectTo(result.redirectTo); + } + }, + [redirectTo] + ); + const [action] = usePasswordAction({ api: async (password) => addProfile({ password }), setErrorMessage, diff --git a/packages/experience/src/pages/Continue/SetUsername/use-set-username.ts b/packages/experience/src/pages/Continue/SetUsername/use-set-username.ts index a0d98364f..4f51873f9 100644 --- a/packages/experience/src/pages/Continue/SetUsername/use-set-username.ts +++ b/packages/experience/src/pages/Continue/SetUsername/use-set-username.ts @@ -1,9 +1,10 @@ -import { useState, useCallback, useMemo } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { addProfile } from '@/apis/interaction'; import useApi from '@/hooks/use-api'; import type { ErrorHandlers } from '@/hooks/use-error-handler'; import useErrorHandler from '@/hooks/use-error-handler'; +import useGlobalRedirectTo from '@/hooks/use-global-redirect-to'; import usePreSignInErrorHandler from '@/hooks/use-pre-sign-in-error-handler'; const useSetUsername = () => { @@ -15,6 +16,7 @@ const useSetUsername = () => { const asyncAddProfile = useApi(addProfile); const handleError = useErrorHandler(); + const redirectTo = useGlobalRedirectTo(); const preSignInErrorHandler = usePreSignInErrorHandler(); @@ -39,10 +41,10 @@ const useSetUsername = () => { } if (result?.redirectTo) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } }, - [asyncAddProfile, errorHandlers, handleError] + [asyncAddProfile, errorHandlers, handleError, redirectTo] ); return { errorMessage, clearErrorMessage, onSubmit }; diff --git a/packages/experience/src/pages/RegisterPassword/index.tsx b/packages/experience/src/pages/RegisterPassword/index.tsx index dc498f7a1..0a9443c3f 100644 --- a/packages/experience/src/pages/RegisterPassword/index.tsx +++ b/packages/experience/src/pages/RegisterPassword/index.tsx @@ -7,6 +7,7 @@ import { setUserPassword } from '@/apis/interaction'; import SetPassword from '@/containers/SetPassword'; import { useConfirmModal } from '@/hooks/use-confirm-modal'; import { type ErrorHandlers } from '@/hooks/use-error-handler'; +import useGlobalRedirectTo from '@/hooks/use-global-redirect-to'; import useMfaErrorHandler from '@/hooks/use-mfa-error-handler'; import usePasswordAction, { type SuccessHandler } from '@/hooks/use-password-action'; import { usePasswordPolicy, useSieMethods } from '@/hooks/use-sie'; @@ -17,6 +18,7 @@ const RegisterPassword = () => { const { signUpMethods } = useSieMethods(); const navigate = useNavigate(); + const redirectTo = useGlobalRedirectTo(); const { show } = useConfirmModal(); const [errorMessage, setErrorMessage] = useState(); const clearErrorMessage = useCallback(() => { @@ -37,11 +39,14 @@ const RegisterPassword = () => { [navigate, mfaErrorHandler, show] ); - const successHandler: SuccessHandler = useCallback((result) => { - if (result && 'redirectTo' in result) { - window.location.replace(result.redirectTo); - } - }, []); + const successHandler: SuccessHandler = useCallback( + (result) => { + if (result && 'redirectTo' in result) { + redirectTo(result.redirectTo); + } + }, + [redirectTo] + ); const [action] = usePasswordAction({ api: setUserPassword, diff --git a/packages/experience/src/pages/SocialSignInWebCallback/use-single-sign-on-listener.ts b/packages/experience/src/pages/SocialSignInWebCallback/use-single-sign-on-listener.ts index e59abf461..1ddd060c1 100644 --- a/packages/experience/src/pages/SocialSignInWebCallback/use-single-sign-on-listener.ts +++ b/packages/experience/src/pages/SocialSignInWebCallback/use-single-sign-on-listener.ts @@ -6,6 +6,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom'; import { singleSignOnAuthorization, singleSignOnRegistration } from '@/apis/single-sign-on'; import useApi from '@/hooks/use-api'; import useErrorHandler from '@/hooks/use-error-handler'; +import useGlobalRedirectTo from '@/hooks/use-global-redirect-to'; import { useSieMethods } from '@/hooks/use-sie'; import useTerms from '@/hooks/use-terms'; import useToast from '@/hooks/use-toast'; @@ -17,6 +18,7 @@ const useSingleSignOnRegister = () => { const request = useApi(singleSignOnRegistration); const { termsValidation } = useTerms(); const navigate = useNavigate(); + const redirectTo = useGlobalRedirectTo(); return useCallback( async (connectorId: string) => { @@ -35,10 +37,10 @@ const useSingleSignOnRegister = () => { } if (result?.redirectTo) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } }, - [handleError, navigate, request, termsValidation] + [handleError, navigate, redirectTo, request, termsValidation] ); }; @@ -58,6 +60,7 @@ const useSingleSignOnListener = (connectorId: string) => { const [isConsumed, setIsConsumed] = useState(false); const [searchParameters, setSearchParameters] = useSearchParams(); const { setToast } = useToast(); + const redirectTo = useGlobalRedirectTo(); const { signInMode } = useSieMethods(); const handleError = useErrorHandler(); @@ -97,12 +100,13 @@ const useSingleSignOnListener = (connectorId: string) => { } if (result?.redirectTo) { - window.location.replace(result.redirectTo); + redirectTo(result.redirectTo); } }, [ handleError, navigate, + redirectTo, registerSingleSignOnIdentity, setToast, signInMode,