fix(clerk-js): Navigate to specific instance for configuration after keyless (#5013)

Author: panteliselef

.changeset/thirty-badgers-hammer.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Navigate to specific instance instead of /last-active for configuration after keyless.

packages/clerk-js/bundlewatch.config.json

@@ -18,6 +18,6 @@
     { "path": "./dist/userverification*.js", "maxSize": "5KB" },
     { "path": "./dist/onetap*.js", "maxSize": "1KB" },
     { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
-    { "path": "./dist/keylessPrompt*.js", "maxSize": "5.7KB" }
+    { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" }
   ]
 }

packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx

@@ -22,6 +22,60 @@ const buttonIdentifierPrefix = `--clerk-keyless-prompt`;
 const buttonIdentifier = `${buttonIdentifierPrefix}-button`;
 const contentIdentifier = `${buttonIdentifierPrefix}-content`;
 
+const baseElementStyles = css`
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  line-height: 1.5;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    helvetica,
+    Cantarell,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
+    sans-serif;
+  text-decoration: none;
+`;
+
+/**
+ * If we cannot reconstruct the url properly, then simply fallback to Clerk Dashboard
+ */
+function withLastActiveFallback(cb: () => string): string {
+  try {
+    return cb();
+  } catch {
+    return 'https://dashboard.clerk.com/last-active';
+  }
+}
+
+function handleDashboardUrlParsing(url: string) {
+  // make sure this is a valid url
+  const __url = new URL(url);
+  const regex = /^https?:\/\/(.*?)\/apps\/app_(.+?)\/instances\/ins_(.+?)(?:\/.*)?$/;
+
+  const match = __url.href.match(regex);
+
+  if (!match) {
+    throw new Error('invalid value dashboard url structure');
+  }
+
+  // Extracting base domain, app ID with prefix, and instanceId with prefix
+  return {
+    baseDomain: `https://${match[1]}`,
+    appId: `app_${match[2]}`,
+    instanceId: `ins_${match[3]}`,
+  };
+}
+
 const _KeylessPrompt = (_props: KeylessPromptProps) => {
   const { isSignedIn } = useUser();
   const [isExpanded, setIsExpanded] = useState(false);
@@ -38,8 +92,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
   const appName = environment.displayConfig.applicationName;
 
   const isForcedExpanded = claimed || success || isExpanded;
-
-  const urlToDashboard = useMemo(() => {
+  const claimUrlToDashboard = useMemo(() => {
     if (claimed) {
       return _props.copyKeysUrl;
     }
@@ -50,29 +103,23 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
     return url.href;
   }, [claimed, _props.copyKeysUrl, _props.claimUrl]);
 
-  const baseElementStyles = css`
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    background: none;
-    border: none;
-    line-height: 1.5;
-    font-family:
-      -apple-system,
-      BlinkMacSystemFont,
-      avenir next,
-      avenir,
-      segoe ui,
-      helvetica neue,
-      helvetica,
-      Cantarell,
-      Ubuntu,
-      roboto,
-      noto,
-      arial,
-      sans-serif;
-    text-decoration: none;
-  `;
+  const instanceUrlToDashboard = useMemo(() => {
+    return withLastActiveFallback(() => {
+      const redirectUrlParts = handleDashboardUrlParsing(_props.copyKeysUrl);
+      const url = new URL(
+        `${redirectUrlParts.baseDomain}/apps/${redirectUrlParts.appId}/instances/${redirectUrlParts.instanceId}/user-authentication/email-phone-username`,
+      );
+      return url.href;
+    });
+  }, [_props.copyKeysUrl]);
+
+  const getKeysUrlFromLastActive = useMemo(() => {
+    return withLastActiveFallback(() => {
+      const redirectUrlParts = handleDashboardUrlParsing(_props.copyKeysUrl);
+      const url = new URL(`${redirectUrlParts.baseDomain}/last-active?path=api-keys`);
+      return url.href;
+    });
+  }, [_props.copyKeysUrl]);
 
   const mainCTAStyles = css`
     ${baseElementStyles};
@@ -375,7 +422,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
                   <Link
                     isExternal
                     aria-label='Go to Dashboard to configure settings'
-                    href='https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username'
+                    href={instanceUrlToDashboard}
                     sx={t => ({
                       color: t.colors.$whiteAlpha600,
                       textDecoration: 'underline solid',
@@ -413,6 +460,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
                 }}
                 css={css`
                   ${mainCTAStyles};
+
                   &:hover {
                     background: #4b4b4b;
                     transition: all 120ms ease-in-out;
@@ -431,7 +479,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
                 })}
               >
                 <a
-                  href={urlToDashboard}
+                  href={claimUrlToDashboard}
                   target='_blank'
                   rel='noopener noreferrer'
                   css={css`
@@ -481,14 +529,15 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
                     />
 
                     <a
-                      href='https://dashboard.clerk.com/last-active?path=api-keys'
+                      href={getKeysUrlFromLastActive}
                       target='_blank'
                       rel='noopener noreferrer'
                       css={css`
                         ${baseElementStyles};
                         color: #ffffff9e;
                         font-size: 0.75rem;
                         transition: color 120ms ease-out;
+
                         :hover {
                           color: #ffffffcf;
                           text-decoration: none;