diff --git a/.changeset/stupid-jeans-flash.md b/.changeset/stupid-jeans-flash.md new file mode 100644 index 00000000000..45935ec6940 --- /dev/null +++ b/.changeset/stupid-jeans-flash.md @@ -0,0 +1,5 @@ +--- +"@clerk/nextjs": patch +--- + +Add deprecation warning for `@clerk/nextjs/app-beta` export. Use the `@clerk/nextjs` instead. diff --git a/packages/nextjs/src/app-beta/ClerkProvider.tsx b/packages/nextjs/src/app-beta/ClerkProvider.tsx index 92cd3dd0e44..6147b4f1de1 100644 --- a/packages/nextjs/src/app-beta/ClerkProvider.tsx +++ b/packages/nextjs/src/app-beta/ClerkProvider.tsx @@ -1,3 +1,9 @@ +import { deprecated } from '@clerk/shared'; + +deprecated( + '@clerk/nextjs/app-beta', + 'Use imports from `@clerk/nextjs` instead.\nFor more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware', +); /* eslint-disable turbo/no-undeclared-env-vars */ import type { IsomorphicClerkOptions } from '@clerk/clerk-react'; import type { InitialState, PublishableKeyOrFrontendApi } from '@clerk/types'; @@ -11,6 +17,10 @@ type NextAppClerkProviderProps = { } & Omit & Partial; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ export function ClerkProvider(props: NextAppClerkProviderProps) { const state = (initialState()?.__clerk_ssr_state || { sessionId: null, orgId: null, userId: null }) as InitialState; return ( diff --git a/packages/nextjs/src/app-beta/auth.ts b/packages/nextjs/src/app-beta/auth.ts index d35ab500c89..e9be20b298b 100644 --- a/packages/nextjs/src/app-beta/auth.ts +++ b/packages/nextjs/src/app-beta/auth.ts @@ -1,3 +1,10 @@ +import { deprecated } from '@clerk/shared'; + +deprecated( + '@clerk/nextjs/app-beta', + 'Use imports from `@clerk/nextjs` instead.\nFor more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware', +); + import { headers } from 'next/headers'; import { NextRequest } from 'next/server'; @@ -7,10 +14,18 @@ const buildRequestLike = () => { return new NextRequest('https://placeholder.com', { headers: headers() }); }; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ export const auth = () => { return getAuth(buildRequestLike()); }; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ export const initialState = () => { return buildClerkProps(buildRequestLike()); }; diff --git a/packages/nextjs/src/app-beta/clerkClient.ts b/packages/nextjs/src/app-beta/clerkClient.ts index c8cbe878b4b..9f01e147dfb 100644 --- a/packages/nextjs/src/app-beta/clerkClient.ts +++ b/packages/nextjs/src/app-beta/clerkClient.ts @@ -1 +1,13 @@ -export { clerkClient } from '../server/clerkClient'; +import { deprecated } from '@clerk/shared'; + +deprecated( + '@clerk/nextjs/app-beta', + 'Use imports from `@clerk/nextjs` instead.\nFor more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware', +); +import { clerkClient as _clerkClient } from '../server/clerkClient'; + +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const clerkClient = _clerkClient; diff --git a/packages/nextjs/src/app-beta/client/ClerkProvider.tsx b/packages/nextjs/src/app-beta/client/ClerkProvider.tsx index c46d45c5a5f..ab833405fd1 100644 --- a/packages/nextjs/src/app-beta/client/ClerkProvider.tsx +++ b/packages/nextjs/src/app-beta/client/ClerkProvider.tsx @@ -1,4 +1,10 @@ 'use client'; +import { deprecated } from '@clerk/shared'; + +deprecated( + '@clerk/nextjs/app-beta', + 'Use imports from `@clerk/nextjs` instead.\nFor more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware', +); // !!! Note the import from react import type { ClerkProviderProps } from '@clerk/clerk-react'; import { ClerkProvider as ReactClerkProvider } from '@clerk/clerk-react'; @@ -12,6 +18,10 @@ declare global { } } +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ export const useAwaitableNavigate = () => { // eslint-disable-next-line @typescript-eslint/unbound-method const { push, refresh } = useRouter(); @@ -43,6 +53,10 @@ export const useAwaitableNavigate = () => { }, []); }; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ export function ClerkProvider(props: ClerkProviderProps) { const navigate = useAwaitableNavigate(); return ( diff --git a/packages/nextjs/src/app-beta/client/clerk-react.ts b/packages/nextjs/src/app-beta/client/clerk-react.ts new file mode 100644 index 00000000000..f519e2418b3 --- /dev/null +++ b/packages/nextjs/src/app-beta/client/clerk-react.ts @@ -0,0 +1,132 @@ +// HACK to show app-beta deprecation warning any of the below +// There seems to be some issue when adding the deprecation in the index.ts +import { + AuthenticateWithRedirectCallback as _AuthenticateWithRedirectCallback, + ClerkLoaded as _ClerkLoaded, + ClerkLoading as _ClerkLoading, + RedirectToCreateOrganization as _RedirectToCreateOrganization, + RedirectToOrganizationProfile as _RedirectToOrganizationProfile, + RedirectToSignIn as _RedirectToSignIn, + RedirectToSignUp as _RedirectToSignUp, + RedirectToUserProfile as _RedirectToUserProfile, + SignedIn as _SignedIn, + SignedOut as _SignedOut, + useAuth as _useAuth, + useClerk as _useClerk, + useMagicLink as _useMagicLink, + useOrganization as _useOrganization, + useOrganizationList as _useOrganizationList, + useOrganizations as _useOrganizations, + useSession as _useSession, + useSessionList as _useSessionList, + useSignIn as _useSignIn, + useSignUp as _useSignUp, + useUser as _useUser, +} from '@clerk/clerk-react'; + +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const useUser = _useUser; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const useAuth = _useAuth; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const useClerk = _useClerk; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const useMagicLink = _useMagicLink; + +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const useOrganization = _useOrganization; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const useOrganizationList = _useOrganizationList; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const useOrganizations = _useOrganizations; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const useSession = _useSession; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const useSessionList = _useSessionList; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const useSignIn = _useSignIn; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const useSignUp = _useSignUp; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const SignedIn = _SignedIn; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const SignedOut = _SignedOut; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const ClerkLoaded = _ClerkLoaded; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const ClerkLoading = _ClerkLoading; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const RedirectToUserProfile = _RedirectToUserProfile; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const RedirectToSignIn = _RedirectToSignIn; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const RedirectToSignUp = _RedirectToSignUp; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const RedirectToCreateOrganization = _RedirectToCreateOrganization; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const RedirectToOrganizationProfile = _RedirectToOrganizationProfile; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const AuthenticateWithRedirectCallback = _AuthenticateWithRedirectCallback; diff --git a/packages/nextjs/src/app-beta/client/index.ts b/packages/nextjs/src/app-beta/client/index.ts index 92c86f76b35..ff30bd699aa 100644 --- a/packages/nextjs/src/app-beta/client/index.ts +++ b/packages/nextjs/src/app-beta/client/index.ts @@ -23,7 +23,7 @@ export { RedirectToCreateOrganization, RedirectToOrganizationProfile, AuthenticateWithRedirectCallback, -} from '@clerk/clerk-react'; +} from './clerk-react'; export { SignIn, diff --git a/packages/nextjs/src/app-beta/client/ui-components.tsx b/packages/nextjs/src/app-beta/client/ui-components.tsx index 92e67b97ee5..da5f93837b1 100644 --- a/packages/nextjs/src/app-beta/client/ui-components.tsx +++ b/packages/nextjs/src/app-beta/client/ui-components.tsx @@ -1,11 +1,53 @@ 'use client'; +import { deprecated } from '@clerk/shared'; -export { - CreateOrganization, - OrganizationProfile, - OrganizationSwitcher, - SignIn, - SignUp, - UserButton, - UserProfile, +deprecated( + '@clerk/nextjs/app-beta', + 'Use imports from `@clerk/nextjs` instead.\nFor more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware', +); + +import { + CreateOrganization as _CreateOrganization, + OrganizationProfile as _OrganizationProfile, + OrganizationSwitcher as _OrganizationSwitcher, + SignIn as _SignIn, + SignUp as _SignUp, + UserButton as _UserButton, + UserProfile as _UserProfile, } from '@clerk/clerk-react'; + +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const CreateOrganization = _CreateOrganization; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const OrganizationProfile = _OrganizationProfile; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const OrganizationSwitcher = _OrganizationSwitcher; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const SignIn = _SignIn; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const SignUp = _SignUp; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const UserButton = _UserButton; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ +export const UserProfile = _UserProfile; diff --git a/packages/nextjs/src/app-beta/control-components.tsx b/packages/nextjs/src/app-beta/control-components.tsx index ee3aceacae9..95f6f476569 100644 --- a/packages/nextjs/src/app-beta/control-components.tsx +++ b/packages/nextjs/src/app-beta/control-components.tsx @@ -1,13 +1,26 @@ +import { deprecated } from '@clerk/shared'; import React from 'react'; +deprecated( + '@clerk/nextjs/app-beta', + 'Use imports from `@clerk/nextjs` instead.\nFor more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware', +); import { auth } from './auth'; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ export function SignedIn(props: React.PropsWithChildren) { const { children } = props; const { userId } = auth(); return userId ? <>{children} : null; } +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ export function SignedOut(props: React.PropsWithChildren) { const { children } = props; const { userId } = auth(); diff --git a/packages/nextjs/src/app-beta/currentUser.ts b/packages/nextjs/src/app-beta/currentUser.ts index 301bb1ebec4..308f0ab6684 100644 --- a/packages/nextjs/src/app-beta/currentUser.ts +++ b/packages/nextjs/src/app-beta/currentUser.ts @@ -1,8 +1,17 @@ import type { User } from '@clerk/backend'; +import { deprecated } from '@clerk/shared'; +deprecated( + '@clerk/nextjs/app-beta', + 'Use imports from `@clerk/nextjs` instead.\nFor more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware', +); import { auth } from './auth'; import { clerkClient } from './clerkClient'; +/** + * @deprecated Use imports from `@clerk/nextjs` instead. + * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware + */ export async function currentUser(): Promise { const { userId } = auth(); return userId ? clerkClient.users.getUser(userId) : null; diff --git a/packages/nextjs/src/app-router/server/currentUser.ts b/packages/nextjs/src/app-router/server/currentUser.ts index 6684ac8f90f..4940e88dfc5 100644 --- a/packages/nextjs/src/app-router/server/currentUser.ts +++ b/packages/nextjs/src/app-router/server/currentUser.ts @@ -3,6 +3,7 @@ import type { User } from '@clerk/backend'; import { clerkClient } from '../../server/clerkClient'; import { auth } from './auth'; +// eslint-disable-next-line @typescript-eslint/require-await export async function currentUser(): Promise { const { userId } = auth(); return userId ? clerkClient.users.getUser(userId) : null;