chore(clerk-js,backend,shared):Apply deprecation warnings `@clerk/typ…

…es` (#1823)

* fix(shared): Fix deprecatedObjectProperty key usage and support optional key arg

* chore(clerk-js): Warn about orgs jwt claim deprecation

* chore(backend): Warn about orgs jwt claim deprecation

* chore(backend): Warn about apiKey deprecation

* chore(backend): Fix typo in frontendApi deprecation warning

* chore(clerk-react,clerk-js): Warn about PublishableKeyOrFrontendApi.frontendApi deprecations

* chore(clerk-js): Warn about PublicUserData.profileImageUrl deprecations

* chore(clerk-js): Warn about redirect_url deprecations

* chore(clerk-js): Warn about password deprecations in User.update

* chore(clerk-js): Warn about generateSignature deprecations

* chore(clerk-js): Warn about afterSwitchOrganizationUrl deprecation

* chore(clerk-js): Warn about UserData.profileImageUrl deprecations

* chore(clerk-js): Use PublicUserData and UserData instead of multiple *UserData classes

.changeset/eighty-cobras-matter.md

@@ -0,0 +1,17 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/backend': patch
+'@clerk/shared': patch
+'@clerk/clerk-react': patch
+---
+
+Apply deprecation warnings for @clerk/types:
+
+- `orgs` jwt claims
+- `apiKey`
+- `frontendApi`
+- `redirect_url`
+- `password`
+- `generateSignature`
+- `afterSwitchOrganizationUrl`
+- `profileImageUrl`

packages/backend/src/redirections.ts

@@ -40,7 +40,7 @@ export function redirect({ redirectAdapter, signUpUrl, signInUrl, frontendApi, p
   if (!frontendApi) {
     frontendApi = parsePublishableKey(publishableKey)?.frontendApi;
   } else {
-    deprecated('frontentApi', 'Use `publishableKey` instead.');
+    deprecated('frontendApi', 'Use `publishableKey` instead.');
   }
 
   const accountsBaseUrl = buildAccountsBaseUrl(frontendApi);

packages/backend/src/tokens/authObjects.ts

@@ -1,3 +1,4 @@
+import { deprecated } from '@clerk/shared';
 import type { ActClaim, JwtPayload, ServerGetToken, ServerGetTokenOptions } from '@clerk/types';
 
 import type { Organization, Session, User } from '../api';
@@ -80,6 +81,10 @@ export function signedInAuthObject(
   } = sessionClaims;
   const { apiKey, secretKey, apiUrl, apiVersion, token, session, user, organization } = options;
 
+  if (apiKey) {
+    deprecated('apiKey', 'Use `secretKey` instead.');
+  }
+
   const { sessions } = createBackendApiClient({
     apiKey,
     secretKey,
@@ -110,6 +115,10 @@ export function signedInAuthObject(
 }
 
 export function signedOutAuthObject(debugData?: AuthObjectDebugData): SignedOutAuthObject {
+  if (debugData?.apiKey) {
+    deprecated('apiKey', 'Use `secretKey` instead.');
+  }
+
   return {
     sessionClaims: null,
     sessionId: null,

packages/backend/src/tokens/interstitial.ts

@@ -35,7 +35,7 @@ export type LoadInterstitialOptions = {
 
 export function loadInterstitialFromLocal(options: Omit<LoadInterstitialOptions, 'apiUrl'>) {
   if (options.frontendApi) {
-    deprecated('frontentApi', 'Use `publishableKey` instead.');
+    deprecated('frontendApi', 'Use `publishableKey` instead.');
   }
   if (options.pkgVersion) {
     deprecated('pkgVersion', 'Use `clerkJSVersion` instead.');
@@ -135,7 +135,7 @@ export function loadInterstitialFromLocal(options: Omit<LoadInterstitialOptions,
 // TODO: Add caching to Interstitial
 export async function loadInterstitialFromBAPI(options: LoadInterstitialOptions) {
   if (options.frontendApi) {
-    deprecated('frontentApi', 'Use `publishableKey` instead.');
+    deprecated('frontendApi', 'Use `publishableKey` instead.');
   }
   if (options.pkgVersion) {
     deprecated('pkgVersion', 'Use `clerkJSVersion` instead.');
@@ -164,7 +164,7 @@ export async function loadInterstitialFromBAPI(options: LoadInterstitialOptions)
 
 export function buildPublicInterstitialUrl(options: LoadInterstitialOptions) {
   if (options.frontendApi) {
-    deprecated('frontentApi', 'Use `publishableKey` instead.');
+    deprecated('frontendApi', 'Use `publishableKey` instead.');
   }
 
   options.frontendApi = parsePublishableKey(options.publishableKey)?.frontendApi || options.frontendApi || '';

packages/backend/src/tokens/jwt/verifyJwt.ts

@@ -1,3 +1,4 @@
+import { deprecatedObjectProperty } from '@clerk/shared';
 import type { Jwt, JwtPayload } from '@clerk/types';
 
 // DO NOT CHANGE: Runtime needs to be imported as a default export so that we can stub its dependencies with Sinon.js
@@ -85,6 +86,13 @@ export function decodeJwt(token: string): Jwt {
   const payload = JSON.parse(decoder.decode(base64url.parse(rawPayload, { loose: true })));
   const signature = base64url.parse(rawSignature, { loose: true });
 
+  deprecatedObjectProperty(
+    payload,
+    'orgs',
+    'Add orgs to your session token using the "user.organizations" shortcode in JWT Templates instead.',
+    'decodeJwt:orgs',
+  );
+
   return {
     header,
     payload,

packages/backend/src/tokens/request.ts

@@ -106,7 +106,7 @@ export async function authenticateRequest(options: AuthenticateRequestOptions):
   const { cookies, headers, searchParams } = buildRequest(options?.request);
 
   if (options.frontendApi) {
-    deprecated('frontentApi', 'Use `publishableKey` instead.');
+    deprecated('frontendApi', 'Use `publishableKey` instead.');
   }
 
   if (options.apiKey) {

packages/clerk-js/src/core/clerk.ts

@@ -245,6 +245,8 @@ export default class Clerk implements ClerkInterface {
     this.#proxyUrl = options?.proxyUrl;
 
     if (isLegacyFrontendApiKey(key)) {
+      deprecated('frontendApi', 'Use `publishableKey` instead.');
+
       if (!validateFrontendApi(key)) {
         errorThrower.throwInvalidFrontendApiError({ key });
       }

packages/clerk-js/src/core/resources/OrganizationMembership.ts

@@ -6,12 +6,11 @@ import type {
   MembershipRole,
   OrganizationMembershipJSON,
   OrganizationMembershipResource,
-  PublicUserData,
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
 import { convertPageToOffset } from '../../utils/pagesToOffset';
-import { BaseResource, Organization, OrganizationPublicUserData } from './internal';
+import { BaseResource, Organization, PublicUserData } from './internal';
 
 export class OrganizationMembership extends BaseResource implements OrganizationMembershipResource {
   id!: string;
@@ -105,7 +104,7 @@ export class OrganizationMembership extends BaseResource implements Organization
     this.organization = new Organization(data.organization);
     this.publicMetadata = data.public_metadata;
     if (data.public_user_data) {
-      this.publicUserData = new OrganizationPublicUserData(data.public_user_data);
+      this.publicUserData = new PublicUserData(data.public_user_data);
     }
     this.role = data.role;
     this.createdAt = unixEpochToDate(data.created_at);

packages/clerk-js/src/core/resources/OrganizationMembershipRequest.ts

@@ -1,8 +1,8 @@
-import type { OrganizationInvitationStatus, OrganizationMembershipRequestResource, PublicUserData } from '@clerk/types';
+import type { OrganizationInvitationStatus, OrganizationMembershipRequestResource } from '@clerk/types';
 import type { OrganizationMembershipRequestJSON } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
-import { BaseResource, OrganizationPublicUserData } from './internal';
+import { BaseResource, PublicUserData } from './internal';
 
 export class OrganizationMembershipRequest extends BaseResource implements OrganizationMembershipRequestResource {
   id!: string;
@@ -37,7 +37,7 @@ export class OrganizationMembershipRequest extends BaseResource implements Organ
       this.createdAt = unixEpochToDate(data.created_at);
       this.updatedAt = unixEpochToDate(data.updated_at);
       if (data.public_user_data) {
-        this.publicUserData = new OrganizationPublicUserData(data.public_user_data);
+        this.publicUserData = new PublicUserData(data.public_user_data);
       }
     }
     return this;

packages/clerk-js/src/core/resources/OrganizationPublicUserData.ts → packages/clerk-js/src/core/resources/PublicUserData.ts

@@ -1,8 +1,8 @@
 import { deprecatedProperty } from '@clerk/shared';
-import type { PublicUserData } from '@clerk/types';
+import type { PublicUserData as IPublicUserData } from '@clerk/types';
 import type { PublicUserDataJSON } from '@clerk/types';
 
-export class OrganizationPublicUserData implements PublicUserData {
+export class PublicUserData implements IPublicUserData {
   firstName!: string | null;
   lastName!: string | null;
   /**
@@ -33,4 +33,4 @@ export class OrganizationPublicUserData implements PublicUserData {
   }
 }
 
-deprecatedProperty(OrganizationPublicUserData, 'profileImageUrl', 'Use `imageUrl` instead.');
+deprecatedProperty(PublicUserData, 'profileImageUrl', 'Use `imageUrl` instead.');

packages/clerk-js/src/core/resources/Session.ts

@@ -1,10 +1,9 @@
 import { is4xxError } from '@clerk/shared';
-import { deepSnakeToCamel, runWithExponentialBackOff } from '@clerk/shared';
+import { runWithExponentialBackOff } from '@clerk/shared';
 import type {
   ActJWTClaim,
   GetToken,
   GetTokenOptions,
-  PublicUserData,
   SessionJSON,
   SessionResource,
   SessionStatus,
@@ -15,6 +14,7 @@ import type {
 import { unixEpochToDate } from '../../utils/date';
 import { eventBus, events } from '../events';
 import { SessionTokenCache } from '../tokenCache';
+import { PublicUserData } from './internal';
 import { BaseResource, Token, User } from './internal';
 
 export class Session extends BaseResource implements SessionResource {
@@ -138,8 +138,13 @@ export class Session extends BaseResource implements SessionResource {
     this.createdAt = unixEpochToDate(data.created_at);
     this.updatedAt = unixEpochToDate(data.updated_at);
     this.user = new User(data.user);
-    this.publicUserData = deepSnakeToCamel(data.public_user_data) as PublicUserData;
+
+    if (data.public_user_data) {
+      this.publicUserData = new PublicUserData(data.public_user_data);
+    }
+
     this.lastActiveToken = data.last_active_token ? new Token(data.last_active_token) : null;
+
     return this;
   }
 

packages/clerk-js/src/core/resources/SignIn.ts

@@ -22,7 +22,6 @@ import type {
   SignInSecondFactor,
   SignInStartMagicLinkFlowParams,
   SignInStatus,
-  UserData,
   VerificationResource,
   Web3SignatureConfig,
   Web3SignatureFactor,
@@ -37,7 +36,7 @@ import {
   clerkVerifyEmailAddressCalledBeforeCreate,
   clerkVerifyWeb3WalletCalledBeforeCreate,
 } from '../errors';
-import { BaseResource, Verification } from './internal';
+import { BaseResource, UserData, Verification } from './internal';
 
 export class SignIn extends BaseResource implements SignInResource {
   pathRoot = '/client/sign_ins';
@@ -51,7 +50,7 @@ export class SignIn extends BaseResource implements SignInResource {
   secondFactorVerification: VerificationResource = new Verification(null);
   identifier: string | null = null;
   createdSessionId: string | null = null;
-  userData: UserData = {};
+  userData!: UserData;
 
   constructor(data: SignInJSON | null = null) {
     super();
@@ -255,7 +254,7 @@ export class SignIn extends BaseResource implements SignInResource {
       this.firstFactorVerification = new Verification(data.first_factor_verification);
       this.secondFactorVerification = new Verification(data.second_factor_verification);
       this.createdSessionId = data.created_session_id;
-      this.userData = deepSnakeToCamel(data.user_data || {}) as UserData;
+      this.userData = new UserData(data.user_data);
     }
     return this;
   }

packages/clerk-js/src/core/resources/SignUp.ts

@@ -1,4 +1,4 @@
-import { Poller } from '@clerk/shared';
+import { deprecated, Poller } from '@clerk/shared';
 import type {
   AttemptEmailAddressVerificationParams,
   AttemptPhoneNumberVerificationParams,
@@ -161,6 +161,10 @@ export class SignUp extends BaseResource implements SignUpResource {
   attemptWeb3WalletVerification = async (params: AttemptWeb3WalletVerificationParams): Promise<SignUpResource> => {
     const { signature, generateSignature } = params || {};
 
+    if (generateSignature) {
+      deprecated('generateSignature', 'Use signature field instead.');
+    }
+
     if (signature) {
       return this.attemptVerification({ signature, strategy: 'web3_metamask_signature' });
     }

packages/clerk-js/src/core/resources/User.ts

@@ -1,3 +1,4 @@
+import { deprecated } from '@clerk/shared';
 import { deprecatedProperty } from '@clerk/shared';
 import type {
   BackupCodeJSON,
@@ -154,6 +155,9 @@ export class User extends BaseResource implements UserResource {
 
   createExternalAccount = async (params: CreateExternalAccountParams): Promise<ExternalAccountResource> => {
     const { strategy, redirectUrl, additionalScopes, redirect_url } = params || {};
+    if (redirect_url) {
+      deprecated('redirect_url', 'Use `redirectUrl` instead.');
+    }
 
     const json = (
       await BaseResource._fetch<ExternalAccountJSON>({
@@ -216,6 +220,12 @@ export class User extends BaseResource implements UserResource {
   };
 
   update = (params: UpdateUserParams): Promise<UserResource> => {
+    if (params.password) {
+      deprecated(
+        'password',
+        'This will be removed in the next major version. Please use `updatePassword(params)` instead.',
+      );
+    }
     return this._basePatch({
       body: normalizeUnsafeMetadata(params),
     });

packages/clerk-js/src/core/resources/UserData.ts

@@ -0,0 +1,32 @@
+import { deprecatedProperty } from '@clerk/shared';
+import type { UserData as IUserData } from '@clerk/types';
+import type { UserDataJSON } from '@clerk/types';
+
+export class UserData implements IUserData {
+  firstName?: string;
+  lastName?: string;
+  /**
+   * @deprecated  Use `imageUrl` instead.
+   */
+  profileImageUrl?: string;
+  imageUrl?: string;
+  hasImage?: boolean;
+
+  constructor(data: UserDataJSON) {
+    this.fromJSON(data);
+  }
+
+  protected fromJSON(data: UserDataJSON | null): this {
+    if (data) {
+      this.firstName = data.first_name;
+      this.lastName = data.last_name;
+      this.profileImageUrl = data.profile_image_url;
+      this.imageUrl = data.image_url;
+      this.hasImage = data.has_image;
+    }
+
+    return this;
+  }
+}
+
+deprecatedProperty(UserData, 'profileImageUrl', 'Use `imageUrl` instead.');

packages/clerk-js/src/core/resources/Web3Wallet.ts

@@ -1,3 +1,4 @@
+import { deprecated } from '@clerk/shared';
 import type {
   AttemptWeb3WalletVerificationParams,
   PrepareWeb3WalletVerificationParams,
@@ -37,6 +38,10 @@ export class Web3Wallet extends BaseResource implements Web3WalletResource {
   attemptVerification = (params: AttemptWeb3WalletVerificationParams): Promise<this> => {
     const { signature, generateSignature } = params || {};
 
+    if (generateSignature) {
+      deprecated('generateSignature', 'Use signature field instead.');
+    }
+
     if (signature) {
       return this._basePost<Web3WalletJSON>({
         action: 'attempt_verification',

packages/clerk-js/src/core/resources/__snapshots__/OrganizationMembership.test.ts.snap

@@ -41,7 +41,7 @@ OrganizationMembership {
   "publicMetadata": {
     "foo": "bar",
   },
-  "publicUserData": OrganizationPublicUserData {
+  "publicUserData": PublicUserData {
     "firstName": "test_first_name",
     "hasImage": true,
     "identifier": "test@identifier.gr",

packages/clerk-js/src/core/resources/__snapshots__/OrganizationMembershipRequest.test.ts.snap

@@ -7,7 +7,7 @@ OrganizationMembershipRequest {
   "id": "test_id",
   "organizationId": "test_org_id",
   "pathRoot": "",
-  "publicUserData": OrganizationPublicUserData {
+  "publicUserData": PublicUserData {
     "firstName": "test_first_name",
     "hasImage": true,
     "identifier": "test@identifier.gr",

packages/clerk-js/src/core/resources/internal.ts

@@ -17,12 +17,13 @@ export * from './OrganizationDomain';
 export * from './OrganizationInvitation';
 export * from './OrganizationMembership';
 export * from './OrganizationMembershipRequest';
-export * from './OrganizationPublicUserData';
 export * from './OrganizationSuggestion';
 export * from './SamlAccount';
 export * from './Session';
+export * from './PublicUserData';
 export * from './SessionWithActivities';
 export * from './SignIn';
+export * from './UserData';
 export * from './SignUp';
 export * from './Token';
 export * from './TOTP';

packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

@@ -1,4 +1,4 @@
-import { snakeToCamel } from '@clerk/shared';
+import { deprecated, snakeToCamel } from '@clerk/shared';
 import type { OrganizationResource, UserResource } from '@clerk/types';
 import React, { useMemo } from 'react';
 
@@ -294,6 +294,7 @@ export const useOrganizationSwitcherContext = () => {
 
     // Continue to support afterSwitchOrganizationUrl
     if (ctx.afterSwitchOrganizationUrl) {
+      deprecated('afterSwitchOrganizationUrl', 'Use `afterSelectOrganizationUrl` or `afterSelectPersonalUrl`');
       return navigate(ctx.afterSwitchOrganizationUrl);
     }