fix(clerk-js): Reload env and retry if authenticateWithRedirect fails (#4327)

Author: nikosdouvlis

.changeset/itchy-birds-juggle.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/src/core/resources/Environment.ts

@@ -33,7 +33,7 @@ export class Environment extends BaseResource implements EnvironmentResource {
     this.fromJSON(data);
   }
 
-  fetch({ touch = false }: { touch: boolean }): Promise<Environment> {
+  fetch({ touch }: { touch: boolean } = { touch: false }): Promise<Environment> {
     if (touch) {
       return this._basePatch({});
     }

packages/clerk-js/src/core/resources/SignUp.ts

@@ -260,15 +260,23 @@ export class SignUp extends BaseResource implements SignUpResource {
   }: AuthenticateWithRedirectParams & {
     unsafeMetadata?: SignUpUnsafeMetadata;
   }): Promise<void> => {
-    const authenticateFn = (args: SignUpCreateParams | SignUpUpdateParams) =>
-      continueSignUp && this.id ? this.update(args) : this.create(args);
-
-    const { verifications } = await authenticateFn({
-      strategy,
-      redirectUrl: SignUp.clerk.buildUrlWithAuth(redirectUrl),
-      actionCompleteRedirectUrl: redirectUrlComplete,
-      unsafeMetadata,
-      emailAddress,
+    const authenticateFn = () => {
+      const params = {
+        strategy,
+        redirectUrl: SignUp.clerk.buildUrlWithAuth(redirectUrl),
+        actionCompleteRedirectUrl: redirectUrlComplete,
+        unsafeMetadata,
+        emailAddress,
+      };
+      return continueSignUp && this.id ? this.update(params) : this.create(params);
+    };
+
+    const { verifications } = await authenticateFn().catch(async () => {
+      // If captcha verification failed because the environment has changed, we need
+      // to reload the environment and try again one more time with the new environment.
+      // If this fails again, we will let the caller handle the error accordingly.
+      await SignUp.clerk.__unstable__environment!.reload();
+      return authenticateFn();
     });
 
     const { externalAccount } = verifications;