{"version":3,"sources":["../../../src/react/sign-up/index.ts","../../../src/react/sign-up/root.tsx","../../../src/internals/machines/sign-up/continue.machine.ts","../../../src/internals/machines/sign-up/utils/fields-to-params.ts","../../../src/internals/machines/sign-up/router.machine.ts","../../../src/internals/machines/sign-up/start.machine.ts","../../../src/internals/machines/sign-up/verification.machine.ts","../../../src/internals/machines/sign-up/verification.types.ts","../../../src/react/sign-up/action/action.tsx","../../../src/react/sign-up/action/navigate.tsx","../../../src/react/sign-up/action/resend.tsx","../../../src/react/sign-up/captcha.tsx"],"sourcesContent":["// Mark as a client-only package. This will error if you try to import it in a React Server Component.\nimport 'client-only';\n\nexport { SignUpRoot as SignUp, SignUpRoot as Root } from './root';\nexport { SignUpStep as Step } from './step';\nexport { SignUpAction as Action } from './action';\nexport { SignUpStrategy as Strategy } from './verifications';\nexport { SignUpCaptcha as Captcha } from './captcha';\n","import { useClerk } from '@clerk/shared/react';\nimport { eventComponentMounted } from '@clerk/shared/telemetry';\nimport { useSelector } from '@xstate/react';\nimport { useEffect } from 'react';\nimport { createActor } from 'xstate';\n\nimport { ROUTING, SIGN_IN_DEFAULT_BASE_PATH, SIGN_UP_DEFAULT_BASE_PATH } from '~/internals/constants';\nimport { FormStoreProvider, useFormStore } from '~/internals/machines/form/form.context';\nimport type { SignUpRouterInitEvent } from '~/internals/machines/sign-up';\nimport { SignUpRouterMachine } from '~/internals/machines/sign-up';\nimport { inspect } from '~/internals/utils/inspector';\nimport { ClerkHostRouterContext, Router, useClerkRouter, useNextRouter, useVirtualRouter } from '~/react/router';\nimport { SignUpRouterCtx } from '~/react/sign-up/context';\n\nimport { Form } from '../common/form';\n\ntype SignUpFlowProviderProps = {\n children: React.ReactNode;\n exampleMode?: boolean;\n /**\n * Fallback markup to render while Clerk is loading\n */\n fallback?: React.ReactNode;\n isRootPath: boolean;\n};\n\nconst actor = createActor(SignUpRouterMachine, { inspect });\nactor.start();\n\nfunction SignUpFlowProvider({ children, exampleMode, fallback, isRootPath }: SignUpFlowProviderProps) {\n const clerk = useClerk();\n const router = useClerkRouter();\n const formRef = useFormStore();\n const isReady = useSelector(actor, state => state.value !== 'Idle');\n\n useEffect(() => {\n if (!clerk || !router) {\n return;\n }\n\n const cb = () => {\n const evt: SignUpRouterInitEvent = {\n type: 'INIT',\n // @ts-expect-error - ignore error for now\n clerk,\n exampleMode,\n formRef,\n router,\n signInPath: SIGN_IN_DEFAULT_BASE_PATH,\n };\n\n if (actor.getSnapshot().can(evt)) {\n actor.send(evt);\n }\n\n // Ensure that the latest instantiated formRef is attached to the router\n if (formRef && actor.getSnapshot().can({ type: 'RESET.STEP' })) {\n actor.send({\n type: 'FORM.ATTACH',\n formRef,\n });\n }\n };\n\n if ('addOnLoaded' in clerk) {\n // @ts-expect-error - addOnLoaded doesn't exist on the clerk type, but it does on IsomorphicClerk, which can be hit when Elements is used standalone\n clerk.addOnLoaded(cb);\n } else {\n cb();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [clerk, exampleMode, formRef?.id, !!router, clerk.loaded]);\n\n return (\n \n {isRootPath && !isReady && fallback ?
{fallback}
: null}\n {clerk.loaded && isReady ? children : null}\n \n );\n}\n\nexport type SignUpRootProps = Omit & {\n /**\n * The base path for your sign-up route.\n * Will be automatically inferred in Next.js.\n * @example `/sign-up`\n */\n path?: string;\n /**\n * If you want to render Clerk Elements in e.g. a modal, use the `virtual` routing mode.\n */\n routing?: ROUTING;\n};\n\n/**\n * Root component for the sign-up flow. It sets up providers and state management for its children.\n * Must wrap all sign-up related components.\n *\n * @param {string} path - The root path the sign-up flow is mounted at. Will be automatically inferred in Next.js. You can set it to `/sign-up` for example.\n * @param {React.ReactNode} fallback - Fallback markup to render while Clerk is loading. Default: `null`\n * @param {string} routing - If you want to render Clerk Elements in e.g. a modal, use the `'virtual'` routing mode. Default: `'path'`\n *\n * @example\n * import * as SignUp from \"@clerk/elements/sign-up\"\n *\n * export default SignUpPage = () => (\n * \n * \n * )\n */\nexport function SignUpRoot({\n children,\n exampleMode = false,\n fallback = null,\n path: pathProp,\n routing = ROUTING.path,\n}: SignUpRootProps): JSX.Element | null {\n const clerk = useClerk();\n const router = (routing === ROUTING.virtual ? useVirtualRouter : useNextRouter)();\n const pathname = router.pathname();\n const inferredPath = router.inferredBasePath?.();\n const path = pathProp || inferredPath || SIGN_UP_DEFAULT_BASE_PATH;\n const isRootPath = path === pathname;\n\n clerk.telemetry?.record(\n eventComponentMounted('Elements_SignUpRoot', {\n exampleMode,\n fallback: Boolean(fallback),\n path,\n routing,\n }),\n );\n\n return (\n \n \n \n \n {children}\n \n \n \n \n );\n}\n","import { snakeToCamel } from '@clerk/shared/underscore';\nimport type { SignUpResource } from '@clerk/types';\nimport type { DoneActorEvent } from 'xstate';\nimport { fromPromise, not, or, setup } from 'xstate';\n\nimport { SIGN_UP_DEFAULT_BASE_PATH } from '~/internals/constants';\nimport type { FormDefaultValues, FormFields } from '~/internals/machines/form';\nimport { sendToLoading } from '~/internals/machines/shared';\nimport { fieldsToSignUpParams } from '~/internals/machines/sign-up/utils';\nimport { assertActorEventError } from '~/internals/machines/utils/assert';\n\nimport type { SignUpContinueSchema } from './continue.types';\nimport type { SignInRouterMachineActorRef } from './router.types';\n\nexport type TSignUpContinueMachine = typeof SignUpContinueMachine;\n\nexport const SignUpContinueMachineId = 'SignUpContinue';\n\nexport const SignUpContinueMachine = setup({\n actors: {\n attempt: fromPromise(\n ({ input: { fields, parent } }) => {\n const params = fieldsToSignUpParams(fields);\n return parent.getSnapshot().context.clerk.client.signUp.update(params);\n },\n ),\n },\n actions: {\n setFormErrors: ({ context, event }) => {\n assertActorEventError(event);\n context.formRef.send({\n type: 'ERRORS.SET',\n error: event.error,\n });\n },\n markFormAsProgressive: ({ context }) => {\n const signUp = context.parent.getSnapshot().context.clerk.client.signUp;\n\n const missing = signUp.missingFields.map(snakeToCamel);\n const optional = signUp.optionalFields.map(snakeToCamel);\n const required = signUp.requiredFields.map(snakeToCamel);\n\n const progressiveFieldValues: FormDefaultValues = new Map();\n\n for (const key of required.concat(optional) as (keyof SignUpResource)[]) {\n if (key in signUp) {\n progressiveFieldValues.set(key, signUp[key] as string | number | readonly string[] | undefined);\n }\n }\n\n context.formRef.send({\n type: 'MARK_AS_PROGRESSIVE',\n missing,\n optional,\n required,\n defaultValues: progressiveFieldValues,\n });\n },\n unmarkFormAsProgressive: ({ context }) => context.formRef.send({ type: 'UNMARK_AS_PROGRESSIVE' }),\n sendToNext: ({ context, event }) =>\n context.parent.send({ type: 'NEXT', resource: (event as unknown as DoneActorEvent).output }),\n sendToLoading,\n },\n guards: {\n isStatusMissingRequirements: ({ context }) =>\n context.parent.getSnapshot().context.clerk?.client?.signUp?.status === 'missing_requirements',\n hasMetPreviousMissingRequirements: ({ context }) => {\n const signUp = context.parent.getSnapshot().context.clerk.client.signUp;\n\n const fields = context.formRef.getSnapshot().context.fields;\n const signUpMissingFields = signUp.missingFields.map(snakeToCamel);\n const missingFields = Array.from(context.formRef.getSnapshot().context.fields.keys()).filter(key => {\n return !signUpMissingFields.includes(key) && !fields.get(key)?.value && !fields.get(key)?.checked;\n });\n\n return missingFields.length === 0;\n },\n },\n types: {} as SignUpContinueSchema,\n}).createMachine({\n id: SignUpContinueMachineId,\n context: ({ input }) => ({\n basePath: input.basePath || SIGN_UP_DEFAULT_BASE_PATH,\n formRef: input.formRef,\n parent: input.parent,\n loadingStep: 'continue',\n }),\n entry: 'markFormAsProgressive',\n onDone: {\n actions: 'unmarkFormAsProgressive',\n },\n initial: 'Pending',\n states: {\n Pending: {\n tags: ['state:pending'],\n description: 'Waiting for user input',\n on: {\n SUBMIT: {\n guard: or(['hasMetPreviousMissingRequirements', not('isStatusMissingRequirements')]),\n target: 'Attempting',\n reenter: true,\n },\n },\n },\n Attempting: {\n tags: ['state:attempting', 'state:loading'],\n entry: 'sendToLoading',\n invoke: {\n id: 'attempt',\n src: 'attempt',\n input: ({ context }) => ({\n parent: context.parent,\n fields: context.formRef.getSnapshot().context.fields,\n }),\n onDone: {\n actions: ['sendToNext', 'sendToLoading'],\n },\n onError: {\n actions: ['setFormErrors', 'sendToLoading'],\n target: 'Pending',\n },\n },\n },\n },\n});\n","import type { SignUpCreateParams, SignUpUpdateParams } from '@clerk/types';\n\nimport type { FormFields } from '~/internals/machines/form';\n\nconst SignUpAdditionalKeys = [\n 'firstName',\n 'lastName',\n 'emailAddress',\n 'username',\n 'password',\n 'phoneNumber',\n 'legalAccepted',\n] as const;\n\ntype SignUpAdditionalKeys = (typeof SignUpAdditionalKeys)[number];\n\nconst signUpKeys = new Set(SignUpAdditionalKeys);\n\nfunction isSignUpParam(key: string): key is T {\n return signUpKeys.has(key as T);\n}\n\nexport function fieldsToSignUpParams(\n fields: FormFields,\n): Pick {\n const params: SignUpUpdateParams = {};\n\n fields.forEach(({ value, checked, type }, key) => {\n if (isSignUpParam(key) && value !== undefined && type !== 'checkbox') {\n // @ts-expect-error - Type is not narrowed to string\n params[key] = value as string;\n }\n\n if (isSignUpParam(key) && checked !== undefined && type === 'checkbox') {\n // @ts-expect-error - Type is not narrowed to boolean\n params[key] = checked;\n }\n });\n\n return params;\n}\n","import { joinURL } from '@clerk/shared/url';\nimport type { SignUpStatus, VerificationStatus } from '@clerk/types';\nimport type { NonReducibleUnknown } from 'xstate';\nimport { and, assign, enqueueActions, log, not, or, raise, sendTo, setup } from 'xstate';\n\nimport {\n ERROR_CODES,\n ROUTING,\n SEARCH_PARAMS,\n SIGN_IN_DEFAULT_BASE_PATH,\n SIGN_UP_DEFAULT_BASE_PATH,\n SIGN_UP_MODES,\n SSO_CALLBACK_PATH_ROUTE,\n} from '~/internals/constants';\nimport { ClerkElementsError, ClerkElementsRuntimeError } from '~/internals/errors';\nimport { ThirdPartyMachine, ThirdPartyMachineId } from '~/internals/machines/third-party';\nimport { shouldUseVirtualRouting } from '~/internals/machines/utils/next';\n\nimport { SignUpContinueMachine } from './continue.machine';\nimport type {\n SignUpRouterContext,\n SignUpRouterEvents,\n SignUpRouterNextEvent,\n SignUpRouterSchema,\n} from './router.types';\nimport { SignUpStartMachine } from './start.machine';\nimport { SignUpVerificationMachine } from './verification.machine';\n\nexport const SignUpRouterMachineId = 'SignUpRouter';\nexport type TSignUpRouterMachine = typeof SignUpRouterMachine;\n\nconst isCurrentPath =\n (path: `/${string}`) =>\n ({ context }: { context: SignUpRouterContext }, _params?: NonReducibleUnknown) =>\n context.router?.match(path) ?? false;\n\nconst needsStatus =\n (status: SignUpStatus) =>\n ({ context, event }: { context: SignUpRouterContext; event?: SignUpRouterEvents }, _?: NonReducibleUnknown) =>\n (event as SignUpRouterNextEvent)?.resource?.status === status || context.clerk?.client?.signUp?.status === status;\n\nexport const SignUpRouterMachine = setup({\n actors: {\n continueMachine: SignUpContinueMachine,\n startMachine: SignUpStartMachine,\n thirdPartyMachine: ThirdPartyMachine,\n verificationMachine: SignUpVerificationMachine,\n },\n actions: {\n clearFormErrors: sendTo(({ context }) => context.formRef, { type: 'ERRORS.CLEAR' }),\n logUnknownError: snapshot => console.error('Unknown error:', snapshot),\n navigateInternal: ({ context }, { path, force = false }: { path: string; force?: boolean }) => {\n if (!context.router) {\n return;\n }\n if (!force && shouldUseVirtualRouting()) {\n return;\n }\n if (context.exampleMode) {\n return;\n }\n\n const resolvedPath = joinURL(context.router.basePath, path);\n if (resolvedPath === context.router.pathname()) {\n return;\n }\n\n context.router.shallowPush(resolvedPath);\n },\n navigateExternal: ({ context }, { path }: { path: string }) => context.router?.push(path),\n raiseNext: raise({ type: 'NEXT' }),\n setActive: ({ context, event }, params?: { sessionId?: string; useLastActiveSession?: boolean }) => {\n if (context.exampleMode) {\n return;\n }\n\n const session =\n params?.sessionId ||\n (params?.useLastActiveSession && context.clerk.client.lastActiveSessionId) ||\n ((event as SignUpRouterNextEvent)?.resource || context.clerk.client.signUp).createdSessionId;\n\n void context.clerk.setActive({\n session,\n redirectUrl: context.clerk.buildAfterSignUpUrl({\n params: context.router?.searchParams(),\n }),\n });\n },\n delayedReset: raise({ type: 'RESET' }, { delay: 3000 }), // Reset machine after 3s delay.\n setError: assign({\n error: (_, { error }: { error?: ClerkElementsError }) => {\n if (error) {\n return error;\n }\n return new ClerkElementsRuntimeError('Unknown error');\n },\n }),\n setFormOAuthErrors: ({ context }) => {\n const errorOrig = context.clerk.client.signIn.firstFactorVerification.error;\n\n if (!errorOrig) {\n return;\n }\n\n let error: ClerkElementsError;\n\n switch (errorOrig.code) {\n case ERROR_CODES.NOT_ALLOWED_TO_SIGN_UP:\n case ERROR_CODES.OAUTH_ACCESS_DENIED:\n case ERROR_CODES.NOT_ALLOWED_ACCESS:\n case ERROR_CODES.SAML_USER_ATTRIBUTE_MISSING:\n case ERROR_CODES.OAUTH_EMAIL_DOMAIN_RESERVED_BY_SAML:\n case ERROR_CODES.USER_LOCKED:\n case ERROR_CODES.ENTERPRISE_SSO_USER_ATTRIBUTE_MISSING:\n case ERROR_CODES.ENTERPRISE_SSO_EMAIL_ADDRESS_DOMAIN_MISMATCH:\n case ERROR_CODES.ENTERPRISE_SSO_HOSTED_DOMAIN_MISMATCH:\n case ERROR_CODES.SAML_EMAIL_ADDRESS_DOMAIN_MISMATCH:\n case ERROR_CODES.ORGANIZATION_MEMBERSHIP_QUOTA_EXCEEDED_FOR_SSO:\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n error = new ClerkElementsError(errorOrig.code, errorOrig.longMessage!);\n break;\n default:\n error = new ClerkElementsError(\n 'unable_to_complete',\n 'Unable to complete action at this time. If the problem persists please contact support.',\n );\n }\n\n context.formRef.send({\n type: 'ERRORS.SET',\n error,\n });\n },\n transfer: ({ context }) => context.router?.push(context.clerk.buildSignInUrl()),\n },\n guards: {\n areFieldsMissing: ({ context }) => context.clerk?.client?.signUp?.missingFields?.length > 0,\n areFieldsUnverified: ({ context }) => context.clerk?.client?.signUp?.unverifiedFields?.length > 0,\n\n hasAuthenticatedViaClerkJS: ({ context }) =>\n Boolean(context.clerk.client.signUp.status === null && context.clerk.client.lastActiveSessionId),\n hasCreatedSession: ({ context }) => Boolean(context.router?.searchParams().get(SEARCH_PARAMS.createdSession)),\n hasClerkStatus: ({ context }, params?: { status: VerificationStatus }) => {\n const value = context.router?.searchParams().get(SEARCH_PARAMS.status);\n if (!params) {\n return Boolean(value);\n }\n return value === params.status;\n },\n hasClerkTransfer: ({ context }) => Boolean(context.router?.searchParams().get(SEARCH_PARAMS.transfer)),\n hasResource: ({ context }) => Boolean(context.clerk.client.signUp),\n hasTicket: ({ context }) => Boolean(context.ticket),\n\n isLoggedInAndSingleSession: and(['isLoggedIn', 'isSingleSessionMode', not('isExampleMode')]),\n isStatusAbandoned: needsStatus('abandoned'),\n isStatusComplete: ({ context, event }) => {\n const resource = (event as SignUpRouterNextEvent)?.resource;\n const signUp = context.clerk?.client?.signUp;\n\n return (\n (resource?.status === 'complete' && Boolean(resource?.createdSessionId)) ||\n (signUp?.status === 'complete' && Boolean(signUp?.createdSessionId))\n );\n },\n isStatusMissingRequirements: needsStatus('missing_requirements'),\n\n isLoggedIn: or(['isStatusComplete', ({ context }) => Boolean(context.clerk.user)]),\n isSingleSessionMode: ({ context }) => Boolean(context.clerk?.__unstable__environment?.authConfig.singleSessionMode),\n isRestricted: ({ context }) =>\n context.clerk?.__unstable__environment?.userSettings.signUp.mode === SIGN_UP_MODES.RESTRICTED,\n isRestrictedWithoutTicket: and(['isRestricted', not('hasTicket')]),\n isExampleMode: ({ context }) => Boolean(context.exampleMode),\n isMissingRequiredFields: and(['isStatusMissingRequirements', 'areFieldsMissing']),\n isMissingRequiredUnverifiedFields: and(['isStatusMissingRequirements', 'areFieldsUnverified']),\n\n needsIdentifier: or(['statusNeedsIdentifier', isCurrentPath('/')]),\n needsContinue: and(['statusNeedsContinue', isCurrentPath('/continue')]),\n needsVerification: and(['statusNeedsVerification', isCurrentPath('/verify')]),\n needsCallback: isCurrentPath(SSO_CALLBACK_PATH_ROUTE),\n\n statusNeedsIdentifier: or([not('hasResource'), 'isStatusAbandoned']),\n statusNeedsContinue: or(['isMissingRequiredFields']),\n statusNeedsVerification: or(['isMissingRequiredUnverifiedFields', and(['areFieldsMissing', 'hasClerkStatus'])]),\n },\n delays: {\n 'TIMEOUT.POLLING': 300_000, // 5 minutes\n },\n types: {} as SignUpRouterSchema,\n}).createMachine({\n id: SignUpRouterMachineId,\n // @ts-expect-error - Set in INIT event\n context: {},\n initial: 'Idle',\n on: {\n 'AUTHENTICATE.OAUTH': {\n actions: sendTo(ThirdPartyMachineId, ({ context, event }) => ({\n type: 'REDIRECT',\n params: {\n strategy: event.strategy,\n redirectUrl: `${\n context.router?.mode === ROUTING.virtual\n ? context.clerk.__unstable__environment?.displayConfig.signUpUrl\n : context.router?.basePath\n }${SSO_CALLBACK_PATH_ROUTE}`,\n redirectUrlComplete: context.clerk.buildAfterSignUpUrl({\n params: context.router?.searchParams(),\n }),\n },\n })),\n },\n 'AUTHENTICATE.SAML': {\n actions: sendTo(ThirdPartyMachineId, ({ context }) => ({\n type: 'REDIRECT',\n params: {\n strategy: 'saml',\n emailAddress: context.formRef.getSnapshot().context.fields.get('emailAddress')?.value,\n redirectUrl: `${\n context.router?.mode === ROUTING.virtual\n ? context.clerk.__unstable__environment?.displayConfig.signUpUrl\n : context.router?.basePath\n }${SSO_CALLBACK_PATH_ROUTE}`,\n redirectUrlComplete: context.clerk.buildAfterSignUpUrl({\n params: context.router?.searchParams(),\n }),\n },\n })),\n },\n 'AUTHENTICATE.ENTERPRISE_SSO': {\n actions: sendTo(ThirdPartyMachineId, ({ context }) => ({\n type: 'REDIRECT',\n params: {\n strategy: 'enterprise_sso',\n emailAddress: context.formRef.getSnapshot().context.fields.get('emailAddress')?.value,\n redirectUrl: `${\n context.router?.mode === ROUTING.virtual\n ? context.clerk.__unstable__environment?.displayConfig.signUpUrl\n : context.router?.basePath\n }${SSO_CALLBACK_PATH_ROUTE}`,\n redirectUrlComplete: context.clerk.buildAfterSignUpUrl({\n params: context.router?.searchParams(),\n }),\n },\n })),\n },\n 'AUTHENTICATE.WEB3': {\n actions: sendTo('start', ({ event }) => event),\n },\n 'FORM.ATTACH': {\n description: 'Attach/re-attach the form to the router.',\n actions: enqueueActions(({ enqueue, event }) => {\n enqueue.assign({\n formRef: event.formRef,\n });\n\n // Reset the current step, to reset the form reference.\n enqueue.raise({ type: 'RESET.STEP' });\n }),\n },\n 'NAVIGATE.PREVIOUS': '.Hist',\n 'NAVIGATE.START': '.Start',\n LOADING: {\n actions: assign(({ event }) => ({\n loading: {\n isLoading: event.isLoading,\n step: event.step,\n strategy: event.strategy,\n action: event.action,\n },\n })),\n },\n RESET: '.Idle',\n },\n states: {\n Idle: {\n on: {\n INIT: {\n actions: assign(({ event }) => {\n const searchParams = event.router?.searchParams();\n\n return {\n clerk: event.clerk,\n router: event.router,\n signInPath: event.signInPath || SIGN_IN_DEFAULT_BASE_PATH,\n loading: {\n isLoading: false,\n },\n exampleMode: event.exampleMode || false,\n formRef: event.formRef,\n ticket:\n searchParams?.get(SEARCH_PARAMS.ticket) ||\n searchParams?.get(SEARCH_PARAMS.invitationToken) ||\n undefined,\n };\n }),\n target: 'Init',\n },\n },\n },\n Init: {\n entry: enqueueActions(({ context, enqueue, self }) => {\n if (!self.getSnapshot().children[ThirdPartyMachineId]) {\n enqueue.spawnChild('thirdPartyMachine', {\n id: ThirdPartyMachineId,\n systemId: ThirdPartyMachineId,\n input: {\n basePath: context.router?.basePath ?? SIGN_UP_DEFAULT_BASE_PATH,\n flow: 'signUp',\n formRef: context.formRef,\n parent: self,\n },\n });\n }\n }),\n always: [\n {\n guard: 'isLoggedInAndSingleSession',\n actions: [\n log('Already logged in'),\n {\n type: 'navigateExternal',\n params: ({ context }) => ({\n path: context.clerk.buildAfterSignUpUrl({\n params: context.router?.searchParams(),\n }),\n }),\n },\n ],\n },\n {\n guard: 'needsCallback',\n target: 'Callback',\n },\n {\n guard: 'hasTicket',\n actions: { type: 'navigateInternal', params: { force: true, path: '/' } },\n target: 'Start',\n },\n {\n guard: 'needsVerification',\n actions: { type: 'navigateInternal', params: { force: true, path: '/verify' } },\n target: 'Verification',\n },\n {\n guard: or(['needsContinue', 'hasClerkTransfer']),\n actions: { type: 'navigateInternal', params: { force: true, path: '/continue' } },\n target: 'Continue',\n },\n {\n guard: 'isRestrictedWithoutTicket',\n target: 'Restricted',\n },\n {\n actions: { type: 'navigateInternal', params: { force: true, path: '/' } },\n target: 'Start',\n },\n ],\n },\n Start: {\n tags: ['step:start'],\n exit: 'clearFormErrors',\n invoke: {\n id: 'start',\n src: 'startMachine',\n input: ({ context, self }) => ({\n basePath: context.router?.basePath,\n formRef: context.formRef,\n parent: self,\n ticket: context.ticket,\n }),\n onDone: {\n actions: 'raiseNext',\n },\n },\n on: {\n 'RESET.STEP': {\n actions: enqueueActions(({ enqueue, context }) => {\n enqueue('clearFormErrors');\n enqueue.sendTo('start', { type: 'SET_FORM', formRef: context.formRef });\n }),\n },\n NEXT: [\n {\n guard: 'isStatusComplete',\n actions: ['setActive', 'delayedReset'],\n },\n {\n guard: and(['hasTicket', 'statusNeedsContinue']),\n actions: { type: 'navigateInternal', params: { path: '/' } },\n target: 'Start',\n reenter: true,\n },\n {\n guard: 'statusNeedsVerification',\n target: 'Verification',\n actions: { type: 'navigateInternal', params: { path: '/verify' } },\n },\n {\n guard: 'statusNeedsContinue',\n actions: { type: 'navigateInternal', params: { path: '/continue' } },\n target: 'Continue',\n },\n ],\n },\n },\n Continue: {\n tags: ['step:continue'],\n invoke: {\n id: 'continue',\n src: 'continueMachine',\n input: ({ context, self }) => ({\n basePath: context.router?.basePath,\n formRef: context.formRef,\n parent: self,\n }),\n onDone: {\n actions: 'raiseNext',\n },\n },\n on: {\n 'RESET.STEP': {\n target: 'Continue',\n reenter: true,\n },\n NEXT: [\n {\n guard: 'isStatusComplete',\n actions: ['setActive', 'delayedReset'],\n },\n {\n guard: 'statusNeedsVerification',\n target: 'Verification',\n actions: { type: 'navigateInternal', params: { path: '/verify' } },\n },\n ],\n },\n },\n Verification: {\n tags: ['step:verification'],\n invoke: {\n id: 'verification',\n src: 'verificationMachine',\n input: ({ context, self }) => ({\n attributes: context.clerk.__unstable__environment?.userSettings.attributes,\n basePath: context.router?.basePath,\n formRef: context.formRef,\n parent: self,\n resource: context.clerk.client.signUp,\n }),\n onDone: {\n actions: 'raiseNext',\n },\n },\n always: [\n {\n guard: 'hasCreatedSession',\n actions: [\n ({ context }) => ({\n type: 'setActive',\n params: { sessionId: context.router?.searchParams().get(SEARCH_PARAMS.createdSession) },\n }),\n 'delayedReset',\n ],\n },\n {\n guard: { type: 'hasClerkStatus', params: { status: 'verified' } },\n actions: { type: 'navigateInternal', params: { force: true, path: '/continue' } },\n },\n {\n guard: { type: 'hasClerkStatus', params: { status: 'expired' } },\n actions: { type: 'navigateInternal', params: { force: true, path: '/' } },\n },\n ],\n on: {\n 'RESET.STEP': {\n target: 'Verification',\n reenter: true,\n },\n NEXT: [\n {\n guard: 'isStatusComplete',\n actions: ['setActive', 'delayedReset'],\n },\n {\n guard: 'statusNeedsContinue',\n actions: { type: 'navigateInternal', params: { path: '/continue' } },\n target: 'Continue',\n },\n ],\n },\n },\n Callback: {\n tags: ['step:callback'],\n entry: sendTo(ThirdPartyMachineId, { type: 'CALLBACK' }),\n on: {\n NEXT: [\n {\n guard: 'isStatusComplete',\n actions: ['setActive', 'delayedReset'],\n },\n {\n description: 'Handle a case where the user has already been authenticated via ClerkJS',\n guard: 'hasAuthenticatedViaClerkJS',\n actions: [{ type: 'setActive', params: { useLastActiveSession: true } }, 'delayedReset'],\n },\n {\n guard: 'statusNeedsVerification',\n actions: { type: 'navigateInternal', params: { path: '/verify' } },\n target: 'Verification',\n },\n {\n guard: 'statusNeedsContinue',\n actions: { type: 'navigateInternal', params: { path: '/continue' } },\n target: 'Continue',\n },\n {\n actions: { type: 'navigateInternal', params: { path: '/' } },\n target: 'Start',\n },\n ],\n },\n },\n Restricted: {\n tags: ['step:restricted'],\n on: {\n NEXT: 'Start',\n },\n },\n Error: {\n tags: ['step:error'],\n on: {\n NEXT: {\n target: 'Start',\n actions: 'clearFormErrors',\n },\n },\n },\n Hist: {\n type: 'history',\n exit: 'clearFormErrors',\n },\n },\n});\n","import type { SignUpResource, Web3Strategy } from '@clerk/types';\nimport type { DoneActorEvent } from 'xstate';\nimport { and, assertEvent, assign, enqueueActions, fromPromise, not, sendTo, setup } from 'xstate';\n\nimport { SIGN_UP_DEFAULT_BASE_PATH } from '~/internals/constants';\nimport { ClerkElementsRuntimeError } from '~/internals/errors';\nimport type { FormFields } from '~/internals/machines/form';\nimport type { SetFormEvent } from '~/internals/machines/shared';\nimport { sendToLoading } from '~/internals/machines/shared';\nimport { fieldsToSignUpParams } from '~/internals/machines/sign-up/utils';\nimport { ThirdPartyMachine } from '~/internals/machines/third-party';\nimport { assertActorEventError } from '~/internals/machines/utils/assert';\n\nimport type { SignInRouterMachineActorRef } from './router.types';\nimport type { SignUpStartSchema } from './start.types';\n\nconst DISABLEABLE_FIELDS = ['emailAddress', 'phoneNumber'] as const;\n\nexport type TSignUpStartMachine = typeof SignUpStartMachine;\n\nexport const SignUpStartMachineId = 'SignUpStart';\n\ntype AttemptParams = { strategy: 'ticket'; ticket: string } | { strategy?: never; ticket?: never };\ntype PrefillFieldsKeys = keyof Pick<\n SignUpResource,\n 'username' | 'firstName' | 'lastName' | 'emailAddress' | 'phoneNumber'\n>;\nconst PREFILL_FIELDS: PrefillFieldsKeys[] = ['firstName', 'lastName', 'emailAddress', 'username', 'phoneNumber'];\n\nexport const SignUpStartMachine = setup({\n actors: {\n attempt: fromPromise<\n SignUpResource,\n { parent: SignInRouterMachineActorRef; fields: FormFields; params?: AttemptParams }\n >(({ input: { fields, parent, params } }) => {\n const fieldParams = fieldsToSignUpParams(fields);\n return parent.getSnapshot().context.clerk.client.signUp.create({ ...fieldParams, ...params });\n }),\n attemptWeb3: fromPromise(\n ({ input: { parent, strategy } }) => {\n if (strategy === 'web3_metamask_signature') {\n return parent.getSnapshot().context.clerk.client.signUp.authenticateWithMetamask();\n }\n if (strategy === 'web3_coinbase_wallet_signature') {\n return parent.getSnapshot().context.clerk.client.signUp.authenticateWithCoinbaseWallet();\n }\n if (strategy === 'web3_okx_wallet_signature') {\n return parent.getSnapshot().context.clerk.client.signUp.authenticateWithOKXWallet();\n }\n throw new ClerkElementsRuntimeError(`Unsupported Web3 strategy: ${strategy}`);\n },\n ),\n thirdParty: ThirdPartyMachine,\n },\n actions: {\n sendToNext: ({ context, event }) =>\n context.parent.send({ type: 'NEXT', resource: (event as unknown as DoneActorEvent).output }),\n sendToLoading,\n setFormRef: assign(({ event }) => {\n return {\n formRef: (event as unknown as SetFormEvent).formRef,\n };\n }),\n setFormDisabledTicketFields: enqueueActions(({ context, enqueue }) => {\n if (!context.ticket) {\n return;\n }\n\n const currentFields = context.formRef.getSnapshot().context.fields;\n\n for (const name of DISABLEABLE_FIELDS) {\n if (currentFields.has(name)) {\n enqueue.sendTo(context.formRef, { type: 'FIELD.DISABLE', field: { name } });\n }\n }\n }),\n setFormErrors: sendTo(\n ({ context }) => context.formRef,\n ({ event }) => {\n assertActorEventError(event);\n return {\n type: 'ERRORS.SET',\n error: event.error,\n };\n },\n ),\n setDefaultFormValues: ({ context }) => {\n const signUp = context.parent.getSnapshot().context.clerk.client.signUp;\n const prefilledDefaultValues = new Map();\n\n for (const key of PREFILL_FIELDS) {\n if (key in signUp) {\n prefilledDefaultValues.set(key, signUp[key]);\n }\n }\n\n context.formRef.send({\n type: 'PREFILL_DEFAULT_VALUES',\n defaultValues: prefilledDefaultValues,\n });\n },\n },\n guards: {\n isMissingRequirements: ({ context }) =>\n context.parent.getSnapshot().context.clerk?.client?.signUp?.status === 'missing_requirements',\n hasTicket: ({ context }) => Boolean(context.ticket),\n isExampleMode: ({ context }) => Boolean(context.parent.getSnapshot().context.exampleMode),\n },\n types: {} as SignUpStartSchema,\n}).createMachine({\n id: SignUpStartMachineId,\n context: ({ input }) => ({\n basePath: input.basePath || SIGN_UP_DEFAULT_BASE_PATH,\n formRef: input.formRef,\n parent: input.parent,\n loadingStep: 'start',\n ticket: input.ticket,\n }),\n entry: 'setDefaultFormValues',\n initial: 'Init',\n on: {\n SET_FORM: {\n actions: 'setFormRef',\n },\n },\n states: {\n Init: {\n description:\n 'Handle ticket, if present; Else, default to Pending state. Per tickets, `Attempting` makes a `signUp.create` request allowing for an incomplete sign up to contain progressively filled fields on the Start step.',\n always: [\n {\n guard: and(['hasTicket', 'isMissingRequirements']),\n target: 'Pending',\n },\n {\n guard: 'hasTicket',\n target: 'Attempting',\n },\n {\n target: 'Pending',\n },\n ],\n },\n Pending: {\n tags: ['state:pending'],\n description: 'Waiting for user input',\n on: {\n SUBMIT: {\n guard: not('isExampleMode'),\n target: 'Attempting',\n reenter: true,\n },\n 'AUTHENTICATE.WEB3': {\n guard: not('isExampleMode'),\n target: 'AttemptingWeb3',\n reenter: true,\n },\n },\n },\n Attempting: {\n tags: ['state:attempting', 'state:loading'],\n entry: 'sendToLoading',\n invoke: {\n id: 'attemptCreate',\n src: 'attempt',\n input: ({ context }) => {\n // Standard fields\n const defaultParams = {\n fields: context.formRef.getSnapshot().context.fields,\n parent: context.parent,\n };\n\n // Handle ticket-specific flows\n const params: AttemptParams = context.ticket\n ? {\n strategy: 'ticket',\n ticket: context.ticket,\n }\n : {};\n\n return { ...defaultParams, params };\n },\n onDone: {\n actions: ['setFormDisabledTicketFields', 'sendToNext', 'sendToLoading'],\n },\n onError: {\n actions: ['setFormDisabledTicketFields', 'setFormErrors', 'sendToLoading'],\n target: 'Pending',\n },\n },\n },\n AttemptingWeb3: {\n tags: ['state:attempting', 'state:loading'],\n entry: 'sendToLoading',\n invoke: {\n id: 'attemptCreateWeb3',\n src: 'attemptWeb3',\n input: ({ context, event }) => {\n assertEvent(event, 'AUTHENTICATE.WEB3');\n return {\n parent: context.parent,\n strategy: event.strategy,\n };\n },\n onDone: {\n actions: ['sendToNext', 'sendToLoading'],\n },\n onError: {\n actions: ['setFormErrors', 'sendToLoading'],\n target: 'Pending',\n },\n },\n },\n },\n});\n","import { Poller } from '@clerk/shared/poller';\nimport type {\n AttemptVerificationParams,\n Attribute,\n PrepareVerificationParams,\n SignUpResource,\n SignUpVerifiableField,\n SignUpVerificationsResource,\n VerificationStrategy,\n} from '@clerk/types';\nimport type { Writable } from 'type-fest';\nimport { and, assign, enqueueActions, fromCallback, fromPromise, log, raise, sendParent, sendTo, setup } from 'xstate';\n\nimport {\n MAGIC_LINK_VERIFY_PATH_ROUTE,\n RESENDABLE_COUNTDOWN_DEFAULT,\n SIGN_UP_DEFAULT_BASE_PATH,\n} from '~/internals/constants';\nimport { ClerkElementsError, ClerkElementsRuntimeError } from '~/internals/errors';\nimport type { WithParams } from '~/internals/machines/shared';\nimport { sendToLoading } from '~/internals/machines/shared';\nimport { assertActorEventError } from '~/internals/machines/utils/assert';\n\nimport type { SignInRouterMachineActorRef } from './router.types';\nimport {\n type SignUpVerificationContext,\n SignUpVerificationDelays,\n type SignUpVerificationEmailLinkFailedEvent,\n type SignUpVerificationEvents,\n type SignUpVerificationSchema,\n} from './verification.types';\n\nexport type SignUpVerificationsResourceKey = keyof SignUpVerificationsResource;\nexport type TSignUpVerificationMachine = typeof SignUpVerificationMachine;\n\nexport type StartSignUpEmailLinkFlowEvents = { type: 'STOP' };\nexport type StartSignUpEmailLinkFlowInput = {\n parent: SignInRouterMachineActorRef;\n};\n\nexport const SignUpVerificationMachineId = 'SignUpVerification';\n\nconst shouldVerify = (field: SignUpVerifiableField, strategy?: VerificationStrategy) => {\n const guards: Writable>[0]> = [\n {\n type: 'isFieldUnverified',\n params: {\n field,\n },\n },\n ];\n\n if (strategy) {\n guards.push({\n type: 'isStrategyEnabled',\n params: {\n attribute: field,\n strategy,\n },\n });\n }\n\n return and(guards);\n};\n\nexport type PrepareVerificationInput = {\n parent: SignInRouterMachineActorRef;\n} & WithParams;\nexport type AttemptVerificationInput = {\n parent: SignInRouterMachineActorRef;\n} & WithParams;\n\nexport const SignUpVerificationMachine = setup({\n actors: {\n prepare: fromPromise(({ input: { params, parent } }) => {\n const clerk = parent.getSnapshot().context.clerk;\n\n if (params.strategy === 'email_link' && params.redirectUrl) {\n params.redirectUrl = clerk.buildUrlWithAuth(params.redirectUrl);\n }\n\n return clerk.client.signUp.prepareVerification(params);\n }),\n attempt: fromPromise(async ({ input: { params, parent } }) =>\n parent.getSnapshot().context.clerk.client.signUp.attemptVerification(params),\n ),\n attemptEmailLinkVerification: fromCallback(\n ({ receive, sendBack, input: { parent } }) => {\n const { run, stop } = Poller();\n\n const clerk = parent.getSnapshot().context.clerk;\n\n void run(async () =>\n clerk.client.signUp\n .reload()\n .then((resource: SignUpResource) => {\n const signInStatus = resource.status;\n const verificationStatus = resource.verifications.emailAddress.status;\n\n // Short-circuit if the sign-up resource is already complete\n if (signInStatus === 'complete') {\n return sendBack({ type: 'EMAIL_LINK.VERIFIED', resource });\n }\n\n switch (verificationStatus) {\n case 'verified':\n case 'transferable':\n case 'expired': {\n sendBack({ type: `EMAIL_LINK.${verificationStatus.toUpperCase()}`, resource });\n break;\n }\n case 'failed': {\n sendBack({\n type: 'EMAIL_LINK.FAILED',\n error: new ClerkElementsError('email-link-verification-failed', 'Email verification failed'),\n resource,\n });\n break;\n }\n // case 'unverified':\n default:\n return;\n }\n\n stop();\n })\n .catch((error: Error) => {\n stop();\n new ClerkElementsRuntimeError(error.message);\n }),\n );\n\n receive(event => {\n if (event.type === 'STOP') {\n stop();\n }\n });\n\n return () => stop();\n },\n ),\n },\n actions: {\n resendableTick: assign(({ context }) => ({\n resendable: context.resendableAfter === 1,\n resendableAfter: context.resendableAfter > 1 ? context.resendableAfter - 1 : context.resendableAfter,\n })),\n resendableReset: assign({\n resendable: false,\n resendableAfter: RESENDABLE_COUNTDOWN_DEFAULT,\n }),\n sendToLoading,\n setFormErrors: sendTo(\n ({ context }) => context.formRef,\n ({ event }) => {\n assertActorEventError(event);\n return {\n type: 'ERRORS.SET',\n error: event.error,\n };\n },\n ),\n },\n guards: {\n isComplete: ({ context }) => context.resource.status === 'complete',\n isFieldUnverified: ({ context, event }, { field }: { field: SignUpVerifiableField }) => {\n let resource = context.resource;\n\n if (event?.type === 'NEXT' && event.resource) {\n resource = event.resource;\n }\n\n return resource.unverifiedFields.includes(field);\n },\n isResendable: ({ context }) => context.resendable || context.resendableAfter === 0,\n isStrategyEnabled: (\n { context },\n { attribute, strategy }: { attribute: Attribute; strategy: VerificationStrategy },\n ) => Boolean(context.attributes?.[attribute].verifications.includes(strategy)),\n shouldVerifyPhoneCode: shouldVerify('phone_number'),\n shouldVerifyEmailLink: shouldVerify('email_address', 'email_link'),\n shouldVerifyEmailCode: shouldVerify('email_address', 'email_code'),\n },\n delays: SignUpVerificationDelays,\n types: {} as SignUpVerificationSchema,\n}).createMachine({\n id: SignUpVerificationMachineId,\n initial: 'Init',\n context: ({ input }) => ({\n attributes: input.attributes,\n basePath: input.basePath || SIGN_UP_DEFAULT_BASE_PATH,\n loadingStep: 'verifications',\n formRef: input.formRef,\n parent: input.parent,\n resendable: false,\n resendableAfter: RESENDABLE_COUNTDOWN_DEFAULT,\n resource: input.resource,\n }),\n on: {\n NEXT: [\n {\n guard: 'isComplete',\n actions: sendParent(({ event }) => ({ type: 'NEXT', resource: event.resource })),\n },\n {\n description: 'Validate via phone number',\n guard: 'shouldVerifyPhoneCode',\n target: '.PhoneCode',\n },\n {\n description: 'Validate via email link',\n guard: 'shouldVerifyEmailLink',\n target: '.EmailLink',\n },\n {\n description: 'Verify via email code',\n guard: 'shouldVerifyEmailCode',\n target: '.EmailCode',\n },\n {\n actions: sendParent(({ event }) => ({ type: 'NEXT', resource: event.resource })),\n },\n ],\n },\n states: {\n Init: {\n always: [\n {\n description: 'Validate via phone number',\n guard: 'shouldVerifyPhoneCode',\n target: 'PhoneCode',\n },\n {\n description: 'Validate via email link',\n guard: 'shouldVerifyEmailLink',\n target: 'EmailLink',\n },\n {\n description: 'Verify via email code',\n guard: 'shouldVerifyEmailCode',\n target: 'EmailCode',\n },\n {\n actions: sendParent(({ context }) => ({ type: 'NEXT', resource: context.resource })),\n },\n ],\n },\n EmailLink: {\n tags: ['verification:method:email', 'verification:category:link', 'verification:email_link'],\n initial: 'Preparing',\n on: {\n RETRY: '.Preparing',\n 'EMAIL_LINK.RESTART': {\n target: '.Attempting',\n reenter: true,\n },\n 'EMAIL_LINK.FAILED': {\n actions: [\n {\n type: 'setFormErrors',\n params: ({ event }: { event: SignUpVerificationEmailLinkFailedEvent }) => ({ error: event.error }),\n },\n assign({ resource: ({ event }) => event.resource }),\n ],\n target: '.Pending',\n },\n 'EMAIL_LINK.*': {\n actions: enqueueActions(({ enqueue, event }) => {\n if (event.type === 'EMAIL_LINK.RESTART') {\n return;\n }\n\n enqueue.assign({ resource: event.resource });\n enqueue.raise({ type: 'NEXT', resource: event.resource });\n }),\n },\n },\n states: {\n Preparing: {\n tags: ['state:preparing', 'state:loading'],\n exit: 'resendableReset',\n invoke: {\n id: 'prepareEmailLinkVerification',\n src: 'prepare',\n input: ({ context }) => ({\n parent: context.parent,\n params: {\n strategy: 'email_link',\n redirectUrl: `${context.basePath}${MAGIC_LINK_VERIFY_PATH_ROUTE}`,\n },\n }),\n onDone: {\n target: 'Attempting',\n actions: assign({ resource: ({ event }) => event.output }),\n },\n onError: {\n actions: 'setFormErrors',\n target: 'Pending',\n },\n },\n },\n Pending: {\n description: 'Placeholder for allowing resending of email link',\n tags: ['state:pending'],\n on: {\n NEXT: 'Preparing',\n },\n },\n Attempting: {\n tags: ['state:attempting'],\n invoke: {\n id: 'attemptEmailLinkVerification',\n src: 'attemptEmailLinkVerification',\n input: ({ context }) => ({\n parent: context.parent,\n }),\n },\n after: {\n emailLinkTimeout: {\n description: 'Timeout after 5 minutes',\n target: 'Pending',\n actions: sendTo(({ context }) => context.formRef, {\n type: 'ERRORS.SET',\n error: new ClerkElementsError('verify-email-link-timeout', 'Email link verification timed out'),\n }),\n },\n },\n initial: 'NotResendable',\n states: {\n Resendable: {\n description: 'Waiting for user to retry',\n },\n NotResendable: {\n description: 'Handle countdowns',\n on: {\n RETRY: {\n actions: log(({ context }) => `Not retriable; Try again in ${context.resendableAfter}s`),\n },\n },\n after: {\n resendableTimeout: [\n {\n description: 'Set as retriable if countdown is 0',\n guard: 'isResendable',\n actions: 'resendableTick',\n target: 'Resendable',\n },\n {\n description: 'Continue countdown if not retriable',\n actions: 'resendableTick',\n target: 'NotResendable',\n reenter: true,\n },\n ],\n },\n },\n },\n },\n },\n },\n EmailCode: {\n tags: ['verification:method:email', 'verification:category:code', 'verification:email_code'],\n initial: 'Preparing',\n states: {\n Preparing: {\n tags: ['state:preparing', 'state:loading'],\n exit: 'resendableReset',\n invoke: {\n id: 'prepareEmailAddressCodeVerification',\n src: 'prepare',\n input: ({ context }) => ({\n parent: context.parent,\n params: {\n strategy: 'email_code',\n },\n }),\n onDone: [\n {\n guard: 'shouldVerifyEmailCode',\n target: 'Pending',\n },\n {\n actions: [\n assign({ resource: ({ event }) => event.output }),\n raise(({ event }) => ({ type: 'NEXT', resource: event.output })),\n ],\n },\n ],\n onError: {\n actions: 'setFormErrors',\n target: 'Pending',\n },\n },\n },\n Pending: {\n tags: ['state:pending'],\n on: {\n RETRY: 'Preparing',\n SUBMIT: {\n target: 'Attempting',\n reenter: true,\n },\n },\n initial: 'NotResendable',\n states: {\n Resendable: {\n description: 'Waiting for user to retry',\n },\n NotResendable: {\n description: 'Handle countdowns',\n on: {\n RETRY: {\n actions: log(({ context }) => `Not retriable; Try again in ${context.resendableAfter}s`),\n },\n },\n after: {\n resendableTimeout: [\n {\n description: 'Set as retriable if countdown is 0',\n guard: 'isResendable',\n actions: 'resendableTick',\n target: 'Resendable',\n },\n {\n description: 'Continue countdown if not retriable',\n actions: 'resendableTick',\n target: 'NotResendable',\n reenter: true,\n },\n ],\n },\n },\n },\n },\n Attempting: {\n tags: ['state:attempting', 'state:loading'],\n entry: 'sendToLoading',\n invoke: {\n id: 'attemptEmailAddressCodeVerification',\n src: 'attempt',\n input: ({ context }) => ({\n parent: context.parent,\n params: {\n strategy: 'email_code',\n code: (context.formRef.getSnapshot().context.fields.get('code')?.value as string) || '',\n },\n }),\n onDone: {\n actions: [raise(({ event }) => ({ type: 'NEXT', resource: event.output })), 'sendToLoading'],\n },\n onError: {\n actions: ['setFormErrors', 'sendToLoading'],\n target: 'Pending',\n },\n },\n },\n },\n },\n PhoneCode: {\n tags: ['verification:method:phone', 'verification:category:code', 'verification:phone_code'],\n initial: 'Preparing',\n states: {\n Preparing: {\n tags: ['state:preparing', 'state:loading'],\n exit: 'resendableReset',\n invoke: {\n id: 'preparePhoneCodeVerification',\n src: 'prepare',\n input: ({ context }) => ({\n parent: context.parent,\n params: {\n strategy: 'phone_code',\n },\n }),\n onDone: [\n {\n guard: 'shouldVerifyPhoneCode',\n target: 'Pending',\n actions: assign({ resource: ({ event }) => event.output }),\n },\n {\n actions: [\n assign({ resource: ({ event }) => event.output }),\n raise(({ event }) => ({ type: 'NEXT', resource: event.output })),\n ],\n },\n ],\n onError: {\n actions: 'setFormErrors',\n target: 'Pending',\n },\n },\n },\n Pending: {\n tags: ['state:pending'],\n on: {\n RETRY: 'Preparing',\n SUBMIT: {\n target: 'Attempting',\n reenter: true,\n },\n },\n initial: 'NotResendable',\n states: {\n Resendable: {\n description: 'Waiting for user to retry',\n },\n NotResendable: {\n description: 'Handle countdowns',\n on: {\n RETRY: {\n actions: log(({ context }) => `Not retriable; Try again in ${context.resendableAfter}s`),\n },\n },\n after: {\n resendableTimeout: [\n {\n description: 'Set as retriable if countdown is 0',\n guard: 'isResendable',\n actions: 'resendableTick',\n target: 'Resendable',\n },\n {\n description: 'Continue countdown if not retriable',\n actions: 'resendableTick',\n target: 'NotResendable',\n reenter: true,\n },\n ],\n },\n },\n },\n },\n Attempting: {\n tags: ['state:attempting', 'state:loading'],\n entry: 'sendToLoading',\n invoke: {\n id: 'attemptPhoneNumberVerification',\n src: 'attempt',\n input: ({ context }) => ({\n parent: context.parent,\n params: {\n strategy: 'phone_code',\n code: (context.formRef.getSnapshot().context.fields.get('code')?.value as string) || '',\n },\n }),\n onDone: {\n actions: [raise(({ event }) => ({ type: 'NEXT', resource: event.output })), 'sendToLoading'],\n },\n onError: {\n actions: ['setFormErrors', 'sendToLoading'],\n target: 'Pending',\n },\n },\n },\n },\n },\n },\n});\n","import type { ClerkAPIResponseError } from '@clerk/shared/error';\nimport type { Attributes, SignUpResource } from '@clerk/types';\nimport type { ActorRefFrom, DoneActorEvent, ErrorActorEvent } from 'xstate';\n\nimport type { FormMachine } from '~/internals/machines/form';\n\nimport type { SignInRouterMachineActorRef } from './router.types';\n\n// ---------------------------------- Tags ---------------------------------- //\n\nexport type SignUpVerificationStateTags = 'state:preparing' | 'state:pending' | 'state:attempting' | 'state:loading';\n\nexport type SignUpVerificationVerificationCategoryTags = 'verification:category:code' | 'verification:category:link';\nexport type SignUpVerificationVerificationMethodTags = 'verification:method:email' | 'verification:method:phone';\nexport type SignUpVerificationVerificationTypeTags =\n | 'verification:email_link'\n | 'verification:email_code'\n | 'verification:phone_code';\n\nexport type SignUpVerificationVerificationTags =\n | SignUpVerificationVerificationCategoryTags\n | SignUpVerificationVerificationMethodTags\n | SignUpVerificationVerificationTypeTags;\n\nexport type SignUpVerificationTags = SignUpVerificationStateTags | SignUpVerificationVerificationTags;\nexport type SignUpVerificationFriendlyTags = 'code' | 'email_link' | 'email_code' | 'phone_code';\n\n// ---------------------------------- Events ---------------------------------- //\n\nexport type SignUpVerificationSubmitEvent = { type: 'SUBMIT'; action: 'submit' };\nexport type SignUpVerificationNextEvent = { type: 'NEXT'; resource?: SignUpResource };\nexport type SignUpVerificationRetryEvent = { type: 'RETRY' };\n\nexport type SignUpVerificationEmailLinkVerifiedEvent = { type: 'EMAIL_LINK.VERIFIED'; resource: SignUpResource };\nexport type SignUpVerificationEmailLinkUnverifiedEvent = { type: 'EMAIL_LINK.UNVERIFIED'; resource: SignUpResource };\nexport type SignUpVerificationEmailLinkExpiredEvent = { type: 'EMAIL_LINK.EXPIRED'; resource: SignUpResource };\nexport type SignUpVerificationEmailLinkTransferrableEvent = {\n type: 'EMAIL_LINK.TRANSFERRABLE';\n resource: SignUpResource;\n};\nexport type SignUpVerificationEmailLinkRestartEvent = { type: 'EMAIL_LINK.RESTART' };\nexport type SignUpVerificationEmailLinkFailedEvent = {\n type: 'EMAIL_LINK.FAILED';\n resource: SignUpResource;\n error: Error;\n};\n\nexport type SignUpVerificationEmailLinkEvent =\n | SignUpVerificationEmailLinkVerifiedEvent\n | SignUpVerificationEmailLinkUnverifiedEvent\n | SignUpVerificationEmailLinkExpiredEvent\n | SignUpVerificationEmailLinkRestartEvent\n | SignUpVerificationEmailLinkFailedEvent;\n\nexport type SignUpVerificationEvents =\n | DoneActorEvent\n | ErrorActorEvent\n | SignUpVerificationRetryEvent\n | SignUpVerificationSubmitEvent\n | SignUpVerificationNextEvent\n | SignUpVerificationEmailLinkEvent;\n\n// ---------------------------------- Input ---------------------------------- //\n\nexport type SignUpVerificationInput = {\n attributes: Attributes | undefined;\n basePath?: string;\n formRef: ActorRefFrom;\n parent: SignInRouterMachineActorRef;\n resource: SignUpResource;\n};\n\n// ---------------------------------- Delays ---------------------------------- //\n\nexport const SignUpVerificationDelays = {\n emailLinkTimeout: 300_000, // 5 minutes\n resendableTimeout: 1_000, // 1 second\n} as const;\n\nexport type SignUpVerificationDelays = keyof typeof SignUpVerificationDelays;\n\n// ---------------------------------- Context ---------------------------------- //\n\nexport interface SignUpVerificationContext {\n attributes: Attributes | undefined;\n basePath: string;\n resource: SignUpResource;\n error?: Error | ClerkAPIResponseError;\n formRef: ActorRefFrom;\n parent: SignInRouterMachineActorRef;\n loadingStep: 'verifications';\n resendable: boolean;\n resendableAfter: number;\n}\n\n// ---------------------------------- Schema ---------------------------------- //\n\nexport interface SignUpVerificationSchema {\n context: SignUpVerificationContext;\n delays: SignUpVerificationDelays;\n input: SignUpVerificationInput;\n events: SignUpVerificationEvents;\n tags: SignUpVerificationTags;\n}\n","import * as React from 'react';\n\nimport type { FormSubmitProps } from '~/react/common';\nimport { Submit } from '~/react/common';\n\nimport type { SignUpNavigateProps } from './navigate';\nimport { SignUpNavigate } from './navigate';\nimport type { SignUpResendProps } from './resend';\nimport { SignUpResend } from './resend';\n\nexport type SignUpActionProps = { asChild?: boolean } & FormSubmitProps &\n (\n | ({\n navigate: SignUpNavigateProps['to'];\n resend?: never;\n submit?: never;\n } & Omit)\n | { navigate?: never; resend?: never; submit: true }\n | ({ navigate?: never; resend: true; submit?: never } & SignUpResendProps)\n );\n\n/**\n * Perform various actions during the sign-in process. This component is used to navigate between steps, submit the form, or resend a verification codes.\n *\n * @param {boolean} [submit] - If `true`, the action will submit the form.\n * @param {string} [navigate] - The name of the step to navigate to.\n * @param {boolean} [resend] - If `true`, the action will resend the verification code for the currently active strategy, if applicable.\n * @param {Function} [fallback] - Only used when `resend` is `true`. If provided, the fallback markup will be rendered before the resend delay has expired.\n *\n * @example\n * Go Back\n *\n * @example\n * Sign Up\n *\n * @example\n * Resend\n */\n\nexport const SignUpAction = React.forwardRef, SignUpActionProps>((props, forwardedRef) => {\n const { submit, navigate, resend, ...rest } = props;\n let Comp: React.ForwardRefExoticComponent | undefined;\n\n if (submit) {\n Comp = Submit;\n } else if (navigate) {\n Comp = SignUpNavigate;\n } else if (resend) {\n Comp = SignUpResend;\n }\n\n return Comp ? (\n \n ) : null;\n});\n\nSignUpAction.displayName = 'SignUpAction';\n","import { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\n\nimport { SignUpRouterCtx } from '~/react/sign-up/context';\n\nconst SIGN_UP_NAVIGATE_NAME = 'SignInNavigate';\nconst SignUpNavigationEventMap = {\n start: `NAVIGATE.START`,\n previous: `NAVIGATE.PREVIOUS`,\n} as const;\n\nexport type SignUpNavigateElementKey = keyof typeof SignUpNavigationEventMap;\n\nexport type SignUpNavigateElement = React.ElementRef<'button'>;\nexport type SignUpNavigateProps = {\n asChild?: boolean;\n to: SignUpNavigateElementKey;\n children: React.ReactNode;\n};\n\n/**\n * Renders a button which will navigate to a different step in the sign-up flow.\n *\n * @param {SignUpNavigateElementKey} to - The step to navigate to.\n * @param {boolean} [asChild] - When `true`, the component will render its child and passes all props to it.\n *\n * @example\n * \n * Start over...\n * \n */\nexport const SignUpNavigate = React.forwardRef(\n ({ asChild, to, ...rest }, forwardedRef) => {\n const actorRef = SignUpRouterCtx.useActorRef();\n\n const Comp = asChild ? Slot : 'button';\n const defaultProps = asChild ? {} : { type: 'button' as const };\n\n const sendEvent = React.useCallback(() => {\n const type = SignUpNavigationEventMap[to];\n\n if (actorRef.getSnapshot().can({ type })) {\n actorRef.send({ type });\n } else {\n console.warn(\n `Clerk: is an invalid navigation event. You can only navigate to: ${Object.keys(SignUpNavigationEventMap).join(', ')}.`,\n );\n }\n }, [actorRef, to]);\n\n return (\n \n );\n },\n);\n\nSignUpNavigate.displayName = SIGN_UP_NAVIGATE_NAME;\n","import { Slot } from '@radix-ui/react-slot';\nimport { useSelector } from '@xstate/react';\nimport * as React from 'react';\n\nimport { SignUpVerificationCtx } from '../verifications';\n\nexport type SignUpResendElement = React.ElementRef<'button'>;\nexport type SignUpResendFallbackProps = {\n resendable: boolean;\n resendableAfter: number;\n};\nexport type SignUpResendProps = {\n asChild?: boolean;\n children: React.ReactNode;\n /**\n * A fallback component to render when the resend action is not available.\n * This can be a React element or a function that receives the `resendableAfter` prop.\n */\n fallback?: React.ReactNode | ((props: SignUpResendFallbackProps) => React.ReactNode);\n};\n\nconst SIGN_UP_RESEND_NAME = 'SignUpResend';\n\n/**\n * Resend verification codes during the sign-in process.\n * This component must be used within the .\n *\n * > [!NOTE]\n * > This component is not intended to be used directly. Instead, use the `` component.\n *\n * @example\n * ```tsx\n * import { Action } from '@clerk/elements/sign-in';\n *

Resendable in: {resendableAfter}s

}>Resend;\n * ```\n */\nexport const SignUpResend = React.forwardRef(\n ({ asChild, fallback, ...rest }, forwardedRef) => {\n const ref = SignUpVerificationCtx.useActorRef(true);\n\n if (!ref) {\n throw new Error('The resend action must be used within .');\n }\n\n const fallbackProps: SignUpResendFallbackProps = useSelector(\n ref,\n state => ({\n resendable: state.context.resendable,\n resendableAfter: state.context.resendableAfter,\n }),\n (a, b) => a.resendableAfter === b.resendableAfter && a.resendable === b.resendable,\n );\n\n if (fallback && !fallbackProps.resendable) {\n return typeof fallback === 'function' ? fallback(fallbackProps) : fallback;\n }\n\n const Comp = asChild ? Slot : 'button';\n const defaultProps = asChild ? {} : { type: 'button' as const };\n\n return (\n ref.send({ type: 'RETRY' })}\n ref={forwardedRef}\n />\n );\n },\n);\n\nSignUpResend.displayName = SIGN_UP_RESEND_NAME;\n","import { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\n\nimport { CAPTCHA_ELEMENT_ID } from '~/internals/constants';\nimport { ClerkElementsRuntimeError } from '~/internals/errors';\n\nimport { SignUpStartCtx } from './start';\n\nexport type SignUpCaptchaElement = React.ElementRef<'div'>;\n\ntype CaptchaElementProps = Omit<\n React.DetailedHTMLProps, HTMLDivElement>,\n 'id' | 'children'\n>;\n\nexport type SignUpCaptchaProps =\n | ({\n asChild: true;\n /* Must only be a self-closing element/component */\n children: React.ReactElement;\n } & CaptchaElementProps)\n | ({ asChild?: false; children?: undefined } & CaptchaElementProps);\n\n/**\n * The `` component is used to render the Cloudflare Turnstile widget. It must be used within the `` component.\n *\n * If utilizing the `asChild` prop, the component must be a self-closing element or component. Any children passed to the immediate child component of will be ignored.\n *\n * @param {boolean} [asChild] - If true, `` will render as its child element, passing along any necessary props.\n *\n * @example\n * \n * \n * \n * Sign Up\n * \n * \n *\n * @example\n * \n * \n * \n *