feat(clerk-js): Use Account Portal for popup callback

Author: dstaley

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

@@ -1752,13 +1752,22 @@ export class Clerk implements ClerkInterface {
   };
 
   public authenticateWithPopup = async (
-    params: AuthenticateWithRedirectParams & { popupCallbackUrl: string; popup: Window | null },
+    params: AuthenticateWithRedirectParams & { popup: Window | null },
   ): Promise<void> => {
     if (!this.client || !this.environment || !params.popup) {
       return;
     }
 
-    const { redirectUrl, popupCallbackUrl } = params;
+    const accountPortalDomain = this.frontendApi
+      // staging accounts
+      .replace(/clerk\.accountsstage\./, 'accountsstage.')
+      .replace(/clerk\.accounts\.|clerk\./, 'accounts.');
+
+    const { redirectUrl } = params;
+
+    const popupRedirectUrlComplete = `https://${accountPortalDomain}/popup-callback`;
+    const popupRedirectUrl = `https://${accountPortalDomain}/popup-callback?destination=${encodeURIComponent(redirectUrl)}`;
+
     window.addEventListener('message', async event => {
       if (event.origin !== window.location.origin) return;
       if (event.data.session) {
@@ -1775,7 +1784,8 @@ export class Clerk implements ClerkInterface {
     });
     await this.client.signIn.authenticateWithPopup({
       ...params,
-      redirectUrlComplete: popupCallbackUrl,
+      redirectUrlComplete: popupRedirectUrlComplete,
+      redirectUrl: popupRedirectUrl,
     });
   };
 

packages/clerk-js/src/ui/common/redirects.ts

@@ -39,20 +39,6 @@ export function buildSSOCallbackURL(
   });
 }
 
-export function buildPopupCallbackURL(
-  ctx: Partial<SignInContextType | SignUpContextType>,
-  baseUrl: string | undefined = '',
-): string {
-  const { routing, authQueryString, path } = ctx;
-  return buildRedirectUrl({
-    routing,
-    baseUrl,
-    authQueryString,
-    path,
-    endpoint: '/popup-callback',
-  });
-}
-
 type AuthQueryString = string | null | undefined;
 
 type BuildRedirectUrlParams = {

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

@@ -24,7 +24,6 @@ import { ResetPasswordSuccess } from './ResetPasswordSuccess';
 import { SignInAccountSwitcher } from './SignInAccountSwitcher';
 import { SignInFactorOne } from './SignInFactorOne';
 import { SignInFactorTwo } from './SignInFactorTwo';
-import { SignInPopupCallback } from './SignInPopupCallback';
 import { SignInSSOCallback } from './SignInSSOCallback';
 import { SignInStart } from './SignInStart';
 
@@ -68,9 +67,6 @@ function SignInRoutes(): JSX.Element {
             resetPasswordUrl={'../reset-password'}
           />
         </Route>
-        <Route path='popup-callback'>
-          <SignInPopupCallback />
-        </Route>
         <Route path='choose'>
           <SignInAccountSwitcher />
         </Route>

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

@@ -1,7 +1,7 @@
 import { useClerk } from '@clerk/shared/react';
 import React from 'react';
 
-import { buildPopupCallbackURL, buildSSOCallbackURL } from '../../common/redirects';
+import { buildSSOCallbackURL } from '../../common/redirects';
 import { useSignInContext } from '../../contexts';
 import { useEnvironment } from '../../contexts/EnvironmentContext';
 import { useCardState } from '../../elements/contexts';
@@ -17,7 +17,6 @@ export const SignInSocialButtons = React.memo((props: SocialButtonsProps) => {
   const { displayConfig } = useEnvironment();
   const ctx = useSignInContext();
   const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);
-  const popupCallbackUrl = buildPopupCallbackURL(ctx, displayConfig.signInUrl);
   const redirectUrlComplete = ctx.afterSignInUrl || '/';
 
   return (
@@ -26,7 +25,7 @@ export const SignInSocialButtons = React.memo((props: SocialButtonsProps) => {
       oauthCallback={strategy => {
         const popup = window.open('about:blank', '', 'width=600,height=600');
         return clerk
-          .authenticateWithPopup({ strategy, redirectUrl, redirectUrlComplete, popupCallbackUrl, popup })
+          .authenticateWithPopup({ strategy, redirectUrl, redirectUrlComplete, popup })
           .catch(err => handleError(err, [], card.setError));
       }}
       web3Callback={strategy => {

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

@@ -588,9 +588,7 @@ export interface Clerk {
     params: AuthenticateWithGoogleOneTapParams,
   ) => Promise<SignInResource | SignUpResource>;
 
-  authenticateWithPopup: (
-    params: AuthenticateWithRedirectParams & { popupCallbackUrl: string; popup: Window | null },
-  ) => Promise<unknown>;
+  authenticateWithPopup: (params: AuthenticateWithRedirectParams & { popup: Window | null }) => Promise<unknown>;
 
   /**
    * Creates an organization, adding the current user as admin.