chore(nextjs): Gracefully handle failure to create keyless (#5015)

Author: panteliselef

.changeset/kind-crabs-unite.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Gracefully handle failure to create keyless.

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

@@ -112,11 +112,11 @@ const NextClientClerkProvider = (props: NextClerkProviderProps) => {
   );
 };
 
-export const ClientClerkProvider = (props: NextClerkProviderProps) => {
-  const { children, ...rest } = props;
+export const ClientClerkProvider = (props: NextClerkProviderProps & { disableKeyless?: boolean }) => {
+  const { children, disableKeyless = false, ...rest } = props;
   const safePublishableKey = mergeNextClerkPropsWithEnv(rest).publishableKey;
 
-  if (safePublishableKey || !canUseKeyless) {
+  if (safePublishableKey || !canUseKeyless || disableKeyless) {
     return <NextClientClerkProvider {...rest}>{children}</NextClientClerkProvider>;
   }
 

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

@@ -19,8 +19,8 @@ export const KeylessCreatorOrReader = (props: NextClerkProviderProps) => {
   return React.cloneElement(children, {
     key: state?.publishableKey,
     publishableKey: state?.publishableKey,
-    __internal_claimKeylessApplicationUrl: state?.claimUrl,
-    __internal_copyInstanceKeysUrl: state?.apiKeysUrl,
+    __internal_keyless_claimKeylessApplicationUrl: state?.claimUrl,
+    __internal_keyless_copyInstanceKeysUrl: state?.apiKeysUrl,
     __internal_bypassMissingPublishableKey: true,
   } as any);
 };

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

@@ -3,6 +3,7 @@ import type { AccountlessApplication } from '@clerk/backend';
 import { cookies, headers } from 'next/headers';
 import { redirect, RedirectType } from 'next/navigation';
 
+import { errorThrower } from '../server/errorThrower';
 import { detectClerkMiddleware } from '../server/headers-utils';
 import { getKeylessCookieName } from '../server/keyless';
 import { canUseKeyless } from '../utils/feature-flags';
@@ -35,9 +36,10 @@ export async function createOrReadKeylessAction(): Promise<null | Omit<Accountle
     return null;
   }
 
-  const result = await import('../server/keyless-node.js').then(m => m.createOrReadKeyless());
+  const result = await import('../server/keyless-node.js').then(m => m.createOrReadKeyless()).catch(() => null);
 
   if (!result) {
+    errorThrower.throwMissingPublishableKeyError();
     return null;
   }
 

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

@@ -85,7 +85,9 @@ export async function ClerkProvider(
   if (shouldRunAsKeyless) {
     // NOTE: Create or read keys on every render. Usually this means only on hard refresh or hard navigations.
 
-    const newOrReadKeys = await import('../../server/keyless-node.js').then(mod => mod.createOrReadKeyless());
+    const newOrReadKeys = await import('../../server/keyless-node.js')
+      .then(mod => mod.createOrReadKeyless())
+      .catch(() => null);
     const { keylessLogger, createConfirmationMessage, createKeylessModeMessage } = await import(
       '../../server/keyless-log-cache.js'
     );
@@ -142,6 +144,18 @@ export async function ClerkProvider(
 
         output = <KeylessCookieSync {...newOrReadKeys}>{clientProvider}</KeylessCookieSync>;
       }
+    } else {
+      // When case keyless should run, but keys are not available, then fallback to throwing for missing keys
+      output = (
+        <ClientClerkProvider
+          {...mergeNextClerkPropsWithEnv(rest)}
+          nonce={await generateNonce()}
+          initialState={await generateStatePromise()}
+          disableKeyless
+        >
+          {children}
+        </ClientClerkProvider>
+      );
     }
   }
 

packages/nextjs/src/server/keyless-node.ts

@@ -123,15 +123,15 @@ const isFileWritingLocked = () => {
   return isCreatingFile || existsSync(CLERK_LOCK);
 };
 
-async function createOrReadKeyless(): Promise<AccountlessApplication | undefined> {
+async function createOrReadKeyless(): Promise<AccountlessApplication | null> {
   const { writeFileSync, mkdirSync } = safeNodeRuntimeFs();
 
   /**
    * If another request is already in the process of acquiring keys return early.
    * Using both an in-memory and file system lock seems to be the most effective solution.
    */
   if (isFileWritingLocked()) {
-    return undefined;
+    return null;
   }
 
   lockFileWriting();
@@ -156,26 +156,29 @@ async function createOrReadKeyless(): Promise<AccountlessApplication | undefined
    * At this step, it is safe to create new keys and store them.
    */
   const client = createClerkClientWithOptions({});
-  const accountlessApplication = await client.__experimental_accountlessApplications.createAccountlessApplication();
+  const accountlessApplication = await client.__experimental_accountlessApplications
+    .createAccountlessApplication()
+    .catch(() => null);
 
-  writeFileSync(CONFIG_PATH, JSON.stringify(accountlessApplication), {
-    encoding: 'utf8',
-    mode: '0777',
-    flag: 'w',
-  });
+  if (accountlessApplication) {
+    writeFileSync(CONFIG_PATH, JSON.stringify(accountlessApplication), {
+      encoding: 'utf8',
+      mode: '0777',
+      flag: 'w',
+    });
 
-  // TODO-KEYLESS: Add link to official documentation.
-  const README_NOTIFICATION = `
+    // TODO-KEYLESS: Add link to official documentation.
+    const README_NOTIFICATION = `
 ## DO NOT COMMIT
 This directory is auto-generated from \`@clerk/nextjs\` because you are running in Keyless mode. Avoid committing the \`.clerk/\` directory as it includes the secret key of the unclaimed instance.
   `;
 
-  writeFileSync(README_PATH, README_NOTIFICATION, {
-    encoding: 'utf8',
-    mode: '0777',
-    flag: 'w',
-  });
-
+    writeFileSync(README_PATH, README_NOTIFICATION, {
+      encoding: 'utf8',
+      mode: '0777',
+      flag: 'w',
+    });
+  }
   /**
    * Clean up locks.
    */