From 946a39725b56467c93b8276d7f5e1d8a6373a9d1 Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Wed, 4 Oct 2023 18:34:49 +0300 Subject: [PATCH 1/3] chore(nextjs): Warn about `@clerk/nextjs/app-beta` deprecation We could not add a single deprecation warning in the app-beta/index.ts because it did not work. --- .../nextjs/src/app-beta/ClerkProvider.tsx | 6 +++++ packages/nextjs/src/app-beta/auth.ts | 7 ++++++ packages/nextjs/src/app-beta/clerkClient.ts | 6 +++++ .../src/app-beta/client/ClerkProvider.tsx | 6 +++++ .../nextjs/src/app-beta/client/clerk-react.ts | 25 +++++++++++++++++++ packages/nextjs/src/app-beta/client/index.ts | 2 +- .../src/app-beta/client/ui-components.tsx | 6 +++++ .../src/app-beta/control-components.tsx | 5 ++++ packages/nextjs/src/app-beta/currentUser.ts | 6 +++++ .../src/app-router/server/currentUser.ts | 1 + 10 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 packages/nextjs/src/app-beta/client/clerk-react.ts diff --git a/packages/nextjs/src/app-beta/ClerkProvider.tsx b/packages/nextjs/src/app-beta/ClerkProvider.tsx index 92cd3dd0e44..cffb671124f 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'; diff --git a/packages/nextjs/src/app-beta/auth.ts b/packages/nextjs/src/app-beta/auth.ts index d35ab500c89..ff8b3e42855 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'; diff --git a/packages/nextjs/src/app-beta/clerkClient.ts b/packages/nextjs/src/app-beta/clerkClient.ts index c8cbe878b4b..1f98fec63ab 100644 --- a/packages/nextjs/src/app-beta/clerkClient.ts +++ b/packages/nextjs/src/app-beta/clerkClient.ts @@ -1 +1,7 @@ +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', +); export { clerkClient } from '../server/clerkClient'; diff --git a/packages/nextjs/src/app-beta/client/ClerkProvider.tsx b/packages/nextjs/src/app-beta/client/ClerkProvider.tsx index c46d45c5a5f..82396e6ce49 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'; 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..c1b1a77fa33 --- /dev/null +++ b/packages/nextjs/src/app-beta/client/clerk-react.ts @@ -0,0 +1,25 @@ +// 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 +export { + useUser, + useAuth, + useClerk, + useMagicLink, + useOrganization, + useOrganizationList, + useOrganizations, + useSession, + useSessionList, + useSignIn, + useSignUp, + SignedIn, + SignedOut, + ClerkLoaded, + ClerkLoading, + RedirectToUserProfile, + RedirectToSignIn, + RedirectToSignUp, + RedirectToCreateOrganization, + RedirectToOrganizationProfile, + AuthenticateWithRedirectCallback, +} from '@clerk/clerk-react'; 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..fc587b61261 100644 --- a/packages/nextjs/src/app-beta/client/ui-components.tsx +++ b/packages/nextjs/src/app-beta/client/ui-components.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', +); export { CreateOrganization, diff --git a/packages/nextjs/src/app-beta/control-components.tsx b/packages/nextjs/src/app-beta/control-components.tsx index ee3aceacae9..8ea61e57993 100644 --- a/packages/nextjs/src/app-beta/control-components.tsx +++ b/packages/nextjs/src/app-beta/control-components.tsx @@ -1,5 +1,10 @@ +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'; export function SignedIn(props: React.PropsWithChildren) { diff --git a/packages/nextjs/src/app-beta/currentUser.ts b/packages/nextjs/src/app-beta/currentUser.ts index 301bb1ebec4..ee9c2253ab8 100644 --- a/packages/nextjs/src/app-beta/currentUser.ts +++ b/packages/nextjs/src/app-beta/currentUser.ts @@ -1,8 +1,14 @@ 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'; +// eslint-disable-next-line @typescript-eslint/require-await 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; From 0a3f9779b6f54778670e68cb21193708d7cad7a0 Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Thu, 5 Oct 2023 01:03:55 +0300 Subject: [PATCH 2/3] chore(nextjs): Add deprecation JSDoc for @clerk/nextjs/app-beta --- .../nextjs/src/app-beta/ClerkProvider.tsx | 4 + packages/nextjs/src/app-beta/auth.ts | 8 + packages/nextjs/src/app-beta/clerkClient.ts | 8 +- .../src/app-beta/client/ClerkProvider.tsx | 8 + .../nextjs/src/app-beta/client/clerk-react.ts | 151 +++++++++++++++--- .../src/app-beta/client/ui-components.tsx | 52 +++++- .../src/app-beta/control-components.tsx | 8 + packages/nextjs/src/app-beta/currentUser.ts | 5 +- 8 files changed, 212 insertions(+), 32 deletions(-) diff --git a/packages/nextjs/src/app-beta/ClerkProvider.tsx b/packages/nextjs/src/app-beta/ClerkProvider.tsx index cffb671124f..6147b4f1de1 100644 --- a/packages/nextjs/src/app-beta/ClerkProvider.tsx +++ b/packages/nextjs/src/app-beta/ClerkProvider.tsx @@ -17,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 ff8b3e42855..e9be20b298b 100644 --- a/packages/nextjs/src/app-beta/auth.ts +++ b/packages/nextjs/src/app-beta/auth.ts @@ -14,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 1f98fec63ab..9f01e147dfb 100644 --- a/packages/nextjs/src/app-beta/clerkClient.ts +++ b/packages/nextjs/src/app-beta/clerkClient.ts @@ -4,4 +4,10 @@ deprecated( '@clerk/nextjs/app-beta', 'Use imports from `@clerk/nextjs` instead.\nFor more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware', ); -export { clerkClient } from '../server/clerkClient'; +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 82396e6ce49..ab833405fd1 100644 --- a/packages/nextjs/src/app-beta/client/ClerkProvider.tsx +++ b/packages/nextjs/src/app-beta/client/ClerkProvider.tsx @@ -18,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(); @@ -49,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 index c1b1a77fa33..f519e2418b3 100644 --- a/packages/nextjs/src/app-beta/client/clerk-react.ts +++ b/packages/nextjs/src/app-beta/client/clerk-react.ts @@ -1,25 +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 -export { - useUser, - useAuth, - useClerk, - useMagicLink, - useOrganization, - useOrganizationList, - useOrganizations, - useSession, - useSessionList, - useSignIn, - useSignUp, - SignedIn, - SignedOut, - ClerkLoaded, - ClerkLoading, - RedirectToUserProfile, - RedirectToSignIn, - RedirectToSignUp, - RedirectToCreateOrganization, - RedirectToOrganizationProfile, - AuthenticateWithRedirectCallback, +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/ui-components.tsx b/packages/nextjs/src/app-beta/client/ui-components.tsx index fc587b61261..da5f93837b1 100644 --- a/packages/nextjs/src/app-beta/client/ui-components.tsx +++ b/packages/nextjs/src/app-beta/client/ui-components.tsx @@ -6,12 +6,48 @@ deprecated( 'Use imports from `@clerk/nextjs` instead.\nFor more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware', ); -export { - CreateOrganization, - OrganizationProfile, - OrganizationSwitcher, - SignIn, - SignUp, - UserButton, - UserProfile, +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 8ea61e57993..95f6f476569 100644 --- a/packages/nextjs/src/app-beta/control-components.tsx +++ b/packages/nextjs/src/app-beta/control-components.tsx @@ -7,12 +7,20 @@ deprecated( ); 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 ee9c2253ab8..308f0ab6684 100644 --- a/packages/nextjs/src/app-beta/currentUser.ts +++ b/packages/nextjs/src/app-beta/currentUser.ts @@ -8,7 +8,10 @@ deprecated( import { auth } from './auth'; import { clerkClient } from './clerkClient'; -// eslint-disable-next-line @typescript-eslint/require-await +/** + * @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; From 78eb66fcf02c9a0e1d8603623e84bcd7cbe60940 Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Thu, 5 Oct 2023 19:42:12 +0300 Subject: [PATCH 3/3] Create stupid-jeans-flash.md --- .changeset/stupid-jeans-flash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/stupid-jeans-flash.md 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.