fix(nextjs): [Keyless] Prevent successful build when keys are not exp…

…licitly set (#4932)
clerk · Jan 17, 2025 · 61d7970 · 61d7970
1 parent fdbcfd6
commit 61d7970
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 17 deletions.
diff --git a/.changeset/real-kings-help.md b/.changeset/real-kings-help.md
@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Bug fix: Running `build` with on Keyless mode should not prevent `<ClerkProvider/>` throwing an error for missing publishable key.
diff --git a/packages/nextjs/src/app-router/client/ClerkProvider.tsx b/packages/nextjs/src/app-router/client/ClerkProvider.tsx
@@ -11,7 +11,7 @@ import { useSafeLayoutEffect } from '../../client-boundary/hooks/useSafeLayoutEf
 import { ClerkNextOptionsProvider, useClerkNextOptions } from '../../client-boundary/NextOptionsContext';
 import type { NextClerkProviderProps } from '../../types';
 import { ClerkJSScript } from '../../utils/clerk-js-script';
-import { canUseKeyless__client } from '../../utils/feature-flags';
+import { canUseKeyless } from '../../utils/feature-flags';
 import { mergeNextClerkPropsWithEnv } from '../../utils/mergeNextClerkPropsWithEnv';
 import { isNextWithUnstableServerActions } from '../../utils/sdk-versions';
 import { invalidateCacheAction } from '../server-actions';
@@ -127,7 +127,7 @@ export const ClientClerkProvider = (props: NextClerkProviderProps) => {
   const { children, ...rest } = props;
   const safePublishableKey = mergeNextClerkPropsWithEnv(rest).publishableKey;
 
-  if (safePublishableKey || !canUseKeyless__client) {
+  if (safePublishableKey || !canUseKeyless) {
     return <NextClientClerkProvider {...rest}>{children}</NextClientClerkProvider>;
   }
 

diff --git a/packages/nextjs/src/app-router/client/keyless-cookie-sync.tsx b/packages/nextjs/src/app-router/client/keyless-cookie-sync.tsx
@@ -4,11 +4,11 @@ import type { AccountlessApplication } from '@clerk/backend';
 import type { PropsWithChildren } from 'react';
 import { useEffect } from 'react';
 
-import { canUseKeyless__client } from '../../utils/feature-flags';
+import { canUseKeyless } from '../../utils/feature-flags';
 
 export function KeylessCookieSync(props: PropsWithChildren<AccountlessApplication>) {
   useEffect(() => {
-    if (canUseKeyless__client) {
+    if (canUseKeyless) {
       void import('../keyless-actions.js').then(m =>
         m.syncKeylessConfigAction({
           ...props,

diff --git a/packages/nextjs/src/app-router/keyless-actions.ts b/packages/nextjs/src/app-router/keyless-actions.ts
@@ -5,7 +5,7 @@ import { redirect, RedirectType } from 'next/navigation';
 
 import { detectClerkMiddleware } from '../server/headers-utils';
 import { getKeylessCookieName } from '../server/keyless';
-import { canUseKeyless__server } from '../utils/feature-flags';
+import { canUseKeyless } from '../utils/feature-flags';
 
 export async function syncKeylessConfigAction(args: AccountlessApplication & { returnUrl: string }): Promise<void> {
   const { claimUrl, publishableKey, secretKey, returnUrl } = args;
@@ -31,7 +31,7 @@ export async function syncKeylessConfigAction(args: AccountlessApplication & { r
 }
 
 export async function createOrReadKeylessAction(): Promise<null | Omit<AccountlessApplication, 'secretKey'>> {
-  if (!canUseKeyless__server) {
+  if (!canUseKeyless) {
     return null;
   }
 

diff --git a/packages/nextjs/src/app-router/server/ClerkProvider.tsx b/packages/nextjs/src/app-router/server/ClerkProvider.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import { PromisifiedAuthProvider } from '../../client-boundary/PromisifiedAuthProvider';
 import { getDynamicAuthData } from '../../server/buildClerkProps';
 import type { NextClerkProviderProps } from '../../types';
-import { canUseKeyless__server } from '../../utils/feature-flags';
+import { canUseKeyless } from '../../utils/feature-flags';
 import { mergeNextClerkPropsWithEnv } from '../../utils/mergeNextClerkPropsWithEnv';
 import { isNext13 } from '../../utils/sdk-versions';
 import { ClientClerkProvider } from '../client/ClerkProvider';
@@ -69,7 +69,7 @@ export async function ClerkProvider(
     </ClientClerkProvider>
   );
 
-  const shouldRunAsKeyless = !propsWithEnvs.publishableKey && canUseKeyless__server;
+  const shouldRunAsKeyless = !propsWithEnvs.publishableKey && canUseKeyless;
 
   if (shouldRunAsKeyless) {
     // NOTE: Create or read keys on every render. Usually this means only on hard refresh or hard navigations.

diff --git a/packages/nextjs/src/server/clerkMiddleware.ts b/packages/nextjs/src/server/clerkMiddleware.ts
@@ -8,7 +8,7 @@ import { NextResponse } from 'next/server';
 
 import { isRedirect, serverRedirectWithAuth, setHeader } from '../utils';
 import { withLogger } from '../utils/debugLogger';
-import { canUseKeyless__server } from '../utils/feature-flags';
+import { canUseKeyless } from '../utils/feature-flags';
 import { clerkClient } from './clerkClient';
 import { PUBLISHABLE_KEY, SECRET_KEY, SIGN_IN_URL, SIGN_UP_URL } from './constants';
 import { errorThrower } from './errorThrower';
@@ -225,7 +225,7 @@ export const clerkMiddleware: ClerkMiddleware = (...args: unknown[]) => {
     };
 
     const nextMiddleware: NextMiddleware = async (request, event) => {
-      if (canUseKeyless__server) {
+      if (canUseKeyless) {
         return keylessMiddleware(request, event);
       }
 

diff --git a/packages/nextjs/src/server/keyless.ts b/packages/nextjs/src/server/keyless.ts
@@ -2,7 +2,7 @@ import type { AccountlessApplication } from '@clerk/backend';
 import hex from 'crypto-js/enc-hex';
 import sha256 from 'crypto-js/sha256';
 
-import { canUseKeyless__server } from '../utils/feature-flags';
+import { canUseKeyless } from '../utils/feature-flags';
 
 const keylessCookiePrefix = `__clerk_keys_`;
 
@@ -28,7 +28,7 @@ function hashString(str: string) {
 }
 
 function getKeylessCookieValue(getter: (cookieName: string) => string | undefined): AccountlessApplication | undefined {
-  if (!canUseKeyless__server) {
+  if (!canUseKeyless) {
     return undefined;
   }
 

diff --git a/packages/nextjs/src/server/utils.ts b/packages/nextjs/src/server/utils.ts
@@ -11,7 +11,7 @@ import type { NextRequest } from 'next/server';
 import { NextResponse } from 'next/server';
 
 import { constants as nextConstants } from '../constants';
-import { canUseKeyless__server } from '../utils/feature-flags';
+import { canUseKeyless } from '../utils/feature-flags';
 import { DOMAIN, ENCRYPTION_KEY, IS_SATELLITE, PROXY_URL, SECRET_KEY, SIGN_IN_URL } from './constants';
 import {
   authSignatureInvalid,
@@ -254,7 +254,7 @@ export function decryptClerkRequestData(
      *
      * Attempt one more time with the default dummy value.
      */
-    if (canUseKeyless__server) {
+    if (canUseKeyless) {
       try {
         return decryptData(encryptedRequestData, KEYLESS_ENCRYPTION_KEY);
       } catch (e) {

diff --git a/packages/nextjs/src/utils/feature-flags.ts b/packages/nextjs/src/utils/feature-flags.ts
@@ -3,7 +3,10 @@ import { isDevelopmentEnvironment } from '@clerk/shared/utils';
 import { ENABLE_KEYLESS } from '../server/constants';
 import { isNextWithUnstableServerActions } from './sdk-versions';
 
-const canUseKeyless__server = !isNextWithUnstableServerActions && isDevelopmentEnvironment() && ENABLE_KEYLESS;
-const canUseKeyless__client = !isNextWithUnstableServerActions && ENABLE_KEYLESS;
+const canUseKeyless =
+  !isNextWithUnstableServerActions &&
+  // Next.js will inline the value of 'development' or 'production' on the client bundle, so this is client-safe.
+  isDevelopmentEnvironment() &&
+  ENABLE_KEYLESS;
 
-export { canUseKeyless__client, canUseKeyless__server };
+export { canUseKeyless };