fix(types,elements,clerk-js): Update types to account for null second…

… factors (#3780)
clerk · Jul 23, 2024 · 86c75e5 · 86c75e5
1 parent 6a46425
commit 86c75e5
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 16 deletions.
diff --git a/.changeset/weak-pumpkins-train.md b/.changeset/weak-pumpkins-train.md
@@ -0,0 +1,7 @@
+---
+"@clerk/clerk-js": patch
+"@clerk/elements": patch
+"@clerk/types": patch
+---
+
+Update types to account for null second factors
diff --git a/packages/clerk-js/src/core/resources/SignIn.ts b/packages/clerk-js/src/core/resources/SignIn.ts
@@ -57,7 +57,7 @@ export class SignIn extends BaseResource implements SignInResource {
   status: SignInStatus | null = null;
   supportedIdentifiers: SignInIdentifier[] = [];
   supportedFirstFactors: SignInFirstFactor[] = [];
-  supportedSecondFactors: SignInSecondFactor[] = [];
+  supportedSecondFactors: SignInSecondFactor[] | null = null;
   firstFactorVerification: VerificationResource = new Verification(null);
   secondFactorVerification: VerificationResource = new Verification(null);
   identifier: string | null = null;
@@ -339,7 +339,7 @@ export class SignIn extends BaseResource implements SignInResource {
       this.supportedIdentifiers = data.supported_identifiers;
       this.identifier = data.identifier;
       this.supportedFirstFactors = deepSnakeToCamel(data.supported_first_factors) as SignInFirstFactor[];
-      this.supportedSecondFactors = deepSnakeToCamel(data.supported_second_factors) as SignInSecondFactor[];
+      this.supportedSecondFactors = deepSnakeToCamel(data.supported_second_factors) as SignInSecondFactor[] | null;
       this.firstFactorVerification = new Verification(data.first_factor_verification);
       this.secondFactorVerification = new Verification(data.second_factor_verification);
       this.createdSessionId = data.created_session_id;

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx
@@ -51,17 +51,18 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
             gap={3}
           >
             <Col gap={2}>
-              {supportedSecondFactors.sort(backupCodePrefFactorComparator).map((factor, i) => (
-                <ArrowBlockButton
-                  textLocalizationKey={getButtonLabel(factor)}
-                  elementDescriptor={descriptors.alternativeMethodsBlockButton}
-                  textElementDescriptor={descriptors.alternativeMethodsBlockButtonText}
-                  arrowElementDescriptor={descriptors.alternativeMethodsBlockButtonArrow}
-                  key={i}
-                  isDisabled={card.isLoading}
-                  onClick={() => onFactorSelected(factor)}
-                />
-              ))}
+              {supportedSecondFactors &&
+                supportedSecondFactors.sort(backupCodePrefFactorComparator).map((factor, i) => (
+                  <ArrowBlockButton
+                    textLocalizationKey={getButtonLabel(factor)}
+                    elementDescriptor={descriptors.alternativeMethodsBlockButton}
+                    textElementDescriptor={descriptors.alternativeMethodsBlockButtonText}
+                    arrowElementDescriptor={descriptors.alternativeMethodsBlockButtonArrow}
+                    key={i}
+                    isDisabled={card.isLoading}
+                    onClick={() => onFactorSelected(factor)}
+                  />
+                ))}
             </Col>
             <Card.Action elementId='alternativeMethods'>
               {onBackLinkClick && (

diff --git a/packages/clerk-js/src/ui/components/SignIn/utils.ts b/packages/clerk-js/src/ui/components/SignIn/utils.ts
@@ -135,7 +135,7 @@ export function factorHasLocalStrategy(factor: SignInFactor | undefined | null):
 }
 
 // The priority of second factors is: TOTP -> Phone code -> any other factor
-export function determineStartingSignInSecondFactor(secondFactors: SignInFactor[]): SignInFactor | null {
+export function determineStartingSignInSecondFactor(secondFactors: SignInFactor[] | null): SignInFactor | null {
   if (!secondFactors || secondFactors.length === 0) {
     return null;
   }

diff --git a/packages/elements/src/internals/machines/sign-in/utils/starting-factors.ts b/packages/elements/src/internals/machines/sign-in/utils/starting-factors.ts
@@ -94,7 +94,7 @@ function determineStrategyWhenOTPIsPreferred(factors: SignInFirstFactor[], ident
 }
 
 // The priority of second factors is: TOTP -> Phone code -> any other factor
-export function determineStartingSignInSecondFactor(secondFactors: SignInSecondFactor[]) {
+export function determineStartingSignInSecondFactor(secondFactors: SignInSecondFactor[] | null) {
   if (!secondFactors || secondFactors.length === 0) {
     return null;
   }

diff --git a/packages/types/src/signIn.ts b/packages/types/src/signIn.ts
@@ -73,7 +73,7 @@ export interface SignInResource extends ClerkResource {
    */
   supportedIdentifiers: SignInIdentifier[];
   supportedFirstFactors: SignInFirstFactor[];
-  supportedSecondFactors: SignInSecondFactor[];
+  supportedSecondFactors: SignInSecondFactor[] | null;
   firstFactorVerification: VerificationResource;
   secondFactorVerification: VerificationResource;
   identifier: string | null;