@clerk/ui 1.0.0-snapshot.v20251208202852 → 1.0.0-snapshot.v20251215203425

package/dist/components/SignIn/ResetPassword.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResetPassword.js","names":["e: any"],"sources":["../../../src/components/SignIn/ResetPassword.tsx"],"sourcesContent":["import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors';\nimport React from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useCoreSignIn, useEnvironment } from '../../contexts';\nimport { Col, descriptors, localizationKeys, useLocalizations } from '../../customizables';\nimport { useConfirmPassword } from '../../hooks';\nimport { useSupportEmail } from '../../hooks/useSupportEmail';\nimport { useRouter } from '../../router';\n\nconst ResetPasswordInternal = () => {\n  const signIn = useCoreSignIn();\n  const card = useCardState();\n  const { navigate } = useRouter();\n  const supportEmail = useSupportEmail();\n  const {\n    userSettings: { passwordSettings },\n  } = useEnvironment();\n\n  const { t, locale } = useLocalizations();\n\n  const requiresNewPassword =\n    signIn.status === 'needs_new_password' &&\n    signIn.firstFactorVerification.strategy !== 'reset_password_email_code' &&\n    signIn.firstFactorVerification.strategy !== 'reset_password_phone_code';\n\n  React.useEffect(() => {\n    if (requiresNewPassword) {\n      card.setError(t(localizationKeys('signIn.resetPassword.requiredMessage')));\n    }\n  }, []);\n\n  const passwordField = useFormControl('password', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__newPassword'),\n    isRequired: true,\n    validatePassword: true,\n    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n  });\n\n  const confirmField = useFormControl('confirmPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__confirmPassword'),\n    isRequired: true,\n  });\n\n  const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n    type: 'checkbox',\n    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n    defaultChecked: true,\n  });\n\n  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n    passwordField,\n    confirmPasswordField: confirmField,\n  });\n\n  const canSubmit = isPasswordMatch;\n\n  const validateForm = () => {\n    if (passwordField.value) {\n      setConfirmPasswordFeedback(confirmField.value);\n    }\n  };\n\n  const resetPassword = async () => {\n    passwordField.clearFeedback();\n    confirmField.clearFeedback();\n    try {\n      const { status, createdSessionId } = await signIn.resetPassword({\n        password: passwordField.value,\n        signOutOfOtherSessions: sessionsField.checked,\n      });\n\n      switch (status) {\n        case 'complete':\n          if (createdSessionId) {\n            const queryParams = new URLSearchParams();\n            queryParams.set('createdSessionId', createdSessionId);\n            return navigate(`../reset-password-success?${queryParams.toString()}`);\n          }\n          return console.error(clerkInvalidFAPIResponse(status, supportEmail));\n        case 'needs_second_factor':\n          return navigate('../factor-two');\n        default:\n          return console.error(clerkInvalidFAPIResponse(status, supportEmail));\n      }\n    } catch (e: any) {\n      return handleError(e, [passwordField, confirmField], card.setError);\n    }\n  };\n\n  const goBack = () => {\n    return navigate('../');\n  };\n\n  return (\n    <Card.Root>\n      <Card.Content>\n        <Header.Root showLogo>\n          <Header.Title localizationKey={localizationKeys('signIn.resetPassword.title')} />\n        </Header.Root>\n        <Card.Alert>{card.error}</Card.Alert>\n        <Col\n          elementDescriptor={descriptors.main}\n          gap={8}\n        >\n          <Form.Root\n            onSubmit={resetPassword}\n            onBlur={validateForm}\n            gap={8}\n          >\n            <Col gap={6}>\n              {/* For password managers */}\n              <input\n                readOnly\n                data-testid='hidden-identifier'\n                id='identifier-field'\n                name='identifier'\n                value={signIn.identifier || ''}\n                style={{ display: 'none' }}\n              />\n              <Form.ControlRow elementId={passwordField.id}>\n                <Form.PasswordInput\n                  {...passwordField.props}\n                  isRequired\n                  autoFocus\n                />\n              </Form.ControlRow>\n              <Form.ControlRow elementId={confirmField.id}>\n                <Form.PasswordInput\n                  {...confirmField.props}\n                  onChange={e => {\n                    if (e.target.value) {\n                      setConfirmPasswordFeedback(e.target.value);\n                    }\n                    return confirmField.props.onChange(e);\n                  }}\n                />\n              </Form.ControlRow>\n              {!requiresNewPassword && (\n                <Form.ControlRow elementId={sessionsField.id}>\n                  <Form.Checkbox {...sessionsField.props} />\n                </Form.ControlRow>\n              )}\n            </Col>\n            <Col gap={3}>\n              <Form.SubmitButton\n                isDisabled={!canSubmit}\n                localizationKey={localizationKeys('signIn.resetPassword.formButtonPrimary')}\n              />\n              <Card.Action elementId='alternativeMethods'>\n                <Card.ActionLink\n                  elementDescriptor={descriptors.backLink}\n                  localizationKey={localizationKeys('backButton')}\n                  onClick={goBack}\n                />\n              </Card.Action>\n            </Col>\n          </Form.Root>\n        </Col>\n      </Card.Content>\n      <Card.Footer />\n    </Card.Root>\n  );\n};\n\nexport const ResetPassword = withCardStateProvider(ResetPasswordInternal);\n"],"mappings":"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"}
+{"version":3,"file":"ResetPassword.js","names":["e: any"],"sources":["../../../src/components/SignIn/ResetPassword.tsx"],"sourcesContent":["import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors';\nimport React from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useCoreSignIn, useEnvironment } from '../../contexts';\nimport { Col, descriptors, localizationKeys, useLocalizations } from '../../customizables';\nimport { useConfirmPassword } from '../../hooks';\nimport { useSupportEmail } from '../../hooks/useSupportEmail';\nimport { useRouter } from '../../router';\n\nconst ResetPasswordInternal = () => {\n  const signIn = useCoreSignIn();\n  const card = useCardState();\n  const { navigate } = useRouter();\n  const supportEmail = useSupportEmail();\n  const {\n    userSettings: { passwordSettings },\n  } = useEnvironment();\n\n  const { t, locale } = useLocalizations();\n\n  const requiresNewPassword =\n    signIn.status === 'needs_new_password' &&\n    signIn.firstFactorVerification.strategy !== 'reset_password_email_code' &&\n    signIn.firstFactorVerification.strategy !== 'reset_password_phone_code';\n\n  React.useEffect(() => {\n    if (requiresNewPassword) {\n      card.setError(t(localizationKeys('signIn.resetPassword.requiredMessage')));\n    }\n  }, []);\n\n  const passwordField = useFormControl('password', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__newPassword'),\n    isRequired: true,\n    validatePassword: true,\n    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n  });\n\n  const confirmField = useFormControl('confirmPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__confirmPassword'),\n    isRequired: true,\n  });\n\n  const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n    type: 'checkbox',\n    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n    defaultChecked: true,\n  });\n\n  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n    passwordField,\n    confirmPasswordField: confirmField,\n  });\n\n  const canSubmit = isPasswordMatch;\n\n  const validateForm = () => {\n    if (passwordField.value) {\n      setConfirmPasswordFeedback(confirmField.value);\n    }\n  };\n\n  const resetPassword = async () => {\n    if (!canSubmit) {\n      return;\n    }\n\n    passwordField.clearFeedback();\n    confirmField.clearFeedback();\n    try {\n      const { status, createdSessionId } = await signIn.resetPassword({\n        password: passwordField.value,\n        signOutOfOtherSessions: sessionsField.checked,\n      });\n\n      switch (status) {\n        case 'complete':\n          if (createdSessionId) {\n            const queryParams = new URLSearchParams();\n            queryParams.set('createdSessionId', createdSessionId);\n            return navigate(`../reset-password-success?${queryParams.toString()}`);\n          }\n          return console.error(clerkInvalidFAPIResponse(status, supportEmail));\n        case 'needs_second_factor':\n          return navigate('../factor-two');\n        default:\n          return console.error(clerkInvalidFAPIResponse(status, supportEmail));\n      }\n    } catch (e: any) {\n      return handleError(e, [passwordField, confirmField], card.setError);\n    }\n  };\n\n  const goBack = () => {\n    return navigate('../');\n  };\n\n  return (\n    <Card.Root>\n      <Card.Content>\n        <Header.Root showLogo>\n          <Header.Title localizationKey={localizationKeys('signIn.resetPassword.title')} />\n        </Header.Root>\n        <Card.Alert>{card.error}</Card.Alert>\n        <Col\n          elementDescriptor={descriptors.main}\n          gap={8}\n        >\n          <Form.Root\n            onSubmit={resetPassword}\n            onBlur={validateForm}\n            gap={8}\n          >\n            <Col gap={6}>\n              {/* For password managers */}\n              <input\n                readOnly\n                data-testid='hidden-identifier'\n                id='identifier-field'\n                name='identifier'\n                value={signIn.identifier || ''}\n                style={{ display: 'none' }}\n              />\n              <Form.ControlRow elementId={passwordField.id}>\n                <Form.PasswordInput\n                  {...passwordField.props}\n                  isRequired\n                  autoFocus\n                />\n              </Form.ControlRow>\n              <Form.ControlRow elementId={confirmField.id}>\n                <Form.PasswordInput\n                  {...confirmField.props}\n                  onChange={e => {\n                    if (e.target.value) {\n                      setConfirmPasswordFeedback(e.target.value);\n                    }\n                    return confirmField.props.onChange(e);\n                  }}\n                />\n              </Form.ControlRow>\n              {!requiresNewPassword && (\n                <Form.ControlRow elementId={sessionsField.id}>\n                  <Form.Checkbox {...sessionsField.props} />\n                </Form.ControlRow>\n              )}\n            </Col>\n            <Col gap={3}>\n              <Form.SubmitButton\n                isDisabled={!canSubmit}\n                localizationKey={localizationKeys('signIn.resetPassword.formButtonPrimary')}\n              />\n              <Card.Action elementId='alternativeMethods'>\n                <Card.ActionLink\n                  elementDescriptor={descriptors.backLink}\n                  localizationKey={localizationKeys('backButton')}\n                  onClick={goBack}\n                />\n              </Card.Action>\n            </Col>\n          </Form.Root>\n        </Col>\n      </Card.Content>\n      <Card.Footer />\n    </Card.Root>\n  );\n};\n\nexport const ResetPassword = withCardStateProvider(ResetPasswordInternal);\n"],"mappings":"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"}

package/dist/components/SignIn/SignInClientTrust.js

@@ -0,0 +1,49 @@
+import { useCoreSignIn } from "../../contexts/CoreClientContext.js";
+import { withCardStateProvider } from "../../elements/contexts/index.js";
+import { LoadingCard } from "../../elements/LoadingCard.js";
+import { withRedirectToAfterSignIn, withRedirectToSignInTask } from "../../common/withRedirect.js";
+import { SignInFactorTwoAlternativeMethods } from "./SignInFactorTwoAlternativeMethods.js";
+import { SignInFactorTwoEmailCodeCard } from "./SignInFactorTwoEmailCodeCard.js";
+import { SignInFactorTwoEmailLinkCard } from "./SignInFactorTwoEmailLinkCard.js";
+import { SignInFactorTwoPhoneCodeCard } from "./SignInFactorTwoPhoneCodeCard.js";
+import { useSecondFactorSelection } from "./useSecondFactorSelection.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+
+//#region src/components/SignIn/SignInClientTrust.tsx
+function SignInClientTrustInternal() {
+	const { currentFactor, factorAlreadyPrepared, handleFactorPrepare, selectFactor, showAllStrategies, toggleAllStrategies } = useSecondFactorSelection(useCoreSignIn().supportedSecondFactors);
+	if (!currentFactor) return /* @__PURE__ */ jsx(LoadingCard, {});
+	if (showAllStrategies) return /* @__PURE__ */ jsx(SignInFactorTwoAlternativeMethods, {
+		onBackLinkClick: toggleAllStrategies,
+		onFactorSelected: selectFactor
+	});
+	switch (currentFactor?.strategy) {
+		case "phone_code": return /* @__PURE__ */ jsx(SignInFactorTwoPhoneCodeCard, {
+			showClientTrustNotice: true,
+			factorAlreadyPrepared,
+			onFactorPrepare: handleFactorPrepare,
+			factor: currentFactor,
+			onShowAlternativeMethodsClicked: toggleAllStrategies
+		});
+		case "email_code": return /* @__PURE__ */ jsx(SignInFactorTwoEmailCodeCard, {
+			showClientTrustNotice: true,
+			factorAlreadyPrepared,
+			onFactorPrepare: handleFactorPrepare,
+			factor: currentFactor,
+			onShowAlternativeMethodsClicked: toggleAllStrategies
+		});
+		case "email_link": return /* @__PURE__ */ jsx(SignInFactorTwoEmailLinkCard, {
+			showClientTrustNotice: true,
+			factorAlreadyPrepared,
+			onFactorPrepare: handleFactorPrepare,
+			factor: currentFactor,
+			onShowAlternativeMethodsClicked: toggleAllStrategies
+		});
+		default: return /* @__PURE__ */ jsx(LoadingCard, {});
+	}
+}
+const SignInClientTrust = withRedirectToSignInTask(withRedirectToAfterSignIn(withCardStateProvider(SignInClientTrustInternal)));
+
+//#endregion
+export { SignInClientTrust };
+//# sourceMappingURL=SignInClientTrust.js.map

package/dist/components/SignIn/SignInClientTrust.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInClientTrust.js","names":[],"sources":["../../../src/components/SignIn/SignInClientTrust.tsx"],"sourcesContent":["import { withCardStateProvider } from '@/ui/elements/contexts';\nimport { LoadingCard } from '@/ui/elements/LoadingCard';\n\nimport { withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../common';\nimport { useCoreSignIn } from '../../contexts';\nimport { SignInFactorTwoAlternativeMethods } from './SignInFactorTwoAlternativeMethods';\nimport { SignInFactorTwoEmailCodeCard } from './SignInFactorTwoEmailCodeCard';\nimport { SignInFactorTwoEmailLinkCard } from './SignInFactorTwoEmailLinkCard';\nimport { SignInFactorTwoPhoneCodeCard } from './SignInFactorTwoPhoneCodeCard';\nimport { useSecondFactorSelection } from './useSecondFactorSelection';\n\nfunction SignInClientTrustInternal(): JSX.Element {\n  const signIn = useCoreSignIn();\n  const {\n    currentFactor,\n    factorAlreadyPrepared,\n    handleFactorPrepare,\n    selectFactor,\n    showAllStrategies,\n    toggleAllStrategies,\n  } = useSecondFactorSelection(signIn.supportedSecondFactors);\n\n  if (!currentFactor) {\n    return <LoadingCard />;\n  }\n\n  if (showAllStrategies) {\n    return (\n      <SignInFactorTwoAlternativeMethods\n        onBackLinkClick={toggleAllStrategies}\n        onFactorSelected={selectFactor}\n      />\n    );\n  }\n\n  switch (currentFactor?.strategy) {\n    case 'phone_code':\n      return (\n        <SignInFactorTwoPhoneCodeCard\n          showClientTrustNotice\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    case 'email_code':\n      return (\n        <SignInFactorTwoEmailCodeCard\n          showClientTrustNotice\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    case 'email_link':\n      return (\n        <SignInFactorTwoEmailLinkCard\n          showClientTrustNotice\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    default:\n      return <LoadingCard />;\n  }\n}\n\nexport const SignInClientTrust = withRedirectToSignInTask(\n  withRedirectToAfterSignIn(withCardStateProvider(SignInClientTrustInternal)),\n);\n"],"mappings":";;;;;;;;;;;;AAWA,SAAS,4BAAyC;CAEhD,MAAM,EACJ,eACA,uBACA,qBACA,cACA,mBACA,wBACE,yBARW,eAAe,CAQM,uBAAuB;AAE3D,KAAI,CAAC,cACH,QAAO,oBAAC,gBAAc;AAGxB,KAAI,kBACF,QACE,oBAAC;EACC,iBAAiB;EACjB,kBAAkB;GAClB;AAIN,SAAQ,eAAe,UAAvB;EACE,KAAK,aACH,QACE,oBAAC;GACC;GACuB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;IACjC;EAEN,KAAK,aACH,QACE,oBAAC;GACC;GACuB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;IACjC;EAEN,KAAK,aACH,QACE,oBAAC;GACC;GACuB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;IACjC;EAEN,QACE,QAAO,oBAAC,gBAAc;;;AAI5B,MAAa,oBAAoB,yBAC/B,0BAA0B,sBAAsB,0BAA0B,CAAC,CAC5E"}

package/dist/components/SignIn/SignInFactorOne.js

@@ -20,8 +20,8 @@ import { SignInFactorOnePasskey } from "./SignInFactorOnePasskey.js";
 import { SignInFactorOnePasswordCard } from "./SignInFactorOnePasswordCard.js";
 import { SignInFactorOnePhoneCodeCard } from "./SignInFactorOnePhoneCodeCard.js";
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/components/SignIn/SignInFactorOne.tsx
 const factorKey = (factor) => {

package/dist/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.js

@@ -7,9 +7,9 @@ import { handleError } from "../../utils/errorHandler.js";
 import { useSupportEmail } from "../../hooks/useSupportEmail.js";
 import { VerificationCodeCard } from "../../elements/VerificationCodeCard.js";
 import { clerkInvalidFAPIResponse } from "@clerk/shared/internal/clerk-js/errors";
+import { useClerk } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { isUserLockedError } from "@clerk/shared/error";
-import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.tsx
 const SignInFactorOneAlternativeChannelCodeForm = (props) => {

package/dist/components/SignIn/SignInFactorOneCodeForm.js

@@ -8,9 +8,9 @@ import { useSupportEmail } from "../../hooks/useSupportEmail.js";
 import { VerificationCodeCard } from "../../elements/VerificationCodeCard.js";
 import { clerkInvalidFAPIResponse } from "@clerk/shared/internal/clerk-js/errors";
 import { useMemo } from "react";
+import { useClerk } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { isUserLockedError } from "@clerk/shared/error";
-import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignIn/SignInFactorOneCodeForm.tsx
 const SignInFactorOneCodeForm = (props) => {

package/dist/components/SignIn/SignInFactorOneEmailLinkCard.js

@@ -11,9 +11,9 @@ import { EmailLinkStatusCard } from "../../common/EmailLinkStatusCard.js";
 import { handleError } from "../../utils/errorHandler.js";
 import { VerificationLinkCard } from "../../elements/VerificationLinkCard.js";
 import React from "react";
+import { useClerk } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { isUserLockedError } from "@clerk/shared/error";
-import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignIn/SignInFactorOneEmailLinkCard.tsx
 const SignInFactorOneEmailLinkCard = (props) => {

package/dist/components/SignIn/SignInFactorOnePasswordCard.js

@@ -13,13 +13,13 @@ import { handleError } from "../../utils/errorHandler.js";
 import { Form } from "../../elements/Form.js";
 import { IdentityPreview } from "../../elements/IdentityPreview.js";
 import { useSupportEmail } from "../../hooks/useSupportEmail.js";
-import { useResetPasswordFactor } from "./useResetPasswordFactor.js";
 import { HavingTrouble } from "./HavingTrouble.js";
+import { useResetPasswordFactor } from "./useResetPasswordFactor.js";
 import { clerkInvalidFAPIResponse } from "@clerk/shared/internal/clerk-js/errors";
 import React from "react";
+import { useClerk } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { isPasswordCompromisedError, isPasswordPwnedError, isUserLockedError } from "@clerk/shared/error";
-import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignIn/SignInFactorOnePasswordCard.tsx
 const usePasswordControl = (props) => {
@@ -65,13 +65,14 @@ const SignInFactorOnePasswordCard = (props) => {
 				case "complete": return setActive({
 					session: res.createdSessionId,
 					navigate: ({ session }) => {
-						navigateOnSetActive({
+						return navigateOnSetActive({
 							session,
 							redirectUrl: afterSignInUrl
 						});
 					}
 				});
 				case "needs_second_factor": return navigate("../factor-two");
+				case "needs_client_trust": return navigate("../client-trust");
 				default: return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));
 			}
 		}).catch((err) => {

package/dist/components/SignIn/SignInFactorOnePasswordCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SignInFactorOnePasswordCard.js","names":["handlePasswordSubmit: React.FormEventHandler<HTMLFormElement>"],"sources":["../../../src/components/SignIn/SignInFactorOnePasswordCard.tsx"],"sourcesContent":["import { isPasswordCompromisedError, isPasswordPwnedError, isUserLockedError } from '@clerk/shared/error';\nimport { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors';\nimport { useClerk } from '@clerk/shared/react';\nimport React from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { IdentityPreview } from '@/ui/elements/IdentityPreview';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useCoreSignIn, useSignInContext } from '../../contexts';\nimport { descriptors, Flex, Flow, localizationKeys } from '../../customizables';\nimport { useSupportEmail } from '../../hooks/useSupportEmail';\nimport { useRouter } from '../../router/RouteContext';\nimport { HavingTrouble } from './HavingTrouble';\nimport { useResetPasswordFactor } from './useResetPasswordFactor';\n\nexport type PasswordErrorCode = 'compromised' | 'pwned';\n\ntype SignInFactorOnePasswordProps = {\n  onForgotPasswordMethodClick: React.MouseEventHandler | undefined;\n  onShowAlternativeMethodsClick: React.MouseEventHandler | undefined;\n  onPasswordError?: (errorCode: PasswordErrorCode) => void;\n};\n\nconst usePasswordControl = (props: SignInFactorOnePasswordProps) => {\n  const { onForgotPasswordMethodClick, onShowAlternativeMethodsClick } = props;\n  const resetPasswordFactor = useResetPasswordFactor();\n\n  const passwordControl = useFormControl('password', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__password'),\n    placeholder: localizationKeys('formFieldInputPlaceholder__password'),\n  });\n\n  return {\n    ...passwordControl,\n    props: {\n      ...passwordControl.props,\n      actionLabel:\n        resetPasswordFactor || onShowAlternativeMethodsClick ? localizationKeys('formFieldAction__forgotPassword') : '',\n      onActionClicked: onForgotPasswordMethodClick\n        ? onForgotPasswordMethodClick\n        : onShowAlternativeMethodsClick\n          ? onShowAlternativeMethodsClick\n          : () => null,\n    },\n  };\n};\n\nexport const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps) => {\n  const { onShowAlternativeMethodsClick, onPasswordError } = props;\n  const passwordInputRef = React.useRef<HTMLInputElement>(null);\n  const card = useCardState();\n  const { setActive } = useClerk();\n  const signIn = useCoreSignIn();\n  const { afterSignInUrl, navigateOnSetActive } = useSignInContext();\n  const supportEmail = useSupportEmail();\n  const passwordControl = usePasswordControl(props);\n  const { navigate } = useRouter();\n  const [showHavingTrouble, setShowHavingTrouble] = React.useState(false);\n  const toggleHavingTrouble = React.useCallback(() => setShowHavingTrouble(s => !s), [setShowHavingTrouble]);\n  const clerk = useClerk();\n\n  const goBack = () => {\n    void navigate('../');\n  };\n\n  const handlePasswordSubmit: React.FormEventHandler<HTMLFormElement> = e => {\n    e.preventDefault();\n    void signIn\n      .attemptFirstFactor({ strategy: 'password', password: passwordControl.value })\n      .then(res => {\n        switch (res.status) {\n          case 'complete':\n            return setActive({\n              session: res.createdSessionId,\n              navigate: ({ session }) => {\n                void navigateOnSetActive({ session, redirectUrl: afterSignInUrl });\n              },\n            });\n          case 'needs_second_factor':\n            return navigate('../factor-two');\n          default:\n            return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));\n        }\n      })\n      .catch(err => {\n        if (isUserLockedError(err)) {\n          // @ts-expect-error -- private method for the time being\n          return clerk.__internal_navigateWithError('..', err.errors[0]);\n        }\n\n        if (onPasswordError) {\n          if (isPasswordPwnedError(err)) {\n            card.setError({ ...err.errors[0], code: 'form_password_pwned__sign_in' });\n            onPasswordError('pwned');\n            return;\n          }\n\n          if (isPasswordCompromisedError(err)) {\n            card.setError({ ...err.errors[0], code: 'form_password_compromised__sign_in' });\n            onPasswordError('compromised');\n            return;\n          }\n        }\n\n        handleError(err, [passwordControl], card.setError);\n\n        setTimeout(() => passwordInputRef.current?.focus(), 0);\n      });\n  };\n\n  if (showHavingTrouble) {\n    return <HavingTrouble onBackLinkClick={toggleHavingTrouble} />;\n  }\n\n  return (\n    <Flow.Part part='password'>\n      <Card.Root>\n        <Card.Content>\n          <Header.Root showLogo>\n            <Header.Title localizationKey={localizationKeys('signIn.password.title')} />\n            <Header.Subtitle localizationKey={localizationKeys('signIn.password.subtitle')} />\n            <IdentityPreview\n              identifier={signIn.identifier}\n              avatarUrl={signIn.userData.imageUrl}\n              onClick={goBack}\n            />\n          </Header.Root>\n          <Card.Alert>{card.error}</Card.Alert>\n          {/*TODO: extract main in its own component */}\n          <Flex\n            direction='col'\n            elementDescriptor={descriptors.main}\n            gap={4}\n          >\n            <Form.Root\n              onSubmit={handlePasswordSubmit}\n              gap={8}\n            >\n              {/* For password managers */}\n              <input\n                readOnly\n                id='identifier-field'\n                name='identifier'\n                value={signIn.identifier || ''}\n                style={{ display: 'none' }}\n              />\n              <Form.ControlRow elementId={passwordControl.id}>\n                <Form.PasswordInput\n                  {...passwordControl.props}\n                  ref={passwordInputRef}\n                  autoFocus\n                />\n              </Form.ControlRow>\n              <Form.SubmitButton hasArrow />\n            </Form.Root>\n            <Card.Action elementId={onShowAlternativeMethodsClick ? 'alternativeMethods' : 'havingTrouble'}>\n              <Card.ActionLink\n                localizationKey={localizationKeys(\n                  onShowAlternativeMethodsClick ? 'signIn.password.actionLink' : 'signIn.alternativeMethods.actionLink',\n                )}\n                onClick={onShowAlternativeMethodsClick || toggleHavingTrouble}\n              />\n            </Card.Action>\n          </Flex>\n        </Card.Content>\n\n        <Card.Footer />\n      </Card.Root>\n    </Flow.Part>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SignInFactorOnePasswordCard.js","names":["handlePasswordSubmit: React.FormEventHandler<HTMLFormElement>"],"sources":["../../../src/components/SignIn/SignInFactorOnePasswordCard.tsx"],"sourcesContent":["import { isPasswordCompromisedError, isPasswordPwnedError, isUserLockedError } from '@clerk/shared/error';\nimport { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors';\nimport { useClerk } from '@clerk/shared/react';\nimport React from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { IdentityPreview } from '@/ui/elements/IdentityPreview';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useCoreSignIn, useSignInContext } from '../../contexts';\nimport { descriptors, Flex, Flow, localizationKeys } from '../../customizables';\nimport { useSupportEmail } from '../../hooks/useSupportEmail';\nimport { useRouter } from '../../router/RouteContext';\nimport { HavingTrouble } from './HavingTrouble';\nimport { useResetPasswordFactor } from './useResetPasswordFactor';\n\nexport type PasswordErrorCode = 'compromised' | 'pwned';\n\ntype SignInFactorOnePasswordProps = {\n  onForgotPasswordMethodClick: React.MouseEventHandler | undefined;\n  onShowAlternativeMethodsClick: React.MouseEventHandler | undefined;\n  onPasswordError?: (errorCode: PasswordErrorCode) => void;\n};\n\nconst usePasswordControl = (props: SignInFactorOnePasswordProps) => {\n  const { onForgotPasswordMethodClick, onShowAlternativeMethodsClick } = props;\n  const resetPasswordFactor = useResetPasswordFactor();\n\n  const passwordControl = useFormControl('password', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__password'),\n    placeholder: localizationKeys('formFieldInputPlaceholder__password'),\n  });\n\n  return {\n    ...passwordControl,\n    props: {\n      ...passwordControl.props,\n      actionLabel:\n        resetPasswordFactor || onShowAlternativeMethodsClick ? localizationKeys('formFieldAction__forgotPassword') : '',\n      onActionClicked: onForgotPasswordMethodClick\n        ? onForgotPasswordMethodClick\n        : onShowAlternativeMethodsClick\n          ? onShowAlternativeMethodsClick\n          : () => null,\n    },\n  };\n};\n\nexport const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps) => {\n  const { onShowAlternativeMethodsClick, onPasswordError } = props;\n  const passwordInputRef = React.useRef<HTMLInputElement>(null);\n  const card = useCardState();\n  const { setActive } = useClerk();\n  const signIn = useCoreSignIn();\n  const { afterSignInUrl, navigateOnSetActive } = useSignInContext();\n  const supportEmail = useSupportEmail();\n  const passwordControl = usePasswordControl(props);\n  const { navigate } = useRouter();\n  const [showHavingTrouble, setShowHavingTrouble] = React.useState(false);\n  const toggleHavingTrouble = React.useCallback(() => setShowHavingTrouble(s => !s), [setShowHavingTrouble]);\n  const clerk = useClerk();\n\n  const goBack = () => {\n    void navigate('../');\n  };\n\n  const handlePasswordSubmit: React.FormEventHandler<HTMLFormElement> = e => {\n    e.preventDefault();\n    void signIn\n      .attemptFirstFactor({ strategy: 'password', password: passwordControl.value })\n      .then(res => {\n        switch (res.status) {\n          case 'complete':\n            return setActive({\n              session: res.createdSessionId,\n              navigate: ({ session }) => {\n                return navigateOnSetActive({ session, redirectUrl: afterSignInUrl });\n              },\n            });\n          case 'needs_second_factor':\n            return navigate('../factor-two');\n          case 'needs_client_trust':\n            return navigate('../client-trust');\n          default:\n            return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));\n        }\n      })\n      .catch(err => {\n        if (isUserLockedError(err)) {\n          // @ts-expect-error -- private method for the time being\n          return clerk.__internal_navigateWithError('..', err.errors[0]);\n        }\n\n        if (onPasswordError) {\n          if (isPasswordPwnedError(err)) {\n            card.setError({ ...err.errors[0], code: 'form_password_pwned__sign_in' });\n            onPasswordError('pwned');\n            return;\n          }\n\n          if (isPasswordCompromisedError(err)) {\n            card.setError({ ...err.errors[0], code: 'form_password_compromised__sign_in' });\n            onPasswordError('compromised');\n            return;\n          }\n        }\n\n        handleError(err, [passwordControl], card.setError);\n\n        setTimeout(() => passwordInputRef.current?.focus(), 0);\n      });\n  };\n\n  if (showHavingTrouble) {\n    return <HavingTrouble onBackLinkClick={toggleHavingTrouble} />;\n  }\n\n  return (\n    <Flow.Part part='password'>\n      <Card.Root>\n        <Card.Content>\n          <Header.Root showLogo>\n            <Header.Title localizationKey={localizationKeys('signIn.password.title')} />\n            <Header.Subtitle localizationKey={localizationKeys('signIn.password.subtitle')} />\n            <IdentityPreview\n              identifier={signIn.identifier}\n              avatarUrl={signIn.userData.imageUrl}\n              onClick={goBack}\n            />\n          </Header.Root>\n          <Card.Alert>{card.error}</Card.Alert>\n          {/*TODO: extract main in its own component */}\n          <Flex\n            direction='col'\n            elementDescriptor={descriptors.main}\n            gap={4}\n          >\n            <Form.Root\n              onSubmit={handlePasswordSubmit}\n              gap={8}\n            >\n              {/* For password managers */}\n              <input\n                readOnly\n                id='identifier-field'\n                name='identifier'\n                value={signIn.identifier || ''}\n                style={{ display: 'none' }}\n              />\n              <Form.ControlRow elementId={passwordControl.id}>\n                <Form.PasswordInput\n                  {...passwordControl.props}\n                  ref={passwordInputRef}\n                  autoFocus\n                />\n              </Form.ControlRow>\n              <Form.SubmitButton hasArrow />\n            </Form.Root>\n            <Card.Action elementId={onShowAlternativeMethodsClick ? 'alternativeMethods' : 'havingTrouble'}>\n              <Card.ActionLink\n                localizationKey={localizationKeys(\n                  onShowAlternativeMethodsClick ? 'signIn.password.actionLink' : 'signIn.alternativeMethods.actionLink',\n                )}\n                onClick={onShowAlternativeMethodsClick || toggleHavingTrouble}\n              />\n            </Card.Action>\n          </Flex>\n        </Card.Content>\n\n        <Card.Footer />\n      </Card.Root>\n    </Flow.Part>\n  );\n};\n"],"mappings":"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"}

package/dist/components/SignIn/SignInFactorTwo.js

@@ -2,42 +2,23 @@ import { useCoreSignIn } from "../../contexts/CoreClientContext.js";
 import { withCardStateProvider } from "../../elements/contexts/index.js";
 import { LoadingCard } from "../../elements/LoadingCard.js";
 import { withRedirectToAfterSignIn, withRedirectToSignInTask } from "../../common/withRedirect.js";
-import { determineStartingSignInSecondFactor } from "./utils.js";
 import { SignInFactorTwoAlternativeMethods } from "./SignInFactorTwoAlternativeMethods.js";
-import { SignInFactorTwoBackupCodeCard } from "./SignInFactorTwoBackupCodeCard.js";
 import { SignInFactorTwoEmailCodeCard } from "./SignInFactorTwoEmailCodeCard.js";
 import { SignInFactorTwoEmailLinkCard } from "./SignInFactorTwoEmailLinkCard.js";
 import { SignInFactorTwoPhoneCodeCard } from "./SignInFactorTwoPhoneCodeCard.js";
+import { useSecondFactorSelection } from "./useSecondFactorSelection.js";
+import { SignInFactorTwoBackupCodeCard } from "./SignInFactorTwoBackupCodeCard.js";
 import { SignInFactorTwoTOTPCard } from "./SignInFactorTwoTOTPCard.js";
-import React from "react";
 import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/components/SignIn/SignInFactorTwo.tsx
-const factorKey = (factor) => {
-	if (!factor) return "";
-	let key = factor.strategy;
-	if ("phoneNumberId" in factor) key += factor.phoneNumberId;
-	return key;
-};
 function SignInFactorTwoInternal() {
-	const availableFactors = useCoreSignIn().supportedSecondFactors;
-	const lastPreparedFactorKeyRef = React.useRef("");
-	const [currentFactor, setCurrentFactor] = React.useState(() => determineStartingSignInSecondFactor(availableFactors));
-	const [showAllStrategies, setShowAllStrategies] = React.useState(!currentFactor);
-	const toggleAllStrategies = () => setShowAllStrategies((s) => !s);
-	const handleFactorPrepare = () => {
-		lastPreparedFactorKeyRef.current = factorKey(currentFactor);
-	};
-	const selectFactor = (factor) => {
-		setCurrentFactor(factor);
-		toggleAllStrategies();
-	};
+	const { currentFactor, factorAlreadyPrepared, handleFactorPrepare, selectFactor, showAllStrategies, toggleAllStrategies } = useSecondFactorSelection(useCoreSignIn().supportedSecondFactors);
 	if (!currentFactor) return /* @__PURE__ */ jsx(LoadingCard, {});
 	if (showAllStrategies) return /* @__PURE__ */ jsx(SignInFactorTwoAlternativeMethods, {
 		onBackLinkClick: toggleAllStrategies,
 		onFactorSelected: selectFactor
 	});
-	const factorAlreadyPrepared = lastPreparedFactorKeyRef.current === factorKey(currentFactor);
 	switch (currentFactor?.strategy) {
 		case "phone_code": return /* @__PURE__ */ jsx(SignInFactorTwoPhoneCodeCard, {
 			factorAlreadyPrepared,

package/dist/components/SignIn/SignInFactorTwo.js.map

@@ -1 +1 @@
-{"version":3,"file":"SignInFactorTwo.js","names":[],"sources":["../../../src/components/SignIn/SignInFactorTwo.tsx"],"sourcesContent":["import type { SignInFactor } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { withCardStateProvider } from '@/ui/elements/contexts';\nimport { LoadingCard } from '@/ui/elements/LoadingCard';\n\nimport { withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../common';\nimport { useCoreSignIn } from '../../contexts';\nimport { SignInFactorTwoAlternativeMethods } from './SignInFactorTwoAlternativeMethods';\nimport { SignInFactorTwoBackupCodeCard } from './SignInFactorTwoBackupCodeCard';\nimport { SignInFactorTwoEmailCodeCard } from './SignInFactorTwoEmailCodeCard';\nimport { SignInFactorTwoEmailLinkCard } from './SignInFactorTwoEmailLinkCard';\nimport { SignInFactorTwoPhoneCodeCard } from './SignInFactorTwoPhoneCodeCard';\nimport { SignInFactorTwoTOTPCard } from './SignInFactorTwoTOTPCard';\nimport { determineStartingSignInSecondFactor } from './utils';\n\nconst factorKey = (factor: SignInFactor | null | undefined) => {\n  if (!factor) {\n    return '';\n  }\n  let key = factor.strategy;\n  if ('phoneNumberId' in factor) {\n    key += factor.phoneNumberId;\n  }\n  return key;\n};\n\nfunction SignInFactorTwoInternal(): JSX.Element {\n  const signIn = useCoreSignIn();\n  const availableFactors = signIn.supportedSecondFactors;\n\n  const lastPreparedFactorKeyRef = React.useRef('');\n  const [currentFactor, setCurrentFactor] = React.useState<SignInFactor | null>(() =>\n    determineStartingSignInSecondFactor(availableFactors),\n  );\n  const [showAllStrategies, setShowAllStrategies] = React.useState<boolean>(!currentFactor);\n  const toggleAllStrategies = () => setShowAllStrategies(s => !s);\n\n  const handleFactorPrepare = () => {\n    lastPreparedFactorKeyRef.current = factorKey(currentFactor);\n  };\n\n  const selectFactor = (factor: SignInFactor) => {\n    setCurrentFactor(factor);\n    toggleAllStrategies();\n  };\n\n  if (!currentFactor) {\n    return <LoadingCard />;\n  }\n\n  if (showAllStrategies) {\n    return (\n      <SignInFactorTwoAlternativeMethods\n        onBackLinkClick={toggleAllStrategies}\n        onFactorSelected={selectFactor}\n      />\n    );\n  }\n\n  const factorAlreadyPrepared = lastPreparedFactorKeyRef.current === factorKey(currentFactor);\n  switch (currentFactor?.strategy) {\n    case 'phone_code':\n      return (\n        <SignInFactorTwoPhoneCodeCard\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    case 'totp':\n      return (\n        <SignInFactorTwoTOTPCard\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    case 'backup_code':\n      return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;\n    case 'email_code':\n      return (\n        <SignInFactorTwoEmailCodeCard\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    case 'email_link':\n      return (\n        <SignInFactorTwoEmailLinkCard\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    default:\n      return <LoadingCard />;\n  }\n}\n\nexport const SignInFactorTwo = withRedirectToSignInTask(\n  withRedirectToAfterSignIn(withCardStateProvider(SignInFactorTwoInternal)),\n);\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,aAAa,WAA4C;AAC7D,KAAI,CAAC,OACH,QAAO;CAET,IAAI,MAAM,OAAO;AACjB,KAAI,mBAAmB,OACrB,QAAO,OAAO;AAEhB,QAAO;;AAGT,SAAS,0BAAuC;CAE9C,MAAM,mBADS,eAAe,CACE;CAEhC,MAAM,2BAA2B,MAAM,OAAO,GAAG;CACjD,MAAM,CAAC,eAAe,oBAAoB,MAAM,eAC9C,oCAAoC,iBAAiB,CACtD;CACD,MAAM,CAAC,mBAAmB,wBAAwB,MAAM,SAAkB,CAAC,cAAc;CACzF,MAAM,4BAA4B,sBAAqB,MAAK,CAAC,EAAE;CAE/D,MAAM,4BAA4B;AAChC,2BAAyB,UAAU,UAAU,cAAc;;CAG7D,MAAM,gBAAgB,WAAyB;AAC7C,mBAAiB,OAAO;AACxB,uBAAqB;;AAGvB,KAAI,CAAC,cACH,QAAO,oBAAC,gBAAc;AAGxB,KAAI,kBACF,QACE,oBAAC;EACC,iBAAiB;EACjB,kBAAkB;GAClB;CAIN,MAAM,wBAAwB,yBAAyB,YAAY,UAAU,cAAc;AAC3F,SAAQ,eAAe,UAAvB;EACE,KAAK,aACH,QACE,oBAAC;GACwB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;IACjC;EAEN,KAAK,OACH,QACE,oBAAC;GACwB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;IACjC;EAEN,KAAK,cACH,QAAO,oBAAC,iCAA8B,iCAAiC,sBAAuB;EAChG,KAAK,aACH,QACE,oBAAC;GACwB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;IACjC;EAEN,KAAK,aACH,QACE,oBAAC;GACwB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;IACjC;EAEN,QACE,QAAO,oBAAC,gBAAc;;;AAI5B,MAAa,kBAAkB,yBAC7B,0BAA0B,sBAAsB,wBAAwB,CAAC,CAC1E"}
+{"version":3,"file":"SignInFactorTwo.js","names":[],"sources":["../../../src/components/SignIn/SignInFactorTwo.tsx"],"sourcesContent":["import { withCardStateProvider } from '@/ui/elements/contexts';\nimport { LoadingCard } from '@/ui/elements/LoadingCard';\n\nimport { withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../common';\nimport { useCoreSignIn } from '../../contexts';\nimport { SignInFactorTwoAlternativeMethods } from './SignInFactorTwoAlternativeMethods';\nimport { SignInFactorTwoBackupCodeCard } from './SignInFactorTwoBackupCodeCard';\nimport { SignInFactorTwoEmailCodeCard } from './SignInFactorTwoEmailCodeCard';\nimport { SignInFactorTwoEmailLinkCard } from './SignInFactorTwoEmailLinkCard';\nimport { SignInFactorTwoPhoneCodeCard } from './SignInFactorTwoPhoneCodeCard';\nimport { SignInFactorTwoTOTPCard } from './SignInFactorTwoTOTPCard';\nimport { useSecondFactorSelection } from './useSecondFactorSelection';\n\nfunction SignInFactorTwoInternal(): JSX.Element {\n  const signIn = useCoreSignIn();\n  const {\n    currentFactor,\n    factorAlreadyPrepared,\n    handleFactorPrepare,\n    selectFactor,\n    showAllStrategies,\n    toggleAllStrategies,\n  } = useSecondFactorSelection(signIn.supportedSecondFactors);\n\n  if (!currentFactor) {\n    return <LoadingCard />;\n  }\n\n  if (showAllStrategies) {\n    return (\n      <SignInFactorTwoAlternativeMethods\n        onBackLinkClick={toggleAllStrategies}\n        onFactorSelected={selectFactor}\n      />\n    );\n  }\n\n  switch (currentFactor?.strategy) {\n    case 'phone_code':\n      return (\n        <SignInFactorTwoPhoneCodeCard\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    case 'totp':\n      return (\n        <SignInFactorTwoTOTPCard\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    case 'backup_code':\n      return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;\n    case 'email_code':\n      return (\n        <SignInFactorTwoEmailCodeCard\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    case 'email_link':\n      return (\n        <SignInFactorTwoEmailLinkCard\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    default:\n      return <LoadingCard />;\n  }\n}\n\nexport const SignInFactorTwo = withRedirectToSignInTask(\n  withRedirectToAfterSignIn(withCardStateProvider(SignInFactorTwoInternal)),\n);\n"],"mappings":";;;;;;;;;;;;;;AAaA,SAAS,0BAAuC;CAE9C,MAAM,EACJ,eACA,uBACA,qBACA,cACA,mBACA,wBACE,yBARW,eAAe,CAQM,uBAAuB;AAE3D,KAAI,CAAC,cACH,QAAO,oBAAC,gBAAc;AAGxB,KAAI,kBACF,QACE,oBAAC;EACC,iBAAiB;EACjB,kBAAkB;GAClB;AAIN,SAAQ,eAAe,UAAvB;EACE,KAAK,aACH,QACE,oBAAC;GACwB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;IACjC;EAEN,KAAK,OACH,QACE,oBAAC;GACwB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;IACjC;EAEN,KAAK,cACH,QAAO,oBAAC,iCAA8B,iCAAiC,sBAAuB;EAChG,KAAK,aACH,QACE,oBAAC;GACwB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;IACjC;EAEN,KAAK,aACH,QACE,oBAAC;GACwB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;IACjC;EAEN,QACE,QAAO,oBAAC,gBAAc;;;AAI5B,MAAa,kBAAkB,yBAC7B,0BAA0B,sBAAsB,wBAAwB,CAAC,CAC1E"}

package/dist/components/SignIn/SignInFactorTwoBackupCodeCard.js

@@ -14,9 +14,9 @@ import { useSupportEmail } from "../../hooks/useSupportEmail.js";
 import { isResetPasswordStrategy } from "./utils.js";
 import { clerkInvalidFAPIResponse } from "@clerk/shared/internal/clerk-js/errors";
 import React from "react";
+import { useClerk } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { isUserLockedError } from "@clerk/shared/error";
-import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
 const SignInFactorTwoBackupCodeCard = (props) => {

package/dist/components/SignIn/SignInFactorTwoCodeForm.js

@@ -7,13 +7,13 @@ import { useCardState } from "../../elements/contexts/index.js";
 import { Text } from "../../customizables/index.js";
 import { handleError } from "../../utils/errorHandler.js";
 import { useSupportEmail } from "../../hooks/useSupportEmail.js";
-import { isResetPasswordStrategy } from "./utils.js";
 import { VerificationCodeCard } from "../../elements/VerificationCodeCard.js";
+import { isResetPasswordStrategy } from "./utils.js";
 import { clerkInvalidFAPIResponse } from "@clerk/shared/internal/clerk-js/errors";
 import React, { useMemo } from "react";
+import { useClerk } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { isUserLockedError } from "@clerk/shared/error";
-import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignIn/SignInFactorTwoCodeForm.tsx
 const isResettingPassword = (resource) => isResetPasswordStrategy(resource.firstFactorVerification?.strategy) && resource.firstFactorVerification?.status === "verified";
@@ -72,7 +72,7 @@ const SignInFactorTwoCodeForm = (props) => {
 	return /* @__PURE__ */ jsx(VerificationCodeCard, {
 		cardTitle: props.cardTitle,
 		cardSubtitle: isResettingPassword(signIn) ? localizationKeys("signIn.forgotPassword.subtitle") : props.cardSubtitle,
-		cardNotice: showNewDeviceVerificationNotice ? localizationKeys("signIn.newDeviceVerificationNotice") : void 0,
+		cardNotice: props.showClientTrustNotice || showNewDeviceVerificationNotice ? localizationKeys("signIn.newDeviceVerificationNotice") : void 0,
 		resendButton: props.resendButton,
 		inputLabel: props.inputLabel,
 		onCodeEntryFinishedAction: action,

package/dist/components/SignIn/SignInFactorTwoCodeForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SignInFactorTwoCodeForm.js","names":["action: VerificationCodeCardProps['onCodeEntryFinishedAction']"],"sources":["../../../src/components/SignIn/SignInFactorTwoCodeForm.tsx"],"sourcesContent":["import { isUserLockedError } from '@clerk/shared/error';\nimport { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors';\nimport { useClerk } from '@clerk/shared/react';\nimport type { EmailCodeFactor, PhoneCodeFactor, SignInResource, TOTPFactor } from '@clerk/shared/types';\nimport React, { useMemo } from 'react';\n\nimport { useCardState } from '@/ui/elements/contexts';\nimport type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCard';\nimport { VerificationCodeCard } from '@/ui/elements/VerificationCodeCard';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';\nimport { localizationKeys, Text } from '../../customizables';\nimport { useSupportEmail } from '../../hooks/useSupportEmail';\nimport type { LocalizationKey } from '../../localization';\nimport { useRouter } from '../../router';\nimport { isResetPasswordStrategy } from './utils';\n\nexport type SignInFactorTwoCodeCard = Pick<VerificationCodeCardProps, 'onShowAlternativeMethodsClicked'> & {\n  factor: EmailCodeFactor | PhoneCodeFactor | TOTPFactor;\n  factorAlreadyPrepared: boolean;\n  onFactorPrepare: () => void;\n  prepare?: () => Promise<SignInResource>;\n};\n\ntype SignInFactorTwoCodeFormProps = SignInFactorTwoCodeCard & {\n  cardTitle: LocalizationKey;\n  cardSubtitle: LocalizationKey;\n  inputLabel: LocalizationKey;\n  resendButton?: LocalizationKey;\n};\n\nconst isResettingPassword = (resource: SignInResource) =>\n  isResetPasswordStrategy(resource.firstFactorVerification?.strategy) &&\n  resource.firstFactorVerification?.status === 'verified';\n\nexport const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) => {\n  const env = useEnvironment();\n  const signIn = useCoreSignIn();\n  const card = useCardState();\n  const { afterSignInUrl, navigateOnSetActive } = useSignInContext();\n  const { setActive } = useClerk();\n  const { navigate } = useRouter();\n  const supportEmail = useSupportEmail();\n  const clerk = useClerk();\n\n  // Only show the new device verification notice if the user is new\n  // and no attributes are explicitly used for second factor.\n  const showNewDeviceVerificationNotice = useMemo(() => {\n    const anyAttributeUsedForSecondFactor = Object.values(env.userSettings.attributes).some(\n      attr => attr.used_for_second_factor,\n    );\n    return signIn.clientTrustState === 'new' && !anyAttributeUsedForSecondFactor;\n  }, [signIn.clientTrustState, env.userSettings.attributes]);\n\n  React.useEffect(() => {\n    if (props.factorAlreadyPrepared) {\n      return;\n    }\n\n    void prepare?.();\n  }, []);\n\n  const prepare = props.prepare\n    ? () => {\n        return props\n          .prepare?.()\n          .then(() => props.onFactorPrepare())\n          .catch(err => {\n            if (isUserLockedError(err)) {\n              // @ts-expect-error -- private method for the time being\n              return clerk.__internal_navigateWithError('..', err.errors[0]);\n            }\n\n            handleError(err, [], card.setError);\n          });\n      }\n    : undefined;\n\n  const action: VerificationCodeCardProps['onCodeEntryFinishedAction'] = (code, resolve, reject) => {\n    signIn\n      .attemptSecondFactor({ strategy: props.factor.strategy, code })\n      .then(async res => {\n        await resolve();\n        switch (res.status) {\n          case 'complete':\n            if (isResettingPassword(res) && res.createdSessionId) {\n              const queryParams = new URLSearchParams();\n              queryParams.set('createdSessionId', res.createdSessionId);\n              return navigate(`../reset-password-success?${queryParams.toString()}`);\n            }\n            return setActive({\n              session: res.createdSessionId,\n              navigate: async ({ session }) => {\n                await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });\n              },\n            });\n          default:\n            return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));\n        }\n      })\n      .catch(err => {\n        if (isUserLockedError(err)) {\n          // @ts-expect-error -- private method for the time being\n          return clerk.__internal_navigateWithError('..', err.errors[0]);\n        }\n\n        return reject(err);\n      });\n  };\n\n  return (\n    <VerificationCodeCard\n      cardTitle={props.cardTitle}\n      cardSubtitle={\n        isResettingPassword(signIn) ? localizationKeys('signIn.forgotPassword.subtitle') : props.cardSubtitle\n      }\n      cardNotice={showNewDeviceVerificationNotice ? localizationKeys('signIn.newDeviceVerificationNotice') : undefined}\n      resendButton={props.resendButton}\n      inputLabel={props.inputLabel}\n      onCodeEntryFinishedAction={action}\n      onResendCodeClicked={prepare}\n      safeIdentifier={'safeIdentifier' in props.factor ? props.factor.safeIdentifier : undefined}\n      profileImageUrl={signIn.userData.imageUrl}\n      onShowAlternativeMethodsClicked={props.onShowAlternativeMethodsClicked}\n    >\n      {isResettingPassword(signIn) && (\n        <Text\n          localizationKey={localizationKeys('signIn.resetPasswordMfa.detailsLabel')}\n          colorScheme='secondary'\n        />\n      )}\n    </VerificationCodeCard>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgCA,MAAM,uBAAuB,aAC3B,wBAAwB,SAAS,yBAAyB,SAAS,IACnE,SAAS,yBAAyB,WAAW;AAE/C,MAAa,2BAA2B,UAAwC;CAC9E,MAAM,MAAM,gBAAgB;CAC5B,MAAM,SAAS,eAAe;CAC9B,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,gBAAgB,wBAAwB,kBAAkB;CAClE,MAAM,EAAE,cAAc,UAAU;CAChC,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,eAAe,iBAAiB;CACtC,MAAM,QAAQ,UAAU;CAIxB,MAAM,kCAAkC,cAAc;EACpD,MAAM,kCAAkC,OAAO,OAAO,IAAI,aAAa,WAAW,CAAC,MACjF,SAAQ,KAAK,uBACd;AACD,SAAO,OAAO,qBAAqB,SAAS,CAAC;IAC5C,CAAC,OAAO,kBAAkB,IAAI,aAAa,WAAW,CAAC;AAE1D,OAAM,gBAAgB;AACpB,MAAI,MAAM,sBACR;AAGF,EAAK,WAAW;IACf,EAAE,CAAC;CAEN,MAAM,UAAU,MAAM,gBACZ;AACJ,SAAO,MACJ,WAAW,CACX,WAAW,MAAM,iBAAiB,CAAC,CACnC,OAAM,QAAO;AACZ,OAAI,kBAAkB,IAAI,CAExB,QAAO,MAAM,6BAA6B,MAAM,IAAI,OAAO,GAAG;AAGhE,eAAY,KAAK,EAAE,EAAE,KAAK,SAAS;IACnC;KAEN;CAEJ,MAAMA,UAAkE,MAAM,SAAS,WAAW;AAChG,SACG,oBAAoB;GAAE,UAAU,MAAM,OAAO;GAAU;GAAM,CAAC,CAC9D,KAAK,OAAM,QAAO;AACjB,SAAM,SAAS;AACf,WAAQ,IAAI,QAAZ;IACE,KAAK;AACH,SAAI,oBAAoB,IAAI,IAAI,IAAI,kBAAkB;MACpD,MAAM,cAAc,IAAI,iBAAiB;AACzC,kBAAY,IAAI,oBAAoB,IAAI,iBAAiB;AACzD,aAAO,SAAS,6BAA6B,YAAY,UAAU,GAAG;;AAExE,YAAO,UAAU;MACf,SAAS,IAAI;MACb,UAAU,OAAO,EAAE,cAAc;AAC/B,aAAM,oBAAoB;QAAE;QAAS,aAAa;QAAgB,CAAC;;MAEtE,CAAC;IACJ,QACE,QAAO,QAAQ,MAAM,yBAAyB,IAAI,QAAQ,aAAa,CAAC;;IAE5E,CACD,OAAM,QAAO;AACZ,OAAI,kBAAkB,IAAI,CAExB,QAAO,MAAM,6BAA6B,MAAM,IAAI,OAAO,GAAG;AAGhE,UAAO,OAAO,IAAI;IAClB;;AAGN,QACE,oBAAC;EACC,WAAW,MAAM;EACjB,cACE,oBAAoB,OAAO,GAAG,iBAAiB,iCAAiC,GAAG,MAAM;EAE3F,YAAY,kCAAkC,iBAAiB,qCAAqC,GAAG;EACvG,cAAc,MAAM;EACpB,YAAY,MAAM;EAClB,2BAA2B;EAC3B,qBAAqB;EACrB,gBAAgB,oBAAoB,MAAM,SAAS,MAAM,OAAO,iBAAiB;EACjF,iBAAiB,OAAO,SAAS;EACjC,iCAAiC,MAAM;YAEtC,oBAAoB,OAAO,IAC1B,oBAAC;GACC,iBAAiB,iBAAiB,uCAAuC;GACzE,aAAY;IACZ;GAEiB"}
+{"version":3,"file":"SignInFactorTwoCodeForm.js","names":["action: VerificationCodeCardProps['onCodeEntryFinishedAction']"],"sources":["../../../src/components/SignIn/SignInFactorTwoCodeForm.tsx"],"sourcesContent":["import { isUserLockedError } from '@clerk/shared/error';\nimport { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors';\nimport { useClerk } from '@clerk/shared/react';\nimport type { EmailCodeFactor, PhoneCodeFactor, SignInResource, TOTPFactor } from '@clerk/shared/types';\nimport React, { useMemo } from 'react';\n\nimport { useCardState } from '@/ui/elements/contexts';\nimport type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCard';\nimport { VerificationCodeCard } from '@/ui/elements/VerificationCodeCard';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';\nimport { localizationKeys, Text } from '../../customizables';\nimport { useSupportEmail } from '../../hooks/useSupportEmail';\nimport type { LocalizationKey } from '../../localization';\nimport { useRouter } from '../../router';\nimport { isResetPasswordStrategy } from './utils';\n\nexport type SignInFactorTwoCodeCard = Pick<VerificationCodeCardProps, 'onShowAlternativeMethodsClicked'> & {\n  showClientTrustNotice?: boolean;\n  factor: EmailCodeFactor | PhoneCodeFactor | TOTPFactor;\n  factorAlreadyPrepared: boolean;\n  onFactorPrepare: () => void;\n  prepare?: () => Promise<SignInResource>;\n};\n\ntype SignInFactorTwoCodeFormProps = SignInFactorTwoCodeCard & {\n  cardTitle: LocalizationKey;\n  cardSubtitle: LocalizationKey;\n  inputLabel: LocalizationKey;\n  resendButton?: LocalizationKey;\n};\n\nconst isResettingPassword = (resource: SignInResource) =>\n  isResetPasswordStrategy(resource.firstFactorVerification?.strategy) &&\n  resource.firstFactorVerification?.status === 'verified';\n\nexport const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) => {\n  const env = useEnvironment();\n  const signIn = useCoreSignIn();\n  const card = useCardState();\n  const { afterSignInUrl, navigateOnSetActive } = useSignInContext();\n  const { setActive } = useClerk();\n  const { navigate } = useRouter();\n  const supportEmail = useSupportEmail();\n  const clerk = useClerk();\n\n  // Only show the new device verification notice if the user is new\n  // and no attributes are explicitly used for second factor.\n  // Retained for backwards compatibility.\n  const showNewDeviceVerificationNotice = useMemo(() => {\n    const anyAttributeUsedForSecondFactor = Object.values(env.userSettings.attributes).some(\n      attr => attr.used_for_second_factor,\n    );\n    return signIn.clientTrustState === 'new' && !anyAttributeUsedForSecondFactor;\n  }, [signIn.clientTrustState, env.userSettings.attributes]);\n\n  React.useEffect(() => {\n    if (props.factorAlreadyPrepared) {\n      return;\n    }\n\n    void prepare?.();\n  }, []);\n\n  const prepare = props.prepare\n    ? () => {\n        return props\n          .prepare?.()\n          .then(() => props.onFactorPrepare())\n          .catch(err => {\n            if (isUserLockedError(err)) {\n              // @ts-expect-error -- private method for the time being\n              return clerk.__internal_navigateWithError('..', err.errors[0]);\n            }\n\n            handleError(err, [], card.setError);\n          });\n      }\n    : undefined;\n\n  const action: VerificationCodeCardProps['onCodeEntryFinishedAction'] = (code, resolve, reject) => {\n    signIn\n      .attemptSecondFactor({ strategy: props.factor.strategy, code })\n      .then(async res => {\n        await resolve();\n        switch (res.status) {\n          case 'complete':\n            if (isResettingPassword(res) && res.createdSessionId) {\n              const queryParams = new URLSearchParams();\n              queryParams.set('createdSessionId', res.createdSessionId);\n              return navigate(`../reset-password-success?${queryParams.toString()}`);\n            }\n            return setActive({\n              session: res.createdSessionId,\n              navigate: async ({ session }) => {\n                await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });\n              },\n            });\n          default:\n            return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));\n        }\n      })\n      .catch(err => {\n        if (isUserLockedError(err)) {\n          // @ts-expect-error -- private method for the time being\n          return clerk.__internal_navigateWithError('..', err.errors[0]);\n        }\n\n        return reject(err);\n      });\n  };\n\n  return (\n    <VerificationCodeCard\n      cardTitle={props.cardTitle}\n      cardSubtitle={\n        isResettingPassword(signIn) ? localizationKeys('signIn.forgotPassword.subtitle') : props.cardSubtitle\n      }\n      cardNotice={\n        props.showClientTrustNotice || showNewDeviceVerificationNotice\n          ? localizationKeys('signIn.newDeviceVerificationNotice')\n          : undefined\n      }\n      resendButton={props.resendButton}\n      inputLabel={props.inputLabel}\n      onCodeEntryFinishedAction={action}\n      onResendCodeClicked={prepare}\n      safeIdentifier={'safeIdentifier' in props.factor ? props.factor.safeIdentifier : undefined}\n      profileImageUrl={signIn.userData.imageUrl}\n      onShowAlternativeMethodsClicked={props.onShowAlternativeMethodsClicked}\n    >\n      {isResettingPassword(signIn) && (\n        <Text\n          localizationKey={localizationKeys('signIn.resetPasswordMfa.detailsLabel')}\n          colorScheme='secondary'\n        />\n      )}\n    </VerificationCodeCard>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiCA,MAAM,uBAAuB,aAC3B,wBAAwB,SAAS,yBAAyB,SAAS,IACnE,SAAS,yBAAyB,WAAW;AAE/C,MAAa,2BAA2B,UAAwC;CAC9E,MAAM,MAAM,gBAAgB;CAC5B,MAAM,SAAS,eAAe;CAC9B,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,gBAAgB,wBAAwB,kBAAkB;CAClE,MAAM,EAAE,cAAc,UAAU;CAChC,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,eAAe,iBAAiB;CACtC,MAAM,QAAQ,UAAU;CAKxB,MAAM,kCAAkC,cAAc;EACpD,MAAM,kCAAkC,OAAO,OAAO,IAAI,aAAa,WAAW,CAAC,MACjF,SAAQ,KAAK,uBACd;AACD,SAAO,OAAO,qBAAqB,SAAS,CAAC;IAC5C,CAAC,OAAO,kBAAkB,IAAI,aAAa,WAAW,CAAC;AAE1D,OAAM,gBAAgB;AACpB,MAAI,MAAM,sBACR;AAGF,EAAK,WAAW;IACf,EAAE,CAAC;CAEN,MAAM,UAAU,MAAM,gBACZ;AACJ,SAAO,MACJ,WAAW,CACX,WAAW,MAAM,iBAAiB,CAAC,CACnC,OAAM,QAAO;AACZ,OAAI,kBAAkB,IAAI,CAExB,QAAO,MAAM,6BAA6B,MAAM,IAAI,OAAO,GAAG;AAGhE,eAAY,KAAK,EAAE,EAAE,KAAK,SAAS;IACnC;KAEN;CAEJ,MAAMA,UAAkE,MAAM,SAAS,WAAW;AAChG,SACG,oBAAoB;GAAE,UAAU,MAAM,OAAO;GAAU;GAAM,CAAC,CAC9D,KAAK,OAAM,QAAO;AACjB,SAAM,SAAS;AACf,WAAQ,IAAI,QAAZ;IACE,KAAK;AACH,SAAI,oBAAoB,IAAI,IAAI,IAAI,kBAAkB;MACpD,MAAM,cAAc,IAAI,iBAAiB;AACzC,kBAAY,IAAI,oBAAoB,IAAI,iBAAiB;AACzD,aAAO,SAAS,6BAA6B,YAAY,UAAU,GAAG;;AAExE,YAAO,UAAU;MACf,SAAS,IAAI;MACb,UAAU,OAAO,EAAE,cAAc;AAC/B,aAAM,oBAAoB;QAAE;QAAS,aAAa;QAAgB,CAAC;;MAEtE,CAAC;IACJ,QACE,QAAO,QAAQ,MAAM,yBAAyB,IAAI,QAAQ,aAAa,CAAC;;IAE5E,CACD,OAAM,QAAO;AACZ,OAAI,kBAAkB,IAAI,CAExB,QAAO,MAAM,6BAA6B,MAAM,IAAI,OAAO,GAAG;AAGhE,UAAO,OAAO,IAAI;IAClB;;AAGN,QACE,oBAAC;EACC,WAAW,MAAM;EACjB,cACE,oBAAoB,OAAO,GAAG,iBAAiB,iCAAiC,GAAG,MAAM;EAE3F,YACE,MAAM,yBAAyB,kCAC3B,iBAAiB,qCAAqC,GACtD;EAEN,cAAc,MAAM;EACpB,YAAY,MAAM;EAClB,2BAA2B;EAC3B,qBAAqB;EACrB,gBAAgB,oBAAoB,MAAM,SAAS,MAAM,OAAO,iBAAiB;EACjF,iBAAiB,OAAO,SAAS;EACjC,iCAAiC,MAAM;YAEtC,oBAAoB,OAAO,IAC1B,oBAAC;GACC,iBAAiB,iBAAiB,uCAAuC;GACzE,aAAY;IACZ;GAEiB"}

package/dist/components/SignIn/SignInFactorTwoEmailLinkCard.js

@@ -10,9 +10,9 @@ import { EmailLinkStatusCard } from "../../common/EmailLinkStatusCard.js";
 import { handleError } from "../../utils/errorHandler.js";
 import { VerificationLinkCard } from "../../elements/VerificationLinkCard.js";
 import React from "react";
+import { useClerk } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { isUserLockedError } from "@clerk/shared/error";
-import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignIn/SignInFactorTwoEmailLinkCard.tsx
 const isNewDevice = (resource) => resource.clientTrustState === "new";
@@ -66,7 +66,7 @@ const SignInFactorTwoEmailLinkCard = (props) => {
 		children: /* @__PURE__ */ jsx(VerificationLinkCard, {
 			cardTitle: localizationKeys("signIn.emailLinkMfa.title"),
 			cardSubtitle: localizationKeys("signIn.emailLinkMfa.subtitle"),
-			cardNotice: isNewDevice(signIn) ? localizationKeys("signIn.newDeviceVerificationNotice") : void 0,
+			cardNotice: props.showClientTrustNotice || isNewDevice(signIn) ? localizationKeys("signIn.newDeviceVerificationNotice") : void 0,
 			formSubtitle: localizationKeys("signIn.emailLinkMfa.formSubtitle"),
 			resendButton: localizationKeys("signIn.emailLinkMfa.resendButton"),
 			onResendCodeClicked: restartVerification,

package/dist/components/SignIn/SignInFactorTwoEmailLinkCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SignInFactorTwoEmailLinkCard.js","names":[],"sources":["../../../src/components/SignIn/SignInFactorTwoEmailLinkCard.tsx"],"sourcesContent":["import { isUserLockedError } from '@clerk/shared/error';\nimport { useClerk } from '@clerk/shared/react';\nimport type { EmailLinkFactor, SignInResource } from '@clerk/shared/types';\nimport React from 'react';\n\nimport type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCard';\nimport { VerificationLinkCard } from '@/ui/elements/VerificationLinkCard';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { EmailLinkStatusCard } from '../../common';\nimport { buildVerificationRedirectUrl } from '../../common/redirects';\nimport { useCoreSignIn, useSignInContext } from '../../contexts';\nimport { Flow, localizationKeys, useLocalizations } from '../../customizables';\nimport { useCardState } from '../../elements/contexts';\nimport { useEmailLink } from '../../hooks/useEmailLink';\n\ntype SignInFactorTwoEmailLinkCardProps = Pick<VerificationCodeCardProps, 'onShowAlternativeMethodsClicked'> & {\n  factor: EmailLinkFactor;\n  factorAlreadyPrepared: boolean;\n  onFactorPrepare: () => void;\n};\n\nconst isNewDevice = (resource: SignInResource) => resource.clientTrustState === 'new';\n\nexport const SignInFactorTwoEmailLinkCard = (props: SignInFactorTwoEmailLinkCardProps) => {\n  const { t } = useLocalizations();\n  const card = useCardState();\n  const signIn = useCoreSignIn();\n  const signInContext = useSignInContext();\n  const { signInUrl } = signInContext;\n  const { afterSignInUrl } = useSignInContext();\n  const { setActive } = useClerk();\n  const { startEmailLinkFlow, cancelEmailLinkFlow } = useEmailLink(signIn);\n  const [showVerifyModal, setShowVerifyModal] = React.useState(false);\n  const clerk = useClerk();\n\n  React.useEffect(() => {\n    void startEmailLinkVerification();\n  }, []);\n\n  const restartVerification = () => {\n    cancelEmailLinkFlow();\n    void startEmailLinkVerification();\n  };\n\n  const startEmailLinkVerification = () => {\n    startEmailLinkFlow({\n      emailAddressId: props.factor.emailAddressId,\n      redirectUrl: buildVerificationRedirectUrl({ ctx: signInContext, baseUrl: signInUrl, intent: 'sign-in' }),\n    })\n      .then(res => handleVerificationResult(res))\n      .catch(err => {\n        if (isUserLockedError(err)) {\n          // @ts-expect-error -- private method for the time being\n          return clerk.__internal_navigateWithError('..', err.errors[0]);\n        }\n\n        handleError(err, [], card.setError);\n      });\n  };\n\n  const handleVerificationResult = async (si: SignInResource) => {\n    const ver = si.secondFactorVerification;\n    if (ver.status === 'expired') {\n      card.setError(t(localizationKeys('formFieldError__verificationLinkExpired')));\n    } else if (ver.verifiedFromTheSameClient()) {\n      setShowVerifyModal(true);\n    } else {\n      await setActive({\n        session: si.createdSessionId,\n        redirectUrl: afterSignInUrl,\n      });\n    }\n  };\n\n  if (showVerifyModal) {\n    return (\n      <EmailLinkStatusCard\n        title={localizationKeys('signIn.emailLink.verifiedSwitchTab.titleNewTab')}\n        subtitle={localizationKeys('signIn.emailLink.verifiedSwitchTab.subtitleNewTab')}\n        status='verified_switch_tab'\n      />\n    );\n  }\n\n  return (\n    <Flow.Part part='emailLink'>\n      <VerificationLinkCard\n        cardTitle={localizationKeys('signIn.emailLinkMfa.title')}\n        cardSubtitle={localizationKeys('signIn.emailLinkMfa.subtitle')}\n        cardNotice={isNewDevice(signIn) ? localizationKeys('signIn.newDeviceVerificationNotice') : undefined}\n        formSubtitle={localizationKeys('signIn.emailLinkMfa.formSubtitle')}\n        resendButton={localizationKeys('signIn.emailLinkMfa.resendButton')}\n        onResendCodeClicked={restartVerification}\n        safeIdentifier={props.factor.safeIdentifier}\n        profileImageUrl={signIn.userData.imageUrl}\n        onShowAlternativeMethodsClicked={props.onShowAlternativeMethodsClicked}\n      />\n    </Flow.Part>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAM,eAAe,aAA6B,SAAS,qBAAqB;AAEhF,MAAa,gCAAgC,UAA6C;CACxF,MAAM,EAAE,MAAM,kBAAkB;CAChC,MAAM,OAAO,cAAc;CAC3B,MAAM,SAAS,eAAe;CAC9B,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,EAAE,cAAc;CACtB,MAAM,EAAE,mBAAmB,kBAAkB;CAC7C,MAAM,EAAE,cAAc,UAAU;CAChC,MAAM,EAAE,oBAAoB,wBAAwB,aAAa,OAAO;CACxE,MAAM,CAAC,iBAAiB,sBAAsB,MAAM,SAAS,MAAM;CACnE,MAAM,QAAQ,UAAU;AAExB,OAAM,gBAAgB;AACpB,EAAK,4BAA4B;IAChC,EAAE,CAAC;CAEN,MAAM,4BAA4B;AAChC,uBAAqB;AACrB,EAAK,4BAA4B;;CAGnC,MAAM,mCAAmC;AACvC,qBAAmB;GACjB,gBAAgB,MAAM,OAAO;GAC7B,aAAa,6BAA6B;IAAE,KAAK;IAAe,SAAS;IAAW,QAAQ;IAAW,CAAC;GACzG,CAAC,CACC,MAAK,QAAO,yBAAyB,IAAI,CAAC,CAC1C,OAAM,QAAO;AACZ,OAAI,kBAAkB,IAAI,CAExB,QAAO,MAAM,6BAA6B,MAAM,IAAI,OAAO,GAAG;AAGhE,eAAY,KAAK,EAAE,EAAE,KAAK,SAAS;IACnC;;CAGN,MAAM,2BAA2B,OAAO,OAAuB;EAC7D,MAAM,MAAM,GAAG;AACf,MAAI,IAAI,WAAW,UACjB,MAAK,SAAS,EAAE,iBAAiB,0CAA0C,CAAC,CAAC;WACpE,IAAI,2BAA2B,CACxC,oBAAmB,KAAK;MAExB,OAAM,UAAU;GACd,SAAS,GAAG;GACZ,aAAa;GACd,CAAC;;AAIN,KAAI,gBACF,QACE,oBAAC;EACC,OAAO,iBAAiB,iDAAiD;EACzE,UAAU,iBAAiB,oDAAoD;EAC/E,QAAO;GACP;AAIN,QACE,oBAAC,KAAK;EAAK,MAAK;YACd,oBAAC;GACC,WAAW,iBAAiB,4BAA4B;GACxD,cAAc,iBAAiB,+BAA+B;GAC9D,YAAY,YAAY,OAAO,GAAG,iBAAiB,qCAAqC,GAAG;GAC3F,cAAc,iBAAiB,mCAAmC;GAClE,cAAc,iBAAiB,mCAAmC;GAClE,qBAAqB;GACrB,gBAAgB,MAAM,OAAO;GAC7B,iBAAiB,OAAO,SAAS;GACjC,iCAAiC,MAAM;IACvC;GACQ"}
+{"version":3,"file":"SignInFactorTwoEmailLinkCard.js","names":[],"sources":["../../../src/components/SignIn/SignInFactorTwoEmailLinkCard.tsx"],"sourcesContent":["import { isUserLockedError } from '@clerk/shared/error';\nimport { useClerk } from '@clerk/shared/react';\nimport type { EmailLinkFactor, SignInResource } from '@clerk/shared/types';\nimport React from 'react';\n\nimport type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCard';\nimport { VerificationLinkCard } from '@/ui/elements/VerificationLinkCard';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { EmailLinkStatusCard } from '../../common';\nimport { buildVerificationRedirectUrl } from '../../common/redirects';\nimport { useCoreSignIn, useSignInContext } from '../../contexts';\nimport { Flow, localizationKeys, useLocalizations } from '../../customizables';\nimport { useCardState } from '../../elements/contexts';\nimport { useEmailLink } from '../../hooks/useEmailLink';\n\ntype SignInFactorTwoEmailLinkCardProps = Pick<VerificationCodeCardProps, 'onShowAlternativeMethodsClicked'> & {\n  showClientTrustNotice?: boolean;\n  factor: EmailLinkFactor;\n  factorAlreadyPrepared: boolean;\n  onFactorPrepare: () => void;\n};\n\n// Retained for backwards compatibility.\nconst isNewDevice = (resource: SignInResource) => resource.clientTrustState === 'new';\n\nexport const SignInFactorTwoEmailLinkCard = (props: SignInFactorTwoEmailLinkCardProps) => {\n  const { t } = useLocalizations();\n  const card = useCardState();\n  const signIn = useCoreSignIn();\n  const signInContext = useSignInContext();\n  const { signInUrl } = signInContext;\n  const { afterSignInUrl } = useSignInContext();\n  const { setActive } = useClerk();\n  const { startEmailLinkFlow, cancelEmailLinkFlow } = useEmailLink(signIn);\n  const [showVerifyModal, setShowVerifyModal] = React.useState(false);\n  const clerk = useClerk();\n\n  React.useEffect(() => {\n    void startEmailLinkVerification();\n  }, []);\n\n  const restartVerification = () => {\n    cancelEmailLinkFlow();\n    void startEmailLinkVerification();\n  };\n\n  const startEmailLinkVerification = () => {\n    startEmailLinkFlow({\n      emailAddressId: props.factor.emailAddressId,\n      redirectUrl: buildVerificationRedirectUrl({ ctx: signInContext, baseUrl: signInUrl, intent: 'sign-in' }),\n    })\n      .then(res => handleVerificationResult(res))\n      .catch(err => {\n        if (isUserLockedError(err)) {\n          // @ts-expect-error -- private method for the time being\n          return clerk.__internal_navigateWithError('..', err.errors[0]);\n        }\n\n        handleError(err, [], card.setError);\n      });\n  };\n\n  const handleVerificationResult = async (si: SignInResource) => {\n    const ver = si.secondFactorVerification;\n    if (ver.status === 'expired') {\n      card.setError(t(localizationKeys('formFieldError__verificationLinkExpired')));\n    } else if (ver.verifiedFromTheSameClient()) {\n      setShowVerifyModal(true);\n    } else {\n      await setActive({\n        session: si.createdSessionId,\n        redirectUrl: afterSignInUrl,\n      });\n    }\n  };\n\n  if (showVerifyModal) {\n    return (\n      <EmailLinkStatusCard\n        title={localizationKeys('signIn.emailLink.verifiedSwitchTab.titleNewTab')}\n        subtitle={localizationKeys('signIn.emailLink.verifiedSwitchTab.subtitleNewTab')}\n        status='verified_switch_tab'\n      />\n    );\n  }\n\n  return (\n    <Flow.Part part='emailLink'>\n      <VerificationLinkCard\n        cardTitle={localizationKeys('signIn.emailLinkMfa.title')}\n        cardSubtitle={localizationKeys('signIn.emailLinkMfa.subtitle')}\n        cardNotice={\n          props.showClientTrustNotice || isNewDevice(signIn)\n            ? localizationKeys('signIn.newDeviceVerificationNotice')\n            : undefined\n        }\n        formSubtitle={localizationKeys('signIn.emailLinkMfa.formSubtitle')}\n        resendButton={localizationKeys('signIn.emailLinkMfa.resendButton')}\n        onResendCodeClicked={restartVerification}\n        safeIdentifier={props.factor.safeIdentifier}\n        profileImageUrl={signIn.userData.imageUrl}\n        onShowAlternativeMethodsClicked={props.onShowAlternativeMethodsClicked}\n      />\n    </Flow.Part>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAwBA,MAAM,eAAe,aAA6B,SAAS,qBAAqB;AAEhF,MAAa,gCAAgC,UAA6C;CACxF,MAAM,EAAE,MAAM,kBAAkB;CAChC,MAAM,OAAO,cAAc;CAC3B,MAAM,SAAS,eAAe;CAC9B,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,EAAE,cAAc;CACtB,MAAM,EAAE,mBAAmB,kBAAkB;CAC7C,MAAM,EAAE,cAAc,UAAU;CAChC,MAAM,EAAE,oBAAoB,wBAAwB,aAAa,OAAO;CACxE,MAAM,CAAC,iBAAiB,sBAAsB,MAAM,SAAS,MAAM;CACnE,MAAM,QAAQ,UAAU;AAExB,OAAM,gBAAgB;AACpB,EAAK,4BAA4B;IAChC,EAAE,CAAC;CAEN,MAAM,4BAA4B;AAChC,uBAAqB;AACrB,EAAK,4BAA4B;;CAGnC,MAAM,mCAAmC;AACvC,qBAAmB;GACjB,gBAAgB,MAAM,OAAO;GAC7B,aAAa,6BAA6B;IAAE,KAAK;IAAe,SAAS;IAAW,QAAQ;IAAW,CAAC;GACzG,CAAC,CACC,MAAK,QAAO,yBAAyB,IAAI,CAAC,CAC1C,OAAM,QAAO;AACZ,OAAI,kBAAkB,IAAI,CAExB,QAAO,MAAM,6BAA6B,MAAM,IAAI,OAAO,GAAG;AAGhE,eAAY,KAAK,EAAE,EAAE,KAAK,SAAS;IACnC;;CAGN,MAAM,2BAA2B,OAAO,OAAuB;EAC7D,MAAM,MAAM,GAAG;AACf,MAAI,IAAI,WAAW,UACjB,MAAK,SAAS,EAAE,iBAAiB,0CAA0C,CAAC,CAAC;WACpE,IAAI,2BAA2B,CACxC,oBAAmB,KAAK;MAExB,OAAM,UAAU;GACd,SAAS,GAAG;GACZ,aAAa;GACd,CAAC;;AAIN,KAAI,gBACF,QACE,oBAAC;EACC,OAAO,iBAAiB,iDAAiD;EACzE,UAAU,iBAAiB,oDAAoD;EAC/E,QAAO;GACP;AAIN,QACE,oBAAC,KAAK;EAAK,MAAK;YACd,oBAAC;GACC,WAAW,iBAAiB,4BAA4B;GACxD,cAAc,iBAAiB,+BAA+B;GAC9D,YACE,MAAM,yBAAyB,YAAY,OAAO,GAC9C,iBAAiB,qCAAqC,GACtD;GAEN,cAAc,iBAAiB,mCAAmC;GAClE,cAAc,iBAAiB,mCAAmC;GAClE,qBAAqB;GACrB,gBAAgB,MAAM,OAAO;GAC7B,iBAAiB,OAAO,SAAS;GACjC,iCAAiC,MAAM;IACvC;GACQ"}

package/dist/components/SignIn/SignInSocialButtons.js

@@ -10,9 +10,9 @@ import { web3CallbackErrorHandler } from "../../utils/web3CallbackErrorHandler.j
 import { SocialButtons } from "../../elements/SocialButtons.js";
 import React from "react";
 import { ERROR_CODES } from "@clerk/shared/internal/clerk-js/constants";
+import { useClerk } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { isClerkAPIResponseError } from "@clerk/shared/error";
-import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignIn/SignInSocialButtons.tsx
 const SignInSocialButtons = React.memo((props) => {

package/dist/components/SignIn/SignInStart.js

@@ -31,8 +31,8 @@ import { clerkInvalidFAPIResponse } from "@clerk/shared/internal/clerk-js/errors
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { ERROR_CODES, SIGN_UP_MODES } from "@clerk/shared/internal/clerk-js/constants";
 import { getClerkQueryParam, removeClerkQueryParam } from "@clerk/shared/internal/clerk-js/queryParams";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { getAlternativePhoneCodeProviderData } from "@clerk/shared/alternativePhoneCode";
 import { isWebAuthnAutofillSupported, isWebAuthnSupported } from "@clerk/shared/webauthn";
 
@@ -152,6 +152,7 @@ function SignInStartInternal() {
 					if (!hasOnlyEnterpriseSSOFirstFactors(res) || hasMultipleEnterpriseConnections(res.supportedFirstFactors)) return navigate("factor-one");
 					return authenticateWithEnterpriseSSO();
 				case "needs_second_factor": return navigate("factor-two");
+				case "needs_client_trust": return navigate("client-trust");
 				case "complete":
 					removeClerkQueryParam("__clerk_ticket");
 					return clerk.setActive({
@@ -268,6 +269,7 @@ function SignInStartInternal() {
 					if (!hasOnlyEnterpriseSSOFirstFactors(res) || hasMultipleEnterpriseConnections(res.supportedFirstFactors)) return navigate("factor-one");
 					return authenticateWithEnterpriseSSO();
 				case "needs_second_factor": return navigate("factor-two");
+				case "needs_client_trust": return navigate("client-trust");
 				case "complete": return clerk.setActive({
 					session: res.createdSessionId,
 					navigate: async ({ session }) => {