@clerk/ui 1.0.0-snapshot.v20251203203405 → 1.0.0-snapshot.v20251204143242

package/dist/components/OrganizationSwitcher/OrganizationSwitcherPopover.js

@@ -1,7 +1,5 @@
-import { useRouter } from "../../router/RouteContext.js";
 import { useEnvironment } from "../../contexts/EnvironmentContext.js";
 import { localizationKeys } from "../../localization/localizationKeys.js";
-import billing_default from "../../icons/billing.js";
 import cog_filled_default from "../../icons/cog-filled.js";
 import { withProtect } from "../../common/Gate.js";
 import { useOrganizationSwitcherContext } from "../../contexts/components/OrganizationSwitcher.js";
@@ -15,9 +13,8 @@ import { PersonalWorkspacePreview } from "../../elements/PersonalWorkspacePrevie
 import { PopoverCard } from "../../elements/PopoverCard.js";
 import { RootBox } from "../../elements/RootBox.js";
 import { OrganizationActionList } from "./OtherOrganizationActions.js";
-import { runIfFunctionOrReturn } from "@clerk/shared/utils";
 import React from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk, useOrganization, useOrganizationList, useUser } from "@clerk/shared/react";
 
 //#region src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -29,8 +26,7 @@ const OrganizationSwitcherPopover = React.forwardRef((props, ref) => {
 	const { openOrganizationProfile, openCreateOrganization } = useClerk();
 	const { organization: currentOrg } = useOrganization();
 	const { isLoaded, setActive } = useOrganizationList();
-	const router = useRouter();
-	const { hidePersonal, __unstable_manageBillingUrl, __unstable_manageBillingLabel, __unstable_manageBillingMembersLimit, createOrganizationMode, organizationProfileMode, afterLeaveOrganizationUrl, afterCreateOrganizationUrl, navigateCreateOrganization, navigateOrganizationProfile, afterSelectOrganizationUrl, afterSelectPersonalUrl, organizationProfileProps, skipInvitationScreen } = useOrganizationSwitcherContext();
+	const { hidePersonal, createOrganizationMode, organizationProfileMode, afterLeaveOrganizationUrl, afterCreateOrganizationUrl, navigateCreateOrganization, navigateOrganizationProfile, afterSelectOrganizationUrl, afterSelectPersonalUrl, organizationProfileProps, skipInvitationScreen } = useOrganizationSwitcherContext();
 	const { user } = useUser();
 	if (!user) return null;
 	const { username, primaryEmailAddress, primaryPhoneNumber,...userWithoutIdentifiers } = user;
@@ -60,10 +56,7 @@ const OrganizationSwitcherPopover = React.forwardRef((props, ref) => {
 		if (organizationProfileMode === "navigation") return navigateOrganizationProfile();
 		return openOrganizationProfile({
 			...organizationProfileProps,
-			afterLeaveOrganizationUrl,
-			__unstable_manageBillingUrl,
-			__unstable_manageBillingLabel,
-			__unstable_manageBillingMembersLimit
+			afterLeaveOrganizationUrl
 		});
 	};
 	const manageOrganizationButton = /* @__PURE__ */ jsx(SmallAction, {
@@ -79,35 +72,7 @@ const OrganizationSwitcherPopover = React.forwardRef((props, ref) => {
 		trailing: /* @__PURE__ */ jsx(NotificationCountBadgeManageButton, {}),
 		focusRing: true
 	});
-	const billingOrganizationButton = /* @__PURE__ */ jsx(SmallAction, {
-		icon: billing_default,
-		label: runIfFunctionOrReturn(__unstable_manageBillingLabel) || "Upgrade",
-		onClick: () => router.navigate(runIfFunctionOrReturn(__unstable_manageBillingUrl)),
-		focusRing: true
-	});
-	const selectedOrganizationPreview = (currentOrg$1) => __unstable_manageBillingUrl ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OrganizationPreview, {
-		elementId: "organizationSwitcherActiveOrganization",
-		organization: currentOrg$1,
-		user,
-		mainIdentifierVariant: "buttonLarge",
-		sx: (t) => ({ padding: `${t.space.$4} ${t.space.$5}` })
-	}), /* @__PURE__ */ jsx(Actions, {
-		role: "menu",
-		sx: (t) => ({
-			borderBottomWidth: t.borderWidths.$normal,
-			borderBottomStyle: t.borderStyles.$solid,
-			borderBottomColor: t.colors.$borderAlpha100
-		}),
-		children: /* @__PURE__ */ jsxs(Flex, {
-			justify: "between",
-			sx: (t) => ({
-				marginLeft: t.space.$12,
-				padding: `0 ${t.space.$5} ${t.space.$4}`,
-				gap: t.space.$2
-			}),
-			children: [manageOrganizationButton, billingOrganizationButton]
-		})
-	})] }) : /* @__PURE__ */ jsxs(Flex, {
+	const selectedOrganizationPreview = (currentOrg$1) => /* @__PURE__ */ jsxs(Flex, {
 		justify: "between",
 		align: "center",
 		sx: (t) => ({

package/dist/components/OrganizationSwitcher/OrganizationSwitcherPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationSwitcherPopover.js","names":["CogFilled","Billing","currentOrg"],"sources":["../../../src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx"],"sourcesContent":["import { useClerk, useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';\nimport type { OrganizationResource } from '@clerk/shared/types';\nimport { runIfFunctionOrReturn } from '@clerk/shared/utils';\nimport React from 'react';\n\nimport { Actions, SmallAction } from '@/ui/elements/Actions';\nimport { useCardState } from '@/ui/elements/contexts';\nimport { OrganizationPreview } from '@/ui/elements/OrganizationPreview';\nimport { PersonalWorkspacePreview } from '@/ui/elements/PersonalWorkspacePreview';\nimport { PopoverCard } from '@/ui/elements/PopoverCard';\n\nimport { NotificationCountBadge, withProtect } from '../../common';\nimport { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';\nimport { descriptors, Flex, localizationKeys } from '../../customizables';\nimport { RootBox } from '../../elements/RootBox';\nimport { Billing, CogFilled } from '../../icons';\nimport { useRouter } from '../../router';\nimport type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';\nimport { OrganizationActionList } from './OtherOrganizationActions';\n\ntype OrganizationSwitcherPopoverProps = { close?: (open: boolean) => void } & PropsOfComponent<typeof PopoverCard.Root>;\n\nexport const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, OrganizationSwitcherPopoverProps>(\n  (props, ref) => {\n    const { close: unsafeClose, ...rest } = props;\n    const close = () => unsafeClose?.(false);\n    const card = useCardState();\n    const { __experimental_asStandalone } = useOrganizationSwitcherContext();\n    const { openOrganizationProfile, openCreateOrganization } = useClerk();\n    const { organization: currentOrg } = useOrganization();\n    const { isLoaded, setActive } = useOrganizationList();\n    const router = useRouter();\n    const {\n      hidePersonal,\n      //@ts-expect-error\n      __unstable_manageBillingUrl,\n      //@ts-expect-error\n      __unstable_manageBillingLabel,\n      //@ts-expect-error\n      __unstable_manageBillingMembersLimit,\n      createOrganizationMode,\n      organizationProfileMode,\n      afterLeaveOrganizationUrl,\n      afterCreateOrganizationUrl,\n      navigateCreateOrganization,\n      navigateOrganizationProfile,\n      afterSelectOrganizationUrl,\n      afterSelectPersonalUrl,\n\n      organizationProfileProps,\n      skipInvitationScreen,\n    } = useOrganizationSwitcherContext();\n\n    const { user } = useUser();\n\n    if (!user) {\n      return null;\n    }\n\n    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;\n\n    if (!isLoaded) {\n      return null;\n    }\n\n    const handleOrganizationClicked = (organization: OrganizationResource) => {\n      return card\n        .runAsync(() =>\n          setActive({\n            organization,\n            redirectUrl: afterSelectOrganizationUrl(organization),\n          }),\n        )\n        .then(close);\n    };\n\n    const handlePersonalWorkspaceClicked = () => {\n      return card\n        .runAsync(() => setActive({ organization: null, redirectUrl: afterSelectPersonalUrl(user) }))\n        .then(close);\n    };\n\n    const handleCreateOrganizationClicked = () => {\n      close();\n      if (createOrganizationMode === 'navigation') {\n        return navigateCreateOrganization();\n      }\n      return openCreateOrganization({ afterCreateOrganizationUrl, skipInvitationScreen });\n    };\n\n    const handleItemClick = () => {\n      close();\n      if (organizationProfileMode === 'navigation') {\n        return navigateOrganizationProfile();\n      }\n\n      return openOrganizationProfile({\n        ...organizationProfileProps,\n        afterLeaveOrganizationUrl,\n        //@ts-expect-error\n        __unstable_manageBillingUrl,\n        __unstable_manageBillingLabel,\n        __unstable_manageBillingMembersLimit,\n      });\n    };\n\n    const manageOrganizationButton = (\n      <SmallAction\n        elementDescriptor={descriptors.organizationSwitcherPopoverActionButton}\n        elementId={descriptors.organizationSwitcherPopoverActionButton.setId('manageOrganization')}\n        iconBoxElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIconBox}\n        iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('manageOrganization')}\n        iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}\n        iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}\n        icon={CogFilled}\n        label={localizationKeys('organizationSwitcher.action__manageOrganization')}\n        onClick={() => handleItemClick()}\n        trailing={<NotificationCountBadgeManageButton />}\n        focusRing\n      />\n    );\n\n    const billingOrganizationButton = (\n      <SmallAction\n        icon={Billing}\n        label={runIfFunctionOrReturn(__unstable_manageBillingLabel) || 'Upgrade'}\n        onClick={() => router.navigate(runIfFunctionOrReturn(__unstable_manageBillingUrl))}\n        focusRing\n      />\n    );\n\n    const selectedOrganizationPreview = (currentOrg: OrganizationResource) =>\n      __unstable_manageBillingUrl ? (\n        <>\n          <OrganizationPreview\n            elementId={'organizationSwitcherActiveOrganization'}\n            organization={currentOrg}\n            user={user}\n            mainIdentifierVariant='buttonLarge'\n            sx={t => ({\n              padding: `${t.space.$4} ${t.space.$5}`,\n            })}\n          />\n          <Actions\n            role='menu'\n            sx={t => ({\n              borderBottomWidth: t.borderWidths.$normal,\n              borderBottomStyle: t.borderStyles.$solid,\n              borderBottomColor: t.colors.$borderAlpha100,\n            })}\n          >\n            <Flex\n              justify='between'\n              sx={t => ({\n                marginLeft: t.space.$12,\n                padding: `0 ${t.space.$5} ${t.space.$4}`,\n                gap: t.space.$2,\n              })}\n            >\n              {manageOrganizationButton}\n              {billingOrganizationButton}\n            </Flex>\n          </Actions>\n        </>\n      ) : (\n        <Flex\n          justify='between'\n          align='center'\n          sx={t => ({\n            width: '100%',\n            paddingRight: t.space.$5,\n          })}\n        >\n          <OrganizationPreview\n            elementId={'organizationSwitcherActiveOrganization'}\n            organization={currentOrg}\n            user={user}\n            mainIdentifierVariant='buttonLarge'\n            sx={t => ({\n              padding: `${t.space.$4} ${t.space.$5}`,\n            })}\n          />\n          <Actions role='menu'>{manageOrganizationButton}</Actions>\n        </Flex>\n      );\n\n    return (\n      <RootBox elementDescriptor={descriptors.organizationSwitcherPopoverRootBox}>\n        <PopoverCard.Root\n          elementDescriptor={descriptors.organizationSwitcherPopoverCard}\n          ref={ref}\n          role='dialog'\n          aria-label={`${currentOrg?.name} is active`}\n          shouldEntryAnimate={!__experimental_asStandalone}\n          {...rest}\n        >\n          <PopoverCard.Content elementDescriptor={descriptors.organizationSwitcherPopoverMain}>\n            <Actions\n              elementDescriptor={descriptors.organizationSwitcherPopoverActions}\n              role='menu'\n            >\n              {currentOrg\n                ? selectedOrganizationPreview(currentOrg)\n                : !hidePersonal && (\n                    <PersonalWorkspacePreview\n                      user={userWithoutIdentifiers}\n                      sx={t => ({\n                        padding: `${t.space.$4} ${t.space.$5}`,\n                        width: '100%',\n                      })}\n                      title={localizationKeys('organizationSwitcher.personalWorkspace')}\n                    />\n                  )}\n              <OrganizationActionList\n                onCreateOrganizationClick={handleCreateOrganizationClicked}\n                onPersonalWorkspaceClick={handlePersonalWorkspaceClicked}\n                onOrganizationClick={handleOrganizationClicked}\n              />\n            </Actions>\n          </PopoverCard.Content>\n          <PopoverCard.Footer elementDescriptor={descriptors.organizationSwitcherPopoverFooter} />\n        </PopoverCard.Root>\n      </RootBox>\n    );\n  },\n);\n\nconst NotificationCountBadgeManageButton = withProtect(\n  ({ sx }: { sx?: ThemableCssProp }) => {\n    const { organizationSettings } = useEnvironment();\n\n    const isDomainsEnabled = organizationSettings?.domains?.enabled;\n\n    const { membershipRequests } = useOrganization({\n      membershipRequests: isDomainsEnabled || undefined,\n    });\n\n    if (!membershipRequests?.count) {\n      return null;\n    }\n\n    return (\n      <NotificationCountBadge\n        notificationCount={membershipRequests.count}\n        containerSx={sx}\n      />\n    );\n  },\n  {\n    // if the user is not able to accept a request we should not notify them\n    permission: 'org:sys_memberships:manage',\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"OrganizationSwitcherPopover.js","names":["CogFilled","currentOrg"],"sources":["../../../src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx"],"sourcesContent":["import { useClerk, useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';\nimport type { OrganizationResource } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { Actions, SmallAction } from '@/ui/elements/Actions';\nimport { useCardState } from '@/ui/elements/contexts';\nimport { OrganizationPreview } from '@/ui/elements/OrganizationPreview';\nimport { PersonalWorkspacePreview } from '@/ui/elements/PersonalWorkspacePreview';\nimport { PopoverCard } from '@/ui/elements/PopoverCard';\n\nimport { NotificationCountBadge, withProtect } from '../../common';\nimport { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';\nimport { descriptors, Flex, localizationKeys } from '../../customizables';\nimport { RootBox } from '../../elements/RootBox';\nimport { CogFilled } from '../../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';\nimport { OrganizationActionList } from './OtherOrganizationActions';\n\ntype OrganizationSwitcherPopoverProps = { close?: (open: boolean) => void } & PropsOfComponent<typeof PopoverCard.Root>;\n\nexport const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, OrganizationSwitcherPopoverProps>(\n  (props, ref) => {\n    const { close: unsafeClose, ...rest } = props;\n    const close = () => unsafeClose?.(false);\n    const card = useCardState();\n    const { __experimental_asStandalone } = useOrganizationSwitcherContext();\n    const { openOrganizationProfile, openCreateOrganization } = useClerk();\n    const { organization: currentOrg } = useOrganization();\n    const { isLoaded, setActive } = useOrganizationList();\n    const {\n      hidePersonal,\n      createOrganizationMode,\n      organizationProfileMode,\n      afterLeaveOrganizationUrl,\n      afterCreateOrganizationUrl,\n      navigateCreateOrganization,\n      navigateOrganizationProfile,\n      afterSelectOrganizationUrl,\n      afterSelectPersonalUrl,\n\n      organizationProfileProps,\n      skipInvitationScreen,\n    } = useOrganizationSwitcherContext();\n\n    const { user } = useUser();\n\n    if (!user) {\n      return null;\n    }\n\n    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;\n\n    if (!isLoaded) {\n      return null;\n    }\n\n    const handleOrganizationClicked = (organization: OrganizationResource) => {\n      return card\n        .runAsync(() =>\n          setActive({\n            organization,\n            redirectUrl: afterSelectOrganizationUrl(organization),\n          }),\n        )\n        .then(close);\n    };\n\n    const handlePersonalWorkspaceClicked = () => {\n      return card\n        .runAsync(() => setActive({ organization: null, redirectUrl: afterSelectPersonalUrl(user) }))\n        .then(close);\n    };\n\n    const handleCreateOrganizationClicked = () => {\n      close();\n      if (createOrganizationMode === 'navigation') {\n        return navigateCreateOrganization();\n      }\n      return openCreateOrganization({ afterCreateOrganizationUrl, skipInvitationScreen });\n    };\n\n    const handleItemClick = () => {\n      close();\n      if (organizationProfileMode === 'navigation') {\n        return navigateOrganizationProfile();\n      }\n\n      return openOrganizationProfile({\n        ...organizationProfileProps,\n        afterLeaveOrganizationUrl,\n      });\n    };\n\n    const manageOrganizationButton = (\n      <SmallAction\n        elementDescriptor={descriptors.organizationSwitcherPopoverActionButton}\n        elementId={descriptors.organizationSwitcherPopoverActionButton.setId('manageOrganization')}\n        iconBoxElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIconBox}\n        iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('manageOrganization')}\n        iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}\n        iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}\n        icon={CogFilled}\n        label={localizationKeys('organizationSwitcher.action__manageOrganization')}\n        onClick={() => handleItemClick()}\n        trailing={<NotificationCountBadgeManageButton />}\n        focusRing\n      />\n    );\n\n    const selectedOrganizationPreview = (currentOrg: OrganizationResource) => (\n      <Flex\n        justify='between'\n        align='center'\n        sx={t => ({\n          width: '100%',\n          paddingRight: t.space.$5,\n        })}\n      >\n        <OrganizationPreview\n          elementId={'organizationSwitcherActiveOrganization'}\n          organization={currentOrg}\n          user={user}\n          mainIdentifierVariant='buttonLarge'\n          sx={t => ({\n            padding: `${t.space.$4} ${t.space.$5}`,\n          })}\n        />\n        <Actions role='menu'>{manageOrganizationButton}</Actions>\n      </Flex>\n    );\n\n    return (\n      <RootBox elementDescriptor={descriptors.organizationSwitcherPopoverRootBox}>\n        <PopoverCard.Root\n          elementDescriptor={descriptors.organizationSwitcherPopoverCard}\n          ref={ref}\n          role='dialog'\n          aria-label={`${currentOrg?.name} is active`}\n          shouldEntryAnimate={!__experimental_asStandalone}\n          {...rest}\n        >\n          <PopoverCard.Content elementDescriptor={descriptors.organizationSwitcherPopoverMain}>\n            <Actions\n              elementDescriptor={descriptors.organizationSwitcherPopoverActions}\n              role='menu'\n            >\n              {currentOrg\n                ? selectedOrganizationPreview(currentOrg)\n                : !hidePersonal && (\n                    <PersonalWorkspacePreview\n                      user={userWithoutIdentifiers}\n                      sx={t => ({\n                        padding: `${t.space.$4} ${t.space.$5}`,\n                        width: '100%',\n                      })}\n                      title={localizationKeys('organizationSwitcher.personalWorkspace')}\n                    />\n                  )}\n              <OrganizationActionList\n                onCreateOrganizationClick={handleCreateOrganizationClicked}\n                onPersonalWorkspaceClick={handlePersonalWorkspaceClicked}\n                onOrganizationClick={handleOrganizationClicked}\n              />\n            </Actions>\n          </PopoverCard.Content>\n          <PopoverCard.Footer elementDescriptor={descriptors.organizationSwitcherPopoverFooter} />\n        </PopoverCard.Root>\n      </RootBox>\n    );\n  },\n);\n\nconst NotificationCountBadgeManageButton = withProtect(\n  ({ sx }: { sx?: ThemableCssProp }) => {\n    const { organizationSettings } = useEnvironment();\n\n    const isDomainsEnabled = organizationSettings?.domains?.enabled;\n\n    const { membershipRequests } = useOrganization({\n      membershipRequests: isDomainsEnabled || undefined,\n    });\n\n    if (!membershipRequests?.count) {\n      return null;\n    }\n\n    return (\n      <NotificationCountBadge\n        notificationCount={membershipRequests.count}\n        containerSx={sx}\n      />\n    );\n  },\n  {\n    // if the user is not able to accept a request we should not notify them\n    permission: 'org:sys_memberships:manage',\n  },\n);\n"],"mappings":"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"}

package/dist/components/SignIn/AlternativeMethods.js

@@ -44,7 +44,7 @@ const AlternativeMethodsList = (props) => {
 		children: /* @__PURE__ */ jsxs(Card.Root, { children: [/* @__PURE__ */ jsxs(Card.Content, { children: [
 			/* @__PURE__ */ jsxs(Header.Root, {
 				showLogo: true,
-				children: [/* @__PURE__ */ jsx(Header.Title, { localizationKey: cardTitleKey }), !isReset && /* @__PURE__ */ jsx(Header.Subtitle, { localizationKey: localizationKeys("signIn.alternativeMethods.subtitle") })]
+				children: [/* @__PURE__ */ jsx(Header.Title, { localizationKey: cardTitleKey }), !isReset && mode !== "passwordCompromised" && /* @__PURE__ */ jsx(Header.Subtitle, { localizationKey: localizationKeys("signIn.alternativeMethods.subtitle") })]
 			}),
 			/* @__PURE__ */ jsx(Card.Alert, { children: card.error }),
 			/* @__PURE__ */ jsxs(Flex, {
@@ -129,6 +129,7 @@ function determineFlowPart(mode) {
 	switch (mode) {
 		case "forgot": return "forgotPasswordMethods";
 		case "pwned": return "passwordPwnedMethods";
+		case "passwordCompromised": return "passwordCompromisedMethods";
 		default: return "alternativeMethods";
 	}
 }
@@ -136,6 +137,7 @@ function determineTitle(mode) {
 	switch (mode) {
 		case "forgot": return localizationKeys("signIn.forgotPasswordAlternativeMethods.title");
 		case "pwned": return localizationKeys("signIn.passwordPwned.title");
+		case "passwordCompromised": return localizationKeys("signIn.passwordCompromised.title");
 		default: return localizationKeys("signIn.alternativeMethods.title");
 	}
 }
@@ -143,6 +145,7 @@ function determineIsReset(mode) {
 	switch (mode) {
 		case "forgot":
 		case "pwned": return true;
+		case "passwordCompromised": return false;
 		default: return false;
 	}
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AlternativeMethods.js","names":["LinkIcon","Email","ChatAltIcon","RequestAuthIcon","LockClosedIcon","Fingerprint"],"sources":["../../../src/components/SignIn/AlternativeMethods.tsx"],"sourcesContent":["import type { SignInFactor } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { ArrowBlockButton } from '@/ui/elements/ArrowBlockButton';\nimport { BackLink } from '@/ui/elements/BackLink';\nimport { Card } from '@/ui/elements/Card';\nimport { Divider } from '@/ui/elements/Divider';\nimport { Header } from '@/ui/elements/Header';\nimport { formatSafeIdentifier } from '@/ui/utils/formatSafeIdentifier';\n\nimport { useCoreSignIn } from '../../contexts';\nimport type { LocalizationKey } from '../../customizables';\nimport { Button, Col, descriptors, Flex, Flow, localizationKeys } from '../../customizables';\nimport { useCardState } from '../../elements/contexts';\nimport { useAlternativeStrategies } from '../../hooks/useAlternativeStrategies';\nimport { ChatAltIcon, Email, Fingerprint, LinkIcon, LockClosedIcon, RequestAuthIcon } from '../../icons';\nimport { SignInSocialButtons } from './SignInSocialButtons';\nimport { useResetPasswordFactor } from './useResetPasswordFactor';\nimport { withHavingTrouble } from './withHavingTrouble';\n\ntype AlternativeMethodsMode = 'forgot' | 'pwned' | 'default';\n\nexport type AlternativeMethodsProps = {\n  onBackLinkClick: React.MouseEventHandler | undefined;\n  onFactorSelected: (factor: SignInFactor) => void;\n  currentFactor: SignInFactor | undefined | null;\n  mode?: AlternativeMethodsMode;\n};\n\nexport type AlternativeMethodListProps = AlternativeMethodsProps & { onHavingTroubleClick: React.MouseEventHandler };\n\nexport const AlternativeMethods = (props: AlternativeMethodsProps) => {\n  return withHavingTrouble(AlternativeMethodsList, {\n    ...props,\n  });\n};\n\nconst AlternativeMethodsList = (props: AlternativeMethodListProps) => {\n  const { onBackLinkClick, onHavingTroubleClick, onFactorSelected, mode = 'default' } = props;\n  const card = useCardState();\n  const resetPasswordFactor = useResetPasswordFactor();\n  const { supportedFirstFactors } = useCoreSignIn();\n  const { firstPartyFactors, hasAnyStrategy } = useAlternativeStrategies({\n    filterOutFactor: props?.currentFactor,\n    supportedFirstFactors: supportedFirstFactors,\n  });\n\n  const flowPart = determineFlowPart(mode);\n  const cardTitleKey = determineTitle(mode);\n  const isReset = determineIsReset(mode);\n\n  return (\n    <Flow.Part part={flowPart}>\n      <Card.Root>\n        <Card.Content>\n          <Header.Root showLogo>\n            <Header.Title localizationKey={cardTitleKey} />\n            {!isReset && <Header.Subtitle localizationKey={localizationKeys('signIn.alternativeMethods.subtitle')} />}\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={6}\n          >\n            {isReset && resetPasswordFactor && (\n              <Button\n                localizationKey={getButtonLabel(resetPasswordFactor)}\n                elementDescriptor={descriptors.alternativeMethodsBlockButton}\n                isDisabled={card.isLoading}\n                onClick={() => {\n                  card.setError(undefined);\n                  onFactorSelected(resetPasswordFactor);\n                }}\n              />\n            )}\n            {isReset && hasAnyStrategy && (\n              <Divider\n                dividerText={localizationKeys('signIn.forgotPasswordAlternativeMethods.label__alternativeMethods')}\n              />\n            )}\n            <Col gap={4}>\n              {hasAnyStrategy && (\n                <Flex\n                  elementDescriptor={descriptors.alternativeMethods}\n                  direction='col'\n                  gap={2}\n                >\n                  <SignInSocialButtons\n                    enableWeb3Providers\n                    enableOAuthProviders\n                    enableAlternativePhoneCodeProviders={false}\n                  />\n                  {firstPartyFactors &&\n                    firstPartyFactors.map((factor, i) => (\n                      <ArrowBlockButton\n                        leftIcon={getButtonIcon(factor)}\n                        textLocalizationKey={getButtonLabel(factor)}\n                        elementDescriptor={descriptors.alternativeMethodsBlockButton}\n                        textElementDescriptor={descriptors.alternativeMethodsBlockButtonText}\n                        arrowElementDescriptor={descriptors.alternativeMethodsBlockButtonArrow}\n                        key={i}\n                        textVariant='buttonLarge'\n                        isDisabled={card.isLoading}\n                        onClick={() => {\n                          card.setError(undefined);\n                          onFactorSelected(factor);\n                        }}\n                      />\n                    ))}\n                </Flex>\n              )}\n              {onBackLinkClick && (\n                <BackLink\n                  boxElementDescriptor={descriptors.backRow}\n                  linkElementDescriptor={descriptors.backLink}\n                  onClick={onBackLinkClick}\n                />\n              )}\n            </Col>\n          </Flex>\n        </Card.Content>\n\n        <Card.Footer>\n          <Card.Action elementId='havingTrouble'>\n            <Card.ActionText localizationKey={localizationKeys('signIn.alternativeMethods.actionText')} />\n            <Card.ActionLink\n              localizationKey={localizationKeys('signIn.alternativeMethods.actionLink')}\n              onClick={onHavingTroubleClick}\n            />\n          </Card.Action>\n        </Card.Footer>\n      </Card.Root>\n    </Flow.Part>\n  );\n};\n\nexport function getButtonLabel(factor: SignInFactor): LocalizationKey {\n  switch (factor.strategy) {\n    case 'email_link':\n      return localizationKeys('signIn.alternativeMethods.blockButton__emailLink', {\n        identifier: formatSafeIdentifier(factor.safeIdentifier) || '',\n      });\n    case 'email_code':\n      return localizationKeys('signIn.alternativeMethods.blockButton__emailCode', {\n        identifier: formatSafeIdentifier(factor.safeIdentifier) || '',\n      });\n    case 'phone_code':\n      return localizationKeys('signIn.alternativeMethods.blockButton__phoneCode', {\n        identifier: formatSafeIdentifier(factor.safeIdentifier) || '',\n      });\n    case 'password':\n      return localizationKeys('signIn.alternativeMethods.blockButton__password');\n    case 'passkey':\n      return localizationKeys('signIn.alternativeMethods.blockButton__passkey');\n    case 'reset_password_email_code':\n      return localizationKeys('signIn.forgotPasswordAlternativeMethods.blockButton__resetPassword');\n    case 'reset_password_phone_code':\n      return localizationKeys('signIn.forgotPasswordAlternativeMethods.blockButton__resetPassword');\n    default:\n      throw new Error(`Invalid sign in strategy: \"${factor.strategy}\"`);\n  }\n}\n\nexport function getButtonIcon(factor: SignInFactor) {\n  const icons = {\n    email_link: LinkIcon,\n    email_code: Email,\n    phone_code: ChatAltIcon,\n    reset_password_email_code: RequestAuthIcon,\n    reset_password_phone_code: RequestAuthIcon,\n    password: LockClosedIcon,\n    passkey: Fingerprint,\n  } as const;\n\n  return icons[factor.strategy as keyof typeof icons];\n}\n\nfunction determineFlowPart(mode: AlternativeMethodsMode) {\n  switch (mode) {\n    case 'forgot':\n      return 'forgotPasswordMethods';\n    case 'pwned':\n      return 'passwordPwnedMethods';\n    default:\n      return 'alternativeMethods';\n  }\n}\n\nfunction determineTitle(mode: AlternativeMethodsMode): LocalizationKey {\n  switch (mode) {\n    case 'forgot':\n      return localizationKeys('signIn.forgotPasswordAlternativeMethods.title');\n    case 'pwned':\n      return localizationKeys('signIn.passwordPwned.title');\n    default:\n      return localizationKeys('signIn.alternativeMethods.title');\n  }\n}\n\nfunction determineIsReset(mode: AlternativeMethodsMode): boolean {\n  switch (mode) {\n    case 'forgot':\n    case 'pwned':\n      return true;\n    default:\n      return false;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"AlternativeMethods.js","names":["LinkIcon","Email","ChatAltIcon","RequestAuthIcon","LockClosedIcon","Fingerprint"],"sources":["../../../src/components/SignIn/AlternativeMethods.tsx"],"sourcesContent":["import type { SignInFactor } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { ArrowBlockButton } from '@/ui/elements/ArrowBlockButton';\nimport { BackLink } from '@/ui/elements/BackLink';\nimport { Card } from '@/ui/elements/Card';\nimport { Divider } from '@/ui/elements/Divider';\nimport { Header } from '@/ui/elements/Header';\nimport { formatSafeIdentifier } from '@/ui/utils/formatSafeIdentifier';\n\nimport { useCoreSignIn } from '../../contexts';\nimport type { LocalizationKey } from '../../customizables';\nimport { Button, Col, descriptors, Flex, Flow, localizationKeys } from '../../customizables';\nimport { useCardState } from '../../elements/contexts';\nimport { useAlternativeStrategies } from '../../hooks/useAlternativeStrategies';\nimport { ChatAltIcon, Email, Fingerprint, LinkIcon, LockClosedIcon, RequestAuthIcon } from '../../icons';\nimport { SignInSocialButtons } from './SignInSocialButtons';\nimport { useResetPasswordFactor } from './useResetPasswordFactor';\nimport { withHavingTrouble } from './withHavingTrouble';\n\nexport type AlternativeMethodsMode = 'forgot' | 'pwned' | 'passwordCompromised' | 'default';\n\nexport type AlternativeMethodsProps = {\n  onBackLinkClick: React.MouseEventHandler | undefined;\n  onFactorSelected: (factor: SignInFactor) => void;\n  currentFactor: SignInFactor | undefined | null;\n  mode?: AlternativeMethodsMode;\n};\n\nexport type AlternativeMethodListProps = AlternativeMethodsProps & { onHavingTroubleClick: React.MouseEventHandler };\n\nexport const AlternativeMethods = (props: AlternativeMethodsProps) => {\n  return withHavingTrouble(AlternativeMethodsList, {\n    ...props,\n  });\n};\n\nconst AlternativeMethodsList = (props: AlternativeMethodListProps) => {\n  const { onBackLinkClick, onHavingTroubleClick, onFactorSelected, mode = 'default' } = props;\n  const card = useCardState();\n  const resetPasswordFactor = useResetPasswordFactor();\n  const { supportedFirstFactors } = useCoreSignIn();\n  const { firstPartyFactors, hasAnyStrategy } = useAlternativeStrategies({\n    filterOutFactor: props?.currentFactor,\n    supportedFirstFactors: supportedFirstFactors,\n  });\n\n  const flowPart = determineFlowPart(mode);\n  const cardTitleKey = determineTitle(mode);\n  const isReset = determineIsReset(mode);\n\n  return (\n    <Flow.Part part={flowPart}>\n      <Card.Root>\n        <Card.Content>\n          <Header.Root showLogo>\n            <Header.Title localizationKey={cardTitleKey} />\n            {!isReset && mode !== 'passwordCompromised' && (\n              <Header.Subtitle localizationKey={localizationKeys('signIn.alternativeMethods.subtitle')} />\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={6}\n          >\n            {isReset && resetPasswordFactor && (\n              <Button\n                localizationKey={getButtonLabel(resetPasswordFactor)}\n                elementDescriptor={descriptors.alternativeMethodsBlockButton}\n                isDisabled={card.isLoading}\n                onClick={() => {\n                  card.setError(undefined);\n                  onFactorSelected(resetPasswordFactor);\n                }}\n              />\n            )}\n            {isReset && hasAnyStrategy && (\n              <Divider\n                dividerText={localizationKeys('signIn.forgotPasswordAlternativeMethods.label__alternativeMethods')}\n              />\n            )}\n            <Col gap={4}>\n              {hasAnyStrategy && (\n                <Flex\n                  elementDescriptor={descriptors.alternativeMethods}\n                  direction='col'\n                  gap={2}\n                >\n                  <SignInSocialButtons\n                    enableWeb3Providers\n                    enableOAuthProviders\n                    enableAlternativePhoneCodeProviders={false}\n                  />\n                  {firstPartyFactors &&\n                    firstPartyFactors.map((factor, i) => (\n                      <ArrowBlockButton\n                        leftIcon={getButtonIcon(factor)}\n                        textLocalizationKey={getButtonLabel(factor)}\n                        elementDescriptor={descriptors.alternativeMethodsBlockButton}\n                        textElementDescriptor={descriptors.alternativeMethodsBlockButtonText}\n                        arrowElementDescriptor={descriptors.alternativeMethodsBlockButtonArrow}\n                        key={i}\n                        textVariant='buttonLarge'\n                        isDisabled={card.isLoading}\n                        onClick={() => {\n                          card.setError(undefined);\n                          onFactorSelected(factor);\n                        }}\n                      />\n                    ))}\n                </Flex>\n              )}\n              {onBackLinkClick && (\n                <BackLink\n                  boxElementDescriptor={descriptors.backRow}\n                  linkElementDescriptor={descriptors.backLink}\n                  onClick={onBackLinkClick}\n                />\n              )}\n            </Col>\n          </Flex>\n        </Card.Content>\n\n        <Card.Footer>\n          <Card.Action elementId='havingTrouble'>\n            <Card.ActionText localizationKey={localizationKeys('signIn.alternativeMethods.actionText')} />\n            <Card.ActionLink\n              localizationKey={localizationKeys('signIn.alternativeMethods.actionLink')}\n              onClick={onHavingTroubleClick}\n            />\n          </Card.Action>\n        </Card.Footer>\n      </Card.Root>\n    </Flow.Part>\n  );\n};\n\nexport function getButtonLabel(factor: SignInFactor): LocalizationKey {\n  switch (factor.strategy) {\n    case 'email_link':\n      return localizationKeys('signIn.alternativeMethods.blockButton__emailLink', {\n        identifier: formatSafeIdentifier(factor.safeIdentifier) || '',\n      });\n    case 'email_code':\n      return localizationKeys('signIn.alternativeMethods.blockButton__emailCode', {\n        identifier: formatSafeIdentifier(factor.safeIdentifier) || '',\n      });\n    case 'phone_code':\n      return localizationKeys('signIn.alternativeMethods.blockButton__phoneCode', {\n        identifier: formatSafeIdentifier(factor.safeIdentifier) || '',\n      });\n    case 'password':\n      return localizationKeys('signIn.alternativeMethods.blockButton__password');\n    case 'passkey':\n      return localizationKeys('signIn.alternativeMethods.blockButton__passkey');\n    case 'reset_password_email_code':\n      return localizationKeys('signIn.forgotPasswordAlternativeMethods.blockButton__resetPassword');\n    case 'reset_password_phone_code':\n      return localizationKeys('signIn.forgotPasswordAlternativeMethods.blockButton__resetPassword');\n    default:\n      throw new Error(`Invalid sign in strategy: \"${factor.strategy}\"`);\n  }\n}\n\nexport function getButtonIcon(factor: SignInFactor) {\n  const icons = {\n    email_link: LinkIcon,\n    email_code: Email,\n    phone_code: ChatAltIcon,\n    reset_password_email_code: RequestAuthIcon,\n    reset_password_phone_code: RequestAuthIcon,\n    password: LockClosedIcon,\n    passkey: Fingerprint,\n  } as const;\n\n  return icons[factor.strategy as keyof typeof icons];\n}\n\nfunction determineFlowPart(mode: AlternativeMethodsMode) {\n  switch (mode) {\n    case 'forgot':\n      return 'forgotPasswordMethods';\n    case 'pwned':\n      return 'passwordPwnedMethods';\n    case 'passwordCompromised':\n      return 'passwordCompromisedMethods';\n    default:\n      return 'alternativeMethods';\n  }\n}\n\nfunction determineTitle(mode: AlternativeMethodsMode): LocalizationKey {\n  switch (mode) {\n    case 'forgot':\n      return localizationKeys('signIn.forgotPasswordAlternativeMethods.title');\n    case 'pwned':\n      return localizationKeys('signIn.passwordPwned.title');\n    case 'passwordCompromised':\n      return localizationKeys('signIn.passwordCompromised.title');\n    default:\n      return localizationKeys('signIn.alternativeMethods.title');\n  }\n}\n\nfunction determineIsReset(mode: AlternativeMethodsMode): boolean {\n  switch (mode) {\n    case 'forgot':\n    case 'pwned':\n      return true;\n    case 'passwordCompromised':\n      return false;\n    default:\n      return false;\n  }\n}\n"],"mappings":"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"}

package/dist/components/SignIn/SignInFactorOne.js

@@ -32,6 +32,12 @@ const factorKey = (factor) => {
 	if ("channel" in factor) key += factor.channel;
 	return key;
 };
+function determineAlternativeMethodsMode(showForgotPasswordStrategies, passwordErrorCode) {
+	if (!showForgotPasswordStrategies) return "default";
+	if (passwordErrorCode === "pwned") return "pwned";
+	if (passwordErrorCode === "compromised") return "passwordCompromised";
+	return "forgot";
+}
 function SignInFactorOneInternal() {
 	const { __internal_setActiveInProgress } = useClerk();
 	const signIn = useCoreSignIn();
@@ -56,7 +62,7 @@ function SignInFactorOneInternal() {
 	const [showAllStrategies, setShowAllStrategies] = React.useState(() => !currentFactor || !factorHasLocalStrategy(currentFactor));
 	const resetPasswordFactor = useResetPasswordFactor();
 	const [showForgotPasswordStrategies, setShowForgotPasswordStrategies] = React.useState(false);
-	const [isPasswordPwned, setIsPasswordPwned] = React.useState(false);
+	const [passwordErrorCode, setPasswordErrorCode] = React.useState(null);
 	React.useEffect(() => {
 		if (__internal_setActiveInProgress) return;
 		if (signIn.status === "needs_identifier" || signIn.status === null) router.navigate("../");
@@ -87,11 +93,11 @@ function SignInFactorOneInternal() {
 		const toggle = showAllStrategies ? toggleAllStrategies : toggleForgotPasswordStrategies;
 		const backHandler = () => {
 			card.setError(void 0);
-			setIsPasswordPwned(false);
+			setPasswordErrorCode(null);
 			toggle?.();
 		};
 		return /* @__PURE__ */ jsx(AlternativeMethods, {
-			mode: showForgotPasswordStrategies ? isPasswordPwned ? "pwned" : "forgot" : "default",
+			mode: determineAlternativeMethodsMode(showForgotPasswordStrategies, passwordErrorCode),
 			onBackLinkClick: canGoBack ? backHandler : void 0,
 			onFactorSelected: (f) => {
 				selectFactor(f);
@@ -109,8 +115,8 @@ function SignInFactorOneInternal() {
 		case "password": return /* @__PURE__ */ jsx(SignInFactorOnePasswordCard, {
 			onForgotPasswordMethodClick: resetPasswordFactor ? toggleForgotPasswordStrategies : toggleAllStrategies,
 			onShowAlternativeMethodsClick: toggleAllStrategies,
-			onPasswordPwned: () => {
-				setIsPasswordPwned(true);
+			onPasswordError: (errorCode) => {
+				setPasswordErrorCode(errorCode);
 				toggleForgotPasswordStrategies();
 			}
 		});

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

@@ -1 +1 @@
-{"version":3,"file":"SignInFactorOne.js","names":[],"sources":["../../../src/components/SignIn/SignInFactorOne.tsx"],"sourcesContent":["import { useClerk } from '@clerk/shared/react';\nimport type { SignInFactor } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { ErrorCard } from '@/ui/elements/ErrorCard';\nimport { LoadingCard } from '@/ui/elements/LoadingCard';\n\nimport { withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../common';\nimport { useCoreSignIn, useEnvironment } from '../../contexts';\nimport { useAlternativeStrategies } from '../../hooks/useAlternativeStrategies';\nimport { localizationKeys } from '../../localization';\nimport { useRouter } from '../../router';\nimport { AlternativeMethods } from './AlternativeMethods';\nimport { hasMultipleEnterpriseConnections } from './shared';\nimport { SignInFactorOneAlternativePhoneCodeCard } from './SignInFactorOneAlternativePhoneCodeCard';\nimport { SignInFactorOneEmailCodeCard } from './SignInFactorOneEmailCodeCard';\nimport { SignInFactorOneEmailLinkCard } from './SignInFactorOneEmailLinkCard';\nimport { SignInFactorOneEnterpriseConnections } from './SignInFactorOneEnterpriseConnections';\nimport { SignInFactorOneForgotPasswordCard } from './SignInFactorOneForgotPasswordCard';\nimport { SignInFactorOnePasskey } from './SignInFactorOnePasskey';\nimport { SignInFactorOnePasswordCard } from './SignInFactorOnePasswordCard';\nimport { SignInFactorOnePhoneCodeCard } from './SignInFactorOnePhoneCodeCard';\nimport { useResetPasswordFactor } from './useResetPasswordFactor';\nimport { determineStartingSignInFactor, factorHasLocalStrategy } from './utils';\n\nconst factorKey = (factor: SignInFactor | null | undefined) => {\n  if (!factor) {\n    return '';\n  }\n  let key = factor.strategy;\n  if ('emailAddressId' in factor) {\n    key += factor.emailAddressId;\n  }\n  if ('phoneNumberId' in factor) {\n    key += factor.phoneNumberId;\n  }\n  if ('channel' in factor) {\n    key += factor.channel;\n  }\n  return key;\n};\n\nfunction SignInFactorOneInternal(): JSX.Element {\n  const { __internal_setActiveInProgress } = useClerk();\n  const signIn = useCoreSignIn();\n  const { preferredSignInStrategy } = useEnvironment().displayConfig;\n  const availableFactors = signIn.supportedFirstFactors;\n  const router = useRouter();\n  const card = useCardState();\n  const { supportedFirstFactors, firstFactorVerification } = useCoreSignIn();\n\n  const lastPreparedFactorKeyRef = React.useRef('');\n  const [{ currentFactor }, setFactor] = React.useState<{\n    currentFactor: SignInFactor | undefined | null;\n    prevCurrentFactor: SignInFactor | undefined | null;\n  }>(() => {\n    const factor = determineStartingSignInFactor(availableFactors, signIn.identifier, preferredSignInStrategy);\n    if (\n      factor?.strategy === 'phone_code' &&\n      !!firstFactorVerification.channel &&\n      firstFactorVerification.channel !== 'sms'\n    ) {\n      // This is only applied to phone_code with channel that is not 'sms'\n      // because we don't want to send the channel parameter when its value is 'sms'\n      factor.channel = firstFactorVerification.channel;\n    }\n    return {\n      currentFactor: factor,\n      prevCurrentFactor: undefined,\n    };\n  });\n\n  const { hasAnyStrategy } = useAlternativeStrategies({\n    filterOutFactor: currentFactor,\n    supportedFirstFactors,\n  });\n\n  const [showAllStrategies, setShowAllStrategies] = React.useState<boolean>(\n    () => !currentFactor || !factorHasLocalStrategy(currentFactor),\n  );\n\n  const resetPasswordFactor = useResetPasswordFactor();\n\n  const [showForgotPasswordStrategies, setShowForgotPasswordStrategies] = React.useState(false);\n\n  const [isPasswordPwned, setIsPasswordPwned] = React.useState(false);\n\n  React.useEffect(() => {\n    if (__internal_setActiveInProgress) {\n      return;\n    }\n\n    // Handle the case where a user lands on alternative methods screen,\n    // clicks a social button but then navigates back to sign in.\n    // SignIn status resets to 'needs_identifier'\n    if (signIn.status === 'needs_identifier' || signIn.status === null) {\n      void router.navigate('../');\n    }\n  }, [__internal_setActiveInProgress]);\n\n  if (!currentFactor) {\n    return signIn.status ? (\n      <ErrorCard\n        cardTitle={localizationKeys('signIn.noAvailableMethods.title')}\n        cardSubtitle={localizationKeys('signIn.noAvailableMethods.subtitle')}\n        message={localizationKeys('signIn.noAvailableMethods.message')}\n      />\n    ) : (\n      <LoadingCard />\n    );\n  }\n\n  const toggleAllStrategies = hasAnyStrategy ? () => setShowAllStrategies(s => !s) : undefined;\n\n  const toggleForgotPasswordStrategies = () => setShowForgotPasswordStrategies(s => !s);\n\n  const handleFactorPrepare = () => {\n    lastPreparedFactorKeyRef.current = factorKey(currentFactor);\n  };\n  const selectFactor = (factor: SignInFactor) => {\n    setFactor(prev => ({\n      currentFactor: factor,\n      prevCurrentFactor: prev.currentFactor,\n    }));\n  };\n\n  /**\n   * Prompt to choose between a list of enterprise connections as supported first factors\n   * @experimental\n   */\n  if (hasMultipleEnterpriseConnections(signIn.supportedFirstFactors)) {\n    return <SignInFactorOneEnterpriseConnections />;\n  }\n\n  if (showAllStrategies || showForgotPasswordStrategies) {\n    const canGoBack = factorHasLocalStrategy(currentFactor);\n\n    const toggle = showAllStrategies ? toggleAllStrategies : toggleForgotPasswordStrategies;\n    const backHandler = () => {\n      card.setError(undefined);\n      setIsPasswordPwned(false);\n      toggle?.();\n    };\n\n    const mode = showForgotPasswordStrategies ? (isPasswordPwned ? 'pwned' : 'forgot') : 'default';\n\n    return (\n      <AlternativeMethods\n        mode={mode}\n        onBackLinkClick={canGoBack ? backHandler : undefined}\n        onFactorSelected={f => {\n          selectFactor(f);\n          toggle?.();\n        }}\n        currentFactor={currentFactor}\n      />\n    );\n  }\n\n  if (!currentFactor) {\n    return <LoadingCard />;\n  }\n\n  switch (currentFactor?.strategy) {\n    case 'passkey':\n      return (\n        <SignInFactorOnePasskey\n          onFactorPrepare={handleFactorPrepare}\n          onShowAlternativeMethodsClick={toggleAllStrategies}\n        />\n      );\n    case 'password':\n      return (\n        <SignInFactorOnePasswordCard\n          onForgotPasswordMethodClick={resetPasswordFactor ? toggleForgotPasswordStrategies : toggleAllStrategies}\n          onShowAlternativeMethodsClick={toggleAllStrategies}\n          onPasswordPwned={() => {\n            setIsPasswordPwned(true);\n            toggleForgotPasswordStrategies();\n          }}\n        />\n      );\n    case 'email_code':\n      return (\n        <SignInFactorOneEmailCodeCard\n          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    case 'phone_code':\n      if (currentFactor.channel && currentFactor.channel !== 'sms') {\n        // Alternative phone code provider (e.g. WhatsApp)\n        return (\n          <SignInFactorOneAlternativePhoneCodeCard\n            factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}\n            onFactorPrepare={handleFactorPrepare}\n            factor={currentFactor}\n            onChangePhoneCodeChannel={selectFactor}\n          />\n        );\n      } else {\n        // SMS\n        return (\n          <SignInFactorOnePhoneCodeCard\n            factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}\n            onFactorPrepare={handleFactorPrepare}\n            factor={currentFactor}\n            onShowAlternativeMethodsClicked={toggleAllStrategies}\n          />\n        );\n      }\n\n    case 'email_link':\n      return (\n        <SignInFactorOneEmailLinkCard\n          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    case 'reset_password_phone_code':\n      return (\n        <SignInFactorOneForgotPasswordCard\n          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n          onBackLinkClicked={() => {\n            setFactor(prev => ({\n              currentFactor: prev.prevCurrentFactor,\n              prevCurrentFactor: prev.currentFactor,\n            }));\n            toggleForgotPasswordStrategies();\n          }}\n          cardSubtitle={localizationKeys('signIn.forgotPassword.subtitle_phone')}\n        />\n      );\n\n    case 'reset_password_email_code':\n      return (\n        <SignInFactorOneForgotPasswordCard\n          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n          onBackLinkClicked={() => {\n            setFactor(prev => ({\n              currentFactor: prev.prevCurrentFactor,\n              prevCurrentFactor: prev.currentFactor,\n            }));\n            toggleForgotPasswordStrategies();\n          }}\n          cardSubtitle={localizationKeys('signIn.forgotPassword.subtitle_email')}\n        />\n      );\n    default:\n      return <LoadingCard />;\n  }\n}\n\nexport const SignInFactorOne = withRedirectToSignInTask(\n  withRedirectToAfterSignIn(withCardStateProvider(SignInFactorOneInternal)),\n);\n"],"mappings":"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"}
+{"version":3,"file":"SignInFactorOne.js","names":[],"sources":["../../../src/components/SignIn/SignInFactorOne.tsx"],"sourcesContent":["import { useClerk } from '@clerk/shared/react';\nimport type { SignInFactor } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { ErrorCard } from '@/ui/elements/ErrorCard';\nimport { LoadingCard } from '@/ui/elements/LoadingCard';\n\nimport { withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../common';\nimport { useCoreSignIn, useEnvironment } from '../../contexts';\nimport { useAlternativeStrategies } from '../../hooks/useAlternativeStrategies';\nimport { localizationKeys } from '../../localization';\nimport { useRouter } from '../../router';\nimport type { AlternativeMethodsMode } from './AlternativeMethods';\nimport { AlternativeMethods } from './AlternativeMethods';\nimport { hasMultipleEnterpriseConnections } from './shared';\nimport { SignInFactorOneAlternativePhoneCodeCard } from './SignInFactorOneAlternativePhoneCodeCard';\nimport { SignInFactorOneEmailCodeCard } from './SignInFactorOneEmailCodeCard';\nimport { SignInFactorOneEmailLinkCard } from './SignInFactorOneEmailLinkCard';\nimport { SignInFactorOneEnterpriseConnections } from './SignInFactorOneEnterpriseConnections';\nimport { SignInFactorOneForgotPasswordCard } from './SignInFactorOneForgotPasswordCard';\nimport { SignInFactorOnePasskey } from './SignInFactorOnePasskey';\nimport type { PasswordErrorCode } from './SignInFactorOnePasswordCard';\nimport { SignInFactorOnePasswordCard } from './SignInFactorOnePasswordCard';\nimport { SignInFactorOnePhoneCodeCard } from './SignInFactorOnePhoneCodeCard';\nimport { useResetPasswordFactor } from './useResetPasswordFactor';\nimport { determineStartingSignInFactor, factorHasLocalStrategy } from './utils';\n\nconst factorKey = (factor: SignInFactor | null | undefined) => {\n  if (!factor) {\n    return '';\n  }\n  let key = factor.strategy;\n  if ('emailAddressId' in factor) {\n    key += factor.emailAddressId;\n  }\n  if ('phoneNumberId' in factor) {\n    key += factor.phoneNumberId;\n  }\n  if ('channel' in factor) {\n    key += factor.channel;\n  }\n  return key;\n};\n\nfunction determineAlternativeMethodsMode(\n  showForgotPasswordStrategies: boolean,\n  passwordErrorCode: PasswordErrorCode | null,\n): AlternativeMethodsMode {\n  if (!showForgotPasswordStrategies) {\n    return 'default';\n  }\n\n  if (passwordErrorCode === 'pwned') {\n    return 'pwned';\n  }\n\n  if (passwordErrorCode === 'compromised') {\n    return 'passwordCompromised';\n  }\n\n  return 'forgot';\n}\n\nfunction SignInFactorOneInternal(): JSX.Element {\n  const { __internal_setActiveInProgress } = useClerk();\n  const signIn = useCoreSignIn();\n  const { preferredSignInStrategy } = useEnvironment().displayConfig;\n  const availableFactors = signIn.supportedFirstFactors;\n  const router = useRouter();\n  const card = useCardState();\n  const { supportedFirstFactors, firstFactorVerification } = useCoreSignIn();\n\n  const lastPreparedFactorKeyRef = React.useRef('');\n  const [{ currentFactor }, setFactor] = React.useState<{\n    currentFactor: SignInFactor | undefined | null;\n    prevCurrentFactor: SignInFactor | undefined | null;\n  }>(() => {\n    const factor = determineStartingSignInFactor(availableFactors, signIn.identifier, preferredSignInStrategy);\n    if (\n      factor?.strategy === 'phone_code' &&\n      !!firstFactorVerification.channel &&\n      firstFactorVerification.channel !== 'sms'\n    ) {\n      // This is only applied to phone_code with channel that is not 'sms'\n      // because we don't want to send the channel parameter when its value is 'sms'\n      factor.channel = firstFactorVerification.channel;\n    }\n    return {\n      currentFactor: factor,\n      prevCurrentFactor: undefined,\n    };\n  });\n\n  const { hasAnyStrategy } = useAlternativeStrategies({\n    filterOutFactor: currentFactor,\n    supportedFirstFactors,\n  });\n\n  const [showAllStrategies, setShowAllStrategies] = React.useState<boolean>(\n    () => !currentFactor || !factorHasLocalStrategy(currentFactor),\n  );\n\n  const resetPasswordFactor = useResetPasswordFactor();\n\n  const [showForgotPasswordStrategies, setShowForgotPasswordStrategies] = React.useState(false);\n\n  const [passwordErrorCode, setPasswordErrorCode] = React.useState<PasswordErrorCode | null>(null);\n\n  React.useEffect(() => {\n    if (__internal_setActiveInProgress) {\n      return;\n    }\n\n    // Handle the case where a user lands on alternative methods screen,\n    // clicks a social button but then navigates back to sign in.\n    // SignIn status resets to 'needs_identifier'\n    if (signIn.status === 'needs_identifier' || signIn.status === null) {\n      void router.navigate('../');\n    }\n  }, [__internal_setActiveInProgress]);\n\n  if (!currentFactor) {\n    return signIn.status ? (\n      <ErrorCard\n        cardTitle={localizationKeys('signIn.noAvailableMethods.title')}\n        cardSubtitle={localizationKeys('signIn.noAvailableMethods.subtitle')}\n        message={localizationKeys('signIn.noAvailableMethods.message')}\n      />\n    ) : (\n      <LoadingCard />\n    );\n  }\n\n  const toggleAllStrategies = hasAnyStrategy ? () => setShowAllStrategies(s => !s) : undefined;\n\n  const toggleForgotPasswordStrategies = () => setShowForgotPasswordStrategies(s => !s);\n\n  const handleFactorPrepare = () => {\n    lastPreparedFactorKeyRef.current = factorKey(currentFactor);\n  };\n  const selectFactor = (factor: SignInFactor) => {\n    setFactor(prev => ({\n      currentFactor: factor,\n      prevCurrentFactor: prev.currentFactor,\n    }));\n  };\n\n  /**\n   * Prompt to choose between a list of enterprise connections as supported first factors\n   * @experimental\n   */\n  if (hasMultipleEnterpriseConnections(signIn.supportedFirstFactors)) {\n    return <SignInFactorOneEnterpriseConnections />;\n  }\n\n  if (showAllStrategies || showForgotPasswordStrategies) {\n    const canGoBack = factorHasLocalStrategy(currentFactor);\n\n    const toggle = showAllStrategies ? toggleAllStrategies : toggleForgotPasswordStrategies;\n    const backHandler = () => {\n      card.setError(undefined);\n      setPasswordErrorCode(null);\n      toggle?.();\n    };\n\n    const mode = determineAlternativeMethodsMode(showForgotPasswordStrategies, passwordErrorCode);\n\n    return (\n      <AlternativeMethods\n        mode={mode}\n        onBackLinkClick={canGoBack ? backHandler : undefined}\n        onFactorSelected={f => {\n          selectFactor(f);\n          toggle?.();\n        }}\n        currentFactor={currentFactor}\n      />\n    );\n  }\n\n  if (!currentFactor) {\n    return <LoadingCard />;\n  }\n\n  switch (currentFactor?.strategy) {\n    case 'passkey':\n      return (\n        <SignInFactorOnePasskey\n          onFactorPrepare={handleFactorPrepare}\n          onShowAlternativeMethodsClick={toggleAllStrategies}\n        />\n      );\n    case 'password':\n      return (\n        <SignInFactorOnePasswordCard\n          onForgotPasswordMethodClick={resetPasswordFactor ? toggleForgotPasswordStrategies : toggleAllStrategies}\n          onShowAlternativeMethodsClick={toggleAllStrategies}\n          onPasswordError={errorCode => {\n            setPasswordErrorCode(errorCode);\n            toggleForgotPasswordStrategies();\n          }}\n        />\n      );\n    case 'email_code':\n      return (\n        <SignInFactorOneEmailCodeCard\n          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    case 'phone_code':\n      if (currentFactor.channel && currentFactor.channel !== 'sms') {\n        // Alternative phone code provider (e.g. WhatsApp)\n        return (\n          <SignInFactorOneAlternativePhoneCodeCard\n            factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}\n            onFactorPrepare={handleFactorPrepare}\n            factor={currentFactor}\n            onChangePhoneCodeChannel={selectFactor}\n          />\n        );\n      } else {\n        // SMS\n        return (\n          <SignInFactorOnePhoneCodeCard\n            factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}\n            onFactorPrepare={handleFactorPrepare}\n            factor={currentFactor}\n            onShowAlternativeMethodsClicked={toggleAllStrategies}\n          />\n        );\n      }\n\n    case 'email_link':\n      return (\n        <SignInFactorOneEmailLinkCard\n          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    case 'reset_password_phone_code':\n      return (\n        <SignInFactorOneForgotPasswordCard\n          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n          onBackLinkClicked={() => {\n            setFactor(prev => ({\n              currentFactor: prev.prevCurrentFactor,\n              prevCurrentFactor: prev.currentFactor,\n            }));\n            toggleForgotPasswordStrategies();\n          }}\n          cardSubtitle={localizationKeys('signIn.forgotPassword.subtitle_phone')}\n        />\n      );\n\n    case 'reset_password_email_code':\n      return (\n        <SignInFactorOneForgotPasswordCard\n          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n          onBackLinkClicked={() => {\n            setFactor(prev => ({\n              currentFactor: prev.prevCurrentFactor,\n              prevCurrentFactor: prev.currentFactor,\n            }));\n            toggleForgotPasswordStrategies();\n          }}\n          cardSubtitle={localizationKeys('signIn.forgotPassword.subtitle_email')}\n        />\n      );\n    default:\n      return <LoadingCard />;\n  }\n}\n\nexport const SignInFactorOne = withRedirectToSignInTask(\n  withRedirectToAfterSignIn(withCardStateProvider(SignInFactorOneInternal)),\n);\n"],"mappings":"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"}

package/dist/components/SignIn/SignInFactorOnePasswordCard.js

@@ -18,7 +18,7 @@ import { HavingTrouble } from "./HavingTrouble.js";
 import { clerkInvalidFAPIResponse } from "@clerk/shared/internal/clerk-js/errors";
 import React from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import { isPasswordPwnedError, isUserLockedError } from "@clerk/shared/error";
+import { isPasswordCompromisedError, isPasswordPwnedError, isUserLockedError } from "@clerk/shared/error";
 import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignIn/SignInFactorOnePasswordCard.tsx
@@ -40,7 +40,7 @@ const usePasswordControl = (props) => {
 	};
 };
 const SignInFactorOnePasswordCard = (props) => {
-	const { onShowAlternativeMethodsClick, onPasswordPwned } = props;
+	const { onShowAlternativeMethodsClick, onPasswordError } = props;
 	const passwordInputRef = React.useRef(null);
 	const card = useCardState();
 	const { setActive } = useClerk();
@@ -53,19 +53,19 @@ const SignInFactorOnePasswordCard = (props) => {
 	const toggleHavingTrouble = React.useCallback(() => setShowHavingTrouble((s) => !s), [setShowHavingTrouble]);
 	const clerk = useClerk();
 	const goBack = () => {
-		return navigate("../");
+		navigate("../");
 	};
-	const handlePasswordSubmit = async (e) => {
+	const handlePasswordSubmit = (e) => {
 		e.preventDefault();
-		return signIn.attemptFirstFactor({
+		signIn.attemptFirstFactor({
 			strategy: "password",
 			password: passwordControl.value
 		}).then((res) => {
 			switch (res.status) {
 				case "complete": return setActive({
 					session: res.createdSessionId,
-					navigate: async ({ session }) => {
-						await navigateOnSetActive({
+					navigate: ({ session }) => {
+						navigateOnSetActive({
 							session,
 							redirectUrl: afterSignInUrl
 						});
@@ -76,13 +76,23 @@ const SignInFactorOnePasswordCard = (props) => {
 			}
 		}).catch((err) => {
 			if (isUserLockedError(err)) return clerk.__internal_navigateWithError("..", err.errors[0]);
-			if (isPasswordPwnedError(err) && onPasswordPwned) {
-				card.setError({
-					...err.errors[0],
-					code: "form_password_pwned__sign_in"
-				});
-				onPasswordPwned();
-				return;
+			if (onPasswordError) {
+				if (isPasswordPwnedError(err)) {
+					card.setError({
+						...err.errors[0],
+						code: "form_password_pwned__sign_in"
+					});
+					onPasswordError("pwned");
+					return;
+				}
+				if (isPasswordCompromisedError(err)) {
+					card.setError({
+						...err.errors[0],
+						code: "form_password_compromised__sign_in"
+					});
+					onPasswordError("compromised");
+					return;
+				}
 			}
 			handleError(err, [passwordControl], card.setError);
 			setTimeout(() => passwordInputRef.current?.focus(), 0);

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

@@ -1 +1 @@
-{"version":3,"file":"SignInFactorOnePasswordCard.js","names":["handlePasswordSubmit: React.FormEventHandler"],"sources":["../../../src/components/SignIn/SignInFactorOnePasswordCard.tsx"],"sourcesContent":["import { 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\ntype SignInFactorOnePasswordProps = {\n  onForgotPasswordMethodClick: React.MouseEventHandler | undefined;\n  onShowAlternativeMethodsClick: React.MouseEventHandler | undefined;\n  onPasswordPwned?: () => 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, onPasswordPwned } = 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    return navigate('../');\n  };\n\n  const handlePasswordSubmit: React.FormEventHandler = async e => {\n    e.preventDefault();\n    return 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: async ({ session }) => {\n                await 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 (isPasswordPwnedError(err) && onPasswordPwned) {\n          card.setError({ ...err.errors[0], code: 'form_password_pwned__sign_in' });\n          onPasswordPwned();\n          return;\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                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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"}

package/dist/components/SignIn/SignInFactorTwoCodeForm.js

@@ -1,4 +1,5 @@
 import { useRouter } from "../../router/RouteContext.js";
+import { useEnvironment } from "../../contexts/EnvironmentContext.js";
 import { localizationKeys } from "../../localization/localizationKeys.js";
 import { useSignInContext } from "../../contexts/components/SignIn.js";
 import { useCoreSignIn } from "../../contexts/CoreClientContext.js";
@@ -9,15 +10,15 @@ import { useSupportEmail } from "../../hooks/useSupportEmail.js";
 import { isResetPasswordStrategy } from "./utils.js";
 import { VerificationCodeCard } from "../../elements/VerificationCodeCard.js";
 import { clerkInvalidFAPIResponse } from "@clerk/shared/internal/clerk-js/errors";
-import React from "react";
+import React, { useMemo } from "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";
-const isNewDevice = (resource) => resource.clientTrustState === "new";
 const SignInFactorTwoCodeForm = (props) => {
+	const env = useEnvironment();
 	const signIn = useCoreSignIn();
 	const card = useCardState();
 	const { afterSignInUrl, navigateOnSetActive } = useSignInContext();
@@ -25,6 +26,10 @@ const SignInFactorTwoCodeForm = (props) => {
 	const { navigate } = useRouter();
 	const supportEmail = useSupportEmail();
 	const clerk = useClerk();
+	const showNewDeviceVerificationNotice = useMemo(() => {
+		const anyAttributeUsedForSecondFactor = Object.values(env.userSettings.attributes).some((attr) => attr.used_for_second_factor);
+		return signIn.clientTrustState === "new" && !anyAttributeUsedForSecondFactor;
+	}, [signIn.clientTrustState, env.userSettings.attributes]);
 	React.useEffect(() => {
 		if (props.factorAlreadyPrepared) return;
 		prepare?.();
@@ -67,7 +72,7 @@ const SignInFactorTwoCodeForm = (props) => {
 	return /* @__PURE__ */ jsx(VerificationCodeCard, {
 		cardTitle: props.cardTitle,
 		cardSubtitle: isResettingPassword(signIn) ? localizationKeys("signIn.forgotPassword.subtitle") : props.cardSubtitle,
-		cardNotice: isNewDevice(signIn) ? localizationKeys("signIn.newDeviceVerificationNotice") : void 0,
+		cardNotice: 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 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, 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\nconst isNewDevice = (resource: SignInResource) => resource.clientTrustState === 'new';\n\nexport const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) => {\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  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={isNewDevice(signIn) ? 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,MAAM,eAAe,aAA6B,SAAS,qBAAqB;AAEhF,MAAa,2BAA2B,UAAwC;CAC9E,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;AAExB,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,YAAY,OAAO,GAAG,iBAAiB,qCAAqC,GAAG;EAC3F,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  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"}

package/dist/components/SignIn/SignInSocialButtons.js

@@ -9,7 +9,9 @@ import { originPrefersPopup } from "../../utils/originPrefersPopup.js";
 import { web3CallbackErrorHandler } from "../../utils/web3CallbackErrorHandler.js";
 import { SocialButtons } from "../../elements/SocialButtons.js";
 import React from "react";
+import { ERROR_CODES } from "@clerk/shared/internal/clerk-js/constants";
 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
@@ -24,6 +26,20 @@ const SignInSocialButtons = React.memo((props) => {
 	const redirectUrlComplete = ctx.afterSignInUrl || "/";
 	const shouldUsePopup = ctx.oauthFlow === "popup" || ctx.oauthFlow === "auto" && originPrefersPopup();
 	const { onAlternativePhoneCodeProviderClick,...rest } = props;
+	const handleError$1 = (err) => {
+		if (isClerkAPIResponseError(err)) {
+			if (err.errors.find((e) => e.code === ERROR_CODES.SESSION_EXISTS)) return clerk.setActive({
+				session: clerk.client.lastActiveSessionId,
+				navigate: async ({ session }) => {
+					await ctx.navigateOnSetActive({
+						session,
+						redirectUrl: ctx.afterSignInUrl
+					});
+				}
+			});
+		}
+		return handleError(err, [], card.setError);
+	};
 	return /* @__PURE__ */ jsx(SocialButtons, {
 		...rest,
 		showLastAuthenticationStrategy: true,
@@ -43,14 +59,14 @@ const SignInSocialButtons = React.memo((props) => {
 					redirectUrlComplete,
 					popup,
 					oidcPrompt: ctx.oidcPrompt
-				}).catch((err) => handleError(err, [], card.setError));
+				}).catch((err) => handleError$1(err));
 			}
 			return signIn.authenticateWithRedirect({
 				strategy,
 				redirectUrl,
 				redirectUrlComplete,
 				oidcPrompt: ctx.oidcPrompt
-			}).catch((err) => handleError(err, [], card.setError));
+			}).catch((err) => handleError$1(err));
 		},
 		web3Callback: (strategy) => {
 			return clerk.authenticateWithWeb3({