Merge branch 'main' into rob/eco-276-re-export-vue-sdk-components-and…

…-composables-in-the-nuxt-sdk

.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/hungry-fishes-invent.md

@@ -0,0 +1,5 @@
+---
+"@clerk/astro": patch
+---
+
+Fix handshake redirect loop in Netlify deployments

.changeset/slow-cars-worry.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add `claimedAt` proprty inside AuthConfig for the environment. It describes when a instance that was created from the Keyless mode was finally claimed.

.changeset/twelve-spiders-obey.md

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

packages/astro/src/integration/create-integration.ts

@@ -109,7 +109,10 @@ function createIntegration<Params extends HotloadAstroClerkIntegrationParams>()
             'page',
             `
             ${command === 'dev' ? `console.log("${packageName}","Initialize Clerk: page")` : ''}
-            import { runInjectionScript, swapDocument } from "${buildImportPath}";
+            import { removeNetlifyCacheBustParam, runInjectionScript, swapDocument } from "${buildImportPath}";
+
+            // Fix an issue with infinite redirect in Netlify and Clerk dev instance
+            removeNetlifyCacheBustParam();
 
             // Taken from https://github.com/withastro/astro/blob/e10b03e88c22592fbb42d7245b65c4f486ab736d/packages/astro/src/transitions/router.ts#L39.
             // Importing it directly from astro:transitions/client breaks custom client-side routing

packages/astro/src/internal/index.ts

@@ -14,3 +14,4 @@ export { runInjectionScript };
 
 export { generateSafeId } from './utils/generateSafeId';
 export { swapDocument } from './swap-document';
+export { NETLIFY_CACHE_BUST_PARAM, removeNetlifyCacheBustParam } from './remove-query-param';

packages/astro/src/internal/remove-query-param.ts

@@ -0,0 +1,13 @@
+export const NETLIFY_CACHE_BUST_PARAM = '__netlify_clerk_cache_bust';
+
+/**
+ * Removes the temporary cache bust parameter that prevents infinite redirects
+ * in Netlify and Clerk's dev instance.
+ */
+export function removeNetlifyCacheBustParam() {
+  const url = new URL(window.location.href);
+  if (url.searchParams.has(NETLIFY_CACHE_BUST_PARAM)) {
+    url.searchParams.delete(NETLIFY_CACHE_BUST_PARAM);
+    window.history.replaceState(window.history.state, '', url);
+  }
+}

packages/astro/src/server/clerk-middleware.ts

@@ -1,7 +1,7 @@
 import type { AuthObject, ClerkClient } from '@clerk/backend';
 import type { AuthenticateRequestOptions, ClerkRequest, RedirectFun, RequestState } from '@clerk/backend/internal';
 import { AuthStatus, constants, createClerkRequest, createRedirect } from '@clerk/backend/internal';
-import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
+import { isDevelopmentFromPublishableKey, isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 import { isHttpOrHttps } from '@clerk/shared/proxy';
 import { eventMethodCalled } from '@clerk/shared/telemetry';
 import { handleValueOrFn } from '@clerk/shared/utils';
@@ -10,6 +10,7 @@ import type { APIContext } from 'astro';
 // @ts-ignore
 import { authAsyncStorage } from '#async-local-storage';
 
+import { NETLIFY_CACHE_BUST_PARAM } from '../internal';
 import { buildClerkHotloadScript } from './build-clerk-hotload-script';
 import { clerkClient } from './clerk-client';
 import { createCurrentUser } from './current-user';
@@ -83,6 +84,8 @@ export const clerkMiddleware: ClerkMiddleware = (...args: unknown[]): any => {
 
     const locationHeader = requestState.headers.get(constants.Headers.Location);
     if (locationHeader) {
+      handleNetlifyCacheInDevInstance(locationHeader, requestState);
+
       const res = new Response(null, { status: 307, headers: requestState.headers });
       return decorateResponseWithObservabilityHeaders(res, requestState);
     } else if (requestState.status === AuthStatus.Handshake) {
@@ -234,6 +237,25 @@ Check if signInUrl is missing from your configuration or if it is not an absolut
    PUBLIC_CLERK_SIGN_IN_URL='SOME_URL'
    PUBLIC_CLERK_IS_SATELLITE='true'`;
 
+/**
+ * Prevents infinite redirects in Netlify's functions
+ * by adding a cache bust parameter to the original redirect URL. This ensures Netlify
+ * doesn't serve a cached response during the authentication flow.
+ */
+function handleNetlifyCacheInDevInstance(locationHeader: string, requestState: RequestState) {
+  // Only run on Netlify environment and Clerk development instance
+  // eslint-disable-next-line turbo/no-undeclared-env-vars
+  if (import.meta.env.NETLIFY && isDevelopmentFromPublishableKey(requestState.publishableKey)) {
+    const hasHandshakeQueryParam = locationHeader.includes('__clerk_handshake');
+    // If location header is the original URL before the handshake redirects, add cache bust param
+    if (!hasHandshakeQueryParam) {
+      const url = new URL(locationHeader);
+      url.searchParams.append(NETLIFY_CACHE_BUST_PARAM, Date.now().toString());
+      requestState.headers.set('Location', url.toString());
+    }
+  }
+}
+
 function decorateAstroLocal(clerkRequest: ClerkRequest, context: APIContext, requestState: RequestState) {
   const { reason, message, status, token } = requestState;
   context.locals.authToken = token;

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/core/resources/AuthConfig.ts

@@ -1,9 +1,11 @@
 import type { AuthConfigJSON, AuthConfigResource } from '@clerk/types';
 
+import { unixEpochToDate } from '../../utils/date';
 import { BaseResource } from './internal';
 
 export class AuthConfig extends BaseResource implements AuthConfigResource {
   singleSessionMode!: boolean;
+  claimedAt: Date | null = null;
 
   public constructor(data: AuthConfigJSON) {
     super();
@@ -12,6 +14,7 @@ export class AuthConfig extends BaseResource implements AuthConfigResource {
 
   protected fromJSON(data: AuthConfigJSON | null): this {
     this.singleSessionMode = data ? data.single_session_mode : true;
+    this.claimedAt = data?.claimed_at ? unixEpochToDate(data.claimed_at) : null;
     return this;
   }
 }

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}

packages/types/src/authConfig.ts

@@ -5,4 +5,9 @@ export interface AuthConfigResource extends ClerkResource {
    * Enabled single session configuration at the instance level.
    */
   singleSessionMode: boolean;
+  /**
+   * Timestamp of when the instance was claimed. This only applies to applications created with the Keyless mode.
+   * Defaults to `null`.
+   */
+  claimedAt: Date | null;
 }

packages/types/src/clerk.ts

@@ -753,8 +753,16 @@ export type ClerkOptions = ClerkOptionsNavigation &
       Record<string, any>
     >;
 
+    /**
+     * The URL a developer should be redirected to in order to claim an instance created on Keyless mode.
+     */
     __internal_claimKeylessApplicationUrl?: string;
 
+    /**
+     * After a developer has claimed their instance created by Keyless mode, they can use this URL to find their instance's keys
+     */
+    __internal_copyInstanceKeysUrl?: string;
+
     /**
      * [EXPERIMENTAL] Provide the underlying host router, required for the new experimental UI components.
      */

packages/types/src/json.ts

@@ -288,6 +288,7 @@ export interface SessionWithActivitiesJSON extends Omit<SessionJSON, 'user'> {
 export interface AuthConfigJSON extends ClerkResourceJSON {
   single_session_mode: boolean;
   url_based_session_syncing: boolean;
+  claimed_at: number | null;
 }
 
 export interface VerificationJSON extends ClerkResourceJSON {