diff --git a/studio/components/interfaces/SignIn/SignInMfaForm.tsx b/studio/components/interfaces/SignIn/SignInMfaForm.tsx index 72b7da3a9f9..2b669e5546d 100644 --- a/studio/components/interfaces/SignIn/SignInMfaForm.tsx +++ b/studio/components/interfaces/SignIn/SignInMfaForm.tsx @@ -6,7 +6,9 @@ import { useMfaChallengeAndVerifyMutation } from 'data/profile/mfa-challenge-and import { useMfaListFactorsQuery } from 'data/profile/mfa-list-factors-query' import { useStore } from 'hooks' import { usePushNext } from 'hooks/misc/useAutoAuthRedirect' +import { useSignOut } from 'lib/auth' import Link from 'next/link' +import { useRouter } from 'next/router' import { useEffect, useState } from 'react' import { Button, Form, IconLock, Input } from 'ui' import { object, string } from 'yup' @@ -19,9 +21,16 @@ const SignInMfaForm = () => { const { ui } = useStore() const pushNext = usePushNext() const queryClient = useQueryClient() + const router = useRouter() const { data: factors, isSuccess: factorsSuccess } = useMfaListFactorsQuery() const { mutateAsync: mfaChallengeAndVerify, isLoading } = useMfaChallengeAndVerifyMutation() const [selectedFactor, setSelectedFactor] = useState(null) + const signOut = useSignOut() + + const onClickLogout = async () => { + await signOut() + await router.replace('/sign-in') + } useEffect(() => { if (factorsSuccess) { @@ -130,15 +139,22 @@ const SignInMfaForm = () => { )} +
+ + Cancel signing in? + +
+
-
- Unable to log in?{' '} - - - Reach out via support - - -
+ Unable to log in?{' '} + + + Reach out via support + +
)