chore(types): Drop deprecations (#2109)

* chore(types): Drop `orgs` claim

* chore(gatsby-plugin-clerk,types): Replace `ServerSideAuth` with `AuthObject`

`AuthObject` is a kind of superset of `ServerSideAuth`. The only
difference is that instead of `auth.claims` in `AuthObject`
you need to use `auth.sessionClaims`

* chore(types,clerk-react,nextjs): Drop `frontendApi` and `apiKey`

* fix(clerk-expo): Fix building types

* chore(*): Drop export and replace IsomorphicClerkOptions with ClerkProviderOptionsWrapper

* chore(repo): Add changeset

.changeset/long-beds-mate.md

@@ -0,0 +1,15 @@
+---
+'gatsby-plugin-clerk': major
+'@clerk/nextjs': major
+'@clerk/clerk-react': major
+'@clerk/remix': major
+'@clerk/types': major
+---
+
+Drop deprecations. Migration steps:
+- drop `orgs` jwt claim from session token
+- change type of `auth` param of `withServerAuth()` callback to `AuthObject` from `ServerSideAuth` in `gatsby-clerk-plugin`
+    - use `auth.sessionClaims` instead of `auth.claims`
+    - use `AuthObject` properties from `auth`
+- use `publishableKey` instead of `frontendApi`
+- use `ClerkProviderOptionsWrapper` type instead of `IsomorphicClerkOptions`

packages/expo/src/ClerkProvider.tsx

@@ -22,11 +22,12 @@ export function ClerkProvider(props: ClerkProviderProps): JSX.Element {
   const key = publishableKey || process.env.CLERK_PUBLISHABLE_KEY || '';
 
   return (
-    //@ts-expect-error
     <ClerkReactProvider
-      // Force reset the state when the provided key changes, this ensures that the provider does not retain stale state. See JS-598 for additional context.
+      // Force reset the state when the provided key changes, this ensures that the provider does not retain stale state.
+      // See JS-598 for additional context.
       key={key}
       {...rest}
+      publishableKey={key}
       Clerk={buildClerk({ key, tokenCache })}
       standardBrowser={!isReactNative()}
     >

packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx

@@ -1,4 +1,4 @@
-import type { IsomorphicClerkOptions } from '@clerk/clerk-react';
+import type { ClerkProviderProps } from '@clerk/clerk-react';
 import {
   __internal__setErrorThrowerOptions,
   ClerkLoaded,
@@ -15,9 +15,8 @@ const SDK_METADATA = {
 __internal__setErrorThrowerOptions({ packageName: 'gatsby-plugin-clerk' });
 
 export type GatsbyClerkProviderProps = {
-  children: React.ReactNode;
   clerkState: any;
-} & IsomorphicClerkOptions;
+} & ClerkProviderProps;
 
 export function ClerkProvider({ children, ...rest }: GatsbyClerkProviderProps) {
   const { clerkState, ...restProps } = rest;

packages/gatsby-plugin-clerk/src/ssr/types.ts

@@ -1,11 +1,10 @@
-import type { AuthenticateRequestOptions, Organization, Session, User } from '@clerk/backend';
-import type { ServerSideAuth } from '@clerk/types';
+import type { AuthenticateRequestOptions, AuthObject, Organization, Session, User } from '@clerk/backend';
 import type { GetServerDataProps } from 'gatsby';
 
 export type WithServerAuthResult<CallbackReturn> = (props: GetServerDataProps) => Promise<Awaited<CallbackReturn>>;
 
 export type GetServerDataPropsWithAuth<Options extends WithServerAuthOptions = any> = GetServerDataProps & {
-  auth: ServerSideAuth;
+  auth: AuthObject;
 } & (Options extends { loadSession: true } ? { session: Session | null } : object) &
   (Options extends { loadUser: true } ? { user: User | null } : object) &
   (Options extends { loadOrg: true } ? { organization: Organization | null } : object);

packages/gatsby-plugin-clerk/src/ssr/withServerAuth.ts

@@ -30,9 +30,9 @@ export const withServerAuth: WithServerAuth = (cbOrOptions: any, options?: any):
       });
       return injectSSRStateIntoProps({ headers }, { __clerk_ssr_interstitial_html: interstitialHtml });
     }
-    const legacyAuthData = { ...requestState.toAuth(), claims: requestState?.toAuth()?.sessionClaims };
-    const contextWithAuth = injectAuthIntoContext(props, legacyAuthData);
+
+    const contextWithAuth = injectAuthIntoContext(props, requestState.toAuth());
     const callbackResult = (await callback?.(contextWithAuth)) || {};
-    return injectSSRStateIntoProps(callbackResult, { __clerk_ssr_state: sanitizeAuthObject(legacyAuthData) });
+    return injectSSRStateIntoProps(callbackResult, { __clerk_ssr_state: sanitizeAuthObject(contextWithAuth.auth) });
   };
 };

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

@@ -1,14 +1,12 @@
-import type { IsomorphicClerkOptions } from '@clerk/clerk-react';
-import type { InitialState, PublishableKeyOrFrontendApi } from '@clerk/types';
+import type { ClerkProviderOptionsWrapper } from '@clerk/clerk-react';
+import type { InitialState } from '@clerk/types';
 import React from 'react';
 
 import { mergeNextClerkPropsWithEnv } from '../../utils/mergeNextClerkPropsWithEnv';
 import { ClientClerkProvider } from '../client/ClerkProvider';
 import { initialState } from './auth';
 
-type NextAppClerkProviderProps = React.PropsWithChildren<
-  Omit<IsomorphicClerkOptions, keyof PublishableKeyOrFrontendApi> & Partial<PublishableKeyOrFrontendApi>
->;
+type NextAppClerkProviderProps = ClerkProviderOptionsWrapper;
 
 export function ClerkProvider(props: NextAppClerkProviderProps) {
   const { children, ...rest } = props;

packages/nextjs/src/server/getAuth.ts

@@ -8,16 +8,13 @@ import {
   signedInAuthObject,
   signedOutAuthObject,
 } from '@clerk/backend';
-import type { SecretKeyOrApiKey } from '@clerk/types';
 
 import { withLogger } from '../utils/debugLogger';
 import { API_URL, API_VERSION, SECRET_KEY } from './constants';
 import { getAuthAuthHeaderMissing } from './errors';
 import type { RequestLike } from './types';
 import { getAuthKeyFromRequest, getCookie, getHeader, injectSSRStateIntoObject } from './utils';
 
-type GetAuthOpts = Partial<SecretKeyOrApiKey>;
-
 type AuthObjectWithoutResources<T extends AuthObject> = Omit<T, 'user' | 'organization' | 'session'>;
 
 export const createGetAuth = ({
@@ -30,7 +27,7 @@ export const createGetAuth = ({
   withLogger(debugLoggerName, logger => {
     return (
       req: RequestLike,
-      opts?: GetAuthOpts,
+      opts?: { secretKey?: string },
     ): AuthObjectWithoutResources<SignedInAuthObject> | AuthObjectWithoutResources<SignedOutAuthObject> => {
       const debug = getHeader(req, constants.Headers.EnableDebug) === 'true';
       if (debug) {

packages/nextjs/src/server/types.ts

@@ -1,5 +1,5 @@
 import type { OptionalVerifyTokenOptions } from '@clerk/backend';
-import type { MultiDomainAndOrProxy, PublishableKeyOrFrontendApi, SecretKeyOrApiKey } from '@clerk/types';
+import type { MultiDomainAndOrProxy } from '@clerk/types';
 import type { IncomingMessage } from 'http';
 import type { NextApiRequest } from 'next';
 import type { NextApiRequestCookies } from 'next/dist/server/api-utils';
@@ -12,10 +12,10 @@ type GsspRequest = IncomingMessage & {
 
 export type RequestLike = NextRequest | NextApiRequest | GsspRequest;
 
-export type WithAuthOptions = Partial<PublishableKeyOrFrontendApi> &
-  Partial<SecretKeyOrApiKey> &
-  OptionalVerifyTokenOptions &
+export type WithAuthOptions = OptionalVerifyTokenOptions &
   MultiDomainAndOrProxy & {
+    publishableKey?: string;
+    secretKey?: string;
     signInUrl?: string;
   };
 

packages/nextjs/src/types.ts

@@ -1,9 +1,6 @@
-import type { IsomorphicClerkOptions } from '@clerk/clerk-react';
-import type { MultiDomainAndOrProxy, PublishableKeyOrFrontendApi } from '@clerk/types';
-import type React from 'react';
+import type { ClerkProviderOptionsWrapper } from '@clerk/clerk-react';
 
 export type NextClerkProviderProps = {
-  children: React.ReactNode;
   /**
    * If set to true, the NextJS middleware will be invoked
    * every time the client-side auth state changes (sign-out, sign-in, organization switch etc.).
@@ -13,7 +10,4 @@ export type NextClerkProviderProps = {
    * @default true
    */
   __unstable_invokeMiddlewareOnAuthStateChange?: boolean;
-} & Omit<IsomorphicClerkOptions, keyof PublishableKeyOrFrontendApi> &
-  Partial<PublishableKeyOrFrontendApi> &
-  Omit<IsomorphicClerkOptions, keyof MultiDomainAndOrProxy> &
-  MultiDomainAndOrProxy;
+} & ClerkProviderOptionsWrapper;

packages/react/src/contexts/ClerkProvider.tsx

@@ -1,9 +1,8 @@
 import { isPublishableKey } from '@clerk/shared/keys';
-import type { InitialState } from '@clerk/types';
 import React from 'react';
 
 import { multipleClerkProvidersError } from '../errors';
-import type { IsomorphicClerkOptions } from '../types';
+import type { ClerkProviderProps } from '../types';
 import { __internal__setErrorThrowerOptions, errorThrower, withMaxAllowedInstancesGuard } from '../utils';
 import { ClerkContextProvider } from './ClerkContextProvider';
 import { StructureContext, StructureContextStates } from './StructureContext';
@@ -12,11 +11,6 @@ __internal__setErrorThrowerOptions({
   packageName: '@clerk/clerk-react',
 });
 
-export type ClerkProviderProps = IsomorphicClerkOptions & {
-  children: React.ReactNode;
-  initialState?: InitialState;
-};
-
 function ClerkProviderBase(props: ClerkProviderProps): JSX.Element {
   const { initialState, children, ...restIsomorphicClerkOptions } = props;
   const { publishableKey = '', Clerk: userInitialisedClerk } = restIsomorphicClerkOptions;

packages/react/src/contexts/index.ts

@@ -1,2 +1 @@
 export { ClerkProvider, __internal__setErrorThrowerOptions } from './ClerkProvider';
-export type { ClerkProviderProps } from './ClerkProvider';

packages/react/src/index.ts

@@ -9,7 +9,8 @@ export type {
   BrowserClerk,
   ClerkProp,
   HeadlessBrowserClerk,
-  IsomorphicClerkOptions,
+  ClerkProviderOptionsWrapper,
+  ClerkProviderProps,
   WithClerkProp,
   WithSessionProp,
   WithUserProp,

packages/react/src/isomorphicClerk.ts

@@ -57,7 +57,6 @@ type MethodCallback = () => Promise<unknown> | unknown;
 
 export class IsomorphicClerk {
   private readonly mode: 'browser' | 'server';
-  private readonly publishableKey?: string;
   private readonly options: IsomorphicClerkOptions;
   private readonly Clerk: ClerkProp;
   private clerkjs: BrowserClerk | HeadlessBrowserClerk | null = null;
@@ -80,6 +79,11 @@ export class IsomorphicClerk {
   #loaded = false;
   #domain: DomainOrProxyUrl['domain'];
   #proxyUrl: DomainOrProxyUrl['proxyUrl'];
+  #publishableKey: string;
+
+  get publishableKey(): string {
+    return this.#publishableKey;
+  }
 
   get loaded(): boolean {
     return this.#loaded;
@@ -124,7 +128,7 @@ export class IsomorphicClerk {
 
   constructor(options: IsomorphicClerkOptions) {
     const { Clerk = null, publishableKey } = options || {};
-    this.publishableKey = publishableKey;
+    this.#publishableKey = publishableKey;
     this.#proxyUrl = options?.proxyUrl;
     this.#domain = options?.domain;
     this.options = options;
@@ -149,7 +153,7 @@ export class IsomorphicClerk {
     // - https://github.com/remix-run/remix/issues/2947
     // - https://github.com/facebook/react/issues/24430
     if (typeof window !== 'undefined') {
-      window.__clerk_publishable_key = this.publishableKey;
+      window.__clerk_publishable_key = this.#publishableKey;
       window.__clerk_proxy_url = this.proxyUrl;
       window.__clerk_domain = this.domain;
     }
@@ -161,7 +165,7 @@ export class IsomorphicClerk {
 
         if (isConstructor<BrowserClerkConstructor | HeadlessBrowserClerkConstrutor>(this.Clerk)) {
           // Construct a new Clerk object if a constructor is passed
-          c = new this.Clerk(this.publishableKey || '', {
+          c = new this.Clerk(this.#publishableKey, {
             proxyUrl: this.proxyUrl,
             domain: this.domain,
           } as any);
@@ -181,7 +185,7 @@ export class IsomorphicClerk {
         if (!global.Clerk) {
           await loadClerkJsScript({
             ...this.options,
-            publishableKey: this.publishableKey,
+            publishableKey: this.#publishableKey,
             proxyUrl: this.proxyUrl,
             domain: this.domain,
           });

packages/react/src/types.ts

@@ -3,9 +3,9 @@ import type {
   ClerkOptions,
   ClientResource,
   DomainOrProxyUrl,
+  InitialState,
   LoadedClerk,
   MultiDomainAndOrProxy,
-  PublishableKeyOrFrontendApi,
   SDKMetadata,
   SessionResource,
   SignInRedirectOptions,
@@ -23,15 +23,33 @@ declare global {
   }
 }
 
-// TODO(@dimkl): Remove frontendApi when it's removed from ClerkOptions in @clerk/types
-export type IsomorphicClerkOptions = Omit<ClerkOptions, 'isSatellite' | 'frontendApi'> & {
+export type IsomorphicClerkOptions = Omit<ClerkOptions, 'isSatellite'> & {
   Clerk?: ClerkProp;
   clerkJSUrl?: string;
   clerkJSVariant?: 'headless' | '';
   clerkJSVersion?: string;
   sdkMetadata?: SDKMetadata;
-} & PublishableKeyOrFrontendApi &
-  MultiDomainAndOrProxy;
+  publishableKey: string;
+} & MultiDomainAndOrProxy;
+
+export type ClerkProviderProps = IsomorphicClerkOptions & {
+  children: React.ReactNode;
+  initialState?: InitialState;
+};
+
+// TODO(@dimkl): replacing it with the following make nextjs type tests fail
+//   `Exclude<IsomorphicClerkOptions, 'publishableKey'> & { publishableKey?: string }`
+// find another way to reduce the duplication.
+export type ClerkProviderOptionsWrapper = Omit<ClerkOptions, 'isSatellite'> & {
+  Clerk?: ClerkProp;
+  clerkJSUrl?: string;
+  clerkJSVariant?: 'headless' | '';
+  clerkJSVersion?: string;
+  sdkMetadata?: SDKMetadata;
+  publishableKey?: string;
+} & MultiDomainAndOrProxy & {
+    children: React.ReactNode;
+  };
 
 export interface BrowserClerkConstructor {
   new (publishableKey: string, options?: DomainOrProxyUrl): BrowserClerk;

packages/remix/src/client/RemixClerkProvider.tsx

@@ -1,4 +1,4 @@
-import type { IsomorphicClerkOptions } from '@clerk/clerk-react';
+import type { ClerkProviderOptionsWrapper } from '@clerk/clerk-react';
 import { ClerkProvider as ReactClerkProvider } from '@clerk/clerk-react';
 import React from 'react';
 
@@ -15,9 +15,8 @@ const SDK_METADATA = {
 };
 
 export type RemixClerkProviderProps = {
-  children: React.ReactNode;
   clerkState: ClerkState;
-} & IsomorphicClerkOptions;
+} & ClerkProviderOptionsWrapper;
 
 /**
  * Remix hydration errors should not stop Clerk navigation from working, as the components mount only after

packages/remix/src/client/types.ts

@@ -1,6 +1,5 @@
-import type { IsomorphicClerkOptions } from '@clerk/clerk-react';
-import type { InitialState, MultiDomainAndOrProxy, PublishableKeyOrFrontendApi } from '@clerk/types';
-import type { PropsWithChildren } from 'react';
+import type { ClerkProviderOptionsWrapper } from '@clerk/clerk-react';
+import type { InitialState } from '@clerk/types';
 
 export type ClerkState = {
   __type: 'clerkState';
@@ -26,9 +25,4 @@ export type WithClerkState<U = any> = {
   clerkState: { __type: 'clerkState' };
 };
 
-export type RemixClerkProviderProps = PropsWithChildren<
-  Omit<IsomorphicClerkOptions, keyof PublishableKeyOrFrontendApi> &
-    Partial<PublishableKeyOrFrontendApi> &
-    Omit<IsomorphicClerkOptions, keyof MultiDomainAndOrProxy> &
-    MultiDomainAndOrProxy
->;
+export type RemixClerkProviderProps = ClerkProviderOptionsWrapper;

packages/types/src/jwtv2.ts

@@ -81,11 +81,6 @@ export interface JwtPayload extends CustomJwtSessionClaims {
    */
   act?: ActClaim;
 
-  /**
-   * @deprecated - Add orgs to your session token using the "user.organizations" shortcode in JWT Templates instead
-   */
-  orgs?: Record<string, MembershipRole>;
-
   /**
    * Active organization id.
    */

packages/types/src/key.ts

@@ -4,35 +4,3 @@ export type PublishableKey = {
   frontendApi: string;
   instanceType: InstanceType;
 };
-
-export type PublishableKeyOrFrontendApi =
-  | {
-      /**
-       * @deprecated Use `publishableKey` instead.
-       */
-      frontendApi?: never;
-      publishableKey: string;
-    }
-  | {
-      /**
-       * @deprecated Use `publishableKey` instead.
-       */
-      frontendApi: string;
-      publishableKey?: never;
-    };
-
-export type SecretKeyOrApiKey =
-  | {
-      secretKey?: never;
-      /**
-       * @deprecated Use `secretKey` instead.
-       */
-      apiKey: string;
-    }
-  | {
-      secretKey: string;
-      /**
-       * @deprecated Use `secretKey` instead.
-       */
-      apiKey?: never;
-    };