diff --git a/.changeset/lovely-pandas-film.md b/.changeset/lovely-pandas-film.md new file mode 100644 index 00000000..e5401d02 --- /dev/null +++ b/.changeset/lovely-pandas-film.md @@ -0,0 +1,5 @@ +--- +"@slashid/react": patch +--- + +Fix the subscriptions logic in the OTP component diff --git a/packages/react/package.json b/packages/react/package.json index db20243c..00f403d9 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -60,7 +60,7 @@ }, "devDependencies": { "@faker-js/faker": "^8.0.2", - "@slashid/slashid": "3.29.0", + "@slashid/slashid": "3.29.4", "@storybook/addon-essentials": "7.6.19", "@storybook/addon-interactions": "7.4.0", "@storybook/addon-links": "7.4.0", @@ -95,7 +95,7 @@ "yalc": "1.0.0-pre.53" }, "peerDependencies": { - "@slashid/slashid": ">= 3.28.0", + "@slashid/slashid": ">= 3.29.4", "react": ">=16", "react-dom": ">=16" } diff --git a/packages/react/src/components/form/authenticating/otp.tsx b/packages/react/src/components/form/authenticating/otp.tsx index 3e9afa7f..96dd3a87 100644 --- a/packages/react/src/components/form/authenticating/otp.tsx +++ b/packages/react/src/components/form/authenticating/otp.tsx @@ -69,8 +69,14 @@ function mapFormStateToMessageState( export const OTPState = ({ flowState }: Props) => { const { text } = useConfiguration(); const { sid, subscribe, unsubscribe } = useSlashID(); - const { values, registerField, registerSubmit, setError, clearError } = - useForm(); + const { + values, + registerField, + registerSubmit, + setError, + clearError, + resetForm, + } = useForm(); const [formState, setFormState] = useState("initial"); const submitInputRef = useRef(null); @@ -81,16 +87,16 @@ export const OTPState = ({ flowState }: Props) => { }); }, [factor, formState, handle]); - useEffect(() => { - const onOtpCodeSent = () => setFormState("input"); - const onOtpIncorrectCodeSubmitted = () => { - setError("otp", { - message: text["authenticating.otpInput.submit.error"], - }); - values["otp"] = ""; - setFormState("input"); - }; + const onOtpCodeSent = useCallback(() => setFormState("input"), []); + const onOtpIncorrectCodeSubmitted = useCallback(() => { + resetForm(); + setError("otp", { + message: text["authenticating.otpInput.submit.error"], + }); + setFormState("input"); + }, [resetForm, setError, text]); + useEffect(() => { subscribe("otpCodeSent", onOtpCodeSent); subscribe("otpIncorrectCodeSubmitted", onOtpIncorrectCodeSubmitted); @@ -98,7 +104,7 @@ export const OTPState = ({ flowState }: Props) => { unsubscribe("otpCodeSent", onOtpCodeSent); unsubscribe("otpIncorrectCodeSubmitted", onOtpIncorrectCodeSubmitted); }; - }, [formState, setError, sid, subscribe, text, unsubscribe, values]); + }, [onOtpCodeSent, onOtpIncorrectCodeSubmitted, subscribe, unsubscribe]); const handleSubmit: FormEventHandler = useCallback( (e) => { diff --git a/packages/remix/package.json b/packages/remix/package.json index f75e0e2d..b0be0cce 100644 --- a/packages/remix/package.json +++ b/packages/remix/package.json @@ -10,7 +10,7 @@ "module": "dist/main.js", "dependencies": { "@slashid/react": "workspace:*", - "@slashid/slashid": "3.29.0", + "@slashid/slashid": "3.29.4", "jose": "^5.2.0", "url-join": "^5.0.0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 855e1c6d..569140b8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -348,8 +348,8 @@ importers: specifier: ^8.0.2 version: 8.3.1 '@slashid/slashid': - specifier: 3.29.0 - version: 3.29.0 + specifier: 3.29.4 + version: 3.29.4 '@storybook/addon-essentials': specifier: 7.6.19 version: 7.6.19(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0) @@ -598,8 +598,8 @@ importers: specifier: workspace:* version: link:../react '@slashid/slashid': - specifier: 3.29.0 - version: 3.29.0 + specifier: 3.29.4 + version: 3.29.4 jose: specifier: ^5.2.0 version: 5.2.0 @@ -3456,6 +3456,7 @@ packages: prettier: 2.8.8 resolve-from: 5.0.0 semver: 7.5.4 + dev: true /@changesets/assemble-release-plan@5.2.4: resolution: {integrity: sha512-xJkWX+1/CUaOUWTguXEbCDTyWJFECEhmdtbkjhn5GVBGxdP/JwaHBIU9sW3FR6gD07UwZ7ovpiPclQZs+j+mvg==} @@ -3477,6 +3478,7 @@ packages: '@changesets/types': 6.0.0 '@manypkg/get-packages': 1.1.3 semver: 7.5.4 + dev: true /@changesets/changelog-git@0.1.14: resolution: {integrity: sha512-+vRfnKtXVWsDDxGctOfzJsPhaCdXRYoe+KyWYoq5X/GqoISREiat0l3L8B0a453B2B4dfHGcZaGyowHbp9BSaA==} @@ -3487,6 +3489,7 @@ packages: resolution: {integrity: sha512-bHOx97iFI4OClIT35Lok3sJAwM31VbUM++gnMBV16fdbtBhgYu4dxsphBF/0AZZsyAHMrnM0yFcj5gZM1py6uQ==} dependencies: '@changesets/types': 6.0.0 + dev: true /@changesets/cli@2.26.2: resolution: {integrity: sha512-dnWrJTmRR8bCHikJHl9b9HW3gXACCehz4OasrXpMp7sx97ECuBGGNjJhjPhdZNCvMy9mn4BWdplI323IbqsRig==} @@ -3561,6 +3564,7 @@ packages: semver: 7.5.4 spawndamnit: 2.0.0 term-size: 2.2.1 + dev: true /@changesets/config@2.3.1: resolution: {integrity: sha512-PQXaJl82CfIXddUOppj4zWu+987GCw2M+eQcOepxN5s+kvnsZOwjEJO3DH9eVy+OP6Pg/KFEWdsECFEYTtbg6w==} @@ -3583,6 +3587,7 @@ packages: '@manypkg/get-packages': 1.1.3 fs-extra: 7.0.1 micromatch: 4.0.5 + dev: true /@changesets/errors@0.1.4: resolution: {integrity: sha512-HAcqPF7snsUJ/QzkWoKfRfXushHTu+K5KZLJWPb34s4eCZShIf8BFO3fwq6KU8+G7L5KdtN2BzQAXOSXEyiY9Q==} @@ -3593,6 +3598,7 @@ packages: resolution: {integrity: sha512-6BLOQUscTpZeGljvyQXlWOItQyU71kCdGz7Pi8H8zdw6BI0g3m43iL4xKUVPWtG+qrrL9DTjpdn8eYuCQSRpow==} dependencies: extendable-error: 0.1.7 + dev: true /@changesets/get-dependents-graph@1.3.6: resolution: {integrity: sha512-Q/sLgBANmkvUm09GgRsAvEtY3p1/5OCzgBE5vX3vgb5CvW0j7CEljocx5oPXeQSNph6FXulJlXV3Re/v3K3P3Q==} @@ -3611,6 +3617,7 @@ packages: chalk: 2.4.2 fs-extra: 7.0.1 semver: 7.5.4 + dev: true /@changesets/get-release-plan@3.0.17: resolution: {integrity: sha512-6IwKTubNEgoOZwDontYc2x2cWXfr6IKxP3IhKeK+WjyD6y3M4Gl/jdQvBw+m/5zWILSOCAaGLu2ZF6Q+WiPniw==} @@ -3633,12 +3640,14 @@ packages: '@changesets/read': 0.6.0 '@changesets/types': 6.0.0 '@manypkg/get-packages': 1.1.3 + dev: true /@changesets/get-version-range-type@0.3.2: resolution: {integrity: sha512-SVqwYs5pULYjYT4op21F2pVbcrca4qA/bAA3FmFXKMN7Y+HcO8sbZUTx3TAy2VXulP2FACd1aC7f2nTuqSPbqg==} /@changesets/get-version-range-type@0.4.0: resolution: {integrity: sha512-hwawtob9DryoGTpixy1D3ZXbGgJu1Rhr+ySH2PvTLHvkZuQ7sRT4oQwMh0hbqZH1weAooedEjRsbrWcGLCeyVQ==} + dev: true /@changesets/git@2.0.0: resolution: {integrity: sha512-enUVEWbiqUTxqSnmesyJGWfzd51PY4H7mH9yUw0hPVpZBJ6tQZFMU3F3mT/t9OJ/GjyiM4770i+sehAn6ymx6A==} @@ -3661,6 +3670,7 @@ packages: is-subdir: 1.2.0 micromatch: 4.0.5 spawndamnit: 2.0.0 + dev: true /@changesets/logger@0.0.5: resolution: {integrity: sha512-gJyZHomu8nASHpaANzc6bkQMO9gU/ib20lqew1rVx753FOxffnCrJlGIeQVxNWCqM+o6OOleCo/ivL8UAO5iFw==} @@ -3671,6 +3681,7 @@ packages: resolution: {integrity: sha512-pBrJm4CQm9VqFVwWnSqKEfsS2ESnwqwH+xR7jETxIErZcfd1u2zBSqrHbRHR7xjhSgep9x2PSKFKY//FAshA3g==} dependencies: chalk: 2.4.2 + dev: true /@changesets/parse@0.3.16: resolution: {integrity: sha512-127JKNd167ayAuBjUggZBkmDS5fIKsthnr9jr6bdnuUljroiERW7FBTDNnNVyJ4l69PzR57pk6mXQdtJyBCJKg==} @@ -3683,6 +3694,7 @@ packages: dependencies: '@changesets/types': 6.0.0 js-yaml: 3.14.1 + dev: true /@changesets/pre@1.0.14: resolution: {integrity: sha512-dTsHmxQWEQekHYHbg+M1mDVYFvegDh9j/kySNuDKdylwfMEevTeDouR7IfHNyVodxZXu17sXoJuf2D0vi55FHQ==} @@ -3701,6 +3713,7 @@ packages: '@changesets/types': 6.0.0 '@manypkg/get-packages': 1.1.3 fs-extra: 7.0.1 + dev: true /@changesets/read@0.5.9: resolution: {integrity: sha512-T8BJ6JS6j1gfO1HFq50kU3qawYxa4NTbI/ASNVVCBTsKquy2HYwM9r7ZnzkiMe8IEObAJtUVGSrePCOxAK2haQ==} @@ -3725,6 +3738,7 @@ packages: chalk: 2.4.2 fs-extra: 7.0.1 p-filter: 2.1.0 + dev: true /@changesets/should-skip-package@0.1.0: resolution: {integrity: sha512-FxG6Mhjw7yFStlSM7Z0Gmg3RiyQ98d/9VpQAZ3Fzr59dCOM9G6ZdYbjiSAt0XtFr9JR5U2tBaJWPjrkGGc618g==} @@ -3732,6 +3746,7 @@ packages: '@babel/runtime': 7.23.2 '@changesets/types': 6.0.0 '@manypkg/get-packages': 1.1.3 + dev: true /@changesets/types@4.1.0: resolution: {integrity: sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw==} @@ -3741,6 +3756,7 @@ packages: /@changesets/types@6.0.0: resolution: {integrity: sha512-b1UkfNulgKoWfqyHtzKS5fOZYSJO+77adgL7DLRDr+/7jhChN+QcHnbjiQVOz/U+Ts3PGNySq7diAItzDgugfQ==} + dev: true /@changesets/write@0.2.3: resolution: {integrity: sha512-Dbamr7AIMvslKnNYsLFafaVORx4H0pvCA2MHqgtNCySMe1blImEyAEOzDmcgKAkgz4+uwoLz7demIrX+JBr/Xw==} @@ -3759,6 +3775,7 @@ packages: fs-extra: 7.0.1 human-id: 1.0.2 prettier: 2.8.8 + dev: true /@colors/colors@1.5.0: resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==} @@ -8754,6 +8771,21 @@ packages: ua-parser-js: 1.0.37 url: 0.11.3 uuid: 8.3.2 + dev: true + + /@slashid/slashid@3.29.4: + resolution: {integrity: sha512-0vn76lt7V5ZtmrtsR8cKhAlGISrpQpBWHb88FhQ7OU6t89ANLqNIOqyx2AGtx2WLSlXjm2ukJVLWlSQQrk0YVg==} + dependencies: + '@types/uuid': 8.3.4 + compare-versions: 6.1.0 + docdash: 1.2.0 + jwt-decode: 3.1.2 + qrcode: 1.5.3 + querystring-es3: 0.2.1 + regenerator-runtime: 0.13.11 + ua-parser-js: 1.0.37 + url: 0.11.3 + uuid: 8.3.2 /@storybook/addon-actions@7.6.19: resolution: {integrity: sha512-ATLrA5QKFJt7tIAScRHz5T3eBQ+RG3jaZk08L7gChvyQZhei8knWwePElZ7GaWbCr9BgznQp1lQUUXq/UUblAQ==} @@ -17350,6 +17382,7 @@ packages: /mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'} + dev: true /mrmime@1.0.1: resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}