feat(nextjs): Support Keyless mode

.changeset/brown-items-reflect.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+accountless

.changeset/poor-books-hug.md

@@ -0,0 +1,6 @@
+---
+'@clerk/backend': minor
+'@clerk/nextjs': minor
+---
+
+accountless

packages/backend/src/api/endpoints/AccountlessApplicationsAPI.ts

@@ -0,0 +1,13 @@
+import type { AccountlessApplication } from '../resources/AccountlessApplication';
+import { AbstractAPI } from './AbstractApi';
+
+const basePath = '/accountless_applications';
+
+export class AccountlessApplicationAPI extends AbstractAPI {
+  public async createAccountlessApplication() {
+    return this.request<AccountlessApplication>({
+      method: 'POST',
+      path: basePath,
+    });
+  }
+}

packages/backend/src/api/endpoints/index.ts

@@ -1,3 +1,4 @@
+export * from './AccountlessApplicationsAPI';
 export * from './AbstractApi';
 export * from './AllowlistIdentifierApi';
 export * from './ClientApi';

packages/backend/src/api/factory.ts

@@ -1,4 +1,5 @@
 import {
+  AccountlessApplicationAPI,
   AllowlistIdentifierAPI,
   ClientAPI,
   DomainAPI,
@@ -23,6 +24,9 @@ export function createBackendApiClient(options: CreateBackendApiOptions) {
   const request = buildRequest(options);
 
   return {
+    __experimental_accountlessApplications: new AccountlessApplicationAPI(
+      buildRequest({ ...options, skipSecretKey: true }),
+    ),
     allowlistIdentifiers: new AllowlistIdentifierAPI(request),
     clients: new ClientAPI(request),
     emailAddresses: new EmailAddressAPI(request),

packages/backend/src/api/request.ts

@@ -51,13 +51,23 @@ type BuildRequestOptions = {
   apiVersion?: string;
   /* Library/SDK name */
   userAgent?: string;
+
+  skipSecretKey?: boolean;
 };
 export function buildRequest(options: BuildRequestOptions) {
   const requestFn = async <T>(requestOptions: ClerkBackendApiRequestOptions): Promise<ClerkBackendApiResponse<T>> => {
-    const { secretKey, apiUrl = API_URL, apiVersion = API_VERSION, userAgent = USER_AGENT } = options;
+    const {
+      secretKey,
+      skipSecretKey = false,
+      apiUrl = API_URL,
+      apiVersion = API_VERSION,
+      userAgent = USER_AGENT,
+    } = options;
     const { path, method, queryParams, headerParams, bodyParams, formData } = requestOptions;
 
-    assertValidSecretKey(secretKey);
+    if (!skipSecretKey) {
+      assertValidSecretKey(secretKey);
+    }
 
     const url = joinPaths(apiUrl, apiVersion, path);
 

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

@@ -0,0 +1,13 @@
+import type { AccountlessApplicationJSON } from './JSON';
+
+export class AccountlessApplication {
+  constructor(
+    readonly publishableKey: string,
+    readonly secretKey: string,
+    readonly claimUrl: string,
+  ) {}
+
+  static fromJSON(data: AccountlessApplicationJSON): AccountlessApplication {
+    return new AccountlessApplication(data.publishable_key, data.secret_key, data.claim_url);
+  }
+}

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

@@ -17,6 +17,7 @@ import {
   Token,
   User,
 } from '.';
+import { AccountlessApplication } from './AccountlessApplication';
 import type { PaginatedResponseJSON } from './JSON';
 import { ObjectType } from './JSON';
 
@@ -65,6 +66,8 @@ function jsonToObject(item: any): any {
   }
 
   switch (item.object) {
+    case ObjectType.AccountlessApplication:
+      return AccountlessApplication.fromJSON(item);
     case ObjectType.AllowlistIdentifier:
       return AllowlistIdentifier.fromJSON(item);
     case ObjectType.Client:

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

@@ -7,6 +7,7 @@ import type {
 } from './Enums';
 
 export const ObjectType = {
+  AccountlessApplication: 'accountless_application',
   AllowlistIdentifier: 'allowlist_identifier',
   Client: 'client',
   Email: 'email',
@@ -48,6 +49,13 @@ export interface TokenJSON {
   jwt: string;
 }
 
+export interface AccountlessApplicationJSON extends ClerkResourceJSON {
+  object: typeof ObjectType.AccountlessApplication;
+  publishable_key: string;
+  secret_key: string;
+  claim_url: string;
+}
+
 export interface AllowlistIdentifierJSON extends ClerkResourceJSON {
   object: typeof ObjectType.AllowlistIdentifier;
   identifier: string;

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

@@ -1,3 +1,4 @@
+export * from './AccountlessApplication';
 export * from './AllowlistIdentifier';
 export * from './Client';
 export * from './DeletedObject';

packages/backend/src/index.ts

@@ -53,6 +53,7 @@ export type { VerifyTokenOptions } from './tokens/verify';
  * JSON types
  */
 export type {
+  AccountlessApplicationJSON,
   ClerkResourceJSON,
   TokenJSON,
   AllowlistIdentifierJSON,
@@ -87,6 +88,7 @@ export type {
  * Resources
  */
 export type {
+  AccountlessApplication,
   AllowlistIdentifier,
   Client,
   EmailAddress,

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

@@ -8,7 +8,7 @@ import { ClerkNextOptionsProvider, useClerkNextOptions } from '../../client-boun
 import type { NextClerkProviderProps } from '../../types';
 import { ClerkJSScript } from '../../utils/clerk-js-script';
 import { mergeNextClerkPropsWithEnv } from '../../utils/mergeNextClerkPropsWithEnv';
-import { invalidateCacheAction } from '../server-actions';
+import { createAccountlessKeysAction, invalidateCacheAction } from '../server-actions';
 import { useAwaitablePush } from './useAwaitablePush';
 import { useAwaitableReplace } from './useAwaitableReplace';
 
@@ -23,7 +23,7 @@ declare global {
   }
 }
 
-export const ClientClerkProvider = (props: NextClerkProviderProps) => {
+const __ClientClerkProvider = (props: NextClerkProviderProps) => {
   const { __unstable_invokeMiddlewareOnAuthStateChange = true, children } = props;
   const router = useRouter();
   const push = useAwaitablePush();
@@ -99,3 +99,40 @@ export const ClientClerkProvider = (props: NextClerkProviderProps) => {
     </ClerkNextOptionsProvider>
   );
 };
+
+const AccountlessCreateKeys = (props: NextClerkProviderProps) => {
+  const { children } = props;
+  const [state, fetchKeys] = React.useActionState(createAccountlessKeysAction, null);
+  useEffect(() => {
+    React.startTransition(() => {
+      fetchKeys();
+    });
+  }, []);
+
+  if (!React.isValidElement(children)) {
+    return children;
+  }
+
+  return React.cloneElement(children, {
+    key: state?.publishableKey,
+    publishableKey: state?.publishableKey,
+    claimAccountlessKeysUrl: state?.claimUrl,
+    __internal_bypassMissingPk: true,
+  } as any);
+};
+
+export const ClientClerkProvider = (props: NextClerkProviderProps) => {
+  if (
+    mergeNextClerkPropsWithEnv({
+      ...props,
+    }).publishableKey
+  ) {
+    return <__ClientClerkProvider {...props} />;
+  }
+
+  return (
+    <AccountlessCreateKeys>
+      <__ClientClerkProvider {...props} />
+    </AccountlessCreateKeys>
+  );
+};

packages/nextjs/src/app-router/client/accountless-cookie-sync.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import type { AccountlessApplication } from '@clerk/backend';
+import type { PropsWithChildren } from 'react';
+import { useEffect } from 'react';
+
+import { syncAccountlessKeysAction } from '../server-actions';
+
+export function AccountlessCookieSync(props: PropsWithChildren<AccountlessApplication>) {
+  useEffect(() => {
+    void syncAccountlessKeysAction(props);
+  }, []);
+
+  return props.children;
+}

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

@@ -1,6 +1,11 @@
 'use server';
 
+import type { AccountlessApplication } from '@clerk/backend';
 import { getCookies } from 'ezheaders';
+import { redirect, RedirectType } from 'next/navigation';
+
+import { getAccountlessCookieName } from '../server/accountless';
+import { createAccountlessKeys } from '../server/accountless-node';
 
 // This function needs to be async as we'd like to support next versions in the range of [14.1.2,14.2.0)
 // These versions required 'use server' files to export async methods only. This check was later relaxed
@@ -9,3 +14,31 @@ import { getCookies } from 'ezheaders';
 export async function invalidateCacheAction(): Promise<void> {
   void (await getCookies()).delete(`__clerk_invalidate_cache_cookie_${Date.now()}`);
 }
+
+export async function syncAccountlessKeysAction(args: AccountlessApplication): Promise<void> {
+  const { claimUrl, publishableKey, secretKey } = args;
+  void (await getCookies()).set(getAccountlessCookieName(), JSON.stringify({ claimUrl, publishableKey, secretKey }), {
+    secure: true,
+    httpOnly: true,
+  });
+
+  // TODO-ACCOUNTLESS: Do we even need this ? I think setting the cookie will reset the router cache.
+  redirect('/clerk-sync-accountless', RedirectType.replace);
+}
+
+export async function createAccountlessKeysAction(): Promise<null | AccountlessApplication> {
+  const result = await createAccountlessKeys();
+
+  if (!result) {
+    return null;
+  }
+
+  const { claimUrl, publishableKey, secretKey } = result;
+
+  void (await getCookies()).set(getAccountlessCookieName(), JSON.stringify({ claimUrl, publishableKey, secretKey }), {
+    secure: false,
+    httpOnly: false,
+  });
+
+  return result;
+}

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

@@ -0,0 +1,94 @@
+import { appendFileSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+
+import type { AccountlessApplication } from '@clerk/backend';
+
+import { createClerkClientWithOptions } from './clerkClient';
+
+const CLERK_HIDDEN = '.clerk';
+
+function updateGitignore() {
+  const gitignorePath = path.join(process.cwd(), '.gitignore');
+  if (!existsSync(gitignorePath)) {
+    writeFileSync(gitignorePath, '');
+  }
+
+  // Check if `.clerk/` entry exists in .gitignore
+  const gitignoreContent = readFileSync(gitignorePath, 'utf-8');
+  if (!gitignoreContent.includes(CLERK_HIDDEN + '/')) {
+    appendFileSync(gitignorePath, `\n${CLERK_HIDDEN}/\n`);
+  }
+}
+
+const CLERK_LOCK = 'clerk.lock';
+const getClerkPath = () => path.join(process.cwd(), '.clerk', '.tmp', 'accountless.json');
+
+let isCreatingFile = false;
+
+function safeParseClerkFile(): AccountlessApplication | undefined {
+  try {
+    const CLERK_PATH = getClerkPath();
+    let fileAsString;
+    try {
+      fileAsString = readFileSync(CLERK_PATH, { encoding: 'utf-8' }) || '{}';
+    } catch {
+      fileAsString = '{}';
+    }
+    return JSON.parse(fileAsString) as AccountlessApplication;
+  } catch {
+    return undefined;
+  }
+}
+
+async function createAccountlessKeys(): Promise<AccountlessApplication | undefined> {
+  if (isCreatingFile) {
+    return undefined;
+  }
+
+  if (existsSync(CLERK_LOCK)) {
+    return undefined;
+  }
+
+  isCreatingFile = true;
+
+  writeFileSync(CLERK_LOCK, 'You can delete this file.', {
+    encoding: 'utf8',
+    mode: '0777',
+    flag: 'w',
+  });
+
+  const CLERK_PATH = getClerkPath();
+  mkdirSync(path.dirname(CLERK_PATH), { recursive: true });
+  updateGitignore();
+
+  const envVarsMap = safeParseClerkFile();
+
+  if (envVarsMap?.publishableKey && envVarsMap?.secretKey) {
+    isCreatingFile = false;
+    rmSync(CLERK_LOCK, { force: true, recursive: true });
+    return envVarsMap;
+  }
+
+  /**
+   * Maybe the server has not restarted yet
+   */
+
+  const client = createClerkClientWithOptions({});
+
+  const accountlessApplication = await client.__experimental_accountlessApplications.createAccountlessApplication();
+
+  console.log('--- new keys', accountlessApplication);
+
+  writeFileSync(CLERK_PATH, JSON.stringify(accountlessApplication), {
+    encoding: 'utf8',
+    mode: '0777',
+    flag: 'w',
+  });
+
+  rmSync(CLERK_LOCK, { force: true, recursive: true });
+
+  isCreatingFile = false;
+  return accountlessApplication;
+}
+
+export { createAccountlessKeys };