diff --git a/packages/clerk-js/src/ui.retheme/contexts/ClerkUIComponentsContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/ClerkUIComponentsContext.tsx
index 1d1ce8a084..67435eb19a 100644
--- a/packages/clerk-js/src/ui.retheme/contexts/ClerkUIComponentsContext.tsx
+++ b/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);
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContext.tsx
deleted file mode 100644
index 66b28dd85f..0000000000
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContext.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ClerkInstanceContext, useClerkInstanceContext } from '@clerk/shared/react';
-
-export const [CoreClerkContext, useCoreClerk] = [ClerkInstanceContext, useClerkInstanceContext];
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx
index 2518623fbe..78b186bba9 100644
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx
+++ b/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 (
-
-
+
+
- {props.children}
+ {props.children}
-
-
+
+
);
}
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx
index 125d314907..3212a6f8ac 100644
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx
+++ b/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;
}
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreOrganizationContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreOrganizationContext.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx
index 526981d813..ecdd406628 100644
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx
+++ b/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
(Component: React.ComponentType
): React.ComponentType
{
const Hoc = (props: P) => {
- const ctx = React.useContext(SessionContext);
- assertContextExists(ctx, SessionContext);
- if (ctx.value === undefined) {
+ const session = useSessionContext();
+
+ if (!session) {
return null;
}
+
return ;
};
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx
index c64420c45f..94a32ca171 100644
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx
+++ b/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
(Component: React.ComponentType
): React.ComponentType
{
const Hoc = (props: P) => {
- const ctx = useContext(CoreUserContext);
- assertContextExists(ctx, CoreUserContext);
- if (!ctx.value) {
+ const user = useUserContext();
+
+ if (!user) {
return null;
}
+
return ;
};
diff --git a/packages/clerk-js/src/ui.retheme/contexts/index.ts b/packages/clerk-js/src/ui.retheme/contexts/index.ts
index 98305c394a..b5aae8b35d 100644
--- a/packages/clerk-js/src/ui.retheme/contexts/index.ts
+++ b/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';
diff --git a/packages/react/src/contexts/ClerkContextProvider.tsx b/packages/react/src/contexts/ClerkContextProvider.tsx
index f8fd4846e4..adafd31c07 100644
--- a/packages/react/src/contexts/ClerkContextProvider.tsx
+++ b/packages/react/src/contexts/ClerkContextProvider.tsx
@@ -1,3 +1,4 @@
+import { ClientContext, OrganizationProvider, SessionContext, UserContext } from '@clerk/shared/react';
import type { ClientResource, InitialState, Resources } from '@clerk/types';
import React from 'react';
@@ -5,11 +6,7 @@ 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
diff --git a/packages/react/src/contexts/ClientContext.tsx b/packages/react/src/contexts/ClientContext.tsx
index 7dd27732e1..e69de29bb2 100644
--- a/packages/react/src/contexts/ClientContext.tsx
+++ b/packages/react/src/contexts/ClientContext.tsx
@@ -1 +0,0 @@
-export { ClientContext, useClientContext } from '@clerk/shared/react';
diff --git a/packages/react/src/contexts/IsomorphicClerkContext.tsx b/packages/react/src/contexts/IsomorphicClerkContext.tsx
index fc2476711b..9b03ebd06b 100644
--- a/packages/react/src/contexts/IsomorphicClerkContext.tsx
+++ b/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;
diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts
index feae53f443..043d301103 100644
--- a/packages/react/src/hooks/index.ts
+++ b/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';
diff --git a/packages/react/src/hooks/useAuth.ts b/packages/react/src/hooks/useAuth.ts
index f5f6c531d3..96ae836004 100644
--- a/packages/react/src/hooks/useAuth.ts
+++ b/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]);
diff --git a/packages/react/src/hooks/useClerk.ts b/packages/react/src/hooks/useClerk.ts
deleted file mode 100644
index 45849ac840..0000000000
--- a/packages/react/src/hooks/useClerk.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { LoadedClerk } from '@clerk/types';
-
-import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
-
-export const useClerk = (): LoadedClerk => {
- const isomorphicClerk = useIsomorphicClerkContext();
- // The actual value is an instance of IsomorphicClerk, not Clerk
- // we expose is as a Clerk instance
- return isomorphicClerk as unknown as LoadedClerk;
-};
diff --git a/packages/react/src/hooks/useSignIn.ts b/packages/react/src/hooks/useSignIn.ts
index b607c739e3..73885d47cc 100644
--- a/packages/react/src/hooks/useSignIn.ts
+++ b/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 =
diff --git a/packages/react/src/hooks/useSignUp.ts b/packages/react/src/hooks/useSignUp.ts
index 0b0222879e..1398773b2a 100644
--- a/packages/react/src/hooks/useSignUp.ts
+++ b/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 =
diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
index 6e1636ea4a..6f2215fc36 100644
--- a/packages/react/src/isomorphicClerk.ts
+++ b/packages/react/src/isomorphicClerk.ts
@@ -12,7 +12,6 @@ import type {
HandleOAuthCallbackParams,
ListenerCallback,
OrganizationListProps,
- OrganizationMembershipResource,
OrganizationProfileProps,
OrganizationResource,
OrganizationSwitcherProps,
diff --git a/packages/shared/src/react/hooks/index.ts b/packages/shared/src/react/hooks/index.ts
index bfda9d97fb..b0d9779bc8 100644
--- a/packages/shared/src/react/hooks/index.ts
+++ b/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';
diff --git a/packages/shared/src/react/hooks/useClerk.ts b/packages/shared/src/react/hooks/useClerk.ts
new file mode 100644
index 0000000000..505cab5e80
--- /dev/null
+++ b/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;