feat(clerk-js,shared): Add support for modal sign-up in signals (#7193)

Author: dstaley

.changeset/fruity-rivers-say.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+---
+
+[Experimental] Add support for sign-up via modal in signals implementation

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

@@ -910,7 +910,8 @@ class SignInFuture implements SignInFutureResource {
   }
 
   async sso(params: SignInFutureSSOParams): Promise<{ error: ClerkError | null }> {
-    const { strategy, redirectUrl, redirectCallbackUrl, popup, oidcPrompt, enterpriseConnectionId } = params;
+    const { strategy, redirectUrl, redirectCallbackUrl, popup, oidcPrompt, enterpriseConnectionId, identifier } =
+      params;
     return runAsyncResourceTask(this.resource, async () => {
       let actionCompleteRedirectUrl = redirectUrl;
       try {
@@ -932,6 +933,7 @@ class SignInFuture implements SignInFutureResource {
       await this._create({
         strategy,
         ...routes,
+        identifier,
       });
 
       if (strategy === 'enterprise_sso') {

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

@@ -55,7 +55,11 @@ import {
   getOKXWalletIdentifier,
   windowNavigate,
 } from '../../utils';
-import { _authenticateWithPopup } from '../../utils/authenticateWithPopup';
+import {
+  _authenticateWithPopup,
+  _futureAuthenticateWithPopup,
+  wrapWithPopupRoutes,
+} from '../../utils/authenticateWithPopup';
 import { CaptchaChallenge } from '../../utils/captcha/CaptchaChallenge';
 import { createValidatePassword } from '../../utils/passwords/password';
 import { normalizeUnsafeMetadata } from '../../utils/resourceParams';
@@ -789,7 +793,17 @@ class SignUpFuture implements SignUpFutureResource {
   }
 
   async sso(params: SignUpFutureSSOParams): Promise<{ error: ClerkError | null }> {
-    const { strategy, redirectUrl, redirectCallbackUrl } = params;
+    const {
+      strategy,
+      redirectUrl,
+      redirectCallbackUrl,
+      unsafeMetadata,
+      legalAccepted,
+      oidcPrompt,
+      enterpriseConnectionId,
+      emailAddress,
+      popup,
+    } = params;
     return runAsyncResourceTask(this.resource, async () => {
       const { captchaToken, captchaWidgetType, captchaError } = await this.getCaptchaToken();
 
@@ -800,24 +814,56 @@ class SignUpFuture implements SignUpFutureResource {
         redirectUrlComplete = window.location.origin + redirectUrl;
       }
 
-      await this.resource.__internal_basePost({
-        path: this.resource.pathRoot,
-        body: {
-          strategy,
-          redirectUrl: SignUp.clerk.buildUrlWithAuth(redirectCallbackUrl),
-          redirectUrlComplete,
-          captchaToken,
-          captchaWidgetType,
-          captchaError,
-        },
+      const routes = {
+        redirectUrl: SignUp.clerk.buildUrlWithAuth(redirectCallbackUrl),
+        actionCompleteRedirectUrl: redirectUrlComplete,
+      };
+      if (popup) {
+        const wrappedRoutes = wrapWithPopupRoutes(SignUp.clerk, {
+          redirectCallbackUrl: routes.redirectUrl,
+          redirectUrl: redirectUrlComplete,
+        });
+        routes.redirectUrl = wrappedRoutes.redirectCallbackUrl;
+        routes.actionCompleteRedirectUrl = wrappedRoutes.redirectUrl;
+      }
+
+      const authenticateFn = () => {
+        return this.resource.__internal_basePost({
+          path: this.resource.pathRoot,
+          body: {
+            strategy,
+            ...routes,
+            unsafeMetadata,
+            legalAccepted,
+            oidcPrompt,
+            enterpriseConnectionId,
+            emailAddress,
+            captchaToken,
+            captchaWidgetType,
+            captchaError,
+          },
+        });
+      };
+
+      await authenticateFn().catch(async e => {
+        if (isClerkAPIResponseError(e) && isCaptchaError(e)) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          await SignUp.clerk.__unstable__environment!.reload();
+          return authenticateFn();
+        }
+        throw e;
       });
 
       const { status, externalVerificationRedirectURL } = this.resource.verifications.externalAccount;
 
-      if (status === 'unverified' && !!externalVerificationRedirectURL) {
-        windowNavigate(externalVerificationRedirectURL);
-      } else {
-        clerkInvalidFAPIResponse(status, SignUp.fapiClient.buildEmailAddress('support'));
+      if (status === 'unverified' && externalVerificationRedirectURL) {
+        if (popup) {
+          await _futureAuthenticateWithPopup(SignUp.clerk, { popup, externalVerificationRedirectURL });
+          // Pick up the modified SignUp resource
+          await this.resource.reload();
+        } else {
+          windowNavigate(externalVerificationRedirectURL);
+        }
       }
     });
   }

packages/shared/src/types/signInFuture.ts

@@ -192,7 +192,7 @@ export interface SignInFutureSSOParams {
    * await signIn.sso({ popup, strategy: 'oauth_google', redirectUrl: '/dashboard' });
    * ```
    */
-  popup?: { location: { href: string } };
+  popup?: Window;
   /**
    * Optional for `oauth_<provider>` or `enterprise_sso` strategies. The value to pass to the
    * [OIDC prompt parameter](https://openid.net/specs/openid-connect-core-1_0.html#:~:text=prompt,reauthentication%20and%20consent.)
@@ -203,6 +203,10 @@ export interface SignInFutureSSOParams {
    * @experimental
    */
   enterpriseConnectionId?: string;
+  /**
+   * The unique identifier of the user. Only supported with the `enterprise_sso` strategy.
+   */
+  identifier?: string;
 }
 
 export interface SignInFutureMFAPhoneCodeVerifyParams {

packages/shared/src/types/signUpFuture.ts

@@ -188,7 +188,7 @@ export interface SignUpFuturePhoneCodeVerifyParams {
   code: string;
 }
 
-export interface SignUpFutureSSOParams {
+export interface SignUpFutureSSOParams extends SignUpFutureAdditionalParams {
   /**
    * The strategy to use for authentication.
    */
@@ -202,6 +202,34 @@ export interface SignUpFutureSSOParams {
    * TODO @revamp-hooks: This should be handled by FAPI instead.
    */
   redirectCallbackUrl: string;
+  /**
+   * If provided, a `Window` to use for the OAuth flow. Useful in instances where you cannot navigate to an
+   * OAuth provider.
+   *
+   * @example
+   * ```ts
+   * const popup = window.open('about:blank', '', 'width=600,height=800');
+   * if (!popup) {
+   *   throw new Error('Failed to open popup');
+   * }
+   * await signIn.sso({ popup, strategy: 'oauth_google', redirectUrl: '/dashboard' });
+   * ```
+   */
+  popup?: Window;
+  /**
+   * Optional for `oauth_<provider>` or `enterprise_sso` strategies. The value to pass to the
+   * [OIDC prompt parameter](https://openid.net/specs/openid-connect-core-1_0.html#:~:text=prompt,reauthentication%20and%20consent.)
+   * in the generated OAuth redirect URL.
+   */
+  oidcPrompt?: string;
+  /**
+   * @experimental
+   */
+  enterpriseConnectionId?: string;
+  /**
+   * Email address to use for targeting an enterprise connection at sign-up.
+   */
+  emailAddress?: string;
 }
 
 export interface SignUpFutureTicketParams extends SignUpFutureAdditionalParams {