|
| 1 | +import { useClerk } from '@clerk/shared/react'; |
1 | 2 | import type { SignInFactor } from '@clerk/types';
|
2 | 3 | import React from 'react';
|
3 | 4 |
|
@@ -39,6 +40,7 @@ const factorKey = (factor: SignInFactor | null | undefined) => {
|
39 | 40 | };
|
40 | 41 |
|
41 | 42 | function SignInFactorOneInternal(): JSX.Element {
|
| 43 | + const { __internal_setActiveInProgress } = useClerk(); |
42 | 44 | const signIn = useCoreSignIn();
|
43 | 45 | const { preferredSignInStrategy } = useEnvironment().displayConfig;
|
44 | 46 | const availableFactors = signIn.supportedFirstFactors;
|
@@ -83,21 +85,27 @@ function SignInFactorOneInternal(): JSX.Element {
|
83 | 85 | const [isPasswordPwned, setIsPasswordPwned] = React.useState(false);
|
84 | 86 |
|
85 | 87 | React.useEffect(() => {
|
| 88 | + if (__internal_setActiveInProgress) { |
| 89 | + return; |
| 90 | + } |
| 91 | + |
86 | 92 | // Handle the case where a user lands on alternative methods screen,
|
87 | 93 | // clicks a social button but then navigates back to sign in.
|
88 | 94 | // SignIn status resets to 'needs_identifier'
|
89 | 95 | if (signIn.status === 'needs_identifier' || signIn.status === null) {
|
90 | 96 | void router.navigate('../');
|
91 | 97 | }
|
92 |
| - }, []); |
| 98 | + }, [__internal_setActiveInProgress]); |
93 | 99 |
|
94 |
| - if (!currentFactor && signIn.status) { |
95 |
| - return ( |
| 100 | + if (!currentFactor) { |
| 101 | + return signIn.status ? ( |
96 | 102 | <ErrorCard
|
97 | 103 | cardTitle={localizationKeys('signIn.noAvailableMethods.title')}
|
98 | 104 | cardSubtitle={localizationKeys('signIn.noAvailableMethods.subtitle')}
|
99 | 105 | message={localizationKeys('signIn.noAvailableMethods.message')}
|
100 | 106 | />
|
| 107 | + ) : ( |
| 108 | + <LoadingCard /> |
101 | 109 | );
|
102 | 110 | }
|
103 | 111 |
|
|
0 commit comments