feat(clerk-js,backend): Url for copying instance keys on Keyless mode (#4755)

Author: panteliselef

.changeset/gold-monkeys-collect.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/nextjs': patch
+'@clerk/types': patch
+---
+
+Introduce `__internal_copyInstanceKeysUrl` as property in `ClerkOptions`. It is intented for internall usage from other Clerk SDKs and will be used in Keyless mode.

.changeset/twelve-spiders-obey.md

@@ -0,0 +1,5 @@
+---
+'@clerk/backend': patch
+---
+
+Add property `api_keys_url` in the `AccountlessApplication` class

packages/backend/src/api/resources/AccountlessApplication.ts

@@ -5,9 +5,10 @@ export class AccountlessApplication {
     readonly publishableKey: string,
     readonly secretKey: string,
     readonly claimUrl: string,
+    readonly apiKeysUrl: string,
   ) {}
 
   static fromJSON(data: AccountlessApplicationJSON): AccountlessApplication {
-    return new AccountlessApplication(data.publishable_key, data.secret_key, data.claim_url);
+    return new AccountlessApplication(data.publishable_key, data.secret_key, data.claim_url, data.api_keys_url);
   }
 }

packages/backend/src/api/resources/JSON.ts

@@ -54,6 +54,7 @@ export interface AccountlessApplicationJSON extends ClerkResourceJSON {
   publishable_key: string;
   secret_key: string;
   claim_url: string;
+  api_keys_url: string;
 }
 
 export interface AllowlistIdentifierJSON extends ClerkResourceJSON {

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

@@ -2052,7 +2052,10 @@ export class Clerk implements ClerkInterface {
       void this.#componentControls?.ensureMounted().then(controls => {
         if (this.#options.__internal_claimKeylessApplicationUrl) {
           controls.updateProps({
-            options: { __internal_claimKeylessApplicationUrl: this.#options.__internal_claimKeylessApplicationUrl },
+            options: {
+              __internal_claimKeylessApplicationUrl: this.#options.__internal_claimKeylessApplicationUrl,
+              __internal_copyInstanceKeysUrl: this.#options.__internal_copyInstanceKeysUrl,
+            },
           });
         }
       });

packages/clerk-js/src/ui/Components.tsx

@@ -518,9 +518,13 @@ const Components = (props: ComponentsProps) => {
         )}
 
         {__BUILD_FLAG_KEYLESS_UI__
-          ? state.options?.__internal_claimKeylessApplicationUrl && (
+          ? state.options?.__internal_claimKeylessApplicationUrl &&
+            state.options?.__internal_copyInstanceKeysUrl && (
               <LazyImpersonationFabProvider globalAppearance={state.appearance}>
-                <KeylessPrompt url={state.options.__internal_claimKeylessApplicationUrl} />
+                <KeylessPrompt
+                  claimUrl={state.options.__internal_claimKeylessApplicationUrl}
+                  copyKeysUrl={state.options.__internal_copyInstanceKeysUrl}
+                />
               </LazyImpersonationFabProvider>
             )
           : null}

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

@@ -1,3 +1,4 @@
+import { useClerk } from '@clerk/shared/react';
 // eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/react';
 import { useState } from 'react';
@@ -9,12 +10,14 @@ import { ClerkLogoIcon } from './ClerkLogoIcon';
 import { KeySlashIcon } from './KeySlashIcon';
 
 type KeylessPromptProps = {
-  url?: string;
+  claimUrl: string;
+  copyKeysUrl: string;
 };
 
 const _KeylessPrompt = (_props: KeylessPromptProps) => {
   const [isExpanded, setIsExpanded] = useState(true);
   const handleFocus = () => setIsExpanded(true);
+  const clerk = useClerk();
 
   return (
     <Portal>
@@ -310,6 +313,9 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
           type='button'
           onFocus={handleFocus}
           data-expanded={isExpanded}
+          onClick={() => {
+            void clerk.navigate(_props.claimUrl);
+          }}
           css={css`
             position: absolute;
             right: 0.375rem;

packages/nextjs/src/app-router/client/keyless-creator-reader.tsx

@@ -20,6 +20,7 @@ export const KeylessCreatorOrReader = (props: NextClerkProviderProps) => {
     key: state?.publishableKey,
     publishableKey: state?.publishableKey,
     __internal_claimKeylessApplicationUrl: state?.claimUrl,
+    __internal_copyInstanceKeysUrl: state?.apiKeysUrl,
     __internal_bypassMissingPublishableKey: true,
   } as any);
 };

packages/nextjs/src/app-router/keyless-actions.ts

@@ -30,7 +30,7 @@ export async function createOrReadKeylessAction(): Promise<null | Omit<Accountle
     return null;
   }
 
-  const { claimUrl, publishableKey, secretKey } = result;
+  const { claimUrl, publishableKey, secretKey, apiKeysUrl } = result;
 
   void (await cookies()).set(getKeylessCookieName(), JSON.stringify({ claimUrl, publishableKey, secretKey }), {
     secure: false,
@@ -40,5 +40,6 @@ export async function createOrReadKeylessAction(): Promise<null | Omit<Accountle
   return {
     claimUrl,
     publishableKey,
+    apiKeysUrl,
   };
 }

packages/nextjs/src/app-router/server/ClerkProvider.tsx

@@ -73,6 +73,7 @@ export async function ClerkProvider(
               ...rest,
               publishableKey: newOrReadKeys.publishableKey,
               __internal_claimKeylessApplicationUrl: newOrReadKeys.claimUrl,
+              __internal_copyInstanceKeysUrl: newOrReadKeys.apiKeysUrl,
             })}
             nonce={await nonce}
             initialState={await statePromise}