From 3278b11ac62d2e21a5af1aacb95728581f25348b Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 4 Dec 2024 11:37:11 -0500 Subject: [PATCH 1/5] fix(clerk-js): Move signup id check into an effect within continue step --- .../ui/components/SignUp/SignUpContinue.tsx | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx index c08478e2990..b771c65b749 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx @@ -1,15 +1,9 @@ import { useClerk } from '@clerk/shared/react'; -import React, { useMemo } from 'react'; +import React, { useEffect, useMemo } from 'react'; import { useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts'; import { descriptors, Flex, Flow, localizationKeys } from '../../customizables'; -import { - Card, - Header, - LoadingCard, - SocialButtonsReversibleContainerWithDivider, - withCardStateProvider, -} from '../../elements'; +import { Card, Header, SocialButtonsReversibleContainerWithDivider, withCardStateProvider } from '../../elements'; import { useCardState } from '../../elements/contexts'; import { useRouter } from '../../router'; import type { FormControlState } from '../../utils'; @@ -84,11 +78,13 @@ function _SignUpContinue() { [signUp.missingFields], ); - // Redirect to sign-up if there is no persisted sign-up - if (!signUp.id) { - void navigate(displayConfig.signUpUrl); - return ; - } + useEffect(() => { + // Redirect to sign-up if there is no persisted sign-up + if (!signUp.id) { + void navigate(displayConfig.signUpUrl); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); const hasEmail = !!formState.emailAddress.value; const hasVerifiedExternalAccount = signUp.verifications?.externalAccount?.status == 'verified'; From cc20f17d4d188ea07f55a3a9527b9724349ba6e3 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 4 Dec 2024 11:41:10 -0500 Subject: [PATCH 2/5] add changeset --- .changeset/clean-rivers-sleep.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/clean-rivers-sleep.md diff --git a/.changeset/clean-rivers-sleep.md b/.changeset/clean-rivers-sleep.md new file mode 100644 index 00000000000..6cf7461efb9 --- /dev/null +++ b/.changeset/clean-rivers-sleep.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Fixes an issue during sign-up flow where a user lands on the continue step, and proceeds successfully through the sign-up process and gets redirected to AP sign-up due to signUp.id being undefined. From e1878a7a3e6cf40ccc5491d2155b966f6b969625 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 4 Dec 2024 11:56:35 -0500 Subject: [PATCH 3/5] Remove --- .../components/SignUp/__tests__/SignUpContinue.test.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx index e058ca32fdc..11c4bc65cf2 100644 --- a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx @@ -18,15 +18,6 @@ describe('SignUpContinue', () => { screen.getByText(/missing/i); }); - it('does not render the form if there is not a persisted sign up', async () => { - const { wrapper } = await createFixtures(f => { - f.withEmailAddress({ required: true }); - f.withPassword({ required: true }); - }); - render(, { wrapper }); - expect(screen.queryByText(/missing/i)).toBeNull(); - }); - it('navigates to the sign up page if there is not a persisted sign up', async () => { const { wrapper, fixtures } = await createFixtures(f => { f.withEmailAddress({ required: true }); From 72cda2033e51a7d304079ee426c72bcfbfd3c870 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 4 Dec 2024 13:07:51 -0500 Subject: [PATCH 4/5] bring back test --- .../components/SignUp/__tests__/SignUpContinue.test.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx index 11c4bc65cf2..e058ca32fdc 100644 --- a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx @@ -18,6 +18,15 @@ describe('SignUpContinue', () => { screen.getByText(/missing/i); }); + it('does not render the form if there is not a persisted sign up', async () => { + const { wrapper } = await createFixtures(f => { + f.withEmailAddress({ required: true }); + f.withPassword({ required: true }); + }); + render(, { wrapper }); + expect(screen.queryByText(/missing/i)).toBeNull(); + }); + it('navigates to the sign up page if there is not a persisted sign up', async () => { const { wrapper, fixtures } = await createFixtures(f => { f.withEmailAddress({ required: true }); From c3f3b76e61e0a3ceb4ac0da27e4230258d247443 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 4 Dec 2024 13:39:25 -0500 Subject: [PATCH 5/5] include loading card --- .../src/ui/components/SignUp/SignUpContinue.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx index b771c65b749..37444a1ed8a 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx @@ -3,7 +3,13 @@ import React, { useEffect, useMemo } from 'react'; import { useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts'; import { descriptors, Flex, Flow, localizationKeys } from '../../customizables'; -import { Card, Header, SocialButtonsReversibleContainerWithDivider, withCardStateProvider } from '../../elements'; +import { + Card, + Header, + LoadingCard, + SocialButtonsReversibleContainerWithDivider, + withCardStateProvider, +} from '../../elements'; import { useCardState } from '../../elements/contexts'; import { useRouter } from '../../router'; import type { FormControlState } from '../../utils'; @@ -86,6 +92,10 @@ function _SignUpContinue() { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + if (!signUp.id) { + return ; + } + const hasEmail = !!formState.emailAddress.value; const hasVerifiedExternalAccount = signUp.verifications?.externalAccount?.status == 'verified'; const hasVerifiedWeb3 = signUp.verifications?.web3Wallet?.status == 'verified';