feat(nextjs): Support Keyless mode (#4602)

Author: panteliselef

.changeset/dry-cats-change.md

@@ -0,0 +1,7 @@
+---
+'@clerk/backend': minor
+---
+
+New **experimental** API: `AccountlessApplicationAPI`
+
+Inside `clerkClient` you can activate this new API through `__experimental_accountlessApplications`. It allows you to generate an "accountless" application and the API returns the publishable key, secret key, and an URL as a response. The URL allows a user to claim this application with their account. Hence the name "accountless" because in its initial state the application is not attached to any account yet.

.changeset/grumpy-camels-think.md

@@ -0,0 +1,10 @@
+---
+'@clerk/clerk-react': minor
+---
+
+Various internal changes have been made to support a new feature called "Keyless mode". You'll be able to use this feature with Next.js and `@clerk/nextjs` initially. Read the `@clerk/nextjs` changelog to learn more.
+
+List of changes:
+- A new internal prop called `__internal_bypassMissingPublishableKey` has been added. Normally an error is thrown when the publishable key is missing, this disables this behavior.
+- Loading of `clerk-js` won't be attempted when a missing key is present
+- A new instance of `IsomorphicClerk` (an internal Clerk class) is created for each new publishable key

.changeset/itchy-cats-drive.md

@@ -0,0 +1,11 @@
+---
+'@clerk/nextjs': minor
+---
+
+A new **experimental** feature is available: "Keyless mode"
+
+Normally, in order to start a Clerk + Next.js application you need to provide a publishable key and secret key. With "Keyless mode" activated you no longer need to provide these two keys to start your Clerk application. These keys will be automatically generated and the application can be claimed with your account either through a UI prompt or with a URL in your terminal.
+
+**Requirements**:
+- You need to use Next.js `14.2.0` or later
+- You need to set the environment variable `NEXT_PUBLIC_CLERK_ENABLE_KEYLESS=true`

.changeset/warm-spiders-develop.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Replace `__internal_claimAccountlessKeysUrl` with `__internal_claimKeylessApplicationUrl`.

integration/tests/next-build.test.ts

@@ -132,7 +132,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         'src/app/nested-provider/page.tsx',
         () => `import { ClerkProvider } from '@clerk/nextjs';
       import { ClientComponent } from './client';
-      
+
       export default function Page() {
         return (
           <ClerkProvider dynamic>
@@ -147,10 +147,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         () => `'use client';
 
       import { useAuth } from '@clerk/nextjs';
-      
+
       export function ClientComponent() {
         useAuth();
-      
+
         return <p>I am dynamically rendered</p>;
       }
       `,

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, requireSecretKey: false }),
+    ),
     allowlistIdentifiers: new AllowlistIdentifierAPI(request),
     clients: new ClientAPI(request),
     emailAddresses: new EmailAddressAPI(request),

packages/backend/src/api/request.ts

@@ -51,13 +51,26 @@ type BuildRequestOptions = {
   apiVersion?: string;
   /* Library/SDK name */
   userAgent?: string;
+  /**
+   * Allow requests without specifying a secret key. In most cases this should be set to `false`.
+   * Defaults to `true`.
+   */
+  requireSecretKey?: 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,
+      requireSecretKey = true,
+      apiUrl = API_URL,
+      apiVersion = API_VERSION,
+      userAgent = USER_AGENT,
+    } = options;
     const { path, method, queryParams, headerParams, bodyParams, formData } = requestOptions;
 
-    assertValidSecretKey(secretKey);
+    if (requireSecretKey) {
+      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);
+  }
+}