chore(clerk-js,clerk-react,shared): Replace useCoreClerk with useClerk

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

@@ -1,10 +1,11 @@
+import { useClerk } from '@clerk/shared/react';
 import { snakeToCamel } from '@clerk/shared/underscore';
 import type { OrganizationResource, UserResource } from '@clerk/types';
 import React, { useMemo } from 'react';
 
 import { SIGN_IN_INITIAL_VALUE_KEYS, SIGN_UP_INITIAL_VALUE_KEYS } from '../../core/constants';
 import { buildAuthQueryString, buildURL, createDynamicParamParser, pickRedirectionProp } from '../../utils';
-import { useCoreClerk, useEnvironment, useOptions } from '../contexts';
+import { useEnvironment, useOptions } from '../contexts';
 import type { NavbarRoute } from '../elements';
 import type { ParsedQs } from '../router';
 import { useRouter } from '../router';
@@ -52,7 +53,7 @@ export const useSignUpContext = (): SignUpContextType => {
   const { displayConfig } = useEnvironment();
   const { queryParams, queryString } = useRouter();
   const options = useOptions();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   const initialValuesFromQueryParams = useMemo(
     () => getInitialValuesFromQueryParams(queryString, SIGN_UP_INITIAL_VALUE_KEYS),
@@ -128,7 +129,7 @@ export const useSignInContext = (): SignInContextType => {
   const { displayConfig } = useEnvironment();
   const { queryParams, queryString } = useRouter();
   const options = useOptions();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   const initialValuesFromQueryParams = useMemo(
     () => getInitialValuesFromQueryParams(queryString, SIGN_IN_INITIAL_VALUE_KEYS),
@@ -220,7 +221,7 @@ export const useUserProfileContext = (): UserProfileContextType => {
 
 export const useUserButtonContext = () => {
   const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as UserButtonCtx;
-  const Clerk = useCoreClerk();
+  const clerk = useClerk();
   const { navigate } = useRouter();
   const { displayConfig } = useEnvironment();
   const options = useOptions();
@@ -233,7 +234,7 @@ export const useUserButtonContext = () => {
   const userProfileUrl = ctx.userProfileUrl || displayConfig.userProfileUrl;
 
   const afterMultiSessionSingleSignOutUrl = ctx.afterMultiSessionSingleSignOutUrl || displayConfig.afterSignOutOneUrl;
-  const navigateAfterMultiSessionSingleSignOut = () => Clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl);
+  const navigateAfterMultiSessionSingleSignOut = () => clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl);
 
   const afterSignOutUrl = ctx.afterSignOutUrl || displayConfig.afterSignOutAllUrl;
   const navigateAfterSignOut = () => navigate(afterSignOutUrl);

packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx

@@ -1,10 +1,13 @@
-import { OrganizationProvider, SessionContext } from '@clerk/shared/react';
+import {
+  ClerkInstanceContext,
+  ClientContext,
+  OrganizationProvider,
+  SessionContext,
+  UserContext,
+} from '@clerk/shared/react';
 import type { Clerk, LoadedClerk, Resources } from '@clerk/types';
 import React from 'react';
 
-import { CoreClerkContext } from './CoreClerkContext';
-import { CoreClientContext } from './CoreClientContext';
-import { CoreUserContext } from './CoreUserContext';
 import { assertClerkSingletonExists } from './utils';
 
 type CoreClerkContextWrapperProps = {
@@ -44,17 +47,17 @@ export function CoreClerkContextWrapper(props: CoreClerkContextWrapperProps): JS
   );
 
   return (
-    <CoreClerkContext.Provider value={clerkCtx}>
-      <CoreClientContext.Provider value={clientCtx}>
+    <ClerkInstanceContext.Provider value={clerkCtx}>
+      <ClientContext.Provider value={clientCtx}>
         <SessionContext.Provider value={sessionCtx}>
           <OrganizationProvider
             {...organizationCtx.value}
             swrConfig={props.swrConfig}
           >
-            <CoreUserContext.Provider value={userCtx}>{props.children}</CoreUserContext.Provider>
+            <UserContext.Provider value={userCtx}>{props.children}</UserContext.Provider>
           </OrganizationProvider>
         </SessionContext.Provider>
-      </CoreClientContext.Provider>
-    </CoreClerkContext.Provider>
+      </ClientContext.Provider>
+    </ClerkInstanceContext.Provider>
   );
 }

packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx

@@ -1,16 +1,14 @@
 import { assertContextExists, ClientContext, useClientContext } from '@clerk/shared/react';
 import type { SignInResource, SignUpResource } from '@clerk/types';
 
-export const CoreClientContext = ClientContext;
-
 export function useCoreSignIn(): SignInResource {
   const ctx = useClientContext();
-  assertContextExists(ctx, CoreClientContext);
+  assertContextExists(ctx, ClientContext);
   return ctx.signIn;
 }
 
 export function useCoreSignUp(): SignUpResource {
   const ctx = useClientContext();
-  assertContextExists(ctx, CoreClientContext);
+  assertContextExists(ctx, ClientContext);
   return ctx.signUp;
 }

packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx

@@ -1,13 +1,14 @@
-import { assertContextExists, SessionContext } from '@clerk/shared/react';
+import { useSessionContext } from '@clerk/shared/react';
 import React from 'react';
 
 export function withCoreSessionSwitchGuard<P>(Component: React.ComponentType<P>): React.ComponentType<P> {
   const Hoc = (props: P) => {
-    const ctx = React.useContext(SessionContext);
-    assertContextExists(ctx, SessionContext);
-    if (ctx.value === undefined) {
+    const session = useSessionContext();
+
+    if (!session) {
       return null;
     }
+
     return <Component {...(props as any)} />;
   };
 

packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx

@@ -1,15 +1,14 @@
-import { assertContextExists, UserContext } from '@clerk/shared/react';
-import React, { useContext } from 'react';
-
-export const CoreUserContext = UserContext;
+import { useUserContext } from '@clerk/shared/react';
+import React from 'react';
 
 export function withCoreUserGuard<P>(Component: React.ComponentType<P>): React.ComponentType<P> {
   const Hoc = (props: P) => {
-    const ctx = useContext(CoreUserContext);
-    assertContextExists(ctx, CoreUserContext);
-    if (!ctx.value) {
+    const user = useUserContext();
+
+    if (!user) {
       return null;
     }
+
     return <Component {...(props as any)} />;
   };
 

packages/clerk-js/src/ui.retheme/contexts/index.ts

@@ -1,4 +1,3 @@
-export * from './CoreClerkContext';
 export * from './CoreUserContext';
 export * from './ClerkUIComponentsContext';
 export * from './EnvironmentContext';

packages/react/src/contexts/ClerkContextProvider.tsx

@@ -1,15 +1,12 @@
+import { ClientContext, OrganizationProvider, SessionContext, UserContext } from '@clerk/shared/react';
 import type { ClientResource, InitialState, Resources } from '@clerk/types';
 import React from 'react';
 
 import IsomorphicClerk from '../isomorphicClerk';
 import type { IsomorphicClerkOptions } from '../types';
 import { deriveState } from '../utils/deriveState';
 import { AuthContext } from './AuthContext';
-import { ClientContext } from './ClientContext';
 import { IsomorphicClerkContext } from './IsomorphicClerkContext';
-import { OrganizationProvider } from './OrganizationContext';
-import { SessionContext } from './SessionContext';
-import { UserContext } from './UserContext';
 
 type ClerkContextProvider = {
   isomorphicClerkOptions: IsomorphicClerkOptions;
@@ -54,7 +51,7 @@ export function ClerkContextProvider(props: ClerkContextProvider): JSX.Element |
   }, [orgId, organization]);
 
   return (
-    // @ts-expect-error
+    // @ts-expect-error value passed is of type IsomorphicClerk where the context expects LoadedClerk
     <IsomorphicClerkContext.Provider value={clerkCtx}>
       <ClientContext.Provider value={clientCtx}>
         <SessionContext.Provider value={sessionCtx}>

packages/react/src/contexts/ClientContext.tsx

@@ -1 +0,0 @@
-export { ClientContext, useClientContext } from '@clerk/shared/react';

packages/react/src/contexts/IsomorphicClerkContext.tsx

@@ -1,3 +1,6 @@
 import { ClerkInstanceContext, useClerkInstanceContext } from '@clerk/shared/react';
 
-export const [IsomorphicClerkContext, useIsomorphicClerkContext] = [ClerkInstanceContext, useClerkInstanceContext];
+import type IsomorphicClerk from '../isomorphicClerk';
+
+export const IsomorphicClerkContext = ClerkInstanceContext;
+export const useIsomorphicClerkContext = useClerkInstanceContext as unknown as () => IsomorphicClerk;

packages/react/src/hooks/index.ts

@@ -1,6 +1,12 @@
 export { useAuth } from './useAuth';
-export { useClerk } from './useClerk';
 export { useEmailLink } from './useEmailLink';
 export { useSignIn } from './useSignIn';
 export { useSignUp } from './useSignUp';
-export { useOrganization, useOrganizationList, useSessionList, useUser, useSession } from '@clerk/shared/react';
+export {
+  useClerk,
+  useOrganization,
+  useOrganizationList,
+  useSessionList,
+  useUser,
+  useSession,
+} from '@clerk/shared/react';

packages/react/src/hooks/useAuth.ts

@@ -10,7 +10,6 @@ import { useCallback } from 'react';
 import { useAuthContext } from '../contexts/AuthContext';
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
 import { invalidStateError } from '../errors';
-import type IsomorphicClerk from '../isomorphicClerk';
 import { errorThrower } from '../utils';
 import { createGetToken, createSignOut } from './utils';
 
@@ -127,7 +126,7 @@ type UseAuth = () => UseAuthReturn;
  */
 export const useAuth: UseAuth = () => {
   const { sessionId, userId, actor, orgId, orgRole, orgSlug } = useAuthContext();
-  const isomorphicClerk = useIsomorphicClerkContext() as unknown as IsomorphicClerk;
+  const isomorphicClerk = useIsomorphicClerkContext();
 
   const getToken: GetToken = useCallback(createGetToken(isomorphicClerk), [isomorphicClerk]);
   const signOut: SignOut = useCallback(createSignOut(isomorphicClerk), [isomorphicClerk]);

packages/react/src/hooks/useSignIn.ts

@@ -1,6 +1,6 @@
+import { useClientContext } from '@clerk/shared/react';
 import type { SetActive, SignInResource } from '@clerk/types';
 
-import { useClientContext } from '../contexts/ClientContext';
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
 
 type UseSignInReturn =

packages/react/src/hooks/useSignUp.ts

@@ -1,6 +1,6 @@
+import { useClientContext } from '@clerk/shared/react';
 import type { SetActive, SignUpResource } from '@clerk/types';
 
-import { useClientContext } from '../contexts/ClientContext';
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
 
 type UseSignUpReturn =

packages/react/src/isomorphicClerk.ts

@@ -12,7 +12,6 @@ import type {
   HandleOAuthCallbackParams,
   ListenerCallback,
   OrganizationListProps,
-  OrganizationMembershipResource,
   OrganizationProfileProps,
   OrganizationResource,
   OrganizationSwitcherProps,

packages/shared/src/react/hooks/index.ts

@@ -5,3 +5,4 @@ export { useSafeLayoutEffect } from './useSafeLayoutEffect';
 export { useSession } from './useSession';
 export { useSessionList } from './useSessionList';
 export { useUser } from './useUser';
+export { useClerk } from './useClerk';

packages/shared/src/react/hooks/useClerk.ts

@@ -0,0 +1,5 @@
+import type { LoadedClerk } from '@clerk/types';
+
+import { useClerkInstanceContext } from '../contexts';
+
+export const useClerk: () => LoadedClerk = useClerkInstanceContext;