fix(clerk-js): Return to sign up page if no identifier is present in …

…the verify routes

.changeset/beige-snails-hide.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Navigate to the signUp url if user visits the verify-email-address/verify-phone-number route without the proper identifier present

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -14,10 +14,9 @@ import { SignInSSOCallback } from './SignInSSOCallback';
 import { SignInStart } from './SignInStart';
 
 function RedirectToSignIn() {
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { redirectToSignIn } = useCoreClerk();
+  const clerk = useCoreClerk();
   React.useEffect(() => {
-    void redirectToSignIn();
+    void clerk.redirectToSignIn();
   }, []);
   return null;
 }

packages/clerk-js/src/ui/components/SignUp/SignUp.tsx

@@ -12,9 +12,9 @@ import { SignUpVerifyEmail } from './SignUpVerifyEmail';
 import { SignUpVerifyPhone } from './SignUpVerifyPhone';
 
 function RedirectToSignUp() {
-  const { redirectToSignUp } = useCoreClerk();
+  const clerk = useCoreClerk();
   React.useEffect(() => {
-    void redirectToSignUp();
+    void clerk.redirectToSignUp();
   }, []);
   return null;
 }

packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx

@@ -77,7 +77,7 @@ export const SignUpEmailLinkCard = () => {
         formSubtitle={localizationKeys('signUp.emailLink.formSubtitle')}
         resendButton={localizationKeys('signUp.emailLink.resendButton')}
         onResendCodeClicked={restartVerification}
-        safeIdentifier={signUp.emailAddress || ''}
+        safeIdentifier={signUp.emailAddress}
       />
     </Flow.Part>
   );

packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx

@@ -15,7 +15,7 @@ type SignInFactorOneCodeFormProps = {
   resendButton: LocalizationKey;
   prepare: () => Promise<SignUpResource> | undefined;
   attempt: (code: string) => Promise<SignUpResource>;
-  safeIdentifier: string | undefined | null;
+  safeIdentifier?: string | undefined | null;
 };
 
 export const SignUpVerificationCodeForm = (props: SignInFactorOneCodeFormProps) => {
@@ -28,7 +28,7 @@ export const SignUpVerificationCodeForm = (props: SignInFactorOneCodeFormProps)
   };
 
   const action: VerificationCodeCardProps['onCodeEntryFinishedAction'] = (code, resolve, reject) => {
-    return props
+    void props
       .attempt(code)
       .then(async res => {
         await resolve();
@@ -55,7 +55,7 @@ export const SignUpVerificationCodeForm = (props: SignInFactorOneCodeFormProps)
       resendButton={props.resendButton}
       onCodeEntryFinishedAction={action}
       onResendCodeClicked={props.prepare}
-      safeIdentifier={props.safeIdentifier || ''}
+      safeIdentifier={props.safeIdentifier}
       onIdentityPreviewEditClicked={goBack}
     />
   );

packages/clerk-js/src/ui/components/SignUp/SignUpVerifyEmail.tsx

@@ -1,12 +1,24 @@
-import { useEnvironment } from '../../contexts';
+import { useEffect } from 'react';
+
+import { useCoreSignUp, useEnvironment } from '../../contexts';
 import { withCardStateProvider } from '../../elements';
+import { useRouter } from '../../router';
 import { SignUpEmailCodeCard } from './SignUpEmailCodeCard';
 import { SignUpEmailLinkCard } from './SignUpEmailLinkCard';
 
 export const SignUpVerifyEmail = withCardStateProvider(() => {
   const { userSettings } = useEnvironment();
+  const signUp = useCoreSignUp();
+  const router = useRouter();
   const { attributes } = userSettings;
 
+  //TODO: remove this once a global solution for route validation is ready
+  useEffect(() => {
+    if (!signUp.emailAddress) {
+      void router.navigate('../');
+    }
+  }, []);
+
   const emailLinkStrategyEnabled = attributes.email_address.verifications.includes('email_link');
   if (emailLinkStrategyEnabled) {
     return <SignUpEmailLinkCard />;

packages/clerk-js/src/ui/components/SignUp/SignUpVerifyPhone.tsx

@@ -1,5 +1,19 @@
+import { useEffect } from 'react';
+
+import { useCoreSignUp } from '../../contexts';
+import { useRouter } from '../../router';
 import { SignUpPhoneCodeCard } from './SignUpPhoneCodeCard';
 
 export const SignUpVerifyPhone = () => {
+  const signUp = useCoreSignUp();
+  const router = useRouter();
+
+  //TODO: remove this once a global solution for route validation is ready
+  useEffect(() => {
+    if (!signUp.phoneNumber) {
+      void router.navigate('../');
+    }
+  }, []);
+
   return <SignUpPhoneCodeCard />;
 };

packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx

@@ -19,8 +19,8 @@ export type VerificationCodeCardProps = {
   cardSubtitle: LocalizationKey;
   formTitle: LocalizationKey;
   formSubtitle: LocalizationKey;
+  safeIdentifier?: string | undefined | null;
   resendButton?: LocalizationKey;
-  safeIdentifier?: string;
   profileImageUrl?: string;
   onCodeEntryFinishedAction: (
     code: string,

packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx

@@ -12,7 +12,7 @@ import { IdentityPreview } from './IdentityPreview';
 import { TimerButton } from './TimerButton';
 
 type VerificationLinkCardProps = {
-  safeIdentifier: string;
+  safeIdentifier: string | undefined | null;
   cardTitle: LocalizationKey;
   cardSubtitle: LocalizationKey;
   formTitle: LocalizationKey;