feat(nextjs): Support Accountless 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

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, 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/package.cjs.json

@@ -4,6 +4,16 @@
     "#components": {
       "react-server": "./components.server.js",
       "default": "./components.client.js"
+    },
+    "#fs": {
+      "edge-light": "./runtime/browser/fs.js",
+      "worker": "./runtime/browser/fs.js",
+      "browser": "./runtime/browser/fs.js",
+      "node": {
+        "require": "./runtime/node/fs.js",
+        "import": "./runtime/node/fs.js"
+      },
+      "default": "./runtime/browser/fs.js"
     }
   }
 }

packages/nextjs/package.esm.json

@@ -4,6 +4,16 @@
     "#components": {
       "react-server": "./components.server.js",
       "default": "./components.client.js"
+    },
+    "#fs": {
+      "edge-light": "./runtime/browser/fs.js",
+      "worker": "./runtime/browser/fs.js",
+      "browser": "./runtime/browser/fs.js",
+      "node": {
+        "require": "./runtime/node/fs.js",
+        "import": "./runtime/node/fs.js"
+      },
+      "default": "./runtime/browser/fs.js"
     }
   }
 }

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

@@ -0,0 +1,44 @@
+'use server';
+import type { AccountlessApplication } from '@clerk/backend';
+import { isDevelopmentEnvironment } from '@clerk/shared/utils';
+import { getCookies } from 'ezheaders';
+import { redirect, RedirectType } from 'next/navigation';
+
+import { getAccountlessCookieName } from '../server/accountless';
+import { ALLOW_ACCOUNTLESS } from '../server/constants';
+import { isNextWithUnstableServerActions } from '../utils/sdk-versions';
+
+export async function syncAccountlessKeysAction(args: AccountlessApplication & { returnUrl: string }): Promise<void> {
+  const { claimUrl, publishableKey, secretKey, returnUrl } = 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?returnUrl=${returnUrl}`, RedirectType.replace);
+}
+
+export async function createAccountlessKeysAction(): Promise<null | Omit<AccountlessApplication, 'secretKey'>> {
+  if (!isDevelopmentEnvironment() || isNextWithUnstableServerActions || !ALLOW_ACCOUNTLESS) {
+    return null;
+  }
+
+  const result = await import('../server/accountless-node.js').then(m => m.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 {
+    claimUrl,
+    publishableKey,
+  };
+}

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

@@ -1,17 +1,28 @@
 'use client';
 import { ClerkProvider as ReactClerkProvider } from '@clerk/clerk-react';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useTransition } from 'react';
 
 import { useSafeLayoutEffect } from '../../client-boundary/hooks/useSafeLayoutEffect';
 import { ClerkNextOptionsProvider, useClerkNextOptions } from '../../client-boundary/NextOptionsContext';
+import { ALLOW_ACCOUNTLESS } from '../../server/constants';
 import type { NextClerkProviderProps } from '../../types';
 import { ClerkJSScript } from '../../utils/clerk-js-script';
 import { mergeNextClerkPropsWithEnv } from '../../utils/mergeNextClerkPropsWithEnv';
+import { isNextWithUnstableServerActions } from '../../utils/sdk-versions';
 import { invalidateCacheAction } from '../server-actions';
 import { useAwaitablePush } from './useAwaitablePush';
 import { useAwaitableReplace } from './useAwaitableReplace';
 
+/**
+ * Accountless creator should only be loaded if the conditions below are met.
+ * Note: Using lazy() with Suspense instead of dynamic is not possible as React will throw a hydration error when `ClerkProvider` wraps `<html><body>...`
+ */
+const LazyAccountlessCreator = dynamic(() =>
+  import('./lazy-accountless-creator.js').then(m => m.AccountlessCreateKeys),
+);
+
 declare global {
   export interface Window {
     __clerk_nav_await: Array<(value: void) => void>;
@@ -23,7 +34,7 @@ declare global {
   }
 }
 
-export const ClientClerkProvider = (props: NextClerkProviderProps) => {
+const NextClientClerkProvider = (props: NextClerkProviderProps) => {
   const { __unstable_invokeMiddlewareOnAuthStateChange = true, children } = props;
   const router = useRouter();
   const push = useAwaitablePush();
@@ -99,3 +110,18 @@ export const ClientClerkProvider = (props: NextClerkProviderProps) => {
     </ClerkNextOptionsProvider>
   );
 };
+
+export const ClientClerkProvider = (props: NextClerkProviderProps) => {
+  const { children, ...rest } = props;
+  const safePk = mergeNextClerkPropsWithEnv(rest).publishableKey;
+
+  if (safePk || isNextWithUnstableServerActions || !ALLOW_ACCOUNTLESS) {
+    return <NextClientClerkProvider {...rest}>{children}</NextClientClerkProvider>;
+  }
+
+  return (
+    <LazyAccountlessCreator>
+      <NextClientClerkProvider {...rest}>{children}</NextClientClerkProvider>
+    </LazyAccountlessCreator>
+  );
+};

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

@@ -0,0 +1,23 @@
+'use client';
+
+import type { AccountlessApplication } from '@clerk/backend';
+import type { PropsWithChildren } from 'react';
+import { useEffect } from 'react';
+
+import { isNextWithUnstableServerActions } from '../../utils/sdk-versions';
+
+export function AccountlessCookieSync(props: PropsWithChildren<AccountlessApplication>) {
+  useEffect(() => {
+    if (!isNextWithUnstableServerActions) {
+      void import('../accountless-actions.js').then(m =>
+        m.syncAccountlessKeysAction({
+          ...props,
+          // Preserve the current url and return back, once keys are synced in the middleware
+          returnUrl: window.location.href,
+        }),
+      );
+    }
+  }, []);
+
+  return props.children;
+}

packages/nextjs/src/app-router/client/lazy-accountless-creator.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+
+import type { NextClerkProviderProps } from '../../types';
+import { createAccountlessKeysAction } from '../accountless-actions';
+
+export 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,
+    __internal_claimAccountlessKeysUrl: state?.claimUrl,
+    __internal_bypassMissingPk: true,
+  } as any);
+};