diff --git a/.changeset/long-beds-mate.md b/.changeset/long-beds-mate.md new file mode 100644 index 0000000000..052a4ef35c --- /dev/null +++ b/.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` \ No newline at end of file diff --git a/packages/expo/src/ClerkProvider.tsx b/packages/expo/src/ClerkProvider.tsx index e396b08610..0802497a1d 100644 --- a/packages/expo/src/ClerkProvider.tsx +++ b/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 diff --git a/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx b/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx index 59f09296af..92b29d3b72 100644 --- a/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx +++ b/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; diff --git a/packages/gatsby-plugin-clerk/src/ssr/types.ts b/packages/gatsby-plugin-clerk/src/ssr/types.ts index d61c16cba2..aad0a2f6d5 100644 --- a/packages/gatsby-plugin-clerk/src/ssr/types.ts +++ b/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 = (props: GetServerDataProps) => Promise>; export type GetServerDataPropsWithAuth = 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); diff --git a/packages/gatsby-plugin-clerk/src/ssr/withServerAuth.ts b/packages/gatsby-plugin-clerk/src/ssr/withServerAuth.ts index 267b54f0df..3d2cce8cb1 100644 --- a/packages/gatsby-plugin-clerk/src/ssr/withServerAuth.ts +++ b/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) }); }; }; diff --git a/packages/nextjs/src/app-router/server/ClerkProvider.tsx b/packages/nextjs/src/app-router/server/ClerkProvider.tsx index c7f11a6a0b..26b7b8409d 100644 --- a/packages/nextjs/src/app-router/server/ClerkProvider.tsx +++ b/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 & Partial ->; +type NextAppClerkProviderProps = ClerkProviderOptionsWrapper; export function ClerkProvider(props: NextAppClerkProviderProps) { const { children, ...rest } = props; diff --git a/packages/nextjs/src/server/getAuth.ts b/packages/nextjs/src/server/getAuth.ts index bb13dc840f..8d088917c0 100644 --- a/packages/nextjs/src/server/getAuth.ts +++ b/packages/nextjs/src/server/getAuth.ts @@ -8,7 +8,6 @@ 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'; @@ -16,8 +15,6 @@ import { getAuthAuthHeaderMissing } from './errors'; import type { RequestLike } from './types'; import { getAuthKeyFromRequest, getCookie, getHeader, injectSSRStateIntoObject } from './utils'; -type GetAuthOpts = Partial; - type AuthObjectWithoutResources = Omit; export const createGetAuth = ({ @@ -30,7 +27,7 @@ export const createGetAuth = ({ withLogger(debugLoggerName, logger => { return ( req: RequestLike, - opts?: GetAuthOpts, + opts?: { secretKey?: string }, ): AuthObjectWithoutResources | AuthObjectWithoutResources => { const debug = getHeader(req, constants.Headers.EnableDebug) === 'true'; if (debug) { diff --git a/packages/nextjs/src/server/types.ts b/packages/nextjs/src/server/types.ts index 7834705209..18e9b9c04c 100644 --- a/packages/nextjs/src/server/types.ts +++ b/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 & - Partial & - OptionalVerifyTokenOptions & +export type WithAuthOptions = OptionalVerifyTokenOptions & MultiDomainAndOrProxy & { + publishableKey?: string; + secretKey?: string; signInUrl?: string; }; diff --git a/packages/nextjs/src/types.ts b/packages/nextjs/src/types.ts index 8dbe4aa28f..e8d7fe4aa7 100644 --- a/packages/nextjs/src/types.ts +++ b/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 & - Partial & - Omit & - MultiDomainAndOrProxy; +} & ClerkProviderOptionsWrapper; diff --git a/packages/react/src/contexts/ClerkProvider.tsx b/packages/react/src/contexts/ClerkProvider.tsx index 0bbef0ea4b..0867ce4743 100644 --- a/packages/react/src/contexts/ClerkProvider.tsx +++ b/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; diff --git a/packages/react/src/contexts/index.ts b/packages/react/src/contexts/index.ts index 70c6ff12a6..29e060d384 100644 --- a/packages/react/src/contexts/index.ts +++ b/packages/react/src/contexts/index.ts @@ -1,2 +1 @@ export { ClerkProvider, __internal__setErrorThrowerOptions } from './ClerkProvider'; -export type { ClerkProviderProps } from './ClerkProvider'; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index d31d7e1129..2af4a3a6ce 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -9,7 +9,8 @@ export type { BrowserClerk, ClerkProp, HeadlessBrowserClerk, - IsomorphicClerkOptions, + ClerkProviderOptionsWrapper, + ClerkProviderProps, WithClerkProp, WithSessionProp, WithUserProp, diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts index 5e4ac0f5b5..93f2ef3461 100644 --- a/packages/react/src/isomorphicClerk.ts +++ b/packages/react/src/isomorphicClerk.ts @@ -57,7 +57,6 @@ type MethodCallback = () => Promise | 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(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, }); diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 476e74c56f..b6800c2c89 100644 --- a/packages/react/src/types.ts +++ b/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 & { +export type IsomorphicClerkOptions = Omit & { 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 & { publishableKey?: string }` +// find another way to reduce the duplication. +export type ClerkProviderOptionsWrapper = Omit & { + 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; diff --git a/packages/remix/src/client/RemixClerkProvider.tsx b/packages/remix/src/client/RemixClerkProvider.tsx index e01ba807e6..6867037d6c 100644 --- a/packages/remix/src/client/RemixClerkProvider.tsx +++ b/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 diff --git a/packages/remix/src/client/types.ts b/packages/remix/src/client/types.ts index 4fca0c9f8d..ac0dbeea15 100644 --- a/packages/remix/src/client/types.ts +++ b/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 = { clerkState: { __type: 'clerkState' }; }; -export type RemixClerkProviderProps = PropsWithChildren< - Omit & - Partial & - Omit & - MultiDomainAndOrProxy ->; +export type RemixClerkProviderProps = ClerkProviderOptionsWrapper; diff --git a/packages/types/src/jwtv2.ts b/packages/types/src/jwtv2.ts index 14151e8d55..e7f1db949c 100644 --- a/packages/types/src/jwtv2.ts +++ b/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; - /** * Active organization id. */ diff --git a/packages/types/src/key.ts b/packages/types/src/key.ts index 659b2f242b..9a0f24ced5 100644 --- a/packages/types/src/key.ts +++ b/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; - }; diff --git a/packages/types/src/ssr.ts b/packages/types/src/ssr.ts index a77a28e2a4..3cad74c1de 100644 --- a/packages/types/src/ssr.ts +++ b/packages/types/src/ssr.ts @@ -1,4 +1,3 @@ -import type { ActJWTClaim, ClerkJWTClaims } from './jwt'; import type { ActClaim, JwtPayload } from './jwtv2'; import type { OrganizationResource } from './organization'; import type { MembershipRole } from './organizationMembership'; @@ -9,17 +8,6 @@ import type { Serializable } from './utils'; export type ServerGetTokenOptions = { template?: string }; export type ServerGetToken = (options?: ServerGetTokenOptions) => Promise; -/** - * @deprecated - */ -export type ServerSideAuth = { - sessionId: string | null; - userId: string | null; - actor: ActJWTClaim | null; - getToken: ServerGetToken; - claims: ClerkJWTClaims | null; -}; - export type InitialState = Serializable<{ sessionClaims: JwtPayload; sessionId: string | undefined;