From 8cdfa8f862c96aafb06512c1be72d7191d017fe1 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Thu, 5 Dec 2024 10:28:30 -0500 Subject: [PATCH] fix(clerk-js): Move signup id check into an effect within continue step (#4711) --- .changeset/clean-rivers-sleep.md | 5 +++++ .../src/ui/components/SignUp/SignUpContinue.tsx | 12 +++++++++--- 2 files changed, 14 insertions(+), 3 deletions(-) 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 0000000000..6cf7461efb --- /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. diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx index c08478e299..37444a1ed8 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx @@ -1,5 +1,5 @@ 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'; @@ -84,9 +84,15 @@ function _SignUpContinue() { [signUp.missingFields], ); - // Redirect to sign-up if there is no persisted sign-up + 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 + }, []); + if (!signUp.id) { - void navigate(displayConfig.signUpUrl); return ; }