fix(nextjs, shared): Restores reverted commits and fixes issue with shared in nextjs

.changeset/sweet-bottles-watch.md

@@ -0,0 +1,7 @@
+---
+'@clerk/backend': patch
+'@clerk/nextjs': patch
+'@clerk/shared': patch
+---
+
+Retry the implemented changes from [#1767](https://github.com/clerkinc/javascript/pull/1767) which were reverted in [#1806](https://github.com/clerkinc/javascript/pull/1806) due to RSC related errors (not all uses components had the `use client` directive). Restore the original PR and add additional `use client` directives to ensure it works correctly.

package.json

@@ -52,7 +52,7 @@
     "tree-kill": "^1.2.2",
     "ts-jest": "^29.0.3",
     "tsup": "^6.7.0",
-    "turbo": "^1.10.6",
+    "turbo": "^1.10.14",
     "typescript": "4.9.4",
     "zx": "^7.2.1"
   },

packages/backend/package.json

@@ -44,6 +44,7 @@
     "test:cloudflare-workerd": "tests/cloudflare-workerd/run.sh"
   },
   "dependencies": {
+    "@clerk/shared": "0.24.2",
     "@clerk/types": "3.54.0",
     "@peculiar/webcrypto": "1.4.1",
     "@types/node": "16.18.6",

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

@@ -1,10 +1,15 @@
+import { deprecated } from '../../util/shared';
 import { AbstractAPI } from './AbstractApi';
-
 /**
  * @deprecated Switch to the public interstitial endpoint from Clerk Backend API.
  */
 export class InterstitialAPI extends AbstractAPI {
   public async getInterstitial() {
+    deprecated(
+      'getInterstitial()',
+      'Switch to `Clerk(...).localInterstitial(...)` from `import { Clerk } from "@clerk/backend"`.',
+    );
+
     return this.request<string>({
       path: 'internal/interstitial',
       method: 'GET',

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

@@ -1,3 +1,5 @@
+import { deprecated } from '@clerk/shared';
+
 import runtime from '../../runtime';
 import { joinPaths } from '../../util/path';
 import type {
@@ -255,6 +257,8 @@ export class OrganizationAPI extends AbstractAPI {
    * @deprecated  Use `getOrganizationInvitationList` instead along with the status parameter.
    */
   public async getPendingOrganizationInvitationList(params: GetPendingOrganizationInvitationListParams) {
+    deprecated('getPendingOrganizationInvitationList', 'Use `getOrganizationInvitationList` instead.');
+
     const { organizationId, limit, offset } = params;
     this.requireId(organizationId);
 

packages/backend/src/api/request.ts

@@ -8,6 +8,7 @@ import { API_URL, API_VERSION, constants, USER_AGENT } from '../constants';
 import runtime from '../runtime';
 import { assertValidSecretKey } from '../util/assertValidSecretKey';
 import { joinPaths } from '../util/path';
+import { deprecated } from '../util/shared';
 import type { CreateBackendApiOptions } from './factory';
 import { deserialize } from './resources/Deserializer';
 
@@ -50,6 +51,11 @@ type LegacyRequestFunction = <T>(requestOptions: ClerkBackendApiRequestOptions)
 const withLegacyReturn =
   (cb: any): LegacyRequestFunction =>
   async (...args) => {
+    deprecated(
+      '',
+      'Resources return format will switch to `{ data: any, errors: ClerkAPIError[] }` from `data | never` the next major version.',
+      'resources-legacy-return',
+    );
     // @ts-ignore
     const { data, errors, status, statusText } = await cb<T>(...args);
     if (errors === null) {
@@ -67,11 +73,21 @@ export function buildRequest(options: CreateBackendApiOptions) {
     const {
       apiKey,
       secretKey,
+      httpOptions,
       apiUrl = API_URL,
       apiVersion = API_VERSION,
       userAgent = USER_AGENT,
-      httpOptions = {},
     } = options;
+    if (apiKey) {
+      deprecated('apiKey', 'Use `secretKey` instead.');
+    }
+    if (httpOptions) {
+      deprecated(
+        'httpOptions',
+        'This option has been deprecated and will be removed with the next major release.\nA RequestInit init object used by the `request` method.',
+      );
+    }
+
     const { path, method, queryParams, headerParams, bodyParams, formData } = requestOptions;
     const key = secretKey || apiKey;
 
@@ -119,7 +135,7 @@ export function buildRequest(options: CreateBackendApiOptions) {
 
         res = await runtime.fetch(
           finalUrl.href,
-          deepmerge(httpOptions, {
+          deepmerge(httpOptions || {}, {
             method,
             headers,
             ...body,

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

@@ -1,3 +1,4 @@
+import { deprecatedProperty } from '../../util/shared';
 import type { ExternalAccountJSON } from './JSON';
 import { Verification } from './Verification';
 
@@ -41,3 +42,5 @@ export class ExternalAccount {
     );
   }
 }
+
+deprecatedProperty(ExternalAccount, 'picture', 'Use `imageUrl` instead.');

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

@@ -1,3 +1,4 @@
+import { deprecatedProperty } from '../../util/shared';
 import type { OrganizationJSON } from './JSON';
 
 export class Organization {
@@ -40,3 +41,5 @@ export class Organization {
     );
   }
 }
+
+deprecatedProperty(Organization, 'logoUrl', 'Use `imageUrl` instead.');

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

@@ -1,3 +1,4 @@
+import { deprecatedProperty } from '../../util/shared';
 import { Organization } from '../resources';
 import type { OrganizationMembershipRole } from './Enums';
 import type { OrganizationMembershipJSON, OrganizationMembershipPublicUserDataJSON } from './JSON';
@@ -54,3 +55,5 @@ export class OrganizationMembershipPublicUserData {
     );
   }
 }
+
+deprecatedProperty(OrganizationMembershipPublicUserData, 'profileImageUrl', 'Use `imageUrl` instead.');

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

@@ -1,3 +1,4 @@
+import { deprecatedProperty } from '../../util/shared';
 import { EmailAddress } from './EmailAddress';
 import { ExternalAccount } from './ExternalAccount';
 import type { ExternalAccountJSON, UserJSON } from './JSON';
@@ -72,3 +73,5 @@ export class User {
     );
   }
 }
+
+deprecatedProperty(User, 'profileImageUrl', 'Use `imageUrl` instead.');

packages/backend/src/index.ts

@@ -1,3 +1,5 @@
+import { deprecatedObjectProperty } from '@clerk/shared';
+
 import type { CreateBackendApiOptions } from './api';
 import { createBackendApiClient } from './api';
 import type { CreateAuthenticateRequestOptions } from './tokens';
@@ -26,12 +28,22 @@ export function Clerk(options: ClerkOptions) {
   const apiClient = createBackendApiClient(opts);
   const requestState = createAuthenticateRequest({ options: opts, apiClient });
 
-  return {
+  const clerkInstance = {
     ...apiClient,
     ...requestState,
     /**
      * @deprecated This prop has been deprecated and will be removed in the next major release.
      */
     __unstable_options: opts,
   };
+
+  // The __unstable_options is not being used internally and
+  // it's only being set in packages/sdk-node/src/clerkClient.ts#L86
+  deprecatedObjectProperty(
+    clerkInstance,
+    '__unstable_options',
+    'Use `createClerkClient({...})` to create a new clerk instance instead.',
+  );
+
+  return clerkInstance;
 }

packages/backend/src/redirections.test.ts

@@ -75,7 +75,7 @@ export default (QUnit: QUnit) => {
       assert.raises(
         () => redirectToSignIn({ returnBackUrl }),
         new Error(
-          'Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.',
+          '@clerk/backend: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.',
         ),
       );
     });
@@ -221,7 +221,7 @@ export default (QUnit: QUnit) => {
       assert.raises(
         () => redirectToSignUp({ returnBackUrl }),
         new Error(
-          'Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.',
+          '@clerk/backend: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.',
         ),
       );
     });

packages/backend/src/redirections.ts

@@ -1,5 +1,4 @@
-import { missingPublishableKeyErrorMessage } from './shared';
-import { parsePublishableKey } from './shared';
+import { deprecated, errorThrower, parsePublishableKey } from './util/shared';
 
 type RedirectAdapter = (url: string) => any;
 
@@ -40,13 +39,15 @@ type RedirectParams = {
 export function redirect({ redirectAdapter, signUpUrl, signInUrl, frontendApi, publishableKey }: RedirectParams) {
   if (!frontendApi) {
     frontendApi = parsePublishableKey(publishableKey)?.frontendApi;
+  } else {
+    deprecated('frontentApi', 'Use `publishableKey` instead.');
   }
 
   const accountsBaseUrl = buildAccountsBaseUrl(frontendApi);
 
   const redirectToSignUp = ({ returnBackUrl }: SignUpParams = {}) => {
     if (!signUpUrl && !accountsBaseUrl) {
-      throw new Error(missingPublishableKeyErrorMessage);
+      errorThrower.throwMissingPublishableKeyError();
     }
 
     const accountsSignUpUrl = `${accountsBaseUrl}/sign-up`;
@@ -55,7 +56,7 @@ export function redirect({ redirectAdapter, signUpUrl, signInUrl, frontendApi, p
 
   const redirectToSignIn = ({ returnBackUrl }: SignInParams = {}) => {
     if (!signInUrl && !accountsBaseUrl) {
-      throw new Error(missingPublishableKeyErrorMessage);
+      errorThrower.throwMissingPublishableKeyError();
     }
 
     const accountsSignInUrl = `${accountsBaseUrl}/sign-in`;