diff --git a/.changeset/rich-needles-admire.md b/.changeset/rich-needles-admire.md new file mode 100644 index 00000000000..e736969683f --- /dev/null +++ b/.changeset/rich-needles-admire.md @@ -0,0 +1,5 @@ +--- +"@clerk/elements": patch +--- + +Prefill populated fields when navigating back to the start step from the verify step diff --git a/package-lock.json b/package-lock.json index a033541e4f9..71cfd191826 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10751,34 +10751,6 @@ } } }, - "node_modules/@radix-ui/react-form": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.0.3.tgz", - "integrity": "sha512-kgE+Z/haV6fxE5WqIXj05KkaXa3OkZASoTDy25yX2EIp/x0c54rOH/vFr5nOZTg7n7T1z8bSyXmiVIFP9bbhPQ==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.1", - "@radix-ui/react-compose-refs": "1.0.1", - "@radix-ui/react-context": "1.0.1", - "@radix-ui/react-id": "1.0.1", - "@radix-ui/react-label": "2.0.2", - "@radix-ui/react-primitive": "1.0.3" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-id": { "version": "1.0.1", "license": "MIT", @@ -10796,29 +10768,6 @@ } } }, - "node_modules/@radix-ui/react-label": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz", - "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-primitive": "1.0.3" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-portal": { "version": "1.0.4", "license": "MIT", @@ -51181,10 +51130,10 @@ "version": "0.1.7", "license": "MIT", "dependencies": { - "@clerk/clerk-react": "*", - "@clerk/elements": "*", - "@clerk/shared": "*", - "@clerk/types": "*", + "@clerk/clerk-react": "file:../react", + "@clerk/elements": "file:../elements", + "@clerk/shared": "file:../shared", + "@clerk/types": "file:../types", "@radix-ui/react-slot": "^1.1.0", "cmdk": "^1.0.0", "cva": "^1.0.0-beta.1", @@ -51196,90 +51145,6 @@ "concurrently": "^8.2.2" } }, - "packages/ui/node_modules/@clerk/clerk-react": { - "version": "5.2.5", - "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-5.2.5.tgz", - "integrity": "sha512-Ihf1t2LdWTagW3U5BH5KRwQ8i+ECaZGEUymhJ89eZA+Ux5iXwLfOIBdwCIs45gbVuFiQ8WK0W00eaDgsNaf1mw==", - "dependencies": { - "@clerk/shared": "2.3.1", - "@clerk/types": "4.6.1", - "tslib": "2.4.1" - }, - "engines": { - "node": ">=18.17.0" - }, - "peerDependencies": { - "react": ">=18 || >=19.0.0-beta", - "react-dom": ">=18 || >=19.0.0-beta" - } - }, - "packages/ui/node_modules/@clerk/elements": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@clerk/elements/-/elements-0.8.0.tgz", - "integrity": "sha512-v8eXIWkrqKhLusN755KX86X6G1hFUWOjwCXJWY6OSHW3L67ZzxGqz4rSoqun8cj5/78QMQ2i2cpCFGOFrxj41A==", - "dependencies": { - "@clerk/types": "^4.6.1", - "@radix-ui/react-form": "^0.0.3", - "@radix-ui/react-slot": "^1.0.2", - "@xstate/react": "^4.1.1", - "client-only": "^0.0.1", - "xstate": "^5.13.0" - }, - "engines": { - "node": ">=18.17.0" - }, - "peerDependencies": { - "@clerk/clerk-react": "^5.0.0", - "@clerk/shared": "^2.0.0", - "next": "^13.5.4 || ^14.0.3 || ^15.0.0-rc", - "react": "^18.0.0 || ^19.0.0-beta", - "react-dom": "^18.0.0 || ^19.0.0-beta" - }, - "peerDependenciesMeta": { - "next": { - "optional": true - } - } - }, - "packages/ui/node_modules/@clerk/shared": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-2.3.1.tgz", - "integrity": "sha512-WX7cCViYqkNMnbFfT2B93ykNcSseoYM1obMUynO60VBl9Zi6Epde5tn9VRamhuOdojgPR+DyYkH9AzBpXFYnSg==", - "hasInstallScript": true, - "dependencies": { - "@clerk/types": "4.6.1", - "glob-to-regexp": "0.4.1", - "js-cookie": "3.0.5", - "std-env": "^3.7.0", - "swr": "^2.2.0" - }, - "engines": { - "node": ">=18.17.0" - }, - "peerDependencies": { - "react": ">=18 || >=19.0.0-beta", - "react-dom": ">=18 || >=19.0.0-beta" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - } - }, - "packages/ui/node_modules/@clerk/types": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/@clerk/types/-/types-4.6.1.tgz", - "integrity": "sha512-QFeNKPYDmTJ88l5QYG0SPwbABk42wRMalW3M/wAtr+wnQxBCXyX2XRZe9h4g2rH1VF+wG4Xe56abeeD+xE4iEw==", - "dependencies": { - "csstype": "3.1.1" - }, - "engines": { - "node": ">=18.17.0" - } - }, "packages/ui/node_modules/@radix-ui/react-compose-refs": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", @@ -51311,43 +51176,6 @@ } } }, - "packages/ui/node_modules/@xstate/react": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/@xstate/react/-/react-4.1.1.tgz", - "integrity": "sha512-pFp/Y+bnczfaZ0V8B4LOhx3d6Gd71YKAPbzerGqydC2nsYN/mp7RZu3q/w6/kvI2hwR/jeDeetM7xc3JFZH2NA==", - "dependencies": { - "use-isomorphic-layout-effect": "^1.1.2", - "use-sync-external-store": "^1.2.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "xstate": "^5.11.0" - }, - "peerDependenciesMeta": { - "xstate": { - "optional": true - } - } - }, - "packages/ui/node_modules/csstype": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", - "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" - }, - "packages/ui/node_modules/tslib": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz", - "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==" - }, - "packages/ui/node_modules/xstate": { - "version": "5.13.2", - "resolved": "https://registry.npmjs.org/xstate/-/xstate-5.13.2.tgz", - "integrity": "sha512-cFbFJUuK7n8NGe9rsT9G8QjK/8KQO5WaxCkpl1GxnvSDb9oXM/+cbZbEtLT/YaAjDfaGA2nzOKyw5oev2LuNRw==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/xstate" - } - }, "packages/upgrade": { "name": "@clerk/upgrade", "version": "1.0.8", diff --git a/packages/elements/src/internals/machines/sign-up/start.machine.ts b/packages/elements/src/internals/machines/sign-up/start.machine.ts index 00a20a69368..31110ef9fb9 100644 --- a/packages/elements/src/internals/machines/sign-up/start.machine.ts +++ b/packages/elements/src/internals/machines/sign-up/start.machine.ts @@ -1,5 +1,5 @@ import type { SignUpResource } from '@clerk/types'; -import { fromPromise, not, sendTo, setup } from 'xstate'; +import { enqueueActions, fromPromise, not, sendTo, setup } from 'xstate'; import { SIGN_UP_DEFAULT_BASE_PATH } from '~/internals/constants'; import type { FormFields } from '~/internals/machines/form'; @@ -15,6 +15,12 @@ export type TSignUpStartMachine = typeof SignUpStartMachine; export const SignUpStartMachineId = 'SignUpStart'; +type PrefillFieldsKeys = keyof Pick< + SignUpResource, + 'username' | 'firstName' | 'lastName' | 'emailAddress' | 'phoneNumber' +>; +const PREFILL_FIELDS: PrefillFieldsKeys[] = ['firstName', 'lastName', 'emailAddress', 'username', 'phoneNumber']; + export const SignUpStartMachine = setup({ actors: { attempt: fromPromise( @@ -56,6 +62,19 @@ export const SignUpStartMachine = setup({ Pending: { tags: ['state:pending'], description: 'Waiting for user input', + entry: [ + enqueueActions(({ context, enqueue }) => { + PREFILL_FIELDS.forEach(field => { + enqueue.sendTo(context.formRef, { + type: 'FIELD.ADD', + field: { + name: field, + value: context.parent.getSnapshot().context.clerk?.client?.signUp?.[field] || '', + }, + }); + }); + }), + ], on: { SUBMIT: { guard: not('isExampleMode'), diff --git a/packages/ui/package.json b/packages/ui/package.json index c91cbbef546..9dcb6603305 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -36,10 +36,10 @@ "bundlewatch": "npx bundlewatch --config bundlewatch.config.json" }, "dependencies": { - "@clerk/clerk-react": "*", - "@clerk/elements": "*", - "@clerk/shared": "*", - "@clerk/types": "*", + "@clerk/clerk-react": "file:../react", + "@clerk/elements": "file:../elements", + "@clerk/shared": "file:../shared", + "@clerk/types": "file:../types", "@radix-ui/react-slot": "^1.1.0", "cmdk": "^1.0.0", "cva": "^1.0.0-beta.1",