From e7bc029146a198b74d5eba113710df9641179717 Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Fri, 10 Nov 2023 11:23:14 +0100
Subject: [PATCH 1/8] chore(clerk-js,shared,clerk-react): Migrate
 useCoreSession, useCoreUser -> useSession, useUser

---
 .changeset/blue-grapes-marry.md               |  6 +++++
 .../clerk-js/src/ui.retheme/common/Gate.tsx   |  6 ++---
 .../ImpersonationFab/ImpersonationFab.tsx     | 10 ++++---
 .../OrganizationList/UserMembershipList.tsx   |  9 +++++--
 .../ActionConfirmationPage.tsx                |  8 +++---
 .../OrganizationProfile/ActiveMembersList.tsx |  7 ++---
 .../OrganizationSwitcherPopover.tsx           |  8 ++++--
 .../OrganizationSwitcherTrigger.tsx           | 10 +++++--
 .../OtherOrganizationActions.tsx              |  6 ++---
 .../UserMembershipList.tsx                    |  8 ++++--
 .../components/UserButton/UserButton.tsx      |  9 +++++--
 .../UserButton/UserButtonPopover.tsx          |  7 ++---
 .../UserButton/UserButtonTrigger.tsx          |  4 +--
 .../UserButton/useMultisessionActions.tsx     |  9 ++++---
 .../UserProfile/ActiveDevicesSection.tsx      | 16 ++++++------
 .../UserProfile/AddAuthenticatorApp.tsx       |  6 ++---
 .../UserProfile/ConnectedAccountsPage.tsx     | 13 +++++-----
 .../UserProfile/ConnectedAccountsSection.tsx  | 14 +++++++---
 .../components/UserProfile/DeletePage.tsx     | 10 +++++--
 .../components/UserProfile/EmailPage.tsx      | 11 ++++----
 .../components/UserProfile/EmailSection.tsx   | 12 ++++-----
 .../UserProfile/EnterpriseAccountsSection.tsx |  8 +++---
 .../UserProfile/MfaBackupCodeCreatePage.tsx   |  6 ++---
 .../UserProfile/MfaBackupCodeList.tsx         | 11 ++++++--
 .../components/UserProfile/MfaPage.tsx        | 10 +++++--
 .../UserProfile/MfaPhoneCodePage.tsx          |  9 +++++--
 .../components/UserProfile/MfaSection.tsx     | 10 +++++--
 .../components/UserProfile/PasswordPage.tsx   | 14 +++++++---
 .../UserProfile/PasswordSection.tsx           | 11 ++++++--
 .../components/UserProfile/PhonePage.tsx      | 12 ++++-----
 .../components/UserProfile/PhoneSection.tsx   | 13 +++++++---
 .../components/UserProfile/ProfilePage.tsx    | 10 +++++--
 .../UserProfile/RemoveResourcePage.tsx        | 26 +++++++++----------
 .../components/UserProfile/RootPage.tsx       | 10 ++++---
 .../UserProfile/UserProfileSection.tsx        | 11 ++++++--
 .../components/UserProfile/UsernamePage.tsx   | 11 ++++++--
 .../UserProfile/UsernameSection.tsx           |  9 +++++--
 .../components/UserProfile/VerifyTOTP.tsx     |  6 ++---
 .../components/UserProfile/Web3Page.tsx       | 17 ++++++++----
 .../components/UserProfile/Web3Section.tsx    |  6 ++---
 .../contexts/CoreClerkContextWrapper.tsx      |  6 ++---
 .../ui.retheme/contexts/CoreClientContext.tsx |  8 +-----
 .../contexts/CoreSessionContext.tsx           | 19 +++-----------
 .../ui.retheme/contexts/CoreUserContext.tsx   | 12 +--------
 packages/react/src/hooks/index.ts             |  4 +--
 packages/shared/src/react/hooks/index.ts      |  3 +++
 .../src/react}/hooks/useSession.ts            |  2 +-
 .../src/react}/hooks/useSessionList.ts        |  5 ++--
 .../src => shared/src/react}/hooks/useUser.ts |  2 +-
 49 files changed, 280 insertions(+), 180 deletions(-)
 create mode 100644 .changeset/blue-grapes-marry.md
 rename packages/{react/src => shared/src/react}/hooks/useSession.ts (95%)
 rename packages/{react/src => shared/src/react}/hooks/useSessionList.ts (76%)
 rename packages/{react/src => shared/src/react}/hooks/useUser.ts (95%)

diff --git a/.changeset/blue-grapes-marry.md b/.changeset/blue-grapes-marry.md
new file mode 100644
index 00000000000..e815dbac055
--- /dev/null
+++ b/.changeset/blue-grapes-marry.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+---
+
+Move usage of internal useCoreX hooks to useX hooks
diff --git a/packages/clerk-js/src/ui.retheme/common/Gate.tsx b/packages/clerk-js/src/ui.retheme/common/Gate.tsx
index 0c1a016742e..1644b6c7b05 100644
--- a/packages/clerk-js/src/ui.retheme/common/Gate.tsx
+++ b/packages/clerk-js/src/ui.retheme/common/Gate.tsx
@@ -1,8 +1,8 @@
+import { useSession } from '@clerk/shared/react';
 import type { CheckAuthorization } from '@clerk/types';
 import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
 import React, { useEffect } from 'react';
 
-import { useCoreSession } from '../contexts';
 import { useRouter } from '../router';
 
 type GateParams = Parameters<CheckAuthorization>[0];
@@ -14,10 +14,10 @@ type GateProps = PropsWithChildren<
 >;
 
 export const useGate = (params: GateParams) => {
-  const { experimental__checkAuthorization } = useCoreSession();
+  const { session } = useSession();
 
   return {
-    isAuthorizedUser: experimental__checkAuthorization(params),
+    isAuthorizedUser: session?.experimental__checkAuthorization(params),
   };
 };
 
diff --git a/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx b/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx
index 1478bb9a747..0e69e688f57 100644
--- a/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx
@@ -1,8 +1,9 @@
+import { useSession } from '@clerk/shared/react';
 import type { PointerEventHandler } from 'react';
 import React, { useEffect, useRef } from 'react';
 
 import { getFullName, getIdentifier } from '../../../utils/user';
-import { useCoreClerk, useCoreSession, withCoreUserGuard } from '../../contexts';
+import { useCoreClerk, withCoreUserGuard } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import {
   Col,
@@ -57,7 +58,7 @@ const EyeCircle = ({ width, height, ...props }: EyeCircleProps) => {
 type FabContentProps = { title: LocalizationKey; signOutText: LocalizationKey };
 
 const FabContent = ({ title, signOutText }: FabContentProps) => {
-  const session = useCoreSession();
+  const { session } = useSession();
   const { signOut } = useCoreClerk();
 
   return (
@@ -88,7 +89,8 @@ const FabContent = ({ title, signOutText }: FabContentProps) => {
         })}
         localizationKey={signOutText}
         onClick={async () => {
-          await signOut({ sessionId: session.id });
+          // clerk-js has been loaded at this point so we can safely access session
+          await signOut({ sessionId: session!.id });
         }}
       />
     </Col>
@@ -96,7 +98,7 @@ const FabContent = ({ title, signOutText }: FabContentProps) => {
 };
 
 const _ImpersonationFab = () => {
-  const session = useCoreSession();
+  const { session } = useSession();
   const { t } = useLocalizations();
   const { parsedInternalTheme } = useAppearance();
   const containerRef = useRef<HTMLDivElement>(null);
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserMembershipList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserMembershipList.tsx
index 612838c7db0..9f3666050ab 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserMembershipList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserMembershipList.tsx
@@ -1,6 +1,7 @@
+import { useUser } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
 
-import { useCoreOrganizationList, useCoreUser, useOrganizationListContext } from '../../contexts';
+import { useCoreOrganizationList, useOrganizationListContext } from '../../contexts';
 import { OrganizationPreview, PersonalWorkspacePreview, useCardState, withCardStateProvider } from '../../elements';
 import { localizationKeys } from '../../localization';
 import { OrganizationListPreviewButton, sharedMainIdentifierSx } from './shared';
@@ -36,7 +37,11 @@ export const PersonalAccountPreview = withCardStateProvider(() => {
   const card = useCardState();
   const { hidePersonal, navigateAfterSelectPersonal } = useOrganizationListContext();
   const { isLoaded, setActive } = useCoreOrganizationList();
-  const user = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
 
   const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx
index c176b6ef5c3..357c1675092 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx
@@ -1,5 +1,7 @@
+import { useUser } from '@clerk/shared/react';
+
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization, useCoreUser, useOrganizationProfileContext } from '../../contexts';
+import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { localizationKeys, Text } from '../../customizables';
 import {
@@ -18,9 +20,9 @@ export const LeaveOrganizationPage = () => {
   const card = useCardState();
   const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
   const { organization } = useCoreOrganization();
-  const user = useCoreUser();
+  const { user } = useUser();
 
-  if (!organization) {
+  if (!organization || !user) {
     return null;
   }
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx
index bae66d80d9b..09a59d42ea2 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx
@@ -1,7 +1,8 @@
+import { useUser } from '@clerk/shared/react';
 import type { OrganizationMembershipResource } from '@clerk/types';
 
 import { Gate } from '../../common/Gate';
-import { useCoreOrganization, useCoreUser } from '../../contexts';
+import { useCoreOrganization } from '../../contexts';
 import { Badge, localizationKeys, Td, Text } from '../../customizables';
 import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
 import { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
@@ -76,9 +77,9 @@ const MemberRow = (props: {
   const { membership, onRemove, onRoleChange, options } = props;
   const { localizeCustomRole } = useLocalizeCustomRoles();
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
 
-  const isCurrentUser = user.id === membership.publicUserData.userId;
+  const isCurrentUser = user?.id === membership.publicUserData.userId;
   const unlocalizedRoleLabel = options?.find(a => a.value === membership.role)?.label;
 
   return (
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index f584cc151bb..3fac21e57e1 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -1,3 +1,4 @@
+import { useUser } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
 import React from 'react';
 
@@ -7,7 +8,6 @@ import {
   useCoreClerk,
   useCoreOrganization,
   useCoreOrganizationList,
-  useCoreUser,
   useEnvironment,
   useOrganizationSwitcherContext,
 } from '../../contexts';
@@ -55,7 +55,11 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
       organizationProfileProps,
     } = useOrganizationSwitcherContext();
 
-    const user = useCoreUser();
+    const { user } = useUser();
+
+    if (!user) {
+      return null;
+    }
 
     const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index 6d178b51ea1..362702aaade 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -1,10 +1,10 @@
+import { useUser } from '@clerk/shared/react';
 import { forwardRef } from 'react';
 
 import { NotificationCountBadge, useGate } from '../../common';
 import {
   useCoreOrganization,
   useCoreOrganizationList,
-  useCoreUser,
   useEnvironment,
   useOrganizationSwitcherContext,
 } from '../../contexts';
@@ -22,10 +22,16 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
   forwardRef<HTMLButtonElement, OrganizationSwitcherTriggerProps>((props, ref) => {
     const { sx, ...rest } = props;
 
-    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = useCoreUser();
+    const { user } = useUser();
     const { organization } = useCoreOrganization();
     const { hidePersonal } = useOrganizationSwitcherContext();
 
+    if (!user) {
+      return null;
+    }
+
+    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
+
     return (
       <Button
         elementDescriptor={descriptors.organizationSwitcherTrigger}
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx
index 8ac863cbbb6..4897b785dbe 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx
@@ -1,6 +1,6 @@
+import { useUser } from '@clerk/shared/react';
 import React from 'react';
 
-import { useCoreUser } from '../../contexts';
 import { descriptors, localizationKeys } from '../../customizables';
 import { Action, SecondaryActions } from '../../elements';
 import { Plus } from '../../icons';
@@ -15,9 +15,9 @@ export interface OrganizationActionListProps extends UserMembershipListProps {
 const CreateOrganizationButton = ({
   onCreateOrganizationClick,
 }: Pick<OrganizationActionListProps, 'onCreateOrganizationClick'>) => {
-  const user = useCoreUser();
+  const { user } = useUser();
 
-  if (!user.createOrganizationEnabled) {
+  if (!user?.createOrganizationEnabled) {
     return null;
   }
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx
index 5d40e722668..28583991265 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx
@@ -1,3 +1,4 @@
+import { useUser } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
 import React from 'react';
 
@@ -5,7 +6,6 @@ import { InfiniteListSpinner } from '../../common';
 import {
   useCoreOrganization,
   useCoreOrganizationList,
-  useCoreUser,
   useOrganizationSwitcherContext,
 } from '../../contexts';
 import { Box, descriptors, localizationKeys } from '../../customizables';
@@ -48,12 +48,16 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
   const { hidePersonal } = useOrganizationSwitcherContext();
   const { organization: currentOrg } = useCoreOrganization();
   const { ref, userMemberships } = useFetchMemberships();
-  const user = useCoreUser();
+  const { user } = useUser();
 
   const otherOrgs = ((userMemberships.count || 0) > 0 ? userMemberships.data || [] : [])
     .map(e => e.organization)
     .filter(o => o.id !== currentOrg?.id);
 
+  if (!user) {
+    return null;
+  }
+
   const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
 
   const { isLoading, hasNextPage } = userMemberships;
diff --git a/packages/clerk-js/src/ui.retheme/components/UserButton/UserButton.tsx b/packages/clerk-js/src/ui.retheme/components/UserButton/UserButton.tsx
index 53e56058ee4..c2a48a25274 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserButton/UserButton.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserButton/UserButton.tsx
@@ -1,7 +1,8 @@
+import { useUser } from '@clerk/shared/react';
 import { useId } from 'react';
 
 import { getFullName, getIdentifier } from '../../../utils/user';
-import { useCoreUser, useUserButtonContext, withCoreUserGuard } from '../../contexts';
+import { useUserButtonContext, withCoreUserGuard } from '../../contexts';
 import { descriptors, Flex, Flow, Text } from '../../customizables';
 import { Popover, withCardStateProvider, withFloatingTree } from '../../elements';
 import { usePopover } from '../../hooks';
@@ -51,8 +52,12 @@ const _UserButton = withFloatingTree(() => {
 });
 
 const UserButtonTopLevelIdentifier = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
+
   const { showName } = useUserButtonContext();
+  if (!user) {
+    return null;
+  }
   return showName ? (
     <Text
       variant='regularMedium'
diff --git a/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx
index 8c2b71547dd..b96e14af3d7 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx
@@ -1,7 +1,8 @@
+import { useSession, useUser } from '@clerk/shared/react';
 import type { ActiveSessionResource } from '@clerk/types';
 import React from 'react';
 
-import { useCoreSession, useCoreUser, useEnvironment, useUserButtonContext } from '../../contexts';
+import { useEnvironment, useUserButtonContext } from '../../contexts';
 import { descriptors, localizationKeys } from '../../customizables';
 import { Action, Actions, PopoverCard, PreviewButton, SecondaryActions, UserPreview } from '../../elements';
 import { RootBox } from '../../elements/RootBox';
@@ -13,9 +14,9 @@ type UserButtonPopoverProps = { close: () => void } & PropsOfComponent<typeof Po
 
 export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopoverProps>((props, ref) => {
   const { close, ...rest } = props;
-  const session = useCoreSession() as ActiveSessionResource;
+  const { session } = useSession() as { session: ActiveSessionResource };
   const { authConfig } = useEnvironment();
-  const user = useCoreUser();
+  const { user } = useUser();
   const {
     handleAddAccountClicked,
     handleManageAccountClicked,
diff --git a/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonTrigger.tsx b/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonTrigger.tsx
index d4015199303..b3b0f2eceb9 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonTrigger.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonTrigger.tsx
@@ -1,6 +1,6 @@
+import { useUser } from '@clerk/shared/react';
 import { forwardRef } from 'react';
 
-import { useCoreUser } from '../../contexts';
 import { Button, descriptors } from '../../customizables';
 import { UserAvatar, withAvatarShimmer } from '../../elements';
 import type { PropsOfComponent } from '../../styledSystem';
@@ -12,7 +12,7 @@ type UserButtonTriggerProps = PropsOfComponent<typeof Button> & {
 export const UserButtonTrigger = withAvatarShimmer(
   forwardRef<HTMLButtonElement, UserButtonTriggerProps>((props, ref) => {
     const { sx, ...rest } = props;
-    const user = useCoreUser();
+    const { user } = useUser();
 
     return (
       <Button
diff --git a/packages/clerk-js/src/ui.retheme/components/UserButton/useMultisessionActions.tsx b/packages/clerk-js/src/ui.retheme/components/UserButton/useMultisessionActions.tsx
index c394e2bf5cf..666e58f82b7 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserButton/useMultisessionActions.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserButton/useMultisessionActions.tsx
@@ -1,13 +1,14 @@
+import { useSessionList } from '@clerk/shared/react';
 import type { ActiveSessionResource, UserButtonProps, UserResource } from '@clerk/types';
 
 import { windowNavigate } from '../../../utils/windowNavigate';
-import { useCoreClerk, useCoreSessionList } from '../../contexts';
+import { useCoreClerk } from '../../contexts';
 import { useCardState } from '../../elements';
 import { useRouter } from '../../router';
 import { sleep } from '../../utils';
 
 type UseMultisessionActionsParams = {
-  user: UserResource | undefined;
+  user: UserResource | null | undefined;
   actionCompleteCallback?: () => void;
   navigateAfterSignOut?: () => any;
   navigateAfterMultiSessionSingleSignOut?: () => any;
@@ -19,9 +20,9 @@ type UseMultisessionActionsParams = {
 export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
   const { setActive, signOut, openUserProfile } = useCoreClerk();
   const card = useCardState();
-  const sessions = useCoreSessionList();
+  const { sessions } = useSessionList();
   const { navigate } = useRouter();
-  const activeSessions = sessions.filter(s => s.status === 'active') as ActiveSessionResource[];
+  const activeSessions = sessions?.filter(s => s.status === 'active') as ActiveSessionResource[];
   const otherSessions = activeSessions.filter(s => s.user?.id !== opts.user?.id);
 
   const handleSignOutSessionClicked = (session: ActiveSessionResource) => () => {
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/ActiveDevicesSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/ActiveDevicesSection.tsx
index 10fd409133a..9a7976ac1ad 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/ActiveDevicesSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/ActiveDevicesSection.tsx
@@ -1,7 +1,7 @@
+import { useSession, useUser } from '@clerk/shared/react';
 import type { SessionWithActivitiesResource } from '@clerk/types';
 import React from 'react';
 
-import { useCoreSession, useCoreUser } from '../../contexts';
 import { Badge, Col, descriptors, Flex, Icon, localizationKeys, Text, useLocalizations } from '../../customizables';
 import { FullHeightLoader, ProfileSection } from '../../elements';
 import { DeviceLaptop, DeviceMobile } from '../../icons';
@@ -12,8 +12,8 @@ import { UserProfileAccordion } from './UserProfileAccordion';
 import { currentSessionFirst } from './utils';
 
 export const ActiveDevicesSection = () => {
-  const user = useCoreUser();
-  const session = useCoreSession();
+  const { user } = useUser();
+  const { session } = useSession();
   const [sessionsWithActivities, setSessionsWithActivities] = React.useState<SessionWithActivitiesResource[]>([]);
 
   React.useEffect(() => {
@@ -27,7 +27,7 @@ export const ActiveDevicesSection = () => {
     >
       {!sessionsWithActivities.length && <FullHeightLoader />}
       {!!sessionsWithActivities.length &&
-        sessionsWithActivities.sort(currentSessionFirst(session?.id)).map(sa => (
+        sessionsWithActivities.sort(currentSessionFirst(session!.id)).map(sa => (
           <DeviceAccordion
             key={sa.id}
             session={sa}
@@ -38,7 +38,7 @@ export const ActiveDevicesSection = () => {
 };
 
 const DeviceAccordion = (props: { session: SessionWithActivitiesResource }) => {
-  const isCurrent = useCoreSession()?.id === props.session.id;
+  const isCurrent = useSession().session?.id === props.session.id;
   const revoke = async () => {
     if (isCurrent || !props.session) {
       return;
@@ -74,9 +74,9 @@ const DeviceAccordion = (props: { session: SessionWithActivitiesResource }) => {
 };
 
 const DeviceInfo = (props: { session: SessionWithActivitiesResource }) => {
-  const coreSession = useCoreSession();
-  const isCurrent = coreSession?.id === props.session.id;
-  const isCurrentlyImpersonating = !!coreSession.actor;
+  const { session } = useSession();
+  const isCurrent = session?.id === props.session.id;
+  const isCurrentlyImpersonating = !!session?.actor;
   const isImpersonationSession = !!props.session.actor;
   const { city, country, browserName, browserVersion, deviceType, ipAddress, isMobile } = props.session.latestActivity;
   const title = deviceType ? deviceType : isMobile ? 'Mobile device' : 'Desktop device';
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/AddAuthenticatorApp.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/AddAuthenticatorApp.tsx
index fa7cf1423a2..3a49d7f340b 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/AddAuthenticatorApp.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/AddAuthenticatorApp.tsx
@@ -1,8 +1,8 @@
+import { useUser } from '@clerk/shared/react';
 import type { TOTPResource } from '@clerk/types';
 import React from 'react';
 
 import { QRCode } from '../../common';
-import { useCoreUser } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { Button, Col, descriptors, localizationKeys, Text } from '../../customizables';
 import {
@@ -25,7 +25,7 @@ type DisplayFormat = 'qr' | 'uri';
 
 export const AddAuthenticatorApp = (props: AddAuthenticatorAppProps) => {
   const { title, onContinue } = props;
-  const user = useCoreUser();
+  const { user } = useUser();
   const card = useCardState();
   const [totp, setTOTP] = React.useState<TOTPResource | undefined>(undefined);
   const [displayFormat, setDisplayFormat] = React.useState<DisplayFormat>('qr');
@@ -34,7 +34,7 @@ export const AddAuthenticatorApp = (props: AddAuthenticatorAppProps) => {
   // Non-idempotent useEffect
   React.useEffect(() => {
     void user
-      .createTOTP()
+      ?.createTOTP()
       .then((totp: TOTPResource) => setTOTP(totp))
       .catch(err => handleError(err, [], card.setError));
   }, []);
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/ConnectedAccountsPage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/ConnectedAccountsPage.tsx
index 985379eb290..5f3357cc407 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/ConnectedAccountsPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/ConnectedAccountsPage.tsx
@@ -1,9 +1,10 @@
+import { useUser } from '@clerk/shared/react';
 import type { ExternalAccountResource, OAuthProvider, OAuthStrategy } from '@clerk/types';
 import React from 'react';
 
 import { appendModalState } from '../../../utils';
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser, useUserProfileContext } from '../../contexts';
+import { useUserProfileContext } from '../../contexts';
 import { Col, Image, localizationKeys, Text } from '../../customizables';
 import {
   ArrowBlockButton,
@@ -21,12 +22,12 @@ import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 
 export const ConnectedAccountsPage = withCardStateProvider(() => {
   const title = localizationKeys('userProfile.connectedAccountPage.title');
-  const user = useCoreUser();
+  const { user } = useUser();
 
   const { params } = useRouter();
   const { id } = params || {};
 
-  const ref = React.useRef<ExternalAccountResource | undefined>(user.externalAccounts.find(a => a.id === id));
+  const ref = React.useRef<ExternalAccountResource | undefined>(user?.externalAccounts.find(a => a.id === id));
   const wizard = useWizard({ defaultStep: ref.current ? 1 : 0 });
 
   // TODO: Better handling of success redirect
@@ -44,14 +45,14 @@ export const ConnectedAccountsPage = withCardStateProvider(() => {
 
 const AddConnectedAccount = () => {
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
   const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();
   const { additionalOAuthScopes, componentName, mode } = useUserProfileContext();
   const isModal = mode === 'modal';
 
   const enabledStrategies = strategies.filter(s => s.startsWith('oauth')) as OAuthStrategy[];
-  const connectedStrategies = user.verifiedExternalAccounts.map(a => `oauth_${a.provider}`) as OAuthStrategy[];
+  const connectedStrategies = user?.verifiedExternalAccounts.map(a => `oauth_${a.provider}`) as OAuthStrategy[];
 
   const unconnectedStrategies = enabledStrategies.filter(provider => {
     return !connectedStrategies.includes(provider);
@@ -68,7 +69,7 @@ const AddConnectedAccount = () => {
     // If yes, refactor and cleanup:
     card.setLoading(strategy);
     user
-      .createExternalAccount({
+      ?.createExternalAccount({
         strategy: strategy,
         redirectUrl,
         additionalScopes,
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/ConnectedAccountsSection.tsx
index 85c064622f0..8e9d16359e3 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/ConnectedAccountsSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/ConnectedAccountsSection.tsx
@@ -1,7 +1,8 @@
+import { useUser } from '@clerk/shared/react';
 import type { ExternalAccountResource, OAuthProvider, OAuthScope, OAuthStrategy } from '@clerk/types';
 
 import { appendModalState } from '../../../utils';
-import { useCoreUser, useUserProfileContext } from '../../contexts';
+import { useUserProfileContext } from '../../contexts';
 import { Badge, Col, descriptors, Flex, Image, localizationKeys } from '../../customizables';
 import { ProfileSection, useCardState, UserPreview } from '../../elements';
 import { useEnabledThirdPartyProviders } from '../../hooks';
@@ -12,8 +13,11 @@ import { UserProfileAccordion } from './UserProfileAccordion';
 import { AddBlockButton } from './UserProfileBlockButtons';
 
 export const ConnectedAccountsSection = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
+  if (!user) {
+    return null;
+  }
   const accounts = [
     ...user.verifiedExternalAccounts,
     ...user.unverifiedExternalAccounts.filter(a => a.verification?.error),
@@ -41,7 +45,7 @@ export const ConnectedAccountsSection = () => {
 
 const ConnectedAccountAccordion = ({ account }: { account: ExternalAccountResource }) => {
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
   const router = useRouter();
   const { providerToDisplayData } = useEnabledThirdPartyProviders();
@@ -71,6 +75,10 @@ const ConnectedAccountAccordion = ({ account }: { account: ExternalAccountResour
       if (reauthorizationRequired) {
         response = await account.reauthorize({ additionalScopes, redirectUrl });
       } else {
+        if (!user) {
+          throw Error('user is not defined');
+        }
+
         response = await user.createExternalAccount({
           strategy: account.verification!.strategy as OAuthStrategy,
           redirectUrl,
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/DeletePage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/DeletePage.tsx
index 2cb3f702c85..428178b9af0 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/DeletePage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/DeletePage.tsx
@@ -1,4 +1,6 @@
-import { useCoreClerk, useCoreUser, useEnvironment } from '../../contexts';
+import { useUser } from '@clerk/shared/react';
+
+import { useCoreClerk, useEnvironment } from '../../contexts';
 import { localizationKeys, Text } from '../../customizables';
 import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
 import { useRouter } from '../../router';
@@ -9,11 +11,15 @@ export const DeletePage = withCardStateProvider(() => {
   const card = useCardState();
   const environment = useEnvironment();
   const router = useRouter();
-  const user = useCoreUser();
+  const { user } = useUser();
   const clerk = useCoreClerk();
 
   const deleteUser = async () => {
     try {
+      if (!user) {
+        throw Error('user is not defined');
+      }
+
       await user.delete();
       if (clerk.client.activeSessions.length > 0) {
         await router.navigate(environment.displayConfig.afterSignOutOneUrl);
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/EmailPage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/EmailPage.tsx
index 64db4c7bbba..11bc2bd232a 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/EmailPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/EmailPage.tsx
@@ -1,8 +1,9 @@
+import { useUser } from '@clerk/shared/react';
 import type { EmailAddressResource } from '@clerk/types';
 import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { localizationKeys, Text } from '../../customizables';
 import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
 import { useRouter } from '../../router';
@@ -15,14 +16,14 @@ import { VerifyWithLink } from './VerifyWithLink';
 export const EmailPage = withCardStateProvider(() => {
   const title = localizationKeys('userProfile.emailAddressPage.title');
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
   const environment = useEnvironment();
   const preferEmailLinks = emailLinksEnabledForInstance(environment);
 
   const { params } = useRouter();
   const { id } = params || {};
 
-  const emailAddressRef = React.useRef<EmailAddressResource | undefined>(user.emailAddresses.find(a => a.id === id));
+  const emailAddressRef = React.useRef<EmailAddressResource | undefined>(user?.emailAddresses.find(a => a.id === id));
   const wizard = useWizard({
     defaultStep: emailAddressRef.current ? 1 : 0,
     onNextStep: () => card.setError(undefined),
@@ -35,12 +36,12 @@ export const EmailPage = withCardStateProvider(() => {
     isRequired: true,
   });
 
-  const canSubmit = emailField.value.length > 1 && user.username !== emailField.value;
+  const canSubmit = emailField.value.length > 1 && user?.username !== emailField.value;
 
   const addEmail = async (e: React.FormEvent) => {
     e.preventDefault();
     return user
-      .createEmailAddress({ email: emailField.value })
+      ?.createEmailAddress({ email: emailField.value })
       .then(res => {
         emailAddressRef.current = res;
         wizard.nextStep();
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/EmailSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/EmailSection.tsx
index bddc2169928..28d8a3ac19e 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/EmailSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/EmailSection.tsx
@@ -1,6 +1,6 @@
+import { useUser } from '@clerk/shared/react';
 import type { EmailAddressResource } from '@clerk/types';
 
-import { useCoreUser } from '../../contexts';
 import { Badge, Col, localizationKeys } from '../../customizables';
 import { ProfileSection, useCardState } from '../../elements';
 import { useRouter } from '../../router';
@@ -12,14 +12,14 @@ import { primaryIdentificationFirst } from './utils';
 
 export const EmailsSection = () => {
   const { navigate } = useRouter();
-  const user = useCoreUser();
+  const { user } = useUser();
 
   return (
     <ProfileSection
       title={localizationKeys('userProfile.start.emailAddressesSection.title')}
       id='emailAddresses'
     >
-      {user.emailAddresses.sort(primaryIdentificationFirst(user.primaryEmailAddressId)).map(email => (
+      {user?.emailAddresses.sort(primaryIdentificationFirst(user.primaryEmailAddressId)).map(email => (
         <EmailAccordion
           key={email.id}
           email={email}
@@ -37,12 +37,12 @@ export const EmailsSection = () => {
 
 const EmailAccordion = ({ email }: { email: EmailAddressResource }) => {
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
-  const isPrimary = user.primaryEmailAddressId === email.id;
+  const isPrimary = user?.primaryEmailAddressId === email.id;
   const isVerified = email.verification.status === 'verified';
   const setPrimary = () => {
-    return user.update({ primaryEmailAddressId: email.id }).catch(e => handleError(e, [], card.setError));
+    return user!.update({ primaryEmailAddressId: email.id }).catch(e => handleError(e, [], card.setError));
   };
 
   return (
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/EnterpriseAccountsSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/EnterpriseAccountsSection.tsx
index 6cf7bc56372..1424b86ae4e 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/EnterpriseAccountsSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/EnterpriseAccountsSection.tsx
@@ -1,21 +1,21 @@
+import { useUser } from '@clerk/shared/react';
 import type { SamlAccountResource } from '@clerk/types';
 
-import { useCoreUser } from '../../contexts';
+import { useRouter } from '../../router';
 import { Badge, Col, descriptors, Flex, Image, localizationKeys } from '../../customizables';
 import { ProfileSection, UserPreview } from '../../elements';
 import { useSaml } from '../../hooks';
-import { useRouter } from '../../router';
 import { UserProfileAccordion } from './UserProfileAccordion';
 
 export const EnterpriseAccountsSection = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
 
   return (
     <ProfileSection
       title={localizationKeys('userProfile.start.enterpriseAccountsSection.title')}
       id='enterpriseAccounts'
     >
-      {user.samlAccounts.map(account => (
+      {user?.samlAccounts.map(account => (
         <EnterpriseAccountAccordion
           key={account.id}
           account={account}
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeCreatePage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeCreatePage.tsx
index cd966066b1b..179a830efde 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeCreatePage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeCreatePage.tsx
@@ -1,7 +1,7 @@
+import { useUser } from '@clerk/shared/react';
 import type { BackupCodeResource } from '@clerk/types';
 import React from 'react';
 
-import { useCoreUser } from '../../contexts';
 import { descriptors, localizationKeys, Text } from '../../customizables';
 import {
   ContentPage,
@@ -16,7 +16,7 @@ import { MfaBackupCodeList } from './MfaBackupCodeList';
 import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 
 export const MfaBackupCodeCreatePage = withCardStateProvider(() => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const card = useCardState();
   const [backupCode, setBackupCode] = React.useState<BackupCodeResource | undefined>(undefined);
 
@@ -26,7 +26,7 @@ export const MfaBackupCodeCreatePage = withCardStateProvider(() => {
     }
 
     void user
-      .createBackupCode()
+      ?.createBackupCode()
       .then((backupCode: BackupCodeResource) => setBackupCode(backupCode))
       .catch(err => handleError(err, [], card.setError));
   }, []);
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeList.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeList.tsx
index 1be49979061..0ffd4fff743 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeList.tsx
@@ -1,6 +1,8 @@
+import { useUser } from '@clerk/shared/react';
+
 import { getIdentifier } from '../../../utils/user';
 import { PrintableComponent, usePrintable } from '../../common';
-import { useCoreUser, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { Button, Col, Flex, Grid, Heading, localizationKeys, Text } from '../../customizables';
 import { useClipboard } from '../../hooks';
@@ -15,9 +17,14 @@ type MfaBackupCodeListProps = {
 export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
   const { subtitle, backupCodes } = props;
   const { applicationName } = useEnvironment().displayConfig;
-  const user = useCoreUser();
+  const { user } = useUser();
+
   const { print, printableProps } = usePrintable();
   const { onCopy, hasCopied } = useClipboard(backupCodes?.join(',') || '');
+
+  if (!user) {
+    return null;
+  }
   const userIdentifier = getIdentifier(user);
 
   const onDownloadTxtFile = () => {
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPage.tsx
index 20dcfa28749..8401ab413f3 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPage.tsx
@@ -1,7 +1,8 @@
+import { useUser } from '@clerk/shared/react';
 import type { VerificationStrategy } from '@clerk/types';
 import React from 'react';
 
-import { useCoreUser, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { Col, Grid, localizationKeys, Text } from '../../customizables';
 import {
   ContentPage,
@@ -24,7 +25,12 @@ export const MfaPage = withCardStateProvider(() => {
   const {
     userSettings: { attributes },
   } = useEnvironment();
-  const user = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
+
   const title = localizationKeys('userProfile.mfaPage.title');
   const [selectedMethod, setSelectedMethod] = React.useState<VerificationStrategy>();
 
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPhoneCodePage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPhoneCodePage.tsx
index 2481ff00bf2..4e2472774f3 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPhoneCodePage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPhoneCodePage.tsx
@@ -1,8 +1,8 @@
+import { useUser } from '@clerk/shared/react';
 import type { PhoneNumberResource } from '@clerk/types';
 import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { Col, localizationKeys, Text } from '../../customizables';
 import {
@@ -72,7 +72,12 @@ type AddMfaProps = {
 const AddMfa = (props: AddMfaProps) => {
   const { onSuccess, title, onAddPhoneClick, onUnverifiedPhoneClick, resourceRef } = props;
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
+
   const availableMethods = user.phoneNumbers.filter(p => !p.reservedForSecondFactor);
 
   const enableMfa = async (phone: PhoneNumberResource) => {
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaSection.tsx
index a74e758d59f..40244d1ddaa 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaSection.tsx
@@ -1,4 +1,6 @@
-import { useCoreUser, useEnvironment } from '../../contexts';
+import { useUser } from '@clerk/shared/react';
+
+import { useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { ProfileSection } from '../../elements';
 import { useRouter } from '../../router';
@@ -13,7 +15,11 @@ export const MfaSection = () => {
   const {
     userSettings: { attributes },
   } = useEnvironment();
-  const user = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
 
   const secondFactors = getSecondFactors(attributes);
   const secondFactorsAvailableToAdd = getSecondFactorsAvailableToAdd(attributes, user);
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordPage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordPage.tsx
index 0505c1b41c1..c56852a0714 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordPage.tsx
@@ -1,7 +1,8 @@
+import { useSession, useUser } from '@clerk/shared/react';
 import { useRef } from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreSession, useCoreUser, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { localizationKeys, useLocalizations } from '../../customizables';
 import {
   ContentPage,
@@ -34,8 +35,13 @@ const generateSuccessPageText = (userHasPassword: boolean, sessionSignOut: boole
 };
 
 export const PasswordPage = withCardStateProvider(() => {
-  const user = useCoreUser();
-  const session = useCoreSession();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
+
+  const { session } = useSession();
   const title = user.passwordEnabled
     ? localizationKeys('userProfile.passwordPage.changePasswordTitle')
     : localizationKeys('userProfile.passwordPage.title');
@@ -138,7 +144,7 @@ export const PasswordPage = withCardStateProvider(() => {
             readOnly
             id='identifier-field'
             name='identifier'
-            value={session.publicUserData.identifier || ''}
+            value={session?.publicUserData.identifier || ''}
             style={{ display: 'none' }}
           />
           {user.passwordEnabled && (
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordSection.tsx
index d9a4134219c..04541ee5cd3 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordSection.tsx
@@ -1,4 +1,5 @@
-import { useCoreUser } from '../../contexts';
+import { useUser } from '@clerk/shared/react';
+
 import { localizationKeys, Text } from '../../customizables';
 import { ProfileSection } from '../../elements';
 import { Pencil } from '../../icons';
@@ -7,7 +8,13 @@ import { AddBlockButton } from './UserProfileBlockButtons';
 
 export const PasswordSection = () => {
   const { navigate } = useRouter();
-  const { passwordEnabled } = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
+
+  const { passwordEnabled } = user;
 
   const navigateToPage = () => {
     return navigate('password');
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/PhonePage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/PhonePage.tsx
index 8ede7518f06..ea75c95d338 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/PhonePage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/PhonePage.tsx
@@ -1,8 +1,8 @@
+import { useUser } from '@clerk/shared/react';
 import type { PhoneNumberResource } from '@clerk/types';
 import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { localizationKeys, Text } from '../../customizables';
 import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
@@ -12,12 +12,12 @@ import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 import { VerifyWithCode } from './VerifyWithCode';
 
 export const PhonePage = withCardStateProvider(() => {
-  const user = useCoreUser();
+  const { user } = useUser();
 
   const { params } = useRouter();
   const { id } = params || {};
 
-  const phoneNumberRef = React.useRef<PhoneNumberResource | undefined>(user.phoneNumbers.find(a => a.id === id));
+  const phoneNumberRef = React.useRef<PhoneNumberResource | undefined>(user?.phoneNumbers.find(a => a.id === id));
   const wizard = useWizard({ defaultStep: phoneNumberRef.current ? 1 : 0 });
 
   return (
@@ -52,7 +52,7 @@ type AddPhoneProps = {
 export const AddPhone = (props: AddPhoneProps) => {
   const { title, onSuccess, resourceRef } = props;
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
 
   const phoneField = useFormControl('phoneNumber', '', {
     type: 'tel',
@@ -60,12 +60,12 @@ export const AddPhone = (props: AddPhoneProps) => {
     isRequired: true,
   });
 
-  const canSubmit = phoneField.value.length > 1 && user.username !== phoneField.value;
+  const canSubmit = phoneField.value.length > 1 && user?.username !== phoneField.value;
 
   const addPhone = async (e: React.FormEvent) => {
     e.preventDefault();
     return user
-      .createPhoneNumber({ phoneNumber: phoneField.value })
+      ?.createPhoneNumber({ phoneNumber: phoneField.value })
       .then(res => {
         resourceRef.current = res;
         onSuccess();
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/PhoneSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/PhoneSection.tsx
index b61c1a8d82f..25c16143882 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/PhoneSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/PhoneSection.tsx
@@ -1,6 +1,6 @@
+import { useUser } from '@clerk/shared/react';
 import type { PhoneNumberResource } from '@clerk/types';
 
-import { useCoreUser } from '../../contexts';
 import { Badge, Col, localizationKeys, Text } from '../../customizables';
 import { ProfileSection, useCardState } from '../../elements';
 import { useRouter } from '../../router';
@@ -11,7 +11,7 @@ import { AddBlockButton } from './UserProfileBlockButtons';
 import { primaryIdentificationFirst } from './utils';
 
 export const PhoneSection = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
 
   return (
@@ -19,7 +19,7 @@ export const PhoneSection = () => {
       title={localizationKeys('userProfile.start.phoneNumbersSection.title')}
       id='phoneNumbers'
     >
-      {user.phoneNumbers.sort(primaryIdentificationFirst(user.primaryPhoneNumberId)).map(phone => (
+      {user?.phoneNumbers.sort(primaryIdentificationFirst(user.primaryPhoneNumberId)).map(phone => (
         <PhoneAccordion
           key={phone.id}
           phone={phone}
@@ -37,8 +37,13 @@ export const PhoneSection = () => {
 
 const PhoneAccordion = ({ phone }: { phone: PhoneNumberResource }) => {
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
+
+  if (!user) {
+    return null;
+  }
+
   const isPrimary = user.primaryPhoneNumberId === phone.id;
   const isVerified = phone.verification.status === 'verified';
   const setPrimary = () => {
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/ProfilePage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/ProfilePage.tsx
index ff40549c3e7..f04149986df 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/ProfilePage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/ProfilePage.tsx
@@ -1,8 +1,9 @@
+import { useUser } from '@clerk/shared/react';
 import React from 'react';
 
 import { isDefaultImage } from '../../../utils';
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import {
   ContentPage,
@@ -20,7 +21,12 @@ import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 export const ProfilePage = withCardStateProvider(() => {
   const title = localizationKeys('userProfile.profilePage.title');
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
+
   const [avatarChanged, setAvatarChanged] = React.useState(false);
   const { first_name, last_name } = useEnvironment().userSettings.attributes;
   const showFirstName = first_name.enabled;
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/RemoveResourcePage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/RemoveResourcePage.tsx
index 324cdf88d14..eccccbc34f6 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/RemoveResourcePage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/RemoveResourcePage.tsx
@@ -1,16 +1,16 @@
+import { useUser } from '@clerk/shared/react';
 import React from 'react';
 
 import { RemoveResourcePage } from '../../common';
-import { useCoreUser } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { useEnabledThirdPartyProviders } from '../../hooks';
 import { useRouter } from '../../router';
 import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 
 export const RemoveEmailPage = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { id } = useRouter().params;
-  const resource = user.emailAddresses.find(e => e.id === id);
+  const resource = user?.emailAddresses.find(e => e.id === id);
   const ref = React.useRef(resource?.emailAddress);
 
   if (!ref.current) {
@@ -34,9 +34,9 @@ export const RemoveEmailPage = () => {
 };
 
 export const RemovePhonePage = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { id } = useRouter().params;
-  const resource = user.phoneNumbers.find(e => e.id === id);
+  const resource = user?.phoneNumbers.find(e => e.id === id);
   const ref = React.useRef(resource?.phoneNumber);
 
   if (!ref.current) {
@@ -60,9 +60,9 @@ export const RemovePhonePage = () => {
 };
 
 export const RemoveConnectedAccountPage = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { id } = useRouter().params;
-  const resource = user.externalAccounts.find(e => e.id === id);
+  const resource = user?.externalAccounts.find(e => e.id === id);
   const ref = React.useRef(resource?.provider);
   const { providerToDisplayData } = useEnabledThirdPartyProviders();
 
@@ -87,9 +87,9 @@ export const RemoveConnectedAccountPage = () => {
 };
 
 export const RemoveWeb3WalletPage = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { id } = useRouter().params;
-  const resource = user.web3Wallets.find(e => e.id === id);
+  const resource = user?.web3Wallets.find(e => e.id === id);
   const ref = React.useRef(resource?.web3Wallet);
 
   if (!ref.current) {
@@ -113,10 +113,10 @@ export const RemoveWeb3WalletPage = () => {
 };
 
 export const RemoveMfaPhoneCodePage = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { id } = useRouter().params;
   // TODO: This logic will need to change when we add more 2fa methods
-  const resource = user.phoneNumbers.find(e => e.id === id);
+  const resource = user?.phoneNumbers.find(e => e.id === id);
   const ref = React.useRef(resource?.phoneNumber);
 
   if (!ref.current) {
@@ -140,14 +140,14 @@ export const RemoveMfaPhoneCodePage = () => {
 };
 
 export const RemoveMfaTOTPPage = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   return (
     <RemoveResourcePage
       title={localizationKeys('userProfile.mfaTOTPPage.removeResource.title')}
       messageLine1={localizationKeys('userProfile.mfaTOTPPage.removeResource.messageLine1')}
       messageLine2={localizationKeys('userProfile.mfaTOTPPage.removeResource.messageLine2')}
       successMessage={localizationKeys('userProfile.mfaTOTPPage.removeResource.successMessage')}
-      deleteResource={user.disableTOTP}
+      deleteResource={user!.disableTOTP}
       Breadcrumbs={UserProfileBreadcrumbs}
     />
   );
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/RootPage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/RootPage.tsx
index 5cb7a47fee1..237f3bd94df 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/RootPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/RootPage.tsx
@@ -1,4 +1,6 @@
-import { useCoreUser, useEnvironment } from '../../contexts';
+import { useUser } from '@clerk/shared/react';
+
+import { useEnvironment } from '../../contexts';
 import { Col, descriptors, localizationKeys } from '../../customizables';
 import { CardAlert, Header, useCardState, withCardStateProvider } from '../../elements';
 import { NavbarMenuButtonRow } from '../../elements/Navbar';
@@ -18,16 +20,16 @@ import { Web3Section } from './Web3Section';
 export const RootPage = withCardStateProvider(() => {
   const { attributes, saml, social, instanceIsPasswordBased } = useEnvironment().userSettings;
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
   const showUsername = attributes.username.enabled;
   const showEmail = attributes.email_address.enabled;
   const showPhone = attributes.phone_number.enabled;
   const showConnectedAccounts = social && Object.values(social).filter(p => p.enabled).length > 0;
-  const showSamlAccounts = saml && saml.enabled && user.samlAccounts.length > 0;
+  const showSamlAccounts = saml && saml.enabled && user && user.samlAccounts.length > 0;
   const showWeb3 = attributes.web3_wallet.enabled;
   const showPassword = instanceIsPasswordBased;
   const showMfa = getSecondFactors(attributes).length > 0;
-  const showDelete = user.deleteSelfEnabled;
+  const showDelete = user?.deleteSelfEnabled;
 
   return (
     <Col
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfileSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfileSection.tsx
index 51999d2b52a..9c7c3fbfb40 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfileSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfileSection.tsx
@@ -1,4 +1,5 @@
-import { useCoreUser } from '../../contexts';
+import { useUser } from '@clerk/shared/react';
+
 import { localizationKeys } from '../../customizables';
 import { ProfileSection, UserPreview } from '../../elements';
 import { useRouter } from '../../router';
@@ -6,7 +7,13 @@ import { BlockButton } from './UserProfileBlockButtons';
 
 export const UserProfileSection = () => {
   const { navigate } = useRouter();
-  const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
+
+  const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
 
   return (
     <ProfileSection
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/UsernamePage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/UsernamePage.tsx
index b2aecc589f5..ada84c70bb4 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/UsernamePage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/UsernamePage.tsx
@@ -1,12 +1,19 @@
+import { useUser } from '@clerk/shared/react';
+
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
 import { handleError, useFormControl } from '../../utils';
 import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 
 export const UsernamePage = withCardStateProvider(() => {
-  const user = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
+
   const { userSettings } = useEnvironment();
   const card = useCardState();
   const wizard = useWizard();
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/UsernameSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/UsernameSection.tsx
index e4f9ac3cf58..0f9c54b31e6 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/UsernameSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/UsernameSection.tsx
@@ -1,4 +1,5 @@
-import { useCoreUser } from '../../contexts';
+import { useUser } from '@clerk/shared/react';
+
 import { localizationKeys, Text } from '../../customizables';
 import { ProfileSection } from '../../elements';
 import { Pencil } from '../../icons';
@@ -6,9 +7,13 @@ import { useRouter } from '../../router';
 import { AddBlockButton } from './UserProfileBlockButtons';
 
 export const UsernameSection = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
 
+  if (!user) {
+    return null;
+  }
+
   return (
     <ProfileSection
       title={localizationKeys('userProfile.start.usernameSection.title')}
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/VerifyTOTP.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/VerifyTOTP.tsx
index 5a3b8dad27a..5c55a181038 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/VerifyTOTP.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/VerifyTOTP.tsx
@@ -1,7 +1,7 @@
+import { useUser } from '@clerk/shared/react';
 import type { TOTPResource } from '@clerk/types';
 import React from 'react';
 
-import { useCoreUser } from '../../contexts';
 import { Col, descriptors, localizationKeys } from '../../customizables';
 import { ContentPage, Form, FormButtonContainer, NavigateToFlowStartButton, useFieldOTP } from '../../elements';
 import { UserProfileBreadcrumbs } from './UserProfileNavbar';
@@ -13,12 +13,12 @@ type VerifyTOTPProps = {
 
 export const VerifyTOTP = (props: VerifyTOTPProps) => {
   const { onVerified, resourceRef } = props;
-  const user = useCoreUser();
+  const { user } = useUser();
 
   const otp = useFieldOTP<TOTPResource>({
     onCodeEntryFinished: (code, resolve, reject) => {
       user
-        .verifyTOTP({ code })
+        ?.verifyTOTP({ code })
         .then((totp: TOTPResource) => resolve(totp))
         .catch(reject);
     },
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/Web3Page.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/Web3Page.tsx
index be46274b786..8470733fd7e 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/Web3Page.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/Web3Page.tsx
@@ -1,9 +1,9 @@
+import { useUser } from '@clerk/shared/react';
 import type { Web3Strategy, Web3WalletResource } from '@clerk/types';
 import React from 'react';
 
 import { generateSignatureWithMetamask, getMetamaskIdentifier } from '../../../utils/web3';
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser } from '../../contexts';
 import { Col, descriptors, Image, localizationKeys, Text } from '../../customizables';
 import {
   ArrowBlockButton,
@@ -20,12 +20,12 @@ import { getFieldError, handleError } from '../../utils';
 import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 
 export const Web3Page = withCardStateProvider(() => {
-  const user = useCoreUser();
+  const { user } = useUser();
 
   const { params } = useRouter();
   const { id } = params || {};
 
-  const ref = React.useRef<Web3WalletResource | undefined>(user.web3Wallets.find(a => a.id === id));
+  const ref = React.useRef<Web3WalletResource | undefined>(user?.web3Wallets.find(a => a.id === id));
   const wizard = useWizard({ defaultStep: ref.current ? 1 : 0 });
 
   return (
@@ -43,18 +43,25 @@ export const Web3Page = withCardStateProvider(() => {
 const AddWeb3Wallet = (props: { nextStep: () => void }) => {
   const { nextStep } = props;
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
   const { strategyToDisplayData } = useEnabledThirdPartyProviders();
 
   // TODO: This logic is very similar to AddConnectedAccount but only metamask is supported right now
   // const enabledStrategies = strategies.filter(s => s.startsWith('web3')) as Web3Strategy[];
   // const connectedStrategies = user.web3Wallets.map(w => w.web3Wallet) as OAuthStrategy[];
   const unconnectedStrategies: Web3Strategy[] =
-    user.web3Wallets.filter(w => w.verification?.status === 'verified').length === 0 ? ['web3_metamask_signature'] : [];
+    user?.web3Wallets.filter(w => w.verification?.status === 'verified').length === 0
+      ? ['web3_metamask_signature']
+      : [];
   const connect = async (strategy: Web3Strategy) => {
     try {
       card.setLoading(strategy);
       const identifier = await getMetamaskIdentifier();
+
+      if (!user) {
+        throw new Error('user is not defined');
+      }
+
       let web3Wallet = await user.createWeb3Wallet({ web3Wallet: identifier });
       web3Wallet = await web3Wallet.prepareVerification({ strategy: 'web3_metamask_signature' });
       const nonce = web3Wallet.verification.nonce as string;
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/Web3Section.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/Web3Section.tsx
index e1fc2512eba..39b0c656cc5 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/Web3Section.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/Web3Section.tsx
@@ -1,6 +1,6 @@
+import { useUser } from '@clerk/shared/react';
 import type { Web3WalletResource } from '@clerk/types';
 
-import { useCoreUser } from '../../contexts';
 import { Col, Flex, Image, localizationKeys } from '../../customizables';
 import { ProfileSection } from '../../elements';
 import { useEnabledThirdPartyProviders } from '../../hooks';
@@ -10,7 +10,7 @@ import { UserProfileAccordion } from './UserProfileAccordion';
 import { AddBlockButton } from './UserProfileBlockButtons';
 
 export const Web3Section = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
 
   return (
@@ -18,7 +18,7 @@ export const Web3Section = () => {
       title={localizationKeys('userProfile.start.web3WalletsSection.title')}
       id='web3Wallets'
     >
-      {user.web3Wallets.map(wallet => (
+      {user?.web3Wallets.map(wallet => (
         <Web3WalletAccordion
           key={wallet.id}
           wallet={wallet}
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx
index bb70a7b3ec8..d75b9b9dfbf 100644
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx
+++ b/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx
@@ -1,10 +1,10 @@
+import { SessionContext } 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 { CoreOrganizationProvider } from './CoreOrganizationContext';
-import { CoreSessionContext } from './CoreSessionContext';
 import { CoreUserContext } from './CoreUserContext';
 import { assertClerkSingletonExists } from './utils';
 
@@ -47,14 +47,14 @@ export function CoreClerkContextWrapper(props: CoreClerkContextWrapperProps): JS
   return (
     <CoreClerkContext.Provider value={clerkCtx}>
       <CoreClientContext.Provider value={clientCtx}>
-        <CoreSessionContext.Provider value={sessionCtx}>
+        <SessionContext.Provider value={sessionCtx}>
           <CoreOrganizationProvider
             {...organizationCtx.value}
             swrConfig={props.swrConfig}
           >
             <CoreUserContext.Provider value={userCtx}>{props.children}</CoreUserContext.Provider>
           </CoreOrganizationProvider>
-        </CoreSessionContext.Provider>
+        </SessionContext.Provider>
       </CoreClientContext.Provider>
     </CoreClerkContext.Provider>
   );
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx
index b0d5ad7a427..125d3149070 100644
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx
+++ b/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx
@@ -1,5 +1,5 @@
 import { assertContextExists, ClientContext, useClientContext } from '@clerk/shared/react';
-import type { SessionResource, SignInResource, SignUpResource } from '@clerk/types';
+import type { SignInResource, SignUpResource } from '@clerk/types';
 
 export const CoreClientContext = ClientContext;
 
@@ -14,9 +14,3 @@ export function useCoreSignUp(): SignUpResource {
   assertContextExists(ctx, CoreClientContext);
   return ctx.signUp;
 }
-
-export function useCoreSessionList(): SessionResource[] {
-  const ctx = useClientContext();
-  assertContextExists(ctx, CoreClientContext);
-  return ctx.sessions;
-}
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx
index 3cd86e17c63..526981d8130 100644
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx
+++ b/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx
@@ -1,23 +1,10 @@
-import { assertContextExists, SessionContext, useSessionContext } from '@clerk/shared/react';
-import type { SessionResource } from '@clerk/types';
+import { assertContextExists, SessionContext } from '@clerk/shared/react';
 import React from 'react';
 
-import { clerkCoreErrorSessionIsNotDefined } from '../../core/errors';
-
-export const CoreSessionContext = SessionContext;
-
-export function useCoreSession(): SessionResource {
-  const session = useSessionContext();
-  if (!session) {
-    clerkCoreErrorSessionIsNotDefined();
-  }
-  return session;
-}
-
 export function withCoreSessionSwitchGuard<P>(Component: React.ComponentType<P>): React.ComponentType<P> {
   const Hoc = (props: P) => {
-    const ctx = React.useContext(CoreSessionContext);
-    assertContextExists(ctx, CoreSessionContext);
+    const ctx = React.useContext(SessionContext);
+    assertContextExists(ctx, SessionContext);
     if (ctx.value === undefined) {
       return null;
     }
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx
index 6936128b80e..c64420c45fd 100644
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx
+++ b/packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx
@@ -1,18 +1,8 @@
-import { assertContextExists, UserContext, useUserContext } from '@clerk/shared/react';
+import { assertContextExists, UserContext } from '@clerk/shared/react';
 import React, { useContext } from 'react';
 
-import { clerkCoreErrorUserIsNotDefined } from '../../core/errors';
-
 export const CoreUserContext = UserContext;
 
-export const useCoreUser = () => {
-  const user = useUserContext();
-  if (!user) {
-    clerkCoreErrorUserIsNotDefined();
-  }
-  return user;
-};
-
 export function withCoreUserGuard<P>(Component: React.ComponentType<P>): React.ComponentType<P> {
   const Hoc = (props: P) => {
     const ctx = useContext(CoreUserContext);
diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts
index e9a6116256a..52d6f34a6e4 100644
--- a/packages/react/src/hooks/index.ts
+++ b/packages/react/src/hooks/index.ts
@@ -3,8 +3,6 @@ export { useClerk } from './useClerk';
 export { useEmailLink } from './useEmailLink';
 export { useOrganization } from './useOrganization';
 export { useOrganizationList } from './useOrganizationList';
-export { useSession } from './useSession';
-export { useSessionList } from './useSessionList';
 export { useSignIn } from './useSignIn';
 export { useSignUp } from './useSignUp';
-export { useUser } from './useUser';
+export { useSessionList, useUser, useSession } from '@clerk/shared/react';
diff --git a/packages/shared/src/react/hooks/index.ts b/packages/shared/src/react/hooks/index.ts
index f91581ee9b5..bfda9d97fba 100644
--- a/packages/shared/src/react/hooks/index.ts
+++ b/packages/shared/src/react/hooks/index.ts
@@ -2,3 +2,6 @@ export { assertContextExists, createContextAndHook } from './createContextAndHoo
 export { useOrganization } from './useOrganization';
 export { useOrganizationList } from './useOrganizationList';
 export { useSafeLayoutEffect } from './useSafeLayoutEffect';
+export { useSession } from './useSession';
+export { useSessionList } from './useSessionList';
+export { useUser } from './useUser';
diff --git a/packages/react/src/hooks/useSession.ts b/packages/shared/src/react/hooks/useSession.ts
similarity index 95%
rename from packages/react/src/hooks/useSession.ts
rename to packages/shared/src/react/hooks/useSession.ts
index 8025436f22d..db27bbbaf34 100644
--- a/packages/react/src/hooks/useSession.ts
+++ b/packages/shared/src/react/hooks/useSession.ts
@@ -1,6 +1,6 @@
 import type { ActiveSessionResource } from '@clerk/types';
 
-import { useSessionContext } from '../contexts/SessionContext';
+import { useSessionContext } from '../contexts';
 
 type UseSessionReturn =
   | { isLoaded: false; isSignedIn: undefined; session: undefined }
diff --git a/packages/react/src/hooks/useSessionList.ts b/packages/shared/src/react/hooks/useSessionList.ts
similarity index 76%
rename from packages/react/src/hooks/useSessionList.ts
rename to packages/shared/src/react/hooks/useSessionList.ts
index 70c92eadbcc..03f2cdcdbf4 100644
--- a/packages/react/src/hooks/useSessionList.ts
+++ b/packages/shared/src/react/hooks/useSessionList.ts
@@ -1,7 +1,6 @@
 import type { SessionResource, SetActive } from '@clerk/types';
 
-import { useClientContext } from '../contexts/ClientContext';
-import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
+import { useClerkInstanceContext, useClientContext } from '../contexts';
 
 type UseSessionListReturn =
   | {
@@ -18,7 +17,7 @@ type UseSessionListReturn =
 type UseSessionList = () => UseSessionListReturn;
 
 export const useSessionList: UseSessionList = () => {
-  const isomorphicClerk = useIsomorphicClerkContext();
+  const isomorphicClerk = useClerkInstanceContext();
   const client = useClientContext();
 
   if (!client) {
diff --git a/packages/react/src/hooks/useUser.ts b/packages/shared/src/react/hooks/useUser.ts
similarity index 95%
rename from packages/react/src/hooks/useUser.ts
rename to packages/shared/src/react/hooks/useUser.ts
index deae35beb88..89a0934de1b 100644
--- a/packages/react/src/hooks/useUser.ts
+++ b/packages/shared/src/react/hooks/useUser.ts
@@ -1,6 +1,6 @@
 import type { UserResource } from '@clerk/types';
 
-import { useUserContext } from '../contexts/UserContext';
+import { useUserContext } from '../contexts';
 
 type UseUserReturn =
   | { isLoaded: false; isSignedIn: undefined; user: undefined }

From 9915d4da6189b46551107a15be352310ab852ce9 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 10 Nov 2023 16:33:02 +0200
Subject: [PATCH 2/8] chore(clerk-js,clerk-react): Replace useCoreOrganization
 with useOrganization (#2113)

this also include useOrganizationList
---
 .../CreateOrganizationForm.tsx                   |  6 +++---
 .../OrganizationList/OrganizationListPage.tsx    | 11 ++++++-----
 .../OrganizationList/UserInvitationList.tsx      |  5 +++--
 .../OrganizationList/UserMembershipList.tsx      |  8 ++++----
 .../OrganizationList/UserSuggestionList.tsx      |  4 ++--
 .../components/OrganizationList/utils.ts         |  4 ++--
 .../ActionConfirmationPage.tsx                   |  8 ++++----
 .../OrganizationProfile/ActiveMembersList.tsx    |  5 ++---
 .../OrganizationProfile/AddDomainPage.tsx        |  5 +++--
 .../OrganizationProfile/DomainList.tsx           |  4 ++--
 .../OrganizationProfile/InviteMembersForm.tsx    |  4 ++--
 .../OrganizationProfile/InviteMembersPage.tsx    |  6 ++++--
 .../OrganizationProfile/InvitedMembersList.tsx   |  4 ++--
 .../OrganizationProfile/MembershipWidget.tsx     |  6 ++++--
 .../OrganizationProfile/OrganizationMembers.tsx  |  6 ++++--
 .../OrganizationProfile/OrganizationProfile.tsx  |  6 +++---
 .../OrganizationProfileNavbar.tsx                |  5 +++--
 .../OrganizationProfile/OrganizationSettings.tsx | 10 ++++++----
 .../OrganizationProfile/ProfileSettingsPage.tsx  |  4 ++--
 .../OrganizationProfile/RemoveDomainPage.tsx     |  7 ++++---
 .../OrganizationProfile/RequestToJoinList.tsx    |  6 +++---
 .../OrganizationProfile/VerifiedDomainPage.tsx   |  5 +++--
 .../OrganizationProfile/VerifyDomainPage.tsx     |  5 +++--
 .../OrganizationSwitcherPopover.tsx              | 16 +++++-----------
 .../OrganizationSwitcherTrigger.tsx              | 15 +++++----------
 .../UserInvitationSuggestionList.tsx             |  8 ++++----
 .../OrganizationSwitcher/UserMembershipList.tsx  | 12 ++++--------
 .../components/OrganizationSwitcher/utils.ts     |  5 ++---
 .../contexts/CoreClerkContextWrapper.tsx         |  7 +++----
 .../contexts/CoreOrganizationContext.tsx         |  5 -----
 .../clerk-js/src/ui.retheme/contexts/index.ts    |  1 -
 .../hooks/__tests__/useCoreOrganization.test.tsx | 10 +++++-----
 .../__tests__/useCoreOrganizationList.test.tsx   | 13 ++++++-------
 .../src/ui.retheme/hooks/useFetchRoles.ts        |  5 +++--
 packages/react/src/hooks/index.ts                |  4 +---
 packages/react/src/hooks/useOrganization.ts      |  1 -
 packages/react/src/hooks/useOrganizationList.ts  |  1 -
 37 files changed, 112 insertions(+), 125 deletions(-)
 delete mode 100644 packages/react/src/hooks/useOrganization.ts
 delete mode 100644 packages/react/src/hooks/useOrganizationList.ts

diff --git a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx
index c5cbfceef8a..6ad0557d02d 100644
--- a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -1,8 +1,8 @@
+import { useOrganization, useOrganizationList } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
 import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization, useCoreOrganizationList } from '../../contexts';
 import { Icon } from '../../customizables';
 import { ContentPage, Form, FormButtonContainer, IconButton, SuccessPage, useCardState } from '../../elements';
 import { QuestionMark, Upload } from '../../icons';
@@ -30,8 +30,8 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
   const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
 
   const lastCreatedOrganizationRef = React.useRef<OrganizationResource | null>(null);
-  const { createOrganization, isLoaded, setActive } = useCoreOrganizationList();
-  const { organization } = useCoreOrganization();
+  const { createOrganization, isLoaded, setActive } = useOrganizationList();
+  const { organization } = useOrganization();
   const [file, setFile] = React.useState<File | null>();
 
   const nameField = useFormControl('name', '', {
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx
index 87dcd8a8071..ad556136623 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx
@@ -1,6 +1,7 @@
+import { useOrganizationList } from '@clerk/shared/react';
 import { useState } from 'react';
 
-import { useCoreOrganizationList, useEnvironment, useOrganizationListContext } from '../../contexts';
+import { useEnvironment, useOrganizationListContext } from '../../contexts';
 import { Box, Button, Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';
 import { Card, CardAlert, Divider, Header, useCardState, withCardStateProvider } from '../../elements';
 import { useInView } from '../../hooks';
@@ -11,8 +12,8 @@ import { MembershipPreview, PersonalAccountPreview } from './UserMembershipList'
 import { SuggestionPreview } from './UserSuggestionList';
 import { organizationListParams } from './utils';
 
-const useCoreOrganizationListInView = () => {
-  const { userMemberships, userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams);
+const useOrganizationListInView = () => {
+  const { userMemberships, userInvitations, userSuggestions } = useOrganizationList(organizationListParams);
 
   const { ref } = useInView({
     threshold: 0,
@@ -40,7 +41,7 @@ const useCoreOrganizationListInView = () => {
 
 export const OrganizationListPage = withCardStateProvider(() => {
   const card = useCardState();
-  const { userMemberships, userSuggestions, userInvitations } = useCoreOrganizationListInView();
+  const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
   const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;
   const hasAnyData = !!(userMemberships?.count || userInvitations?.count || userSuggestions?.count);
 
@@ -118,7 +119,7 @@ const OrganizationListFlows = ({ showListInitially }: { showListInitially: boole
 const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void }) => {
   const environment = useEnvironment();
 
-  const { ref, userMemberships, userSuggestions, userInvitations } = useCoreOrganizationListInView();
+  const { ref, userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
   const { hidePersonal } = useOrganizationListContext();
 
   const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserInvitationList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserInvitationList.tsx
index 5fc91c5f526..def987a0f85 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserInvitationList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserInvitationList.tsx
@@ -1,7 +1,8 @@
+import { useOrganizationList } from '@clerk/shared/react';
 import type { OrganizationResource, UserOrganizationInvitationResource } from '@clerk/types';
 import { useState } from 'react';
 
-import { useCoreClerk, useCoreOrganizationList } from '../../contexts';
+import { useCoreClerk } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { useCardState, withCardStateProvider } from '../../elements';
 import { handleError } from '../../utils';
@@ -26,7 +27,7 @@ export const InvitationPreview = withCardStateProvider((props: UserOrganizationI
   const card = useCardState();
   const { getOrganization } = useCoreClerk();
   const [acceptedOrganization, setAcceptedOrganization] = useState<OrganizationResource | null>(null);
-  const { userInvitations } = useCoreOrganizationList({
+  const { userInvitations } = useOrganizationList({
     userInvitations: organizationListParams.userInvitations,
   });
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserMembershipList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserMembershipList.tsx
index 9f3666050ab..b834713d398 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserMembershipList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserMembershipList.tsx
@@ -1,7 +1,7 @@
-import { useUser } from '@clerk/shared/react';
+import { useOrganizationList, useUser } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
 
-import { useCoreOrganizationList, useOrganizationListContext } from '../../contexts';
+import { useOrganizationListContext } from '../../contexts';
 import { OrganizationPreview, PersonalWorkspacePreview, useCardState, withCardStateProvider } from '../../elements';
 import { localizationKeys } from '../../localization';
 import { OrganizationListPreviewButton, sharedMainIdentifierSx } from './shared';
@@ -9,7 +9,7 @@ import { OrganizationListPreviewButton, sharedMainIdentifierSx } from './shared'
 export const MembershipPreview = withCardStateProvider((props: { organization: OrganizationResource }) => {
   const card = useCardState();
   const { navigateAfterSelectOrganization } = useOrganizationListContext();
-  const { isLoaded, setActive } = useCoreOrganizationList();
+  const { isLoaded, setActive } = useOrganizationList();
 
   if (!isLoaded) {
     return null;
@@ -36,7 +36,7 @@ export const MembershipPreview = withCardStateProvider((props: { organization: O
 export const PersonalAccountPreview = withCardStateProvider(() => {
   const card = useCardState();
   const { hidePersonal, navigateAfterSelectPersonal } = useOrganizationListContext();
-  const { isLoaded, setActive } = useCoreOrganizationList();
+  const { isLoaded, setActive } = useOrganizationList();
   const { user } = useUser();
 
   if (!user) {
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserSuggestionList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserSuggestionList.tsx
index 3c8af375e7e..60538034560 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserSuggestionList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserSuggestionList.tsx
@@ -1,6 +1,6 @@
+import { useOrganizationList } from '@clerk/shared/react';
 import type { OrganizationSuggestionResource } from '@clerk/types';
 
-import { useCoreOrganizationList } from '../../contexts';
 import { localizationKeys, Text } from '../../customizables';
 import { useCardState, withCardStateProvider } from '../../elements';
 import { handleError } from '../../utils';
@@ -10,7 +10,7 @@ import { organizationListParams } from './utils';
 
 export const AcceptRejectInvitationButtons = (props: OrganizationSuggestionResource) => {
   const card = useCardState();
-  const { userSuggestions } = useCoreOrganizationList({
+  const { userSuggestions } = useOrganizationList({
     userSuggestions: organizationListParams.userSuggestions,
   });
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/utils.ts b/packages/clerk-js/src/ui.retheme/components/OrganizationList/utils.ts
index 6382e00c60c..0fd0d468fd3 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/utils.ts
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationList/utils.ts
@@ -1,4 +1,4 @@
-import type { useCoreOrganizationList } from '../../contexts';
+import type { useOrganizationList } from '@clerk/shared/react';
 
 export const organizationListParams = {
   userMemberships: {
@@ -11,4 +11,4 @@ export const organizationListParams = {
     infinite: true,
     status: ['pending', 'accepted'],
   },
-} satisfies Parameters<typeof useCoreOrganizationList>[0];
+} satisfies Parameters<typeof useOrganizationList>[0];
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx
index 357c1675092..3742cdd4185 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx
@@ -1,7 +1,7 @@
-import { useUser } from '@clerk/shared/react';
+import { useOrganization, useUser } from '@clerk/shared/react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { useOrganizationProfileContext } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { localizationKeys, Text } from '../../customizables';
 import {
@@ -19,7 +19,7 @@ import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 export const LeaveOrganizationPage = () => {
   const card = useCardState();
   const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { user } = useUser();
 
   if (!organization || !user) {
@@ -52,7 +52,7 @@ export const LeaveOrganizationPage = () => {
 export const DeleteOrganizationPage = () => {
   const card = useCardState();
   const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
 
   if (!organization) {
     return null;
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx
index 09a59d42ea2..f12e836c0d8 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx
@@ -1,8 +1,7 @@
-import { useUser } from '@clerk/shared/react';
+import { useOrganization, useUser } from '@clerk/shared/react';
 import type { OrganizationMembershipResource } from '@clerk/types';
 
 import { Gate } from '../../common/Gate';
-import { useCoreOrganization } from '../../contexts';
 import { Badge, localizationKeys, Td, Text } from '../../customizables';
 import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
 import { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
@@ -18,7 +17,7 @@ const membershipsParams = {
 
 export const ActiveMembersList = () => {
   const card = useCardState();
-  const { organization, memberships } = useCoreOrganization(membershipsParams);
+  const { organization, memberships } = useOrganization(membershipsParams);
 
   const { options, isLoading: loadingRoles } = useFetchRoles();
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/AddDomainPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/AddDomainPage.tsx
index af8c2b502b0..076d450893c 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/AddDomainPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/AddDomainPage.tsx
@@ -1,6 +1,7 @@
+import { useOrganization } from '@clerk/shared/react';
 import React from 'react';
 
-import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
 import { useRouter } from '../../router';
@@ -13,7 +14,7 @@ export const AddDomainPage = withCardStateProvider(() => {
   const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle');
   const breadcrumbTitle = localizationKeys('organizationProfile.profilePage.domainSection.title');
   const card = useCardState();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { navigate } = useRouter();
 
   const nameField = useFormControl('name', '', {
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx
index b1178894ba1..8fc7e3bb509 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx
@@ -1,3 +1,4 @@
+import { useOrganization } from '@clerk/shared/react';
 import type {
   GetDomainsParams,
   OrganizationDomainResource,
@@ -8,7 +9,6 @@ import React, { useMemo } from 'react';
 
 import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils';
 import { useGate, withGate } from '../../common';
-import { useCoreOrganization } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { Box, Col, descriptors, localizationKeys, Spinner } from '../../customizables';
 import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements';
@@ -81,7 +81,7 @@ const DomainListDotMenu = ({
 export const DomainList = withGate(
   (props: DomainListProps) => {
     const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
-    const { organization, domains } = useCoreOrganization({
+    const { organization, domains } = useOrganization({
       domains: {
         infinite: true,
         ...rest,
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx
index 938e377b26f..275317b146c 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx
@@ -1,9 +1,9 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
+import { useOrganization } from '@clerk/shared/react';
 import type { ClerkAPIError, MembershipRole } from '@clerk/types';
 import type { FormEvent } from 'react';
 import { useState } from 'react';
 
-import { useCoreOrganization } from '../../contexts';
 import { Flex, Text } from '../../customizables';
 import { Form, FormButtonContainer, TagInput, useCardState } from '../../elements';
 import { useFetchRoles } from '../../hooks/useFetchRoles';
@@ -25,7 +25,7 @@ type InviteMembersFormProps = {
 export const InviteMembersForm = (props: InviteMembersFormProps) => {
   const { navigate } = useRouter();
   const { onSuccess, onReset = () => navigate('..'), resetButtonLabel } = props;
-  const { organization, invitations } = useCoreOrganization({
+  const { organization, invitations } = useOrganization({
     invitations: {
       pageSize: 10,
       keepPreviousData: true,
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersPage.tsx
index 4d442d65a93..7e42fd45430 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersPage.tsx
@@ -1,6 +1,8 @@
+import { useOrganization } from '@clerk/shared/react';
+
 import { runIfFunctionOrReturn } from '../../../utils';
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { useOrganizationProfileContext } from '../../contexts';
 import { descriptors, Flex, localizationKeys, Text } from '../../customizables';
 import { ContentPage, IconCircle, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
 import { Email } from '../../icons';
@@ -13,7 +15,7 @@ export const InviteMembersPage = withCardStateProvider(() => {
   const subtitle = localizationKeys('organizationProfile.invitePage.subtitle');
   const card = useCardState();
   const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   //@ts-expect-error
   const { __unstable_manageBillingUrl, __unstable_manageBillingMembersLimit } = useOrganizationProfileContext();
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InvitedMembersList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InvitedMembersList.tsx
index b3cac6fcb6b..07f82f03d43 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InvitedMembersList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InvitedMembersList.tsx
@@ -1,6 +1,6 @@
+import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationInvitationResource } from '@clerk/types';
 
-import { useCoreOrganization } from '../../contexts';
 import { localizationKeys, Td, Text } from '../../customizables';
 import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
 import { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
@@ -16,7 +16,7 @@ const invitationsParams = {
 
 export const InvitedMembersList = () => {
   const card = useCardState();
-  const { organization, invitations } = useCoreOrganization(invitationsParams);
+  const { organization, invitations } = useOrganization(invitationsParams);
 
   const { options, isLoading: loadingRoles } = useFetchRoles();
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx
index 2e9d77e0633..b69bbe42614 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx
@@ -1,10 +1,12 @@
+import { useOrganization } from '@clerk/shared/react';
+
 import { runIfFunctionOrReturn } from '../../../utils';
-import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { useOrganizationProfileContext } from '../../contexts';
 import { Col, Flex, Link, Text } from '../../customizables';
 import { useRouter } from '../../router';
 
 export const MembershipWidget = () => {
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   //@ts-expect-error
   const { __unstable_manageBillingUrl, __unstable_manageBillingLabel, __unstable_manageBillingMembersLimit } =
     useOrganizationProfileContext();
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx
index b8f7a62f167..3955c079d29 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx
@@ -1,5 +1,7 @@
+import { useOrganization } from '@clerk/shared/react';
+
 import { NotificationCountBadge, useGate } from '../../common';
-import { useCoreOrganization, useEnvironment, useOrganizationProfileContext } from '../../contexts';
+import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
 import {
   CardAlert,
@@ -24,7 +26,7 @@ export const OrganizationMembers = withCardStateProvider(() => {
   const { isAuthorizedUser: canManageMemberships } = useGate({ permission: 'org:sys_memberships:manage' });
   const { isAuthorizedUser: canReadMemberships } = useGate({ permission: 'org:sys_memberships:read' });
   const isDomainsEnabled = organizationSettings?.domains?.enabled;
-  const { membershipRequests } = useCoreOrganization({
+  const { membershipRequests } = useOrganization({
     membershipRequests: isDomainsEnabled || undefined,
   });
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfile.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfile.tsx
index 6b856730520..a0ecc4ad258 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfile.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfile.tsx
@@ -1,8 +1,9 @@
+import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationProfileModalProps, OrganizationProfileProps } from '@clerk/types';
 import React from 'react';
 
 import { withOrganizationsEnabledGuard, withRedirectToHomeOrganizationGuard } from '../../common';
-import { ComponentContext, useCoreOrganization, withCoreUserGuard } from '../../contexts';
+import { ComponentContext, withCoreUserGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { ProfileCard, withCardStateProvider } from '../../elements';
 import { Route, Switch } from '../../router';
@@ -11,8 +12,7 @@ import { OrganizationProfileNavbar } from './OrganizationProfileNavbar';
 import { OrganizationProfileRoutes } from './OrganizationProfileRoutes';
 
 const _OrganizationProfile = (_: OrganizationProfileProps) => {
-  // TODO: Should this be a guard HOC?
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
 
   if (!organization) {
     return null;
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx
index ffc8dea5da2..0b7831f9693 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx
@@ -1,15 +1,16 @@
+import { useOrganization } from '@clerk/shared/react';
 import React from 'react';
 
+import { useOrganizationProfileContext } from '../../contexts';
 import { useGate } from '../../common';
 import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID } from '../../constants';
-import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
 import { Breadcrumbs, NavBar, NavbarContextProvider, OrganizationPreview } from '../../elements';
 import type { PropsOfComponent } from '../../styledSystem';
 
 export const OrganizationProfileNavbar = (
   props: React.PropsWithChildren<Pick<PropsOfComponent<typeof NavBar>, 'contentRef'>>,
 ) => {
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { pages } = useOrganizationProfileContext();
 
   const { isAuthorizedUser: allowMembersRoute } = useGate({
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx
index faca9fa90c3..4af15717685 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx
@@ -1,5 +1,7 @@
+import { useOrganization } from '@clerk/shared/react';
+
 import { AddBlockButton, BlockButton, Gate, useGate } from '../../common';
-import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { Col, descriptors, Flex, Icon, localizationKeys } from '../../customizables';
 import { Header, IconButton, NavbarMenuButtonRow, OrganizationPreview, ProfileSection } from '../../elements';
 import { Times } from '../../icons';
@@ -36,7 +38,7 @@ export const OrganizationSettings = () => {
 };
 
 const OrganizationProfileSection = () => {
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { navigate } = useRouter();
 
   if (!organization) {
@@ -67,7 +69,7 @@ const OrganizationProfileSection = () => {
 
 const OrganizationDomainsSection = () => {
   const { organizationSettings } = useEnvironment();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
 
   const { navigate } = useRouter();
 
@@ -97,7 +99,7 @@ const OrganizationDomainsSection = () => {
 };
 
 const OrganizationDangerSection = () => {
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { navigate } = useRouter();
   const { isAuthorizedUser: canDeleteOrganization } = useGate({ permission: 'org:sys_profile:delete' });
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ProfileSettingsPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ProfileSettingsPage.tsx
index 966ce440e19..d08e68572b9 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ProfileSettingsPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ProfileSettingsPage.tsx
@@ -1,8 +1,8 @@
+import { useOrganization } from '@clerk/shared/react';
 import React from 'react';
 
 import { isDefaultImage } from '../../../utils';
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
 import { handleError, useFormControl } from '../../utils';
@@ -14,7 +14,7 @@ export const ProfileSettingsPage = withCardStateProvider(() => {
   const subtitle = localizationKeys('organizationProfile.profilePage.subtitle');
   const card = useCardState();
   const [avatarChanged, setAvatarChanged] = React.useState(false);
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
 
   const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RemoveDomainPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RemoveDomainPage.tsx
index 50f0aaec492..23b950749d3 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RemoveDomainPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RemoveDomainPage.tsx
@@ -1,8 +1,9 @@
+import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationDomainResource } from '@clerk/types';
 import React from 'react';
 
 import { RemoveResourcePage } from '../../common';
-import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { descriptors, Flex, Spinner } from '../../customizables';
 import { useFetch } from '../../hooks';
 import { localizationKeys } from '../../localization';
@@ -11,7 +12,7 @@ import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 
 export const RemoveDomainPage = () => {
   const { organizationSettings } = useEnvironment();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { params } = useRouter();
 
   const ref = React.useRef<OrganizationDomainResource>();
@@ -27,7 +28,7 @@ export const RemoveDomainPage = () => {
     },
   );
 
-  const { domains } = useCoreOrganization({
+  const { domains } = useOrganization({
     domains: {
       infinite: true,
     },
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RequestToJoinList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RequestToJoinList.tsx
index 709cbd7043a..f24f7c7b7b3 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RequestToJoinList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RequestToJoinList.tsx
@@ -1,6 +1,6 @@
+import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationMembershipRequestResource } from '@clerk/types';
 
-import { useCoreOrganization } from '../../contexts';
 import { Button, Flex, localizationKeys, Td } from '../../customizables';
 import { useCardState, UserPreview, withCardStateProvider } from '../../elements';
 import { handleError } from '../../utils';
@@ -15,7 +15,7 @@ const membershipRequestsParams = {
 
 export const RequestToJoinList = () => {
   const card = useCardState();
-  const { organization, membershipRequests } = useCoreOrganization(membershipRequestsParams);
+  const { organization, membershipRequests } = useOrganization(membershipRequestsParams);
 
   if (!organization) {
     return null;
@@ -50,7 +50,7 @@ const RequestRow = withCardStateProvider(
   (props: { request: OrganizationMembershipRequestResource; onError: ReturnType<typeof useCardState>['setError'] }) => {
     const { request, onError } = props;
     const card = useCardState();
-    const { membership, membershipRequests } = useCoreOrganization(membershipRequestsParams);
+    const { membership, membershipRequests } = useOrganization(membershipRequestsParams);
 
     const onAccept = () => {
       if (!membership || !membershipRequests) {
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx
index 84e71195441..96f29ef0cfb 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx
@@ -1,3 +1,4 @@
+import { useOrganization } from '@clerk/shared/react';
 import type {
   OrganizationDomainResource,
   OrganizationEnrollmentMode,
@@ -5,7 +6,7 @@ import type {
 } from '@clerk/types';
 
 import { CalloutWithAction, useGate } from '../../common';
-import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { Col, descriptors, Flex, localizationKeys, Spinner, Text } from '../../customizables';
 import {
@@ -99,7 +100,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
   const card = useCardState();
   const { organizationSettings } = useEnvironment();
 
-  const { membership, organization, domains } = useCoreOrganization({
+  const { membership, organization, domains } = useOrganization({
     domains: {
       infinite: true,
     },
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx
index c68fba57a43..07710ca8f51 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx
@@ -1,7 +1,8 @@
+import { useOrganization } from '@clerk/shared/react';
 import React, { useRef } from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';
 import type { VerificationCodeCardProps } from '../../elements';
 import {
@@ -21,7 +22,7 @@ import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 export const VerifyDomainPage = withCardStateProvider(() => {
   const card = useCardState();
   const { organizationSettings } = useEnvironment();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { params, navigate } = useRouter();
 
   const { data: domain, status: domainStatus } = useFetch(organization?.getDomain, {
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index 3fac21e57e1..83cb346687e 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -1,16 +1,10 @@
-import { useUser } from '@clerk/shared/react';
+import { useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
 import React from 'react';
 
 import { runIfFunctionOrReturn } from '../../../utils';
 import { NotificationCountBadge, withGate } from '../../common';
-import {
-  useCoreClerk,
-  useCoreOrganization,
-  useCoreOrganizationList,
-  useEnvironment,
-  useOrganizationSwitcherContext,
-} from '../../contexts';
+import { useCoreClerk, useEnvironment, useOrganizationSwitcherContext } from '../../contexts';
 import { descriptors, localizationKeys } from '../../customizables';
 import {
   Action,
@@ -33,8 +27,8 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
     const { close, ...rest } = props;
     const card = useCardState();
     const { openOrganizationProfile, openCreateOrganization } = useCoreClerk();
-    const { organization: currentOrg } = useCoreOrganization();
-    const { isLoaded, setActive } = useCoreOrganizationList();
+    const { organization: currentOrg } = useOrganization();
+    const { isLoaded, setActive } = useOrganizationList();
     const router = useRouter();
     const {
       hidePersonal,
@@ -185,7 +179,7 @@ const NotificationCountBadgeManageButton = withGate(
 
     const isDomainsEnabled = organizationSettings?.domains?.enabled;
 
-    const { membershipRequests } = useCoreOrganization({
+    const { membershipRequests } = useOrganization({
       membershipRequests: isDomainsEnabled || undefined,
     });
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index 362702aaade..6119738cf5c 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -1,13 +1,8 @@
-import { useUser } from '@clerk/shared/react';
+import { useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';
 import { forwardRef } from 'react';
 
 import { NotificationCountBadge, useGate } from '../../common';
-import {
-  useCoreOrganization,
-  useCoreOrganizationList,
-  useEnvironment,
-  useOrganizationSwitcherContext,
-} from '../../contexts';
+import { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';
 import { Button, descriptors, Icon, localizationKeys } from '../../customizables';
 import { OrganizationPreview, PersonalWorkspacePreview, withAvatarShimmer } from '../../elements';
 import { Selector } from '../../icons';
@@ -23,7 +18,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
     const { sx, ...rest } = props;
 
     const { user } = useUser();
-    const { organization } = useCoreOrganization();
+    const { organization } = useOrganization();
     const { hidePersonal } = useOrganizationSwitcherContext();
 
     if (!user) {
@@ -83,13 +78,13 @@ const NotificationCountBadgeSwitcherTrigger = () => {
   /**
    * Prefetch user invitations and suggestions
    */
-  const { userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams);
+  const { userInvitations, userSuggestions } = useOrganizationList(organizationListParams);
   const { organizationSettings } = useEnvironment();
   const { isAuthorizedUser: canAcceptRequests } = useGate({
     permission: 'org:sys_memberships:manage',
   });
   const isDomainsEnabled = organizationSettings?.domains?.enabled;
-  const { membershipRequests } = useCoreOrganization({
+  const { membershipRequests } = useOrganization({
     membershipRequests: (isDomainsEnabled && canAcceptRequests) || undefined,
   });
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
index bf8f1ab02f1..fd7ca0e25f2 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -1,8 +1,8 @@
+import { useOrganizationList } from '@clerk/shared/react';
 import type { OrganizationSuggestionResource, UserOrganizationInvitationResource } from '@clerk/types';
 import type { PropsWithChildren } from 'react';
 
 import { InfiniteListSpinner } from '../../common';
-import { useCoreOrganizationList } from '../../contexts';
 import { Box, Button, descriptors, Flex, localizationKeys, Text } from '../../customizables';
 import { Actions, OrganizationPreview, useCardState, withCardStateProvider } from '../../elements';
 import { useInView } from '../../hooks';
@@ -12,7 +12,7 @@ import { handleError } from '../../utils';
 import { organizationListParams, populateCacheRemoveItem, populateCacheUpdateItem } from './utils';
 
 const useFetchInvitations = () => {
-  const { userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams);
+  const { userInvitations, userSuggestions } = useOrganizationList(organizationListParams);
 
   const { ref } = useInView({
     threshold: 0,
@@ -37,7 +37,7 @@ const useFetchInvitations = () => {
 
 const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) => {
   const card = useCardState();
-  const { userSuggestions } = useCoreOrganizationList({
+  const { userSuggestions } = useOrganizationList({
     userSuggestions: organizationListParams.userSuggestions,
   });
 
@@ -74,7 +74,7 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
 
 const AcceptRejectInvitationButtons = (props: UserOrganizationInvitationResource) => {
   const card = useCardState();
-  const { userInvitations } = useCoreOrganizationList({
+  const { userInvitations } = useOrganizationList({
     userInvitations: organizationListParams.userInvitations,
   });
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx
index 28583991265..5c425f48edf 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx
@@ -1,13 +1,9 @@
-import { useUser } from '@clerk/shared/react';
+import { useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
 import React from 'react';
 
 import { InfiniteListSpinner } from '../../common';
-import {
-  useCoreOrganization,
-  useCoreOrganizationList,
-  useOrganizationSwitcherContext,
-} from '../../contexts';
+import { useOrganizationSwitcherContext } from '../../contexts';
 import { Box, descriptors, localizationKeys } from '../../customizables';
 import { OrganizationPreview, PersonalWorkspacePreview, PreviewButton } from '../../elements';
 import { useInView } from '../../hooks';
@@ -21,7 +17,7 @@ export type UserMembershipListProps = {
 };
 
 const useFetchMemberships = () => {
-  const { userMemberships } = useCoreOrganizationList({
+  const { userMemberships } = useOrganizationList({
     userMemberships: organizationListParams.userMemberships,
   });
 
@@ -46,7 +42,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
   const { onPersonalWorkspaceClick, onOrganizationClick } = props;
 
   const { hidePersonal } = useOrganizationSwitcherContext();
-  const { organization: currentOrg } = useCoreOrganization();
+  const { organization: currentOrg } = useOrganization();
   const { ref, userMemberships } = useFetchMemberships();
   const { user } = useUser();
 
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/utils.ts b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/utils.ts
index 38c62349587..345d6825d00 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/utils.ts
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/utils.ts
@@ -1,7 +1,6 @@
+import type { useOrganizationList } from '@clerk/shared/react';
 import type { ClerkPaginatedResponse } from '@clerk/types';
 
-import type { useCoreOrganizationList } from '../../contexts';
-
 export const organizationListParams = {
   userMemberships: {
     infinite: true,
@@ -13,7 +12,7 @@ export const organizationListParams = {
     infinite: true,
     status: ['pending', 'accepted'],
   },
-} satisfies Parameters<typeof useCoreOrganizationList>[0];
+} satisfies Parameters<typeof useOrganizationList>[0];
 
 export const populateCacheUpdateItem = <T extends { id: string }>(
   updatedItem: T,
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx
index d75b9b9dfbf..2518623fbe8 100644
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx
+++ b/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx
@@ -1,10 +1,9 @@
-import { SessionContext } from '@clerk/shared/react';
+import { OrganizationProvider, SessionContext } 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 { CoreOrganizationProvider } from './CoreOrganizationContext';
 import { CoreUserContext } from './CoreUserContext';
 import { assertClerkSingletonExists } from './utils';
 
@@ -48,12 +47,12 @@ export function CoreClerkContextWrapper(props: CoreClerkContextWrapperProps): JS
     <CoreClerkContext.Provider value={clerkCtx}>
       <CoreClientContext.Provider value={clientCtx}>
         <SessionContext.Provider value={sessionCtx}>
-          <CoreOrganizationProvider
+          <OrganizationProvider
             {...organizationCtx.value}
             swrConfig={props.swrConfig}
           >
             <CoreUserContext.Provider value={userCtx}>{props.children}</CoreUserContext.Provider>
-          </CoreOrganizationProvider>
+          </OrganizationProvider>
         </SessionContext.Provider>
       </CoreClientContext.Provider>
     </CoreClerkContext.Provider>
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreOrganizationContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreOrganizationContext.tsx
index 4adc717cca2..e69de29bb2d 100644
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreOrganizationContext.tsx
+++ b/packages/clerk-js/src/ui.retheme/contexts/CoreOrganizationContext.tsx
@@ -1,5 +0,0 @@
-import { OrganizationProvider, useOrganization, useOrganizationList } from '@clerk/shared/react';
-
-export const CoreOrganizationProvider = OrganizationProvider;
-export const useCoreOrganization = useOrganization;
-export const useCoreOrganizationList = useOrganizationList;
diff --git a/packages/clerk-js/src/ui.retheme/contexts/index.ts b/packages/clerk-js/src/ui.retheme/contexts/index.ts
index 5a112f7cbdc..98305c394a5 100644
--- a/packages/clerk-js/src/ui.retheme/contexts/index.ts
+++ b/packages/clerk-js/src/ui.retheme/contexts/index.ts
@@ -1,6 +1,5 @@
 export * from './CoreClerkContext';
 export * from './CoreUserContext';
-export * from './CoreOrganizationContext';
 export * from './ClerkUIComponentsContext';
 export * from './EnvironmentContext';
 export * from './OptionsContext';
diff --git a/packages/clerk-js/src/ui.retheme/hooks/__tests__/useCoreOrganization.test.tsx b/packages/clerk-js/src/ui.retheme/hooks/__tests__/useCoreOrganization.test.tsx
index 0ef5557dc96..d02ef9ef9f3 100644
--- a/packages/clerk-js/src/ui.retheme/hooks/__tests__/useCoreOrganization.test.tsx
+++ b/packages/clerk-js/src/ui.retheme/hooks/__tests__/useCoreOrganization.test.tsx
@@ -1,18 +1,18 @@
+import { useOrganization } from '@clerk/shared/react';
 import { describe } from '@jest/globals';
 
-import { act, renderHook, waitFor } from '../../../testUtils';
+import { act, bindCreateFixtures, renderHook, waitFor } from '../../../testUtils';
 import {
   createFakeDomain,
   createFakeOrganizationMembershipRequest,
 } from '../../components/OrganizationProfile/__tests__/utils';
 import { createFakeUserOrganizationMembership } from '../../components/OrganizationSwitcher/__tests__/utlis';
-import { useCoreOrganization } from '../../contexts';
 import { bindCreateFixtures } from '../../utils/test/createFixtures';
 
 const { createFixtures } = bindCreateFixtures('OrganizationProfile');
 
 const defaultRenderer = () =>
-  useCoreOrganization({
+  useOrganization({
     domains: {
       pageSize: 2,
     },
@@ -46,7 +46,7 @@ describe('useOrganization', () => {
       });
     });
 
-    const { result } = renderHook(useCoreOrganization, { wrapper });
+    const { result } = renderHook(() => useOrganization(), { wrapper });
 
     expect(result.current.isLoaded).toBe(true);
     expect(result.current.organization).toBeDefined();
@@ -71,7 +71,7 @@ describe('useOrganization', () => {
       });
     });
 
-    const { result } = renderHook(useCoreOrganization, { wrapper });
+    const { result } = renderHook(() => useOrganization(), { wrapper });
 
     expect(result.current.isLoaded).toBe(true);
     expect(result.current.organization).toBeNull();
diff --git a/packages/clerk-js/src/ui.retheme/hooks/__tests__/useCoreOrganizationList.test.tsx b/packages/clerk-js/src/ui.retheme/hooks/__tests__/useCoreOrganizationList.test.tsx
index dbbc7d9dace..e097b0ed16a 100644
--- a/packages/clerk-js/src/ui.retheme/hooks/__tests__/useCoreOrganizationList.test.tsx
+++ b/packages/clerk-js/src/ui.retheme/hooks/__tests__/useCoreOrganizationList.test.tsx
@@ -1,3 +1,4 @@
+import { useOrganizationList } from '@clerk/shared/react';
 import { describe } from '@jest/globals';
 
 import { act, renderHook, waitFor } from '../../../testUtils';
@@ -6,13 +7,12 @@ import {
   createFakeUserOrganizationMembership,
   createFakeUserOrganizationSuggestion,
 } from '../../components/OrganizationSwitcher/__tests__/utlis';
-import { useCoreOrganizationList } from '../../contexts';
 import { bindCreateFixtures } from '../../utils/test/createFixtures';
 
 const { createFixtures } = bindCreateFixtures('OrganizationSwitcher');
 
 const defaultRenderer = () =>
-  useCoreOrganizationList({
+  useOrganizationList({
     userMemberships: {
       pageSize: 2,
     },
@@ -34,8 +34,7 @@ describe('useOrganizationList', () => {
       });
     });
 
-    const { result } = renderHook(() => useCoreOrganizationList(), { wrapper });
-
+    const { result } = renderHook(() => useOrganizationList(), { wrapper });
     expect(result.current.isLoaded).toBe(true);
     expect(result.current.setActive).toBeDefined();
     expect(result.current.createOrganization).toBeDefined();
@@ -214,7 +213,7 @@ describe('useOrganizationList', () => {
       );
       const { result } = renderHook(
         () =>
-          useCoreOrganizationList({
+          useOrganizationList({
             userMemberships: {
               pageSize: 2,
               infinite: true,
@@ -436,7 +435,7 @@ describe('useOrganizationList', () => {
       );
       const { result } = renderHook(
         () =>
-          useCoreOrganizationList({
+          useOrganizationList({
             userInvitations: {
               pageSize: 2,
               infinite: true,
@@ -626,7 +625,7 @@ describe('useOrganizationList', () => {
       );
       const { result } = renderHook(
         () =>
-          useCoreOrganizationList({
+          useOrganizationList({
             userSuggestions: {
               pageSize: 2,
               infinite: true,
diff --git a/packages/clerk-js/src/ui.retheme/hooks/useFetchRoles.ts b/packages/clerk-js/src/ui.retheme/hooks/useFetchRoles.ts
index cbe0f32499f..b685c4337d8 100644
--- a/packages/clerk-js/src/ui.retheme/hooks/useFetchRoles.ts
+++ b/packages/clerk-js/src/ui.retheme/hooks/useFetchRoles.ts
@@ -1,4 +1,5 @@
-import { useCoreOrganization } from '../contexts';
+import { useOrganization } from '@clerk/shared/react';
+
 import { useLocalizations } from '../localization';
 import { customRoleLocalizationKey, roleLocalizationKey } from '../utils';
 import { useFetch } from './useFetch';
@@ -11,7 +12,7 @@ const getRolesParams = {
   pageSize: 20,
 };
 export const useFetchRoles = () => {
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { data, status } = useFetch(organization?.getRoles, getRolesParams);
 
   return {
diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts
index 52d6f34a6e4..feae53f443c 100644
--- a/packages/react/src/hooks/index.ts
+++ b/packages/react/src/hooks/index.ts
@@ -1,8 +1,6 @@
 export { useAuth } from './useAuth';
 export { useClerk } from './useClerk';
 export { useEmailLink } from './useEmailLink';
-export { useOrganization } from './useOrganization';
-export { useOrganizationList } from './useOrganizationList';
 export { useSignIn } from './useSignIn';
 export { useSignUp } from './useSignUp';
-export { useSessionList, useUser, useSession } from '@clerk/shared/react';
+export { useOrganization, useOrganizationList, useSessionList, useUser, useSession } from '@clerk/shared/react';
diff --git a/packages/react/src/hooks/useOrganization.ts b/packages/react/src/hooks/useOrganization.ts
deleted file mode 100644
index 0cf70872ecb..00000000000
--- a/packages/react/src/hooks/useOrganization.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useOrganization } from '@clerk/shared/react';
diff --git a/packages/react/src/hooks/useOrganizationList.ts b/packages/react/src/hooks/useOrganizationList.ts
deleted file mode 100644
index 905ba6b1e57..00000000000
--- a/packages/react/src/hooks/useOrganizationList.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useOrganizationList } from '@clerk/shared/react';

From f4bb03bc37bbd1e390f9def3bdac09dd06598395 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 10 Nov 2023 18:31:33 +0200
Subject: [PATCH 3/8] chore(clerk-js,clerk-react,shared): Replace useCoreClerk
 with useClerk

---
 .../contexts/ClerkUIComponentsContext.tsx     | 11 +++++-----
 .../ui.retheme/contexts/CoreClerkContext.tsx  |  3 ---
 .../contexts/CoreClerkContextWrapper.tsx      | 21 +++++++++++--------
 .../ui.retheme/contexts/CoreClientContext.tsx |  6 ++----
 .../contexts/CoreOrganizationContext.tsx      |  0
 .../contexts/CoreSessionContext.tsx           |  9 ++++----
 .../ui.retheme/contexts/CoreUserContext.tsx   | 13 ++++++------
 .../clerk-js/src/ui.retheme/contexts/index.ts |  1 -
 .../src/contexts/ClerkContextProvider.tsx     |  7 ++-----
 packages/react/src/contexts/ClientContext.tsx |  1 -
 .../src/contexts/IsomorphicClerkContext.tsx   |  5 ++++-
 packages/react/src/hooks/index.ts             | 10 +++++++--
 packages/react/src/hooks/useAuth.ts           |  3 +--
 packages/react/src/hooks/useClerk.ts          | 10 ---------
 packages/react/src/hooks/useSignIn.ts         |  2 +-
 packages/react/src/hooks/useSignUp.ts         |  2 +-
 packages/shared/src/react/hooks/index.ts      |  1 +
 packages/shared/src/react/hooks/useClerk.ts   |  5 +++++
 18 files changed, 54 insertions(+), 56 deletions(-)
 delete mode 100644 packages/clerk-js/src/ui.retheme/contexts/CoreClerkContext.tsx
 delete mode 100644 packages/clerk-js/src/ui.retheme/contexts/CoreOrganizationContext.tsx
 delete mode 100644 packages/react/src/hooks/useClerk.ts
 create mode 100644 packages/shared/src/react/hooks/useClerk.ts

diff --git a/packages/clerk-js/src/ui.retheme/contexts/ClerkUIComponentsContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/ClerkUIComponentsContext.tsx
index d2815dc85a7..e3c6a73f9ee 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 66b28dd85fa..00000000000
--- 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 2518623fbe8..78b186bba95 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 (
-    <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>
   );
 }
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx
index 125d3149070..3212a6f8ac5 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 e69de29bb2d..00000000000
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx
index 526981d8130..ecdd4066280 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<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)} />;
   };
 
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx
index c64420c45fd..94a32ca1715 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<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)} />;
   };
 
diff --git a/packages/clerk-js/src/ui.retheme/contexts/index.ts b/packages/clerk-js/src/ui.retheme/contexts/index.ts
index 98305c394a5..b5aae8b35da 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 773c8e6a02c..9cd14735ebf 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
     <IsomorphicClerkContext.Provider value={clerkCtx}>
       <ClientContext.Provider value={clientCtx}>
         <SessionContext.Provider value={sessionCtx}>
diff --git a/packages/react/src/contexts/ClientContext.tsx b/packages/react/src/contexts/ClientContext.tsx
index 7dd27732e1a..e69de29bb2d 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 fc2476711ba..9b03ebd06bd 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 feae53f443c..043d3011038 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 222aee40a36..d1f735fea5a 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';
 
@@ -124,7 +123,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 45849ac8409..00000000000
--- 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 b607c739e3a..73885d47cc5 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 0b0222879e4..1398773b2a9 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/shared/src/react/hooks/index.ts b/packages/shared/src/react/hooks/index.ts
index bfda9d97fba..b0d9779bc8b 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 00000000000..505cab5e80a
--- /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;

From 0bfb17cfc698d40120c1f8ac26478c388cfa709c Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 16 Nov 2023 11:52:52 +0200
Subject: [PATCH 4/8] chore(clerk-js): Migrate usage of useCoreClerk to
 useClerk

---
 .../clerk-js/src/ui.retheme/common/EmailLinkVerify.tsx |  5 +++--
 .../clerk-js/src/ui.retheme/common/SSOCallback.tsx     |  4 ++--
 .../src/ui.retheme/common/withRedirectToHome.tsx       |  5 +++--
 .../CreateOrganization/CreateOrganizationPage.tsx      |  6 ++++--
 .../components/ImpersonationFab/ImpersonationFab.tsx   |  6 +++---
 .../components/OrganizationList/UserInvitationList.tsx |  5 ++---
 .../OrganizationSwitcherPopover.tsx                    |  6 +++---
 .../src/ui.retheme/components/SignIn/SignIn.tsx        |  5 +++--
 .../components/SignIn/SignInFactorOneCodeForm.tsx      |  7 ++++---
 .../components/SignIn/SignInFactorOneEmailLinkCard.tsx |  7 ++++---
 .../components/SignIn/SignInFactorOnePasswordCard.tsx  |  7 ++++---
 .../SignIn/SignInFactorTwoBackupCodeCard.tsx           |  7 ++++---
 .../components/SignIn/SignInFactorTwoCodeForm.tsx      |  7 ++++---
 .../components/SignIn/SignInSocialButtons.tsx          |  5 +++--
 .../src/ui.retheme/components/SignIn/SignInStart.tsx   |  5 +++--
 .../src/ui.retheme/components/SignUp/SignUp.tsx        |  5 +++--
 .../ui.retheme/components/SignUp/SignUpContinue.tsx    |  5 +++--
 .../components/SignUp/SignUpEmailLinkCard.tsx          |  5 +++--
 .../components/SignUp/SignUpSocialButtons.tsx          |  5 +++--
 .../src/ui.retheme/components/SignUp/SignUpStart.tsx   |  7 ++++---
 .../components/SignUp/SignUpVerificationCodeForm.tsx   |  5 +++--
 .../components/UserButton/useMultisessionActions.tsx   |  5 ++---
 .../ui.retheme/components/UserProfile/DeletePage.tsx   |  6 +++---
 .../src/ui.retheme/elements/PhoneInput/PhoneInput.tsx  |  4 ++--
 .../hooks/__tests__/useSupportEmail.test.tsx           | 10 +++++-----
 .../src/ui.retheme/hooks/useSetSessionWithTimeout.ts   |  5 +++--
 .../clerk-js/src/ui.retheme/hooks/useSupportEmail.ts   |  5 +++--
 .../src/ui.retheme/localization/applyTokensToString.ts |  6 ++++--
 packages/clerk-js/src/ui.retheme/router/BaseRouter.tsx |  4 ++--
 packages/clerk-js/src/ui.retheme/router/PathRouter.tsx |  4 ++--
 packages/clerk-js/src/ui.retheme/router/Route.tsx      |  4 ++--
 .../ui.retheme/router/__tests__/HashRouter.test.tsx    |  4 ++--
 .../ui.retheme/router/__tests__/PathRouter.test.tsx    |  4 ++--
 .../src/ui.retheme/router/__tests__/Switch.test.tsx    |  4 ++--
 .../ui.retheme/router/__tests__/VirtualRouter.test.tsx |  4 ++--
 35 files changed, 104 insertions(+), 84 deletions(-)

diff --git a/packages/clerk-js/src/ui.retheme/common/EmailLinkVerify.tsx b/packages/clerk-js/src/ui.retheme/common/EmailLinkVerify.tsx
index ecf1bb13dd3..5aec89f70ba 100644
--- a/packages/clerk-js/src/ui.retheme/common/EmailLinkVerify.tsx
+++ b/packages/clerk-js/src/ui.retheme/common/EmailLinkVerify.tsx
@@ -1,9 +1,10 @@
 import { EmailLinkErrorCode, isEmailLinkError } from '@clerk/shared/error';
+import { useClerk } from '@clerk/shared/react';
 import React from 'react';
 
 import type { VerificationStatus } from '../../utils';
 import { completeSignUpFlow } from '../../utils';
-import { useCoreClerk, useCoreSignUp } from '../contexts';
+import { useCoreSignUp } from '../contexts';
 import type { LocalizationKey } from '../localization';
 import { useRouter } from '../router';
 import { sleep } from '../utils';
@@ -19,7 +20,7 @@ export type EmailLinkVerifyProps = {
 
 export const EmailLinkVerify = (props: EmailLinkVerifyProps) => {
   const { redirectUrl, redirectUrlComplete, verifyEmailPath, verifyPhonePath } = props;
-  const { handleEmailLinkVerification } = useCoreClerk();
+  const { handleEmailLinkVerification } = useClerk();
   const { navigate } = useRouter();
   const signUp = useCoreSignUp();
   const [verificationStatus, setVerificationStatus] = React.useState<VerificationStatus>('loading');
diff --git a/packages/clerk-js/src/ui.retheme/common/SSOCallback.tsx b/packages/clerk-js/src/ui.retheme/common/SSOCallback.tsx
index 1284fed623b..dfa75aeaa1c 100644
--- a/packages/clerk-js/src/ui.retheme/common/SSOCallback.tsx
+++ b/packages/clerk-js/src/ui.retheme/common/SSOCallback.tsx
@@ -1,7 +1,7 @@
+import { useClerk } from '@clerk/shared/react';
 import type { HandleOAuthCallbackParams, HandleSamlCallbackParams } from '@clerk/types';
 import React from 'react';
 
-import { useCoreClerk } from '../contexts';
 import { Flow } from '../customizables';
 import { Card, CardAlert, LoadingCardContainer, useCardState, withCardStateProvider } from '../elements';
 import { useRouter } from '../router';
@@ -16,7 +16,7 @@ export const SSOCallback = withCardStateProvider<HandleOAuthCallbackParams | Han
 });
 
 export const SSOCallbackCard = (props: HandleOAuthCallbackParams | HandleSamlCallbackParams) => {
-  const { handleRedirectCallback } = useCoreClerk();
+  const { handleRedirectCallback } = useClerk();
   const { navigate } = useRouter();
   const card = useCardState();
 
diff --git a/packages/clerk-js/src/ui.retheme/common/withRedirectToHome.tsx b/packages/clerk-js/src/ui.retheme/common/withRedirectToHome.tsx
index ffaad55be73..9309dfe231d 100644
--- a/packages/clerk-js/src/ui.retheme/common/withRedirectToHome.tsx
+++ b/packages/clerk-js/src/ui.retheme/common/withRedirectToHome.tsx
@@ -1,10 +1,11 @@
+import { useClerk } from '@clerk/shared/react';
 import type { ComponentType } from 'react';
 import React from 'react';
 
 import { warnings } from '../../core/warnings';
 import type { ComponentGuard } from '../../utils';
 import { noOrganizationExists, noUserExists, sessionExistsAndSingleSessionModeEnabled } from '../../utils';
-import { useCoreClerk, useEnvironment, useOptions } from '../contexts';
+import { useEnvironment, useOptions } from '../contexts';
 import { useRouter } from '../router';
 import type { AvailableComponentProps } from '../types';
 
@@ -18,7 +19,7 @@ function withRedirectToHome<P extends AvailableComponentProps>(
 
   const HOC = (props: P) => {
     const { navigate } = useRouter();
-    const clerk = useCoreClerk();
+    const clerk = useClerk();
     const environment = useEnvironment();
     const options = useOptions();
 
diff --git a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationPage.tsx b/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationPage.tsx
index 71f3f17cfcc..6b4c335cc66 100644
--- a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationPage.tsx
@@ -1,11 +1,13 @@
-import { useCoreClerk, useCreateOrganizationContext } from '../../contexts';
+import { useClerk } from '@clerk/shared/react';
+
+import { useCreateOrganizationContext } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { withCardStateProvider } from '../../elements';
 import { CreateOrganizationForm } from './CreateOrganizationForm';
 
 export const CreateOrganizationPage = withCardStateProvider(() => {
   const title = localizationKeys('createOrganization.title');
-  const { closeCreateOrganization } = useCoreClerk();
+  const { closeCreateOrganization } = useClerk();
 
   const { mode, navigateAfterCreateOrganization, skipInvitationScreen } = useCreateOrganizationContext();
 
diff --git a/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx b/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx
index 0e69e688f57..d5e85e94646 100644
--- a/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx
@@ -1,9 +1,9 @@
-import { useSession } from '@clerk/shared/react';
+import { useClerk, useSession } from '@clerk/shared/react';
 import type { PointerEventHandler } from 'react';
 import React, { useEffect, useRef } from 'react';
 
 import { getFullName, getIdentifier } from '../../../utils/user';
-import { useCoreClerk, withCoreUserGuard } from '../../contexts';
+import { withCoreUserGuard } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import {
   Col,
@@ -59,7 +59,7 @@ type FabContentProps = { title: LocalizationKey; signOutText: LocalizationKey };
 
 const FabContent = ({ title, signOutText }: FabContentProps) => {
   const { session } = useSession();
-  const { signOut } = useCoreClerk();
+  const { signOut } = useClerk();
 
   return (
     <Col
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserInvitationList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserInvitationList.tsx
index def987a0f85..8eddb100f8b 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserInvitationList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserInvitationList.tsx
@@ -1,8 +1,7 @@
-import { useOrganizationList } from '@clerk/shared/react';
+import { useClerk, useOrganizationList } from '@clerk/shared/react';
 import type { OrganizationResource, UserOrganizationInvitationResource } from '@clerk/types';
 import { useState } from 'react';
 
-import { useCoreClerk } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { useCardState, withCardStateProvider } from '../../elements';
 import { handleError } from '../../utils';
@@ -25,7 +24,7 @@ export const AcceptRejectInvitationButtons = (props: { onAccept: () => void }) =
 
 export const InvitationPreview = withCardStateProvider((props: UserOrganizationInvitationResource) => {
   const card = useCardState();
-  const { getOrganization } = useCoreClerk();
+  const { getOrganization } = useClerk();
   const [acceptedOrganization, setAcceptedOrganization] = useState<OrganizationResource | null>(null);
   const { userInvitations } = useOrganizationList({
     userInvitations: organizationListParams.userInvitations,
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index 83cb346687e..302ad9ba7a4 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -1,10 +1,10 @@
-import { useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';
+import { useClerk, useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
 import React from 'react';
 
 import { runIfFunctionOrReturn } from '../../../utils';
 import { NotificationCountBadge, withGate } from '../../common';
-import { useCoreClerk, useEnvironment, useOrganizationSwitcherContext } from '../../contexts';
+import { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';
 import { descriptors, localizationKeys } from '../../customizables';
 import {
   Action,
@@ -26,7 +26,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
   (props, ref) => {
     const { close, ...rest } = props;
     const card = useCardState();
-    const { openOrganizationProfile, openCreateOrganization } = useCoreClerk();
+    const { openOrganizationProfile, openCreateOrganization } = useClerk();
     const { organization: currentOrg } = useOrganization();
     const { isLoaded, setActive } = useOrganizationList();
     const router = useRouter();
diff --git a/packages/clerk-js/src/ui.retheme/components/SignIn/SignIn.tsx b/packages/clerk-js/src/ui.retheme/components/SignIn/SignIn.tsx
index 424de26d85a..7f5d8594e21 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignIn.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/SignIn/SignIn.tsx
@@ -1,8 +1,9 @@
+import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
 import { SignInEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
-import { ComponentContext, useCoreClerk, useSignInContext, withCoreSessionSwitchGuard } from '../../contexts';
+import { ComponentContext, useSignInContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
 import { ResetPassword } from './ResetPassword';
@@ -14,7 +15,7 @@ import { SignInSSOCallback } from './SignInSSOCallback';
 import { SignInStart } from './SignInStart';
 
 function RedirectToSignIn() {
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
   React.useEffect(() => {
     void clerk.redirectToSignIn();
   }, []);
diff --git a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOneCodeForm.tsx b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOneCodeForm.tsx
index 8c31f33718e..852cb3166a8 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOneCodeForm.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOneCodeForm.tsx
@@ -1,9 +1,10 @@
 import { isUserLockedError } from '@clerk/shared';
+import { useClerk } from '@clerk/shared/react';
 import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/types';
 import React from 'react';
 
 import { clerkInvalidFAPIResponse } from '../../../core/errors';
-import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useSignInContext } from '../../contexts';
 import type { VerificationCodeCardProps } from '../../elements';
 import { useCardState, VerificationCodeCard } from '../../elements';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
@@ -33,9 +34,9 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
   const card = useCardState();
   const { navigate } = useRouter();
   const { navigateAfterSignIn } = useSignInContext();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const supportEmail = useSupportEmail();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   const goBack = () => {
     return navigate('../');
diff --git a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOneEmailLinkCard.tsx b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOneEmailLinkCard.tsx
index dea2ef6134a..848196556b4 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOneEmailLinkCard.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOneEmailLinkCard.tsx
@@ -1,10 +1,11 @@
 import { isUserLockedError } from '@clerk/shared/error';
+import { useClerk } from '@clerk/shared/react';
 import type { EmailLinkFactor, SignInResource } from '@clerk/types';
 import React from 'react';
 
 import { EmailLinkStatusCard } from '../../common';
 import { buildEmailLinkRedirectUrl } from '../../common/redirects';
-import { useCoreClerk, useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
 import { Flow, localizationKeys, useLocalizations } from '../../customizables';
 import type { VerificationCodeCardProps } from '../../elements';
 import { VerificationLinkCard } from '../../elements';
@@ -27,10 +28,10 @@ export const SignInFactorOneEmailLinkCard = (props: SignInFactorOneEmailLinkCard
   const { signInUrl } = useEnvironment().displayConfig;
   const { navigate } = useRouter();
   const { navigateAfterSignIn } = useSignInContext();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const { startEmailLinkFlow, cancelEmailLinkFlow } = useEmailLink(signIn);
   const [showVerifyModal, setShowVerifyModal] = React.useState(false);
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   React.useEffect(() => {
     void startEmailLinkVerification();
diff --git a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOnePasswordCard.tsx b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOnePasswordCard.tsx
index 630f6209a38..cacd93168cf 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOnePasswordCard.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOnePasswordCard.tsx
@@ -1,9 +1,10 @@
 import { isUserLockedError } from '@clerk/shared/error';
+import { useClerk } from '@clerk/shared/react';
 import type { ResetPasswordCodeFactor } from '@clerk/types';
 import React from 'react';
 
 import { clerkInvalidFAPIResponse } from '../../../core/errors';
-import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useSignInContext } from '../../contexts';
 import { descriptors, Flex, Flow, localizationKeys } from '../../customizables';
 import { Card, CardAlert, Footer, Form, Header, IdentityPreview, useCardState } from '../../elements';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
@@ -46,7 +47,7 @@ const usePasswordControl = (props: SignInFactorOnePasswordProps) => {
 export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps) => {
   const { onShowAlternativeMethodsClick } = props;
   const card = useCardState();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const signIn = useCoreSignIn();
   const { navigateAfterSignIn } = useSignInContext();
   const supportEmail = useSupportEmail();
@@ -54,7 +55,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
   const { navigate } = useRouter();
   const [showHavingTrouble, setShowHavingTrouble] = React.useState(false);
   const toggleHavingTrouble = React.useCallback(() => setShowHavingTrouble(s => !s), [setShowHavingTrouble]);
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   const goBack = () => {
     return navigate('../');
diff --git a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorTwoBackupCodeCard.tsx b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
index 086fcc37aab..6a44a5052b8 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
@@ -1,9 +1,10 @@
 import { isUserLockedError } from '@clerk/shared/error';
+import { useClerk } from '@clerk/shared/react';
 import type { SignInResource } from '@clerk/types';
 import React from 'react';
 
 import { clerkInvalidFAPIResponse } from '../../../core/errors';
-import { useCoreClerk, useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
 import { Col, descriptors, localizationKeys } from '../../customizables';
 import { Card, CardAlert, Footer, Form, Header, useCardState } from '../../elements';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
@@ -20,7 +21,7 @@ export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCa
   const signIn = useCoreSignIn();
   const { displayConfig } = useEnvironment();
   const { navigateAfterSignIn } = useSignInContext();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const { navigate } = useRouter();
   const supportEmail = useSupportEmail();
   const card = useCardState();
@@ -29,7 +30,7 @@ export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCa
     label: localizationKeys('formFieldLabel__backupCode'),
     isRequired: true,
   });
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   const isResettingPassword = (resource: SignInResource) =>
     isResetPasswordStrategy(resource.firstFactorVerification?.strategy) &&
diff --git a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorTwoCodeForm.tsx b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorTwoCodeForm.tsx
index cf1b4f308e5..b6331023155 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorTwoCodeForm.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorTwoCodeForm.tsx
@@ -1,9 +1,10 @@
 import { isUserLockedError } from '@clerk/shared/error';
+import { useClerk } from '@clerk/shared/react';
 import type { PhoneCodeFactor, SignInResource, TOTPFactor } from '@clerk/types';
 import React from 'react';
 
 import { clerkInvalidFAPIResponse } from '../../../core/errors';
-import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useSignInContext } from '../../contexts';
 import { localizationKeys, Text } from '../../customizables';
 import type { VerificationCodeCardProps } from '../../elements';
 import { useCardState, VerificationCodeCard } from '../../elements';
@@ -32,10 +33,10 @@ export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) =>
   const signIn = useCoreSignIn();
   const card = useCardState();
   const { navigateAfterSignIn } = useSignInContext();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const { navigate } = useRouter();
   const supportEmail = useSupportEmail();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   React.useEffect(() => {
     if (props.factorAlreadyPrepared) {
diff --git a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInSocialButtons.tsx b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInSocialButtons.tsx
index 646c8f88b22..5b10d61fc16 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInSocialButtons.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInSocialButtons.tsx
@@ -1,7 +1,8 @@
+import { useClerk } from '@clerk/shared/react';
 import React from 'react';
 
 import { buildSSOCallbackURL } from '../../common/redirects';
-import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useSignInContext } from '../../contexts';
 import { useEnvironment } from '../../contexts/EnvironmentContext';
 import { useCardState } from '../../elements/contexts';
 import type { SocialButtonsProps } from '../../elements/SocialButtons';
@@ -10,7 +11,7 @@ import { useRouter } from '../../router';
 import { handleError } from '../../utils';
 
 export const SignInSocialButtons = React.memo((props: SocialButtonsProps) => {
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
   const { navigate } = useRouter();
   const card = useCardState();
   const { displayConfig } = useEnvironment();
diff --git a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx
index 4f5a593bad4..ac5745fd7a6 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx
@@ -1,3 +1,4 @@
+import { useClerk } from '@clerk/shared/react';
 import type { ClerkAPIError, SignInCreateParams } from '@clerk/types';
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
@@ -11,7 +12,7 @@ import {
   withRedirectToHomeSingleSessionGuard,
 } from '../../common';
 import { buildSSOCallbackURL } from '../../common/redirects';
-import { useCoreClerk, useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
 import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
 import {
   Card,
@@ -33,7 +34,7 @@ import { SignInSocialButtons } from './SignInSocialButtons';
 
 export function _SignInStart(): JSX.Element {
   const card = useCardState();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
   const status = useLoadingStatus();
   const { displayConfig, userSettings } = useEnvironment();
   const signIn = useCoreSignIn();
diff --git a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUp.tsx b/packages/clerk-js/src/ui.retheme/components/SignUp/SignUp.tsx
index e7e8f9ad025..9d056c50735 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUp.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/SignUp/SignUp.tsx
@@ -1,8 +1,9 @@
+import { useClerk } from '@clerk/shared/react';
 import type { SignUpModalProps, SignUpProps } from '@clerk/types';
 import React from 'react';
 
 import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
-import { ComponentContext, useCoreClerk, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
+import { ComponentContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
 import { SignUpContinue } from './SignUpContinue';
@@ -12,7 +13,7 @@ import { SignUpVerifyEmail } from './SignUpVerifyEmail';
 import { SignUpVerifyPhone } from './SignUpVerifyPhone';
 
 function RedirectToSignUp() {
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
   React.useEffect(() => {
     void clerk.redirectToSignUp();
   }, []);
diff --git a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpContinue.tsx b/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpContinue.tsx
index 47ebf5120c0..9a37eb6e776 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpContinue.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpContinue.tsx
@@ -1,6 +1,7 @@
+import { useClerk } from '@clerk/shared/react';
 import React from 'react';
 
-import { useCoreClerk, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
+import { useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
 import { descriptors, Flex, Flow, localizationKeys } from '../../customizables';
 import {
   Card,
@@ -28,7 +29,7 @@ import { completeSignUpFlow } from './util';
 
 function _SignUpContinue() {
   const card = useCardState();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
   const { navigate } = useRouter();
   const { displayConfig, userSettings } = useEnvironment();
   const { attributes } = userSettings;
diff --git a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpEmailLinkCard.tsx b/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpEmailLinkCard.tsx
index b852bf181b2..fbdd1d4eb2b 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpEmailLinkCard.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpEmailLinkCard.tsx
@@ -1,9 +1,10 @@
+import { useClerk } from '@clerk/shared/react';
 import type { SignUpResource } from '@clerk/types';
 import React from 'react';
 
 import { EmailLinkStatusCard } from '../../common';
 import { buildEmailLinkRedirectUrl } from '../../common/redirects';
-import { useCoreClerk, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
+import { useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
 import { Flow, localizationKeys, useLocalizations } from '../../customizables';
 import { VerificationLinkCard } from '../../elements';
 import { useCardState } from '../../elements/contexts';
@@ -20,7 +21,7 @@ export const SignUpEmailLinkCard = () => {
   const card = useCardState();
   const { displayConfig } = useEnvironment();
   const { navigate } = useRouter();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const [showVerifyModal, setShowVerifyModal] = React.useState(false);
 
   const { startEmailLinkFlow, cancelEmailLinkFlow } = useEmailLink(signUp);
diff --git a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpSocialButtons.tsx b/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpSocialButtons.tsx
index 3db24ac7c14..921596b035f 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpSocialButtons.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpSocialButtons.tsx
@@ -1,8 +1,9 @@
+import { useClerk } from '@clerk/shared/react';
 import type { OAuthStrategy } from '@clerk/types';
 import React from 'react';
 
 import { buildSSOCallbackURL } from '../../common/redirects';
-import { useCoreClerk, useCoreSignUp, useSignUpContext } from '../../contexts';
+import { useCoreSignUp, useSignUpContext } from '../../contexts';
 import { useEnvironment } from '../../contexts/EnvironmentContext';
 import { useCardState } from '../../elements';
 import type { SocialButtonsProps } from '../../elements/SocialButtons';
@@ -13,7 +14,7 @@ import { handleError } from '../../utils';
 export type SignUpSocialButtonsProps = SocialButtonsProps & { continueSignUp?: boolean };
 
 export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps) => {
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
   const { navigate } = useRouter();
   const card = useCardState();
   const { displayConfig } = useEnvironment();
diff --git a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpStart.tsx b/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpStart.tsx
index 0901378cfa2..33580d544cb 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpStart.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpStart.tsx
@@ -1,9 +1,10 @@
+import { useClerk } from '@clerk/shared/react';
 import React from 'react';
 
 import { ERROR_CODES } from '../../../core/constants';
 import { getClerkQueryParam } from '../../../utils/getClerkQueryParam';
 import { buildSSOCallbackURL, withRedirectToHomeSingleSessionGuard } from '../../common';
-import { useCoreClerk, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
+import { useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
 import { descriptors, Flex, Flow, localizationKeys, useAppearance, useLocalizations } from '../../customizables';
 import {
   Card,
@@ -27,14 +28,14 @@ import { completeSignUpFlow } from './util';
 
 function _SignUpStart(): JSX.Element {
   const card = useCardState();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
   const status = useLoadingStatus();
   const signUp = useCoreSignUp();
   const { showOptionalFields } = useAppearance().parsedLayout;
   const { userSettings, displayConfig } = useEnvironment();
   const { navigate } = useRouter();
   const { attributes } = userSettings;
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const ctx = useSignUpContext();
   const { navigateAfterSignUp, signInUrl, unsafeMetadata } = ctx;
   const [activeCommIdentifierType, setActiveCommIdentifierType] = React.useState<ActiveIdentifier>(
diff --git a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpVerificationCodeForm.tsx b/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpVerificationCodeForm.tsx
index 3267ac6fa73..8970ba004ff 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpVerificationCodeForm.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpVerificationCodeForm.tsx
@@ -1,6 +1,7 @@
+import { useClerk } from '@clerk/shared/react';
 import type { SignUpResource } from '@clerk/types';
 
-import { useCoreClerk, useSignUpContext } from '../../contexts';
+import { useSignUpContext } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import type { VerificationCodeCardProps } from '../../elements';
 import { VerificationCodeCard } from '../../elements';
@@ -20,7 +21,7 @@ type SignInFactorOneCodeFormProps = {
 
 export const SignUpVerificationCodeForm = (props: SignInFactorOneCodeFormProps) => {
   const { navigateAfterSignUp } = useSignUpContext();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const { navigate } = useRouter();
 
   const goBack = () => {
diff --git a/packages/clerk-js/src/ui.retheme/components/UserButton/useMultisessionActions.tsx b/packages/clerk-js/src/ui.retheme/components/UserButton/useMultisessionActions.tsx
index 666e58f82b7..e271bfd4d27 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserButton/useMultisessionActions.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserButton/useMultisessionActions.tsx
@@ -1,8 +1,7 @@
-import { useSessionList } from '@clerk/shared/react';
+import { useClerk, useSessionList } from '@clerk/shared/react';
 import type { ActiveSessionResource, UserButtonProps, UserResource } from '@clerk/types';
 
 import { windowNavigate } from '../../../utils/windowNavigate';
-import { useCoreClerk } from '../../contexts';
 import { useCardState } from '../../elements';
 import { useRouter } from '../../router';
 import { sleep } from '../../utils';
@@ -18,7 +17,7 @@ type UseMultisessionActionsParams = {
 } & Pick<UserButtonProps, 'userProfileMode' | 'appearance' | 'userProfileProps'>;
 
 export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
-  const { setActive, signOut, openUserProfile } = useCoreClerk();
+  const { setActive, signOut, openUserProfile } = useClerk();
   const card = useCardState();
   const { sessions } = useSessionList();
   const { navigate } = useRouter();
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/DeletePage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/DeletePage.tsx
index 428178b9af0..42148ad68bb 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/DeletePage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/DeletePage.tsx
@@ -1,6 +1,6 @@
-import { useUser } from '@clerk/shared/react';
+import { useClerk, useUser } from '@clerk/shared/react';
 
-import { useCoreClerk, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { localizationKeys, Text } from '../../customizables';
 import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
 import { useRouter } from '../../router';
@@ -12,7 +12,7 @@ export const DeletePage = withCardStateProvider(() => {
   const environment = useEnvironment();
   const router = useRouter();
   const { user } = useUser();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   const deleteUser = async () => {
     try {
diff --git a/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx
index a20b0dcf817..51e9c927691 100644
--- a/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx
@@ -1,6 +1,6 @@
+import { useClerk } from '@clerk/shared/react';
 import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 
-import { useCoreClerk } from '../../contexts';
 import { descriptors, Flex, Icon, Input, Text } from '../../customizables';
 import { Select, SelectButton, SelectOptionList } from '../../elements';
 import { Check } from '../../icons';
@@ -207,7 +207,7 @@ const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
 
 export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref) => {
   // @ts-expect-error
-  const { __internal_country } = useCoreClerk();
+  const { __internal_country } = useClerk();
 
   return (
     <PhoneInputBase
diff --git a/packages/clerk-js/src/ui.retheme/hooks/__tests__/useSupportEmail.test.tsx b/packages/clerk-js/src/ui.retheme/hooks/__tests__/useSupportEmail.test.tsx
index 8542cf52682..7f31c0dc218 100644
--- a/packages/clerk-js/src/ui.retheme/hooks/__tests__/useSupportEmail.test.tsx
+++ b/packages/clerk-js/src/ui.retheme/hooks/__tests__/useSupportEmail.test.tsx
@@ -5,13 +5,13 @@ import { useSupportEmail } from '../useSupportEmail';
 const mockUseOptions = jest.fn();
 const mockUseEnvironment = jest.fn();
 
+jest.mock('@clerk/shared/react', () => ({
+  useClerk: () => ({
+    publishableKey: 'pk_live_Y2xlcmsuY2xlcmsuY29tJA',
+  }),
+}));
 jest.mock('../../contexts', () => {
   return {
-    useCoreClerk: () => {
-      return {
-        publishableKey: 'pk_live_Y2xlcmsuY2xlcmsuY29tJA',
-      };
-    },
     useEnvironment: () => mockUseEnvironment(),
     useOptions: () => mockUseOptions(),
   };
diff --git a/packages/clerk-js/src/ui.retheme/hooks/useSetSessionWithTimeout.ts b/packages/clerk-js/src/ui.retheme/hooks/useSetSessionWithTimeout.ts
index dd4508101f6..21eb6fd716e 100644
--- a/packages/clerk-js/src/ui.retheme/hooks/useSetSessionWithTimeout.ts
+++ b/packages/clerk-js/src/ui.retheme/hooks/useSetSessionWithTimeout.ts
@@ -1,11 +1,12 @@
+import { useClerk } from '@clerk/shared/react';
 import { useEffect } from 'react';
 
-import { useCoreClerk, useSignInContext } from '../contexts';
+import { useSignInContext } from '../contexts';
 import { useRouter } from '../router';
 
 export const useSetSessionWithTimeout = (delay = 2000) => {
   const { queryString } = useRouter();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const { navigateAfterSignIn } = useSignInContext();
 
   useEffect(() => {
diff --git a/packages/clerk-js/src/ui.retheme/hooks/useSupportEmail.ts b/packages/clerk-js/src/ui.retheme/hooks/useSupportEmail.ts
index bcd04b6844e..1b4fb27676f 100644
--- a/packages/clerk-js/src/ui.retheme/hooks/useSupportEmail.ts
+++ b/packages/clerk-js/src/ui.retheme/hooks/useSupportEmail.ts
@@ -1,10 +1,11 @@
+import { useClerk } from '@clerk/shared/react';
 import React from 'react';
 
 import { buildEmailAddress } from '../../utils';
-import { useCoreClerk, useEnvironment, useOptions } from '../contexts';
+import { useEnvironment, useOptions } from '../contexts';
 
 export function useSupportEmail(): string {
-  const Clerk = useCoreClerk();
+  const Clerk = useClerk();
   const { supportEmail: supportEmailFromOptions } = useOptions();
   const { displayConfig } = useEnvironment();
   const { supportEmail: supportEmailFromEnvironment } = displayConfig;
diff --git a/packages/clerk-js/src/ui.retheme/localization/applyTokensToString.ts b/packages/clerk-js/src/ui.retheme/localization/applyTokensToString.ts
index fb4c8d7a12c..051cd505958 100644
--- a/packages/clerk-js/src/ui.retheme/localization/applyTokensToString.ts
+++ b/packages/clerk-js/src/ui.retheme/localization/applyTokensToString.ts
@@ -1,4 +1,6 @@
-import { useCoreClerk, useEnvironment } from '../contexts';
+import { useClerk } from '@clerk/shared/react';
+
+import { useEnvironment } from '../contexts';
 import { MODIFIERS } from './localizationModifiers';
 
 export type GlobalTokens = {
@@ -29,7 +31,7 @@ export const applyTokensToString = (s: string | undefined, tokens: Tokens): stri
 
 export const useGlobalTokens = (): GlobalTokens => {
   const { applicationName } = useEnvironment().displayConfig;
-  const { client, user } = useCoreClerk();
+  const { client, user } = useClerk();
   const { signIn } = client;
 
   return {
diff --git a/packages/clerk-js/src/ui.retheme/router/BaseRouter.tsx b/packages/clerk-js/src/ui.retheme/router/BaseRouter.tsx
index 927a4af444a..2a76d9e6072 100644
--- a/packages/clerk-js/src/ui.retheme/router/BaseRouter.tsx
+++ b/packages/clerk-js/src/ui.retheme/router/BaseRouter.tsx
@@ -1,8 +1,8 @@
+import { useClerk } from '@clerk/shared/react';
 import qs from 'qs';
 import React from 'react';
 
 import { getQueryParams, trimTrailingSlash } from '../../utils';
-import { useCoreClerk } from '../contexts';
 import { useWindowEventListener } from '../hooks';
 import { newPaths } from './newPaths';
 import { match } from './pathToRegexp';
@@ -40,7 +40,7 @@ export const BaseRouter = ({
   urlStateParam,
   children,
 }: BaseRouterProps): JSX.Element => {
-  const { navigate: externalNavigate } = useCoreClerk();
+  const { navigate: externalNavigate } = useClerk();
 
   const [routeParts, setRouteParts] = React.useState({
     path: getPath(),
diff --git a/packages/clerk-js/src/ui.retheme/router/PathRouter.tsx b/packages/clerk-js/src/ui.retheme/router/PathRouter.tsx
index c9211cd158a..ac4c81109b3 100644
--- a/packages/clerk-js/src/ui.retheme/router/PathRouter.tsx
+++ b/packages/clerk-js/src/ui.retheme/router/PathRouter.tsx
@@ -1,8 +1,8 @@
+import { useClerk } from '@clerk/shared/react';
 import type { NavigateOptions } from '@clerk/types';
 import React from 'react';
 
 import { hasUrlInFragment, mergeFragmentIntoUrl, stripOrigin } from '../../utils';
-import { useCoreClerk } from '../contexts';
 import { BaseRouter } from './BaseRouter';
 
 interface PathRouterProps {
@@ -12,7 +12,7 @@ interface PathRouterProps {
 }
 
 export const PathRouter = ({ basePath, preservedParams, children }: PathRouterProps): JSX.Element | null => {
-  const { navigate } = useCoreClerk();
+  const { navigate } = useClerk();
   const [stripped, setStripped] = React.useState(false);
 
   if (!navigate) {
diff --git a/packages/clerk-js/src/ui.retheme/router/Route.tsx b/packages/clerk-js/src/ui.retheme/router/Route.tsx
index 32e38ea492c..c68ab28c4e4 100644
--- a/packages/clerk-js/src/ui.retheme/router/Route.tsx
+++ b/packages/clerk-js/src/ui.retheme/router/Route.tsx
@@ -1,8 +1,8 @@
+import { useClerk } from '@clerk/shared/react';
 import type { LoadedClerk } from '@clerk/types';
 import React from 'react';
 
 import { pathFromFullPath, trimTrailingSlash } from '../../utils';
-import { useCoreClerk } from '../contexts';
 import { useNavigateToFlowStart } from '../hooks';
 import { newPaths } from './newPaths';
 import { match } from './pathToRegexp';
@@ -28,7 +28,7 @@ export type RouteProps = React.PropsWithChildren<UnguardedRouteProps | GuardedRo
 
 const RouteGuard = ({ canActivate, children }: React.PropsWithChildren<RouteGuardProps>): JSX.Element | null => {
   const { navigateToFlowStart } = useNavigateToFlowStart();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   React.useEffect(() => {
     if (!canActivate(clerk)) {
diff --git a/packages/clerk-js/src/ui.retheme/router/__tests__/HashRouter.test.tsx b/packages/clerk-js/src/ui.retheme/router/__tests__/HashRouter.test.tsx
index 1b1f94640dc..9eec0bd7b99 100644
--- a/packages/clerk-js/src/ui.retheme/router/__tests__/HashRouter.test.tsx
+++ b/packages/clerk-js/src/ui.retheme/router/__tests__/HashRouter.test.tsx
@@ -7,9 +7,9 @@ import { HashRouter, Route, useRouter } from '..';
 
 const mockNavigate = jest.fn();
 
-jest.mock('ui.retheme/contexts', () => {
+jest.mock('@clerk/shared/react', () => {
   return {
-    useCoreClerk: () => {
+    useClerk: () => {
       return {
         navigate: (to: string) => {
           mockNavigate(to);
diff --git a/packages/clerk-js/src/ui.retheme/router/__tests__/PathRouter.test.tsx b/packages/clerk-js/src/ui.retheme/router/__tests__/PathRouter.test.tsx
index a80fa9e0150..1b7750c1516 100644
--- a/packages/clerk-js/src/ui.retheme/router/__tests__/PathRouter.test.tsx
+++ b/packages/clerk-js/src/ui.retheme/router/__tests__/PathRouter.test.tsx
@@ -7,9 +7,9 @@ import { PathRouter, Route, useRouter } from '..';
 
 const mockNavigate = jest.fn();
 
-jest.mock('ui.retheme/contexts', () => {
+jest.mock('@clerk/shared/react', () => {
   return {
-    useCoreClerk: () => {
+    useClerk: () => {
       return {
         navigate: (to: string) => {
           mockNavigate(to);
diff --git a/packages/clerk-js/src/ui.retheme/router/__tests__/Switch.test.tsx b/packages/clerk-js/src/ui.retheme/router/__tests__/Switch.test.tsx
index 0a69b02f4bb..c27bd019140 100644
--- a/packages/clerk-js/src/ui.retheme/router/__tests__/Switch.test.tsx
+++ b/packages/clerk-js/src/ui.retheme/router/__tests__/Switch.test.tsx
@@ -5,8 +5,8 @@ import { HashRouter, Route, Switch } from '../../router';
 
 const mockNavigate = jest.fn();
 
-jest.mock('ui.retheme/contexts', () => ({
-  useCoreClerk: () => ({
+jest.mock('@clerk/shared/react', () => ({
+  useClerk: () => ({
     navigate: jest.fn(to => {
       mockNavigate(to);
       if (to) {
diff --git a/packages/clerk-js/src/ui.retheme/router/__tests__/VirtualRouter.test.tsx b/packages/clerk-js/src/ui.retheme/router/__tests__/VirtualRouter.test.tsx
index 566daf36406..18b7eef065f 100644
--- a/packages/clerk-js/src/ui.retheme/router/__tests__/VirtualRouter.test.tsx
+++ b/packages/clerk-js/src/ui.retheme/router/__tests__/VirtualRouter.test.tsx
@@ -6,8 +6,8 @@ import { Route, useRouter, VirtualRouter } from '..';
 
 const mockNavigate = jest.fn();
 
-jest.mock('ui.retheme/contexts', () => ({
-  useCoreClerk: () => ({
+jest.mock('@clerk/shared/react', () => ({
+  useClerk: () => ({
     navigate: jest.fn(to => {
       mockNavigate(to);
       if (to) {

From 15a163bb0acb88731ccf0c4662cd3ab9d7632de1 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Wed, 22 Nov 2023 16:40:36 +0200
Subject: [PATCH 5/8] fix(repo): Resolve conflicts

---
 .../OrganizationProfile/OrganizationProfileNavbar.tsx           | 2 +-
 .../components/UserProfile/EnterpriseAccountsSection.tsx        | 2 +-
 packages/react/src/contexts/IsomorphicClerkContext.tsx          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx
index 0b7831f9693..b8300940aa0 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx
@@ -1,9 +1,9 @@
 import { useOrganization } from '@clerk/shared/react';
 import React from 'react';
 
-import { useOrganizationProfileContext } from '../../contexts';
 import { useGate } from '../../common';
 import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID } from '../../constants';
+import { useOrganizationProfileContext } from '../../contexts';
 import { Breadcrumbs, NavBar, NavbarContextProvider, OrganizationPreview } from '../../elements';
 import type { PropsOfComponent } from '../../styledSystem';
 
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/EnterpriseAccountsSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/EnterpriseAccountsSection.tsx
index 1424b86ae4e..99f62756241 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/EnterpriseAccountsSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/EnterpriseAccountsSection.tsx
@@ -1,10 +1,10 @@
 import { useUser } from '@clerk/shared/react';
 import type { SamlAccountResource } from '@clerk/types';
 
-import { useRouter } from '../../router';
 import { Badge, Col, descriptors, Flex, Image, localizationKeys } from '../../customizables';
 import { ProfileSection, UserPreview } from '../../elements';
 import { useSaml } from '../../hooks';
+import { useRouter } from '../../router';
 import { UserProfileAccordion } from './UserProfileAccordion';
 
 export const EnterpriseAccountsSection = () => {
diff --git a/packages/react/src/contexts/IsomorphicClerkContext.tsx b/packages/react/src/contexts/IsomorphicClerkContext.tsx
index 9b03ebd06bd..765326db501 100644
--- a/packages/react/src/contexts/IsomorphicClerkContext.tsx
+++ b/packages/react/src/contexts/IsomorphicClerkContext.tsx
@@ -1,6 +1,6 @@
 import { ClerkInstanceContext, useClerkInstanceContext } from '@clerk/shared/react';
 
-import type IsomorphicClerk from '../isomorphicClerk';
+import type { IsomorphicClerk } from '../isomorphicClerk';
 
 export const IsomorphicClerkContext = ClerkInstanceContext;
 export const useIsomorphicClerkContext = useClerkInstanceContext as unknown as () => IsomorphicClerk;

From fc30552bcda38cd07bb51cfce52bc4026251c81b Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 23 Nov 2023 11:12:09 +0200
Subject: [PATCH 6/8] chore(clerk-js): Sync changes to `ui` directory

---
 .../src/ui/common/EmailLinkVerify.tsx         |  5 ++--
 packages/clerk-js/src/ui/common/Gate.tsx      |  6 ++--
 .../clerk-js/src/ui/common/SSOCallback.tsx    |  4 +--
 .../src/ui/common/withRedirectToHome.tsx      |  7 +++--
 .../CreateOrganizationForm.tsx                |  6 ++--
 .../CreateOrganizationPage.tsx                |  6 ++--
 .../ImpersonationFab/ImpersonationFab.tsx     | 12 ++++----
 .../OrganizationList/OrganizationListPage.tsx | 11 +++----
 .../OrganizationList/UserInvitationList.tsx   |  6 ++--
 .../OrganizationList/UserMembershipList.tsx   | 13 +++++---
 .../OrganizationList/UserSuggestionList.tsx   |  4 +--
 .../ui/components/OrganizationList/utils.ts   |  4 +--
 .../ActionConfirmationPage.tsx                | 12 ++++----
 .../OrganizationProfile/ActiveMembersList.tsx |  8 ++---
 .../OrganizationProfile/AddDomainPage.tsx     |  5 ++--
 .../OrganizationProfile/DomainList.tsx        |  4 +--
 .../OrganizationProfile/InviteMembersForm.tsx |  4 +--
 .../OrganizationProfile/InviteMembersPage.tsx |  6 ++--
 .../InvitedMembersList.tsx                    |  4 +--
 .../OrganizationProfile/MembershipWidget.tsx  | 10 ++++---
 .../OrganizationMembers.tsx                   |  6 ++--
 .../OrganizationProfile.tsx                   |  6 ++--
 .../OrganizationProfileNavbar.tsx             |  9 +++---
 .../OrganizationSettings.tsx                  | 10 ++++---
 .../ProfileSettingsPage.tsx                   |  4 +--
 .../OrganizationProfile/RemoveDomainPage.tsx  |  7 +++--
 .../OrganizationProfile/RequestToJoinList.tsx |  6 ++--
 .../VerifiedDomainPage.tsx                    |  5 ++--
 .../OrganizationProfile/VerifyDomainPage.tsx  |  5 ++--
 .../OrganizationSwitcherPopover.tsx           | 24 +++++++--------
 .../OrganizationSwitcherTrigger.tsx           | 23 +++++++-------
 .../OtherOrganizationActions.tsx              |  8 ++---
 .../UserInvitationSuggestionList.tsx          |  8 ++---
 .../UserMembershipList.tsx                    | 18 +++++------
 .../components/OrganizationSwitcher/utils.ts  |  5 ++--
 .../src/ui/components/SignIn/SignIn.tsx       |  5 ++--
 .../SignIn/SignInFactorOneCodeForm.tsx        |  7 +++--
 .../SignIn/SignInFactorOneEmailLinkCard.tsx   |  7 +++--
 .../SignIn/SignInFactorOnePasswordCard.tsx    |  7 +++--
 .../SignIn/SignInFactorTwoBackupCodeCard.tsx  |  7 +++--
 .../SignIn/SignInFactorTwoCodeForm.tsx        |  7 +++--
 .../components/SignIn/SignInSocialButtons.tsx |  5 ++--
 .../src/ui/components/SignIn/SignInStart.tsx  |  5 ++--
 .../src/ui/components/SignUp/SignUp.tsx       |  5 ++--
 .../ui/components/SignUp/SignUpContinue.tsx   |  5 ++--
 .../components/SignUp/SignUpEmailLinkCard.tsx |  5 ++--
 .../components/SignUp/SignUpSocialButtons.tsx |  5 ++--
 .../src/ui/components/SignUp/SignUpStart.tsx  |  7 +++--
 .../SignUp/SignUpVerificationCodeForm.tsx     |  5 ++--
 .../ui/components/UserButton/UserButton.tsx   |  9 ++++--
 .../UserButton/UserButtonPopover.tsx          |  7 +++--
 .../UserButton/UserButtonTrigger.tsx          |  4 +--
 .../UserButton/useMultisessionActions.tsx     | 10 +++----
 .../UserProfile/ActiveDevicesSection.tsx      | 16 +++++-----
 .../UserProfile/AddAuthenticatorApp.tsx       |  6 ++--
 .../UserProfile/ConnectedAccountsPage.tsx     | 13 ++++----
 .../UserProfile/ConnectedAccountsSection.tsx  | 16 +++++++---
 .../ui/components/UserProfile/DeletePage.tsx  | 12 ++++++--
 .../ui/components/UserProfile/EmailPage.tsx   | 11 +++----
 .../components/UserProfile/EmailSection.tsx   | 12 ++++----
 .../UserProfile/EnterpriseAccountsSection.tsx |  8 ++---
 .../UserProfile/MfaBackupCodeCreatePage.tsx   |  6 ++--
 .../UserProfile/MfaBackupCodeList.tsx         | 11 +++++--
 .../src/ui/components/UserProfile/MfaPage.tsx | 10 +++++--
 .../UserProfile/MfaPhoneCodePage.tsx          |  9 ++++--
 .../ui/components/UserProfile/MfaSection.tsx  | 10 +++++--
 .../components/UserProfile/PasswordPage.tsx   | 14 ++++++---
 .../UserProfile/PasswordSection.tsx           | 11 +++++--
 .../ui/components/UserProfile/PhonePage.tsx   | 12 ++++----
 .../components/UserProfile/PhoneSection.tsx   | 13 +++++---
 .../ui/components/UserProfile/ProfilePage.tsx | 10 +++++--
 .../UserProfile/RemoveResourcePage.tsx        | 26 ++++++++--------
 .../ui/components/UserProfile/RootPage.tsx    | 10 ++++---
 .../UserProfile/UserProfileSection.tsx        | 11 +++++--
 .../components/UserProfile/UsernamePage.tsx   | 11 +++++--
 .../UserProfile/UsernameSection.tsx           |  9 ++++--
 .../ui/components/UserProfile/VerifyTOTP.tsx  |  6 ++--
 .../ui/components/UserProfile/Web3Page.tsx    | 17 +++++++----
 .../ui/components/UserProfile/Web3Section.tsx |  6 ++--
 .../ui/contexts/ClerkUIComponentsContext.tsx  | 11 +++----
 .../src/ui/contexts/CoreClerkContext.tsx      |  3 --
 .../ui/contexts/CoreClerkContextWrapper.tsx   | 30 ++++++++++---------
 .../src/ui/contexts/CoreClientContext.tsx     | 14 ++-------
 .../ui/contexts/CoreOrganizationContext.tsx   |  5 ----
 .../src/ui/contexts/CoreSessionContext.tsx    | 22 ++++----------
 .../src/ui/contexts/CoreUserContext.tsx       | 23 ++++----------
 packages/clerk-js/src/ui/contexts/index.ts    |  2 --
 .../src/ui/elements/PhoneInput/PhoneInput.tsx |  4 +--
 .../__tests__/useCoreOrganization.test.tsx    |  9 +++---
 .../useCoreOrganizationList.test.tsx          | 16 +++++-----
 .../hooks/__tests__/useSupportEmail.test.tsx  | 10 +++----
 .../clerk-js/src/ui/hooks/useFetchRoles.ts    |  5 ++--
 .../src/ui/hooks/useSetSessionWithTimeout.ts  |  5 ++--
 .../clerk-js/src/ui/hooks/useSupportEmail.ts  |  5 ++--
 .../ui/localization/applyTokensToString.ts    |  6 ++--
 .../clerk-js/src/ui/router/BaseRouter.tsx     |  4 +--
 .../clerk-js/src/ui/router/PathRouter.tsx     |  4 +--
 packages/clerk-js/src/ui/router/Route.tsx     |  5 ++--
 .../ui/router/__tests__/HashRouter.test.tsx   |  4 +--
 .../ui/router/__tests__/PathRouter.test.tsx   |  4 +--
 .../src/ui/router/__tests__/Switch.test.tsx   |  4 +--
 .../router/__tests__/VirtualRouter.test.tsx   |  4 +--
 102 files changed, 497 insertions(+), 391 deletions(-)
 delete mode 100644 packages/clerk-js/src/ui/contexts/CoreClerkContext.tsx
 delete mode 100644 packages/clerk-js/src/ui/contexts/CoreOrganizationContext.tsx

diff --git a/packages/clerk-js/src/ui/common/EmailLinkVerify.tsx b/packages/clerk-js/src/ui/common/EmailLinkVerify.tsx
index ecf1bb13dd3..5aec89f70ba 100644
--- a/packages/clerk-js/src/ui/common/EmailLinkVerify.tsx
+++ b/packages/clerk-js/src/ui/common/EmailLinkVerify.tsx
@@ -1,9 +1,10 @@
 import { EmailLinkErrorCode, isEmailLinkError } from '@clerk/shared/error';
+import { useClerk } from '@clerk/shared/react';
 import React from 'react';
 
 import type { VerificationStatus } from '../../utils';
 import { completeSignUpFlow } from '../../utils';
-import { useCoreClerk, useCoreSignUp } from '../contexts';
+import { useCoreSignUp } from '../contexts';
 import type { LocalizationKey } from '../localization';
 import { useRouter } from '../router';
 import { sleep } from '../utils';
@@ -19,7 +20,7 @@ export type EmailLinkVerifyProps = {
 
 export const EmailLinkVerify = (props: EmailLinkVerifyProps) => {
   const { redirectUrl, redirectUrlComplete, verifyEmailPath, verifyPhonePath } = props;
-  const { handleEmailLinkVerification } = useCoreClerk();
+  const { handleEmailLinkVerification } = useClerk();
   const { navigate } = useRouter();
   const signUp = useCoreSignUp();
   const [verificationStatus, setVerificationStatus] = React.useState<VerificationStatus>('loading');
diff --git a/packages/clerk-js/src/ui/common/Gate.tsx b/packages/clerk-js/src/ui/common/Gate.tsx
index 0c1a016742e..1644b6c7b05 100644
--- a/packages/clerk-js/src/ui/common/Gate.tsx
+++ b/packages/clerk-js/src/ui/common/Gate.tsx
@@ -1,8 +1,8 @@
+import { useSession } from '@clerk/shared/react';
 import type { CheckAuthorization } from '@clerk/types';
 import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
 import React, { useEffect } from 'react';
 
-import { useCoreSession } from '../contexts';
 import { useRouter } from '../router';
 
 type GateParams = Parameters<CheckAuthorization>[0];
@@ -14,10 +14,10 @@ type GateProps = PropsWithChildren<
 >;
 
 export const useGate = (params: GateParams) => {
-  const { experimental__checkAuthorization } = useCoreSession();
+  const { session } = useSession();
 
   return {
-    isAuthorizedUser: experimental__checkAuthorization(params),
+    isAuthorizedUser: session?.experimental__checkAuthorization(params),
   };
 };
 
diff --git a/packages/clerk-js/src/ui/common/SSOCallback.tsx b/packages/clerk-js/src/ui/common/SSOCallback.tsx
index 1284fed623b..dfa75aeaa1c 100644
--- a/packages/clerk-js/src/ui/common/SSOCallback.tsx
+++ b/packages/clerk-js/src/ui/common/SSOCallback.tsx
@@ -1,7 +1,7 @@
+import { useClerk } from '@clerk/shared/react';
 import type { HandleOAuthCallbackParams, HandleSamlCallbackParams } from '@clerk/types';
 import React from 'react';
 
-import { useCoreClerk } from '../contexts';
 import { Flow } from '../customizables';
 import { Card, CardAlert, LoadingCardContainer, useCardState, withCardStateProvider } from '../elements';
 import { useRouter } from '../router';
@@ -16,7 +16,7 @@ export const SSOCallback = withCardStateProvider<HandleOAuthCallbackParams | Han
 });
 
 export const SSOCallbackCard = (props: HandleOAuthCallbackParams | HandleSamlCallbackParams) => {
-  const { handleRedirectCallback } = useCoreClerk();
+  const { handleRedirectCallback } = useClerk();
   const { navigate } = useRouter();
   const card = useCardState();
 
diff --git a/packages/clerk-js/src/ui/common/withRedirectToHome.tsx b/packages/clerk-js/src/ui/common/withRedirectToHome.tsx
index 5fd43b8e2e3..9309dfe231d 100644
--- a/packages/clerk-js/src/ui/common/withRedirectToHome.tsx
+++ b/packages/clerk-js/src/ui/common/withRedirectToHome.tsx
@@ -1,12 +1,13 @@
+import { useClerk } from '@clerk/shared/react';
 import type { ComponentType } from 'react';
 import React from 'react';
 
 import { warnings } from '../../core/warnings';
-import type { AvailableComponentProps } from '../../ui/types';
 import type { ComponentGuard } from '../../utils';
 import { noOrganizationExists, noUserExists, sessionExistsAndSingleSessionModeEnabled } from '../../utils';
-import { useCoreClerk, useEnvironment, useOptions } from '../contexts';
+import { useEnvironment, useOptions } from '../contexts';
 import { useRouter } from '../router';
+import type { AvailableComponentProps } from '../types';
 
 function withRedirectToHome<P extends AvailableComponentProps>(
   Component: ComponentType<P>,
@@ -18,7 +19,7 @@ function withRedirectToHome<P extends AvailableComponentProps>(
 
   const HOC = (props: P) => {
     const { navigate } = useRouter();
-    const clerk = useCoreClerk();
+    const clerk = useClerk();
     const environment = useEnvironment();
     const options = useOptions();
 
diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
index c5cbfceef8a..6ad0557d02d 100644
--- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
+++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -1,8 +1,8 @@
+import { useOrganization, useOrganizationList } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
 import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization, useCoreOrganizationList } from '../../contexts';
 import { Icon } from '../../customizables';
 import { ContentPage, Form, FormButtonContainer, IconButton, SuccessPage, useCardState } from '../../elements';
 import { QuestionMark, Upload } from '../../icons';
@@ -30,8 +30,8 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
   const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
 
   const lastCreatedOrganizationRef = React.useRef<OrganizationResource | null>(null);
-  const { createOrganization, isLoaded, setActive } = useCoreOrganizationList();
-  const { organization } = useCoreOrganization();
+  const { createOrganization, isLoaded, setActive } = useOrganizationList();
+  const { organization } = useOrganization();
   const [file, setFile] = React.useState<File | null>();
 
   const nameField = useFormControl('name', '', {
diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx
index 71f3f17cfcc..6b4c335cc66 100644
--- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx
+++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx
@@ -1,11 +1,13 @@
-import { useCoreClerk, useCreateOrganizationContext } from '../../contexts';
+import { useClerk } from '@clerk/shared/react';
+
+import { useCreateOrganizationContext } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { withCardStateProvider } from '../../elements';
 import { CreateOrganizationForm } from './CreateOrganizationForm';
 
 export const CreateOrganizationPage = withCardStateProvider(() => {
   const title = localizationKeys('createOrganization.title');
-  const { closeCreateOrganization } = useCoreClerk();
+  const { closeCreateOrganization } = useClerk();
 
   const { mode, navigateAfterCreateOrganization, skipInvitationScreen } = useCreateOrganizationContext();
 
diff --git a/packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx b/packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx
index 1478bb9a747..d5e85e94646 100644
--- a/packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx
+++ b/packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx
@@ -1,8 +1,9 @@
+import { useClerk, useSession } from '@clerk/shared/react';
 import type { PointerEventHandler } from 'react';
 import React, { useEffect, useRef } from 'react';
 
 import { getFullName, getIdentifier } from '../../../utils/user';
-import { useCoreClerk, useCoreSession, withCoreUserGuard } from '../../contexts';
+import { withCoreUserGuard } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import {
   Col,
@@ -57,8 +58,8 @@ const EyeCircle = ({ width, height, ...props }: EyeCircleProps) => {
 type FabContentProps = { title: LocalizationKey; signOutText: LocalizationKey };
 
 const FabContent = ({ title, signOutText }: FabContentProps) => {
-  const session = useCoreSession();
-  const { signOut } = useCoreClerk();
+  const { session } = useSession();
+  const { signOut } = useClerk();
 
   return (
     <Col
@@ -88,7 +89,8 @@ const FabContent = ({ title, signOutText }: FabContentProps) => {
         })}
         localizationKey={signOutText}
         onClick={async () => {
-          await signOut({ sessionId: session.id });
+          // clerk-js has been loaded at this point so we can safely access session
+          await signOut({ sessionId: session!.id });
         }}
       />
     </Col>
@@ -96,7 +98,7 @@ const FabContent = ({ title, signOutText }: FabContentProps) => {
 };
 
 const _ImpersonationFab = () => {
-  const session = useCoreSession();
+  const { session } = useSession();
   const { t } = useLocalizations();
   const { parsedInternalTheme } = useAppearance();
   const containerRef = useRef<HTMLDivElement>(null);
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
index 509eb62abd4..c94da2f10af 100644
--- a/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
@@ -1,6 +1,7 @@
+import { useOrganizationList } from '@clerk/shared/react';
 import { useState } from 'react';
 
-import { useCoreOrganizationList, useEnvironment, useOrganizationListContext } from '../../contexts';
+import { useEnvironment, useOrganizationListContext } from '../../contexts';
 import { Box, Button, Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';
 import { Card, CardAlert, Divider, Header, useCardState, withCardStateProvider } from '../../elements';
 import { useInView } from '../../hooks';
@@ -11,8 +12,8 @@ import { MembershipPreview, PersonalAccountPreview } from './UserMembershipList'
 import { SuggestionPreview } from './UserSuggestionList';
 import { organizationListParams } from './utils';
 
-const useCoreOrganizationListInView = () => {
-  const { userMemberships, userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams);
+const useOrganizationListInView = () => {
+  const { userMemberships, userInvitations, userSuggestions } = useOrganizationList(organizationListParams);
 
   const { ref } = useInView({
     threshold: 0,
@@ -40,7 +41,7 @@ const useCoreOrganizationListInView = () => {
 
 export const OrganizationListPage = withCardStateProvider(() => {
   const card = useCardState();
-  const { userMemberships, userSuggestions, userInvitations } = useCoreOrganizationListInView();
+  const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
   const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;
   const hasAnyData = !!(userMemberships?.count || userInvitations?.count || userSuggestions?.count);
 
@@ -117,7 +118,7 @@ const OrganizationListFlows = ({ showListInitially }: { showListInitially: boole
 const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void }) => {
   const environment = useEnvironment();
 
-  const { ref, userMemberships, userSuggestions, userInvitations } = useCoreOrganizationListInView();
+  const { ref, userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
   const { hidePersonal } = useOrganizationListContext();
 
   const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/UserInvitationList.tsx b/packages/clerk-js/src/ui/components/OrganizationList/UserInvitationList.tsx
index 5fc91c5f526..8eddb100f8b 100644
--- a/packages/clerk-js/src/ui/components/OrganizationList/UserInvitationList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationList/UserInvitationList.tsx
@@ -1,7 +1,7 @@
+import { useClerk, useOrganizationList } from '@clerk/shared/react';
 import type { OrganizationResource, UserOrganizationInvitationResource } from '@clerk/types';
 import { useState } from 'react';
 
-import { useCoreClerk, useCoreOrganizationList } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { useCardState, withCardStateProvider } from '../../elements';
 import { handleError } from '../../utils';
@@ -24,9 +24,9 @@ export const AcceptRejectInvitationButtons = (props: { onAccept: () => void }) =
 
 export const InvitationPreview = withCardStateProvider((props: UserOrganizationInvitationResource) => {
   const card = useCardState();
-  const { getOrganization } = useCoreClerk();
+  const { getOrganization } = useClerk();
   const [acceptedOrganization, setAcceptedOrganization] = useState<OrganizationResource | null>(null);
-  const { userInvitations } = useCoreOrganizationList({
+  const { userInvitations } = useOrganizationList({
     userInvitations: organizationListParams.userInvitations,
   });
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx b/packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx
index 612838c7db0..b834713d398 100644
--- a/packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx
@@ -1,6 +1,7 @@
+import { useOrganizationList, useUser } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
 
-import { useCoreOrganizationList, useCoreUser, useOrganizationListContext } from '../../contexts';
+import { useOrganizationListContext } from '../../contexts';
 import { OrganizationPreview, PersonalWorkspacePreview, useCardState, withCardStateProvider } from '../../elements';
 import { localizationKeys } from '../../localization';
 import { OrganizationListPreviewButton, sharedMainIdentifierSx } from './shared';
@@ -8,7 +9,7 @@ import { OrganizationListPreviewButton, sharedMainIdentifierSx } from './shared'
 export const MembershipPreview = withCardStateProvider((props: { organization: OrganizationResource }) => {
   const card = useCardState();
   const { navigateAfterSelectOrganization } = useOrganizationListContext();
-  const { isLoaded, setActive } = useCoreOrganizationList();
+  const { isLoaded, setActive } = useOrganizationList();
 
   if (!isLoaded) {
     return null;
@@ -35,8 +36,12 @@ export const MembershipPreview = withCardStateProvider((props: { organization: O
 export const PersonalAccountPreview = withCardStateProvider(() => {
   const card = useCardState();
   const { hidePersonal, navigateAfterSelectPersonal } = useOrganizationListContext();
-  const { isLoaded, setActive } = useCoreOrganizationList();
-  const user = useCoreUser();
+  const { isLoaded, setActive } = useOrganizationList();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
 
   const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx
index 3c8af375e7e..60538034560 100644
--- a/packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx
@@ -1,6 +1,6 @@
+import { useOrganizationList } from '@clerk/shared/react';
 import type { OrganizationSuggestionResource } from '@clerk/types';
 
-import { useCoreOrganizationList } from '../../contexts';
 import { localizationKeys, Text } from '../../customizables';
 import { useCardState, withCardStateProvider } from '../../elements';
 import { handleError } from '../../utils';
@@ -10,7 +10,7 @@ import { organizationListParams } from './utils';
 
 export const AcceptRejectInvitationButtons = (props: OrganizationSuggestionResource) => {
   const card = useCardState();
-  const { userSuggestions } = useCoreOrganizationList({
+  const { userSuggestions } = useOrganizationList({
     userSuggestions: organizationListParams.userSuggestions,
   });
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/utils.ts b/packages/clerk-js/src/ui/components/OrganizationList/utils.ts
index 6382e00c60c..0fd0d468fd3 100644
--- a/packages/clerk-js/src/ui/components/OrganizationList/utils.ts
+++ b/packages/clerk-js/src/ui/components/OrganizationList/utils.ts
@@ -1,4 +1,4 @@
-import type { useCoreOrganizationList } from '../../contexts';
+import type { useOrganizationList } from '@clerk/shared/react';
 
 export const organizationListParams = {
   userMemberships: {
@@ -11,4 +11,4 @@ export const organizationListParams = {
     infinite: true,
     status: ['pending', 'accepted'],
   },
-} satisfies Parameters<typeof useCoreOrganizationList>[0];
+} satisfies Parameters<typeof useOrganizationList>[0];
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx
index c176b6ef5c3..3742cdd4185 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx
@@ -1,5 +1,7 @@
+import { useOrganization, useUser } from '@clerk/shared/react';
+
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization, useCoreUser, useOrganizationProfileContext } from '../../contexts';
+import { useOrganizationProfileContext } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { localizationKeys, Text } from '../../customizables';
 import {
@@ -17,10 +19,10 @@ import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 export const LeaveOrganizationPage = () => {
   const card = useCardState();
   const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
-  const { organization } = useCoreOrganization();
-  const user = useCoreUser();
+  const { organization } = useOrganization();
+  const { user } = useUser();
 
-  if (!organization) {
+  if (!organization || !user) {
     return null;
   }
 
@@ -50,7 +52,7 @@ export const LeaveOrganizationPage = () => {
 export const DeleteOrganizationPage = () => {
   const card = useCardState();
   const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
 
   if (!organization) {
     return null;
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
index bae66d80d9b..f12e836c0d8 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
@@ -1,7 +1,7 @@
+import { useOrganization, useUser } from '@clerk/shared/react';
 import type { OrganizationMembershipResource } from '@clerk/types';
 
 import { Gate } from '../../common/Gate';
-import { useCoreOrganization, useCoreUser } from '../../contexts';
 import { Badge, localizationKeys, Td, Text } from '../../customizables';
 import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
 import { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
@@ -17,7 +17,7 @@ const membershipsParams = {
 
 export const ActiveMembersList = () => {
   const card = useCardState();
-  const { organization, memberships } = useCoreOrganization(membershipsParams);
+  const { organization, memberships } = useOrganization(membershipsParams);
 
   const { options, isLoading: loadingRoles } = useFetchRoles();
 
@@ -76,9 +76,9 @@ const MemberRow = (props: {
   const { membership, onRemove, onRoleChange, options } = props;
   const { localizeCustomRole } = useLocalizeCustomRoles();
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
 
-  const isCurrentUser = user.id === membership.publicUserData.userId;
+  const isCurrentUser = user?.id === membership.publicUserData.userId;
   const unlocalizedRoleLabel = options?.find(a => a.value === membership.role)?.label;
 
   return (
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx
index af8c2b502b0..076d450893c 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx
@@ -1,6 +1,7 @@
+import { useOrganization } from '@clerk/shared/react';
 import React from 'react';
 
-import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
 import { useRouter } from '../../router';
@@ -13,7 +14,7 @@ export const AddDomainPage = withCardStateProvider(() => {
   const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle');
   const breadcrumbTitle = localizationKeys('organizationProfile.profilePage.domainSection.title');
   const card = useCardState();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { navigate } = useRouter();
 
   const nameField = useFormControl('name', '', {
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
index b782829b782..88dfa396867 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
@@ -1,3 +1,4 @@
+import { useOrganization } from '@clerk/shared/react';
 import type {
   GetDomainsParams,
   OrganizationDomainResource,
@@ -8,7 +9,6 @@ import React, { useMemo } from 'react';
 
 import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils';
 import { useGate, withGate } from '../../common';
-import { useCoreOrganization } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { Box, Col, localizationKeys, Spinner } from '../../customizables';
 import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements';
@@ -81,7 +81,7 @@ const DomainListDotMenu = ({
 export const DomainList = withGate(
   (props: DomainListProps) => {
     const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
-    const { organization, domains } = useCoreOrganization({
+    const { organization, domains } = useOrganization({
       domains: {
         infinite: true,
         ...rest,
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
index 938e377b26f..275317b146c 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
@@ -1,9 +1,9 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
+import { useOrganization } from '@clerk/shared/react';
 import type { ClerkAPIError, MembershipRole } from '@clerk/types';
 import type { FormEvent } from 'react';
 import { useState } from 'react';
 
-import { useCoreOrganization } from '../../contexts';
 import { Flex, Text } from '../../customizables';
 import { Form, FormButtonContainer, TagInput, useCardState } from '../../elements';
 import { useFetchRoles } from '../../hooks/useFetchRoles';
@@ -25,7 +25,7 @@ type InviteMembersFormProps = {
 export const InviteMembersForm = (props: InviteMembersFormProps) => {
   const { navigate } = useRouter();
   const { onSuccess, onReset = () => navigate('..'), resetButtonLabel } = props;
-  const { organization, invitations } = useCoreOrganization({
+  const { organization, invitations } = useOrganization({
     invitations: {
       pageSize: 10,
       keepPreviousData: true,
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersPage.tsx
index 4d442d65a93..7e42fd45430 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersPage.tsx
@@ -1,6 +1,8 @@
+import { useOrganization } from '@clerk/shared/react';
+
 import { runIfFunctionOrReturn } from '../../../utils';
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { useOrganizationProfileContext } from '../../contexts';
 import { descriptors, Flex, localizationKeys, Text } from '../../customizables';
 import { ContentPage, IconCircle, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
 import { Email } from '../../icons';
@@ -13,7 +15,7 @@ export const InviteMembersPage = withCardStateProvider(() => {
   const subtitle = localizationKeys('organizationProfile.invitePage.subtitle');
   const card = useCardState();
   const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   //@ts-expect-error
   const { __unstable_manageBillingUrl, __unstable_manageBillingMembersLimit } = useOrganizationProfileContext();
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx
index b3cac6fcb6b..07f82f03d43 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx
@@ -1,6 +1,6 @@
+import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationInvitationResource } from '@clerk/types';
 
-import { useCoreOrganization } from '../../contexts';
 import { localizationKeys, Td, Text } from '../../customizables';
 import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
 import { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
@@ -16,7 +16,7 @@ const invitationsParams = {
 
 export const InvitedMembersList = () => {
   const card = useCardState();
-  const { organization, invitations } = useCoreOrganization(invitationsParams);
+  const { organization, invitations } = useOrganization(invitationsParams);
 
   const { options, isLoading: loadingRoles } = useFetchRoles();
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembershipWidget.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MembershipWidget.tsx
index c4fd2d7535c..b69bbe42614 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MembershipWidget.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MembershipWidget.tsx
@@ -1,10 +1,12 @@
-import { useRouter } from '../../../ui/router';
+import { useOrganization } from '@clerk/shared/react';
+
 import { runIfFunctionOrReturn } from '../../../utils';
-import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { useOrganizationProfileContext } from '../../contexts';
 import { Col, Flex, Link, Text } from '../../customizables';
+import { useRouter } from '../../router';
 
 export const MembershipWidget = () => {
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   //@ts-expect-error
   const { __unstable_manageBillingUrl, __unstable_manageBillingLabel, __unstable_manageBillingMembersLimit } =
     useOrganizationProfileContext();
@@ -14,7 +16,7 @@ export const MembershipWidget = () => {
     return null;
   }
 
-  const totalCount = organization.membersCount + organization.pendingInvitationsCount;
+  const totalCount = organization?.membersCount + organization?.pendingInvitationsCount;
 
   return (
     <Flex
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
index b8f7a62f167..3955c079d29 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
@@ -1,5 +1,7 @@
+import { useOrganization } from '@clerk/shared/react';
+
 import { NotificationCountBadge, useGate } from '../../common';
-import { useCoreOrganization, useEnvironment, useOrganizationProfileContext } from '../../contexts';
+import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
 import {
   CardAlert,
@@ -24,7 +26,7 @@ export const OrganizationMembers = withCardStateProvider(() => {
   const { isAuthorizedUser: canManageMemberships } = useGate({ permission: 'org:sys_memberships:manage' });
   const { isAuthorizedUser: canReadMemberships } = useGate({ permission: 'org:sys_memberships:read' });
   const isDomainsEnabled = organizationSettings?.domains?.enabled;
-  const { membershipRequests } = useCoreOrganization({
+  const { membershipRequests } = useOrganization({
     membershipRequests: isDomainsEnabled || undefined,
   });
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx
index 6b856730520..a0ecc4ad258 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx
@@ -1,8 +1,9 @@
+import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationProfileModalProps, OrganizationProfileProps } from '@clerk/types';
 import React from 'react';
 
 import { withOrganizationsEnabledGuard, withRedirectToHomeOrganizationGuard } from '../../common';
-import { ComponentContext, useCoreOrganization, withCoreUserGuard } from '../../contexts';
+import { ComponentContext, withCoreUserGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { ProfileCard, withCardStateProvider } from '../../elements';
 import { Route, Switch } from '../../router';
@@ -11,8 +12,7 @@ import { OrganizationProfileNavbar } from './OrganizationProfileNavbar';
 import { OrganizationProfileRoutes } from './OrganizationProfileRoutes';
 
 const _OrganizationProfile = (_: OrganizationProfileProps) => {
-  // TODO: Should this be a guard HOC?
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
 
   if (!organization) {
     return null;
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx
index a4aa8e013d0..b8300940aa0 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx
@@ -1,15 +1,16 @@
+import { useOrganization } from '@clerk/shared/react';
 import React from 'react';
 
-import { useGate } from '../../../ui/common';
-import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID } from '../../../ui/constants';
-import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { useGate } from '../../common';
+import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID } from '../../constants';
+import { useOrganizationProfileContext } from '../../contexts';
 import { Breadcrumbs, NavBar, NavbarContextProvider, OrganizationPreview } from '../../elements';
 import type { PropsOfComponent } from '../../styledSystem';
 
 export const OrganizationProfileNavbar = (
   props: React.PropsWithChildren<Pick<PropsOfComponent<typeof NavBar>, 'contentRef'>>,
 ) => {
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { pages } = useOrganizationProfileContext();
 
   const { isAuthorizedUser: allowMembersRoute } = useGate({
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx
index faca9fa90c3..4af15717685 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx
@@ -1,5 +1,7 @@
+import { useOrganization } from '@clerk/shared/react';
+
 import { AddBlockButton, BlockButton, Gate, useGate } from '../../common';
-import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { Col, descriptors, Flex, Icon, localizationKeys } from '../../customizables';
 import { Header, IconButton, NavbarMenuButtonRow, OrganizationPreview, ProfileSection } from '../../elements';
 import { Times } from '../../icons';
@@ -36,7 +38,7 @@ export const OrganizationSettings = () => {
 };
 
 const OrganizationProfileSection = () => {
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { navigate } = useRouter();
 
   if (!organization) {
@@ -67,7 +69,7 @@ const OrganizationProfileSection = () => {
 
 const OrganizationDomainsSection = () => {
   const { organizationSettings } = useEnvironment();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
 
   const { navigate } = useRouter();
 
@@ -97,7 +99,7 @@ const OrganizationDomainsSection = () => {
 };
 
 const OrganizationDangerSection = () => {
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { navigate } = useRouter();
   const { isAuthorizedUser: canDeleteOrganization } = useGate({ permission: 'org:sys_profile:delete' });
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileSettingsPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileSettingsPage.tsx
index 966ce440e19..d08e68572b9 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileSettingsPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileSettingsPage.tsx
@@ -1,8 +1,8 @@
+import { useOrganization } from '@clerk/shared/react';
 import React from 'react';
 
 import { isDefaultImage } from '../../../utils';
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
 import { handleError, useFormControl } from '../../utils';
@@ -14,7 +14,7 @@ export const ProfileSettingsPage = withCardStateProvider(() => {
   const subtitle = localizationKeys('organizationProfile.profilePage.subtitle');
   const card = useCardState();
   const [avatarChanged, setAvatarChanged] = React.useState(false);
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
 
   const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx
index 4da8c1a2c03..27e14a327a2 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx
@@ -1,8 +1,9 @@
+import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationDomainResource } from '@clerk/types';
 import React from 'react';
 
 import { RemoveResourcePage } from '../../common';
-import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { Flex, Spinner } from '../../customizables';
 import { useFetch } from '../../hooks';
 import { localizationKeys } from '../../localization';
@@ -11,7 +12,7 @@ import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 
 export const RemoveDomainPage = () => {
   const { organizationSettings } = useEnvironment();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { params } = useRouter();
 
   const ref = React.useRef<OrganizationDomainResource>();
@@ -27,7 +28,7 @@ export const RemoveDomainPage = () => {
     },
   );
 
-  const { domains } = useCoreOrganization({
+  const { domains } = useOrganization({
     domains: {
       infinite: true,
     },
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx
index 709cbd7043a..f24f7c7b7b3 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx
@@ -1,6 +1,6 @@
+import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationMembershipRequestResource } from '@clerk/types';
 
-import { useCoreOrganization } from '../../contexts';
 import { Button, Flex, localizationKeys, Td } from '../../customizables';
 import { useCardState, UserPreview, withCardStateProvider } from '../../elements';
 import { handleError } from '../../utils';
@@ -15,7 +15,7 @@ const membershipRequestsParams = {
 
 export const RequestToJoinList = () => {
   const card = useCardState();
-  const { organization, membershipRequests } = useCoreOrganization(membershipRequestsParams);
+  const { organization, membershipRequests } = useOrganization(membershipRequestsParams);
 
   if (!organization) {
     return null;
@@ -50,7 +50,7 @@ const RequestRow = withCardStateProvider(
   (props: { request: OrganizationMembershipRequestResource; onError: ReturnType<typeof useCardState>['setError'] }) => {
     const { request, onError } = props;
     const card = useCardState();
-    const { membership, membershipRequests } = useCoreOrganization(membershipRequestsParams);
+    const { membership, membershipRequests } = useOrganization(membershipRequestsParams);
 
     const onAccept = () => {
       if (!membership || !membershipRequests) {
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx
index c6283731d61..5d2e3cd86da 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx
@@ -1,3 +1,4 @@
+import { useOrganization } from '@clerk/shared/react';
 import type {
   OrganizationDomainResource,
   OrganizationEnrollmentMode,
@@ -5,7 +6,7 @@ import type {
 } from '@clerk/types';
 
 import { CalloutWithAction, useGate } from '../../common';
-import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { Col, Flex, localizationKeys, Spinner, Text } from '../../customizables';
 import {
@@ -99,7 +100,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
   const card = useCardState();
   const { organizationSettings } = useEnvironment();
 
-  const { membership, organization, domains } = useCoreOrganization({
+  const { membership, organization, domains } = useOrganization({
     domains: {
       infinite: true,
     },
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx
index f94b2052558..f0440fc555b 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx
@@ -1,7 +1,8 @@
+import { useOrganization } from '@clerk/shared/react';
 import React, { useRef } from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';
 import type { VerificationCodeCardProps } from '../../elements';
 import {
@@ -21,7 +22,7 @@ import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 export const VerifyDomainPage = withCardStateProvider(() => {
   const card = useCardState();
   const { organizationSettings } = useEnvironment();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { params, navigate } = useRouter();
 
   const { data: domain, status: domainStatus } = useFetch(organization?.getDomain, {
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index f584cc151bb..302ad9ba7a4 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -1,16 +1,10 @@
+import { useClerk, useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
 import React from 'react';
 
 import { runIfFunctionOrReturn } from '../../../utils';
 import { NotificationCountBadge, withGate } from '../../common';
-import {
-  useCoreClerk,
-  useCoreOrganization,
-  useCoreOrganizationList,
-  useCoreUser,
-  useEnvironment,
-  useOrganizationSwitcherContext,
-} from '../../contexts';
+import { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';
 import { descriptors, localizationKeys } from '../../customizables';
 import {
   Action,
@@ -32,9 +26,9 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
   (props, ref) => {
     const { close, ...rest } = props;
     const card = useCardState();
-    const { openOrganizationProfile, openCreateOrganization } = useCoreClerk();
-    const { organization: currentOrg } = useCoreOrganization();
-    const { isLoaded, setActive } = useCoreOrganizationList();
+    const { openOrganizationProfile, openCreateOrganization } = useClerk();
+    const { organization: currentOrg } = useOrganization();
+    const { isLoaded, setActive } = useOrganizationList();
     const router = useRouter();
     const {
       hidePersonal,
@@ -55,7 +49,11 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
       organizationProfileProps,
     } = useOrganizationSwitcherContext();
 
-    const user = useCoreUser();
+    const { user } = useUser();
+
+    if (!user) {
+      return null;
+    }
 
     const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
 
@@ -181,7 +179,7 @@ const NotificationCountBadgeManageButton = withGate(
 
     const isDomainsEnabled = organizationSettings?.domains?.enabled;
 
-    const { membershipRequests } = useCoreOrganization({
+    const { membershipRequests } = useOrganization({
       membershipRequests: isDomainsEnabled || undefined,
     });
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index 6d178b51ea1..6119738cf5c 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -1,13 +1,8 @@
+import { useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';
 import { forwardRef } from 'react';
 
 import { NotificationCountBadge, useGate } from '../../common';
-import {
-  useCoreOrganization,
-  useCoreOrganizationList,
-  useCoreUser,
-  useEnvironment,
-  useOrganizationSwitcherContext,
-} from '../../contexts';
+import { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';
 import { Button, descriptors, Icon, localizationKeys } from '../../customizables';
 import { OrganizationPreview, PersonalWorkspacePreview, withAvatarShimmer } from '../../elements';
 import { Selector } from '../../icons';
@@ -22,10 +17,16 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
   forwardRef<HTMLButtonElement, OrganizationSwitcherTriggerProps>((props, ref) => {
     const { sx, ...rest } = props;
 
-    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = useCoreUser();
-    const { organization } = useCoreOrganization();
+    const { user } = useUser();
+    const { organization } = useOrganization();
     const { hidePersonal } = useOrganizationSwitcherContext();
 
+    if (!user) {
+      return null;
+    }
+
+    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
+
     return (
       <Button
         elementDescriptor={descriptors.organizationSwitcherTrigger}
@@ -77,13 +78,13 @@ const NotificationCountBadgeSwitcherTrigger = () => {
   /**
    * Prefetch user invitations and suggestions
    */
-  const { userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams);
+  const { userInvitations, userSuggestions } = useOrganizationList(organizationListParams);
   const { organizationSettings } = useEnvironment();
   const { isAuthorizedUser: canAcceptRequests } = useGate({
     permission: 'org:sys_memberships:manage',
   });
   const isDomainsEnabled = organizationSettings?.domains?.enabled;
-  const { membershipRequests } = useCoreOrganization({
+  const { membershipRequests } = useOrganization({
     membershipRequests: (isDomainsEnabled && canAcceptRequests) || undefined,
   });
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
index f2becc256e5..4897b785dbe 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
@@ -1,9 +1,9 @@
+import { useUser } from '@clerk/shared/react';
 import React from 'react';
 
-import { Plus } from '../../../ui/icons';
-import { useCoreUser } from '../../contexts';
 import { descriptors, localizationKeys } from '../../customizables';
 import { Action, SecondaryActions } from '../../elements';
+import { Plus } from '../../icons';
 import { UserInvitationSuggestionList } from './UserInvitationSuggestionList';
 import type { UserMembershipListProps } from './UserMembershipList';
 import { UserMembershipList } from './UserMembershipList';
@@ -15,9 +15,9 @@ export interface OrganizationActionListProps extends UserMembershipListProps {
 const CreateOrganizationButton = ({
   onCreateOrganizationClick,
 }: Pick<OrganizationActionListProps, 'onCreateOrganizationClick'>) => {
-  const user = useCoreUser();
+  const { user } = useUser();
 
-  if (!user.createOrganizationEnabled) {
+  if (!user?.createOrganizationEnabled) {
     return null;
   }
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
index bf8f1ab02f1..fd7ca0e25f2 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -1,8 +1,8 @@
+import { useOrganizationList } from '@clerk/shared/react';
 import type { OrganizationSuggestionResource, UserOrganizationInvitationResource } from '@clerk/types';
 import type { PropsWithChildren } from 'react';
 
 import { InfiniteListSpinner } from '../../common';
-import { useCoreOrganizationList } from '../../contexts';
 import { Box, Button, descriptors, Flex, localizationKeys, Text } from '../../customizables';
 import { Actions, OrganizationPreview, useCardState, withCardStateProvider } from '../../elements';
 import { useInView } from '../../hooks';
@@ -12,7 +12,7 @@ import { handleError } from '../../utils';
 import { organizationListParams, populateCacheRemoveItem, populateCacheUpdateItem } from './utils';
 
 const useFetchInvitations = () => {
-  const { userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams);
+  const { userInvitations, userSuggestions } = useOrganizationList(organizationListParams);
 
   const { ref } = useInView({
     threshold: 0,
@@ -37,7 +37,7 @@ const useFetchInvitations = () => {
 
 const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) => {
   const card = useCardState();
-  const { userSuggestions } = useCoreOrganizationList({
+  const { userSuggestions } = useOrganizationList({
     userSuggestions: organizationListParams.userSuggestions,
   });
 
@@ -74,7 +74,7 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
 
 const AcceptRejectInvitationButtons = (props: UserOrganizationInvitationResource) => {
   const card = useCardState();
-  const { userInvitations } = useCoreOrganizationList({
+  const { userInvitations } = useOrganizationList({
     userInvitations: organizationListParams.userInvitations,
   });
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
index 5d40e722668..5c425f48edf 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
@@ -1,13 +1,9 @@
+import { useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
 import React from 'react';
 
 import { InfiniteListSpinner } from '../../common';
-import {
-  useCoreOrganization,
-  useCoreOrganizationList,
-  useCoreUser,
-  useOrganizationSwitcherContext,
-} from '../../contexts';
+import { useOrganizationSwitcherContext } from '../../contexts';
 import { Box, descriptors, localizationKeys } from '../../customizables';
 import { OrganizationPreview, PersonalWorkspacePreview, PreviewButton } from '../../elements';
 import { useInView } from '../../hooks';
@@ -21,7 +17,7 @@ export type UserMembershipListProps = {
 };
 
 const useFetchMemberships = () => {
-  const { userMemberships } = useCoreOrganizationList({
+  const { userMemberships } = useOrganizationList({
     userMemberships: organizationListParams.userMemberships,
   });
 
@@ -46,14 +42,18 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
   const { onPersonalWorkspaceClick, onOrganizationClick } = props;
 
   const { hidePersonal } = useOrganizationSwitcherContext();
-  const { organization: currentOrg } = useCoreOrganization();
+  const { organization: currentOrg } = useOrganization();
   const { ref, userMemberships } = useFetchMemberships();
-  const user = useCoreUser();
+  const { user } = useUser();
 
   const otherOrgs = ((userMemberships.count || 0) > 0 ? userMemberships.data || [] : [])
     .map(e => e.organization)
     .filter(o => o.id !== currentOrg?.id);
 
+  if (!user) {
+    return null;
+  }
+
   const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
 
   const { isLoading, hasNextPage } = userMemberships;
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/utils.ts b/packages/clerk-js/src/ui/components/OrganizationSwitcher/utils.ts
index 38c62349587..345d6825d00 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/utils.ts
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/utils.ts
@@ -1,7 +1,6 @@
+import type { useOrganizationList } from '@clerk/shared/react';
 import type { ClerkPaginatedResponse } from '@clerk/types';
 
-import type { useCoreOrganizationList } from '../../contexts';
-
 export const organizationListParams = {
   userMemberships: {
     infinite: true,
@@ -13,7 +12,7 @@ export const organizationListParams = {
     infinite: true,
     status: ['pending', 'accepted'],
   },
-} satisfies Parameters<typeof useCoreOrganizationList>[0];
+} satisfies Parameters<typeof useOrganizationList>[0];
 
 export const populateCacheUpdateItem = <T extends { id: string }>(
   updatedItem: T,
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx
index 424de26d85a..7f5d8594e21 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx
@@ -1,8 +1,9 @@
+import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
 import { SignInEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
-import { ComponentContext, useCoreClerk, useSignInContext, withCoreSessionSwitchGuard } from '../../contexts';
+import { ComponentContext, useSignInContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
 import { ResetPassword } from './ResetPassword';
@@ -14,7 +15,7 @@ import { SignInSSOCallback } from './SignInSSOCallback';
 import { SignInStart } from './SignInStart';
 
 function RedirectToSignIn() {
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
   React.useEffect(() => {
     void clerk.redirectToSignIn();
   }, []);
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
index 8c31f33718e..852cb3166a8 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
@@ -1,9 +1,10 @@
 import { isUserLockedError } from '@clerk/shared';
+import { useClerk } from '@clerk/shared/react';
 import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/types';
 import React from 'react';
 
 import { clerkInvalidFAPIResponse } from '../../../core/errors';
-import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useSignInContext } from '../../contexts';
 import type { VerificationCodeCardProps } from '../../elements';
 import { useCardState, VerificationCodeCard } from '../../elements';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
@@ -33,9 +34,9 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
   const card = useCardState();
   const { navigate } = useRouter();
   const { navigateAfterSignIn } = useSignInContext();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const supportEmail = useSupportEmail();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   const goBack = () => {
     return navigate('../');
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEmailLinkCard.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEmailLinkCard.tsx
index dea2ef6134a..848196556b4 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEmailLinkCard.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEmailLinkCard.tsx
@@ -1,10 +1,11 @@
 import { isUserLockedError } from '@clerk/shared/error';
+import { useClerk } from '@clerk/shared/react';
 import type { EmailLinkFactor, SignInResource } from '@clerk/types';
 import React from 'react';
 
 import { EmailLinkStatusCard } from '../../common';
 import { buildEmailLinkRedirectUrl } from '../../common/redirects';
-import { useCoreClerk, useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
 import { Flow, localizationKeys, useLocalizations } from '../../customizables';
 import type { VerificationCodeCardProps } from '../../elements';
 import { VerificationLinkCard } from '../../elements';
@@ -27,10 +28,10 @@ export const SignInFactorOneEmailLinkCard = (props: SignInFactorOneEmailLinkCard
   const { signInUrl } = useEnvironment().displayConfig;
   const { navigate } = useRouter();
   const { navigateAfterSignIn } = useSignInContext();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const { startEmailLinkFlow, cancelEmailLinkFlow } = useEmailLink(signIn);
   const [showVerifyModal, setShowVerifyModal] = React.useState(false);
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   React.useEffect(() => {
     void startEmailLinkVerification();
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
index 630f6209a38..cacd93168cf 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
@@ -1,9 +1,10 @@
 import { isUserLockedError } from '@clerk/shared/error';
+import { useClerk } from '@clerk/shared/react';
 import type { ResetPasswordCodeFactor } from '@clerk/types';
 import React from 'react';
 
 import { clerkInvalidFAPIResponse } from '../../../core/errors';
-import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useSignInContext } from '../../contexts';
 import { descriptors, Flex, Flow, localizationKeys } from '../../customizables';
 import { Card, CardAlert, Footer, Form, Header, IdentityPreview, useCardState } from '../../elements';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
@@ -46,7 +47,7 @@ const usePasswordControl = (props: SignInFactorOnePasswordProps) => {
 export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps) => {
   const { onShowAlternativeMethodsClick } = props;
   const card = useCardState();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const signIn = useCoreSignIn();
   const { navigateAfterSignIn } = useSignInContext();
   const supportEmail = useSupportEmail();
@@ -54,7 +55,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
   const { navigate } = useRouter();
   const [showHavingTrouble, setShowHavingTrouble] = React.useState(false);
   const toggleHavingTrouble = React.useCallback(() => setShowHavingTrouble(s => !s), [setShowHavingTrouble]);
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   const goBack = () => {
     return navigate('../');
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
index 086fcc37aab..6a44a5052b8 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
@@ -1,9 +1,10 @@
 import { isUserLockedError } from '@clerk/shared/error';
+import { useClerk } from '@clerk/shared/react';
 import type { SignInResource } from '@clerk/types';
 import React from 'react';
 
 import { clerkInvalidFAPIResponse } from '../../../core/errors';
-import { useCoreClerk, useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
 import { Col, descriptors, localizationKeys } from '../../customizables';
 import { Card, CardAlert, Footer, Form, Header, useCardState } from '../../elements';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
@@ -20,7 +21,7 @@ export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCa
   const signIn = useCoreSignIn();
   const { displayConfig } = useEnvironment();
   const { navigateAfterSignIn } = useSignInContext();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const { navigate } = useRouter();
   const supportEmail = useSupportEmail();
   const card = useCardState();
@@ -29,7 +30,7 @@ export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCa
     label: localizationKeys('formFieldLabel__backupCode'),
     isRequired: true,
   });
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   const isResettingPassword = (resource: SignInResource) =>
     isResetPasswordStrategy(resource.firstFactorVerification?.strategy) &&
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
index cf1b4f308e5..b6331023155 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
@@ -1,9 +1,10 @@
 import { isUserLockedError } from '@clerk/shared/error';
+import { useClerk } from '@clerk/shared/react';
 import type { PhoneCodeFactor, SignInResource, TOTPFactor } from '@clerk/types';
 import React from 'react';
 
 import { clerkInvalidFAPIResponse } from '../../../core/errors';
-import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useSignInContext } from '../../contexts';
 import { localizationKeys, Text } from '../../customizables';
 import type { VerificationCodeCardProps } from '../../elements';
 import { useCardState, VerificationCodeCard } from '../../elements';
@@ -32,10 +33,10 @@ export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) =>
   const signIn = useCoreSignIn();
   const card = useCardState();
   const { navigateAfterSignIn } = useSignInContext();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const { navigate } = useRouter();
   const supportEmail = useSupportEmail();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   React.useEffect(() => {
     if (props.factorAlreadyPrepared) {
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx
index 646c8f88b22..5b10d61fc16 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx
@@ -1,7 +1,8 @@
+import { useClerk } from '@clerk/shared/react';
 import React from 'react';
 
 import { buildSSOCallbackURL } from '../../common/redirects';
-import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useSignInContext } from '../../contexts';
 import { useEnvironment } from '../../contexts/EnvironmentContext';
 import { useCardState } from '../../elements/contexts';
 import type { SocialButtonsProps } from '../../elements/SocialButtons';
@@ -10,7 +11,7 @@ import { useRouter } from '../../router';
 import { handleError } from '../../utils';
 
 export const SignInSocialButtons = React.memo((props: SocialButtonsProps) => {
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
   const { navigate } = useRouter();
   const card = useCardState();
   const { displayConfig } = useEnvironment();
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
index 4f5a593bad4..ac5745fd7a6 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -1,3 +1,4 @@
+import { useClerk } from '@clerk/shared/react';
 import type { ClerkAPIError, SignInCreateParams } from '@clerk/types';
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
@@ -11,7 +12,7 @@ import {
   withRedirectToHomeSingleSessionGuard,
 } from '../../common';
 import { buildSSOCallbackURL } from '../../common/redirects';
-import { useCoreClerk, useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
 import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
 import {
   Card,
@@ -33,7 +34,7 @@ import { SignInSocialButtons } from './SignInSocialButtons';
 
 export function _SignInStart(): JSX.Element {
   const card = useCardState();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
   const status = useLoadingStatus();
   const { displayConfig, userSettings } = useEnvironment();
   const signIn = useCoreSignIn();
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx
index d33dce3d241..64eedf9601f 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx
@@ -1,8 +1,9 @@
+import { useClerk } from '@clerk/shared/react';
 import type { SignUpModalProps, SignUpProps } from '@clerk/types';
 import React from 'react';
 
 import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
-import { ComponentContext, useCoreClerk, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
+import { ComponentContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
 import { SignUpContinue } from './SignUpContinue';
@@ -12,7 +13,7 @@ import { SignUpVerifyEmail } from './SignUpVerifyEmail';
 import { SignUpVerifyPhone } from './SignUpVerifyPhone';
 
 function RedirectToSignUp() {
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
   React.useEffect(() => {
     void clerk.redirectToSignUp();
   }, []);
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
index 47ebf5120c0..9a37eb6e776 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
@@ -1,6 +1,7 @@
+import { useClerk } from '@clerk/shared/react';
 import React from 'react';
 
-import { useCoreClerk, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
+import { useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
 import { descriptors, Flex, Flow, localizationKeys } from '../../customizables';
 import {
   Card,
@@ -28,7 +29,7 @@ import { completeSignUpFlow } from './util';
 
 function _SignUpContinue() {
   const card = useCardState();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
   const { navigate } = useRouter();
   const { displayConfig, userSettings } = useEnvironment();
   const { attributes } = userSettings;
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx
index b852bf181b2..fbdd1d4eb2b 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx
@@ -1,9 +1,10 @@
+import { useClerk } from '@clerk/shared/react';
 import type { SignUpResource } from '@clerk/types';
 import React from 'react';
 
 import { EmailLinkStatusCard } from '../../common';
 import { buildEmailLinkRedirectUrl } from '../../common/redirects';
-import { useCoreClerk, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
+import { useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
 import { Flow, localizationKeys, useLocalizations } from '../../customizables';
 import { VerificationLinkCard } from '../../elements';
 import { useCardState } from '../../elements/contexts';
@@ -20,7 +21,7 @@ export const SignUpEmailLinkCard = () => {
   const card = useCardState();
   const { displayConfig } = useEnvironment();
   const { navigate } = useRouter();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const [showVerifyModal, setShowVerifyModal] = React.useState(false);
 
   const { startEmailLinkFlow, cancelEmailLinkFlow } = useEmailLink(signUp);
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx
index 3db24ac7c14..921596b035f 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx
@@ -1,8 +1,9 @@
+import { useClerk } from '@clerk/shared/react';
 import type { OAuthStrategy } from '@clerk/types';
 import React from 'react';
 
 import { buildSSOCallbackURL } from '../../common/redirects';
-import { useCoreClerk, useCoreSignUp, useSignUpContext } from '../../contexts';
+import { useCoreSignUp, useSignUpContext } from '../../contexts';
 import { useEnvironment } from '../../contexts/EnvironmentContext';
 import { useCardState } from '../../elements';
 import type { SocialButtonsProps } from '../../elements/SocialButtons';
@@ -13,7 +14,7 @@ import { handleError } from '../../utils';
 export type SignUpSocialButtonsProps = SocialButtonsProps & { continueSignUp?: boolean };
 
 export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps) => {
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
   const { navigate } = useRouter();
   const card = useCardState();
   const { displayConfig } = useEnvironment();
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
index 0901378cfa2..33580d544cb 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
@@ -1,9 +1,10 @@
+import { useClerk } from '@clerk/shared/react';
 import React from 'react';
 
 import { ERROR_CODES } from '../../../core/constants';
 import { getClerkQueryParam } from '../../../utils/getClerkQueryParam';
 import { buildSSOCallbackURL, withRedirectToHomeSingleSessionGuard } from '../../common';
-import { useCoreClerk, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
+import { useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
 import { descriptors, Flex, Flow, localizationKeys, useAppearance, useLocalizations } from '../../customizables';
 import {
   Card,
@@ -27,14 +28,14 @@ import { completeSignUpFlow } from './util';
 
 function _SignUpStart(): JSX.Element {
   const card = useCardState();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
   const status = useLoadingStatus();
   const signUp = useCoreSignUp();
   const { showOptionalFields } = useAppearance().parsedLayout;
   const { userSettings, displayConfig } = useEnvironment();
   const { navigate } = useRouter();
   const { attributes } = userSettings;
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const ctx = useSignUpContext();
   const { navigateAfterSignUp, signInUrl, unsafeMetadata } = ctx;
   const [activeCommIdentifierType, setActiveCommIdentifierType] = React.useState<ActiveIdentifier>(
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx
index 3267ac6fa73..8970ba004ff 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx
@@ -1,6 +1,7 @@
+import { useClerk } from '@clerk/shared/react';
 import type { SignUpResource } from '@clerk/types';
 
-import { useCoreClerk, useSignUpContext } from '../../contexts';
+import { useSignUpContext } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import type { VerificationCodeCardProps } from '../../elements';
 import { VerificationCodeCard } from '../../elements';
@@ -20,7 +21,7 @@ type SignInFactorOneCodeFormProps = {
 
 export const SignUpVerificationCodeForm = (props: SignInFactorOneCodeFormProps) => {
   const { navigateAfterSignUp } = useSignUpContext();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const { navigate } = useRouter();
 
   const goBack = () => {
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
index 53e56058ee4..c2a48a25274 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
@@ -1,7 +1,8 @@
+import { useUser } from '@clerk/shared/react';
 import { useId } from 'react';
 
 import { getFullName, getIdentifier } from '../../../utils/user';
-import { useCoreUser, useUserButtonContext, withCoreUserGuard } from '../../contexts';
+import { useUserButtonContext, withCoreUserGuard } from '../../contexts';
 import { descriptors, Flex, Flow, Text } from '../../customizables';
 import { Popover, withCardStateProvider, withFloatingTree } from '../../elements';
 import { usePopover } from '../../hooks';
@@ -51,8 +52,12 @@ const _UserButton = withFloatingTree(() => {
 });
 
 const UserButtonTopLevelIdentifier = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
+
   const { showName } = useUserButtonContext();
+  if (!user) {
+    return null;
+  }
   return showName ? (
     <Text
       variant='regularMedium'
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
index 8c2b71547dd..b96e14af3d7 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
@@ -1,7 +1,8 @@
+import { useSession, useUser } from '@clerk/shared/react';
 import type { ActiveSessionResource } from '@clerk/types';
 import React from 'react';
 
-import { useCoreSession, useCoreUser, useEnvironment, useUserButtonContext } from '../../contexts';
+import { useEnvironment, useUserButtonContext } from '../../contexts';
 import { descriptors, localizationKeys } from '../../customizables';
 import { Action, Actions, PopoverCard, PreviewButton, SecondaryActions, UserPreview } from '../../elements';
 import { RootBox } from '../../elements/RootBox';
@@ -13,9 +14,9 @@ type UserButtonPopoverProps = { close: () => void } & PropsOfComponent<typeof Po
 
 export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopoverProps>((props, ref) => {
   const { close, ...rest } = props;
-  const session = useCoreSession() as ActiveSessionResource;
+  const { session } = useSession() as { session: ActiveSessionResource };
   const { authConfig } = useEnvironment();
-  const user = useCoreUser();
+  const { user } = useUser();
   const {
     handleAddAccountClicked,
     handleManageAccountClicked,
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
index d4015199303..b3b0f2eceb9 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
@@ -1,6 +1,6 @@
+import { useUser } from '@clerk/shared/react';
 import { forwardRef } from 'react';
 
-import { useCoreUser } from '../../contexts';
 import { Button, descriptors } from '../../customizables';
 import { UserAvatar, withAvatarShimmer } from '../../elements';
 import type { PropsOfComponent } from '../../styledSystem';
@@ -12,7 +12,7 @@ type UserButtonTriggerProps = PropsOfComponent<typeof Button> & {
 export const UserButtonTrigger = withAvatarShimmer(
   forwardRef<HTMLButtonElement, UserButtonTriggerProps>((props, ref) => {
     const { sx, ...rest } = props;
-    const user = useCoreUser();
+    const { user } = useUser();
 
     return (
       <Button
diff --git a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx
index c394e2bf5cf..e271bfd4d27 100644
--- a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx
@@ -1,13 +1,13 @@
+import { useClerk, useSessionList } from '@clerk/shared/react';
 import type { ActiveSessionResource, UserButtonProps, UserResource } from '@clerk/types';
 
 import { windowNavigate } from '../../../utils/windowNavigate';
-import { useCoreClerk, useCoreSessionList } from '../../contexts';
 import { useCardState } from '../../elements';
 import { useRouter } from '../../router';
 import { sleep } from '../../utils';
 
 type UseMultisessionActionsParams = {
-  user: UserResource | undefined;
+  user: UserResource | null | undefined;
   actionCompleteCallback?: () => void;
   navigateAfterSignOut?: () => any;
   navigateAfterMultiSessionSingleSignOut?: () => any;
@@ -17,11 +17,11 @@ type UseMultisessionActionsParams = {
 } & Pick<UserButtonProps, 'userProfileMode' | 'appearance' | 'userProfileProps'>;
 
 export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
-  const { setActive, signOut, openUserProfile } = useCoreClerk();
+  const { setActive, signOut, openUserProfile } = useClerk();
   const card = useCardState();
-  const sessions = useCoreSessionList();
+  const { sessions } = useSessionList();
   const { navigate } = useRouter();
-  const activeSessions = sessions.filter(s => s.status === 'active') as ActiveSessionResource[];
+  const activeSessions = sessions?.filter(s => s.status === 'active') as ActiveSessionResource[];
   const otherSessions = activeSessions.filter(s => s.user?.id !== opts.user?.id);
 
   const handleSignOutSessionClicked = (session: ActiveSessionResource) => () => {
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
index 10fd409133a..9a7976ac1ad 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
@@ -1,7 +1,7 @@
+import { useSession, useUser } from '@clerk/shared/react';
 import type { SessionWithActivitiesResource } from '@clerk/types';
 import React from 'react';
 
-import { useCoreSession, useCoreUser } from '../../contexts';
 import { Badge, Col, descriptors, Flex, Icon, localizationKeys, Text, useLocalizations } from '../../customizables';
 import { FullHeightLoader, ProfileSection } from '../../elements';
 import { DeviceLaptop, DeviceMobile } from '../../icons';
@@ -12,8 +12,8 @@ import { UserProfileAccordion } from './UserProfileAccordion';
 import { currentSessionFirst } from './utils';
 
 export const ActiveDevicesSection = () => {
-  const user = useCoreUser();
-  const session = useCoreSession();
+  const { user } = useUser();
+  const { session } = useSession();
   const [sessionsWithActivities, setSessionsWithActivities] = React.useState<SessionWithActivitiesResource[]>([]);
 
   React.useEffect(() => {
@@ -27,7 +27,7 @@ export const ActiveDevicesSection = () => {
     >
       {!sessionsWithActivities.length && <FullHeightLoader />}
       {!!sessionsWithActivities.length &&
-        sessionsWithActivities.sort(currentSessionFirst(session?.id)).map(sa => (
+        sessionsWithActivities.sort(currentSessionFirst(session!.id)).map(sa => (
           <DeviceAccordion
             key={sa.id}
             session={sa}
@@ -38,7 +38,7 @@ export const ActiveDevicesSection = () => {
 };
 
 const DeviceAccordion = (props: { session: SessionWithActivitiesResource }) => {
-  const isCurrent = useCoreSession()?.id === props.session.id;
+  const isCurrent = useSession().session?.id === props.session.id;
   const revoke = async () => {
     if (isCurrent || !props.session) {
       return;
@@ -74,9 +74,9 @@ const DeviceAccordion = (props: { session: SessionWithActivitiesResource }) => {
 };
 
 const DeviceInfo = (props: { session: SessionWithActivitiesResource }) => {
-  const coreSession = useCoreSession();
-  const isCurrent = coreSession?.id === props.session.id;
-  const isCurrentlyImpersonating = !!coreSession.actor;
+  const { session } = useSession();
+  const isCurrent = session?.id === props.session.id;
+  const isCurrentlyImpersonating = !!session?.actor;
   const isImpersonationSession = !!props.session.actor;
   const { city, country, browserName, browserVersion, deviceType, ipAddress, isMobile } = props.session.latestActivity;
   const title = deviceType ? deviceType : isMobile ? 'Mobile device' : 'Desktop device';
diff --git a/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx b/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx
index fa7cf1423a2..3a49d7f340b 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx
@@ -1,8 +1,8 @@
+import { useUser } from '@clerk/shared/react';
 import type { TOTPResource } from '@clerk/types';
 import React from 'react';
 
 import { QRCode } from '../../common';
-import { useCoreUser } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { Button, Col, descriptors, localizationKeys, Text } from '../../customizables';
 import {
@@ -25,7 +25,7 @@ type DisplayFormat = 'qr' | 'uri';
 
 export const AddAuthenticatorApp = (props: AddAuthenticatorAppProps) => {
   const { title, onContinue } = props;
-  const user = useCoreUser();
+  const { user } = useUser();
   const card = useCardState();
   const [totp, setTOTP] = React.useState<TOTPResource | undefined>(undefined);
   const [displayFormat, setDisplayFormat] = React.useState<DisplayFormat>('qr');
@@ -34,7 +34,7 @@ export const AddAuthenticatorApp = (props: AddAuthenticatorAppProps) => {
   // Non-idempotent useEffect
   React.useEffect(() => {
     void user
-      .createTOTP()
+      ?.createTOTP()
       .then((totp: TOTPResource) => setTOTP(totp))
       .catch(err => handleError(err, [], card.setError));
   }, []);
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsPage.tsx
index 985379eb290..5f3357cc407 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsPage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsPage.tsx
@@ -1,9 +1,10 @@
+import { useUser } from '@clerk/shared/react';
 import type { ExternalAccountResource, OAuthProvider, OAuthStrategy } from '@clerk/types';
 import React from 'react';
 
 import { appendModalState } from '../../../utils';
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser, useUserProfileContext } from '../../contexts';
+import { useUserProfileContext } from '../../contexts';
 import { Col, Image, localizationKeys, Text } from '../../customizables';
 import {
   ArrowBlockButton,
@@ -21,12 +22,12 @@ import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 
 export const ConnectedAccountsPage = withCardStateProvider(() => {
   const title = localizationKeys('userProfile.connectedAccountPage.title');
-  const user = useCoreUser();
+  const { user } = useUser();
 
   const { params } = useRouter();
   const { id } = params || {};
 
-  const ref = React.useRef<ExternalAccountResource | undefined>(user.externalAccounts.find(a => a.id === id));
+  const ref = React.useRef<ExternalAccountResource | undefined>(user?.externalAccounts.find(a => a.id === id));
   const wizard = useWizard({ defaultStep: ref.current ? 1 : 0 });
 
   // TODO: Better handling of success redirect
@@ -44,14 +45,14 @@ export const ConnectedAccountsPage = withCardStateProvider(() => {
 
 const AddConnectedAccount = () => {
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
   const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();
   const { additionalOAuthScopes, componentName, mode } = useUserProfileContext();
   const isModal = mode === 'modal';
 
   const enabledStrategies = strategies.filter(s => s.startsWith('oauth')) as OAuthStrategy[];
-  const connectedStrategies = user.verifiedExternalAccounts.map(a => `oauth_${a.provider}`) as OAuthStrategy[];
+  const connectedStrategies = user?.verifiedExternalAccounts.map(a => `oauth_${a.provider}`) as OAuthStrategy[];
 
   const unconnectedStrategies = enabledStrategies.filter(provider => {
     return !connectedStrategies.includes(provider);
@@ -68,7 +69,7 @@ const AddConnectedAccount = () => {
     // If yes, refactor and cleanup:
     card.setLoading(strategy);
     user
-      .createExternalAccount({
+      ?.createExternalAccount({
         strategy: strategy,
         redirectUrl,
         additionalScopes,
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
index a89132d0933..8e9d16359e3 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
@@ -1,19 +1,23 @@
+import { useUser } from '@clerk/shared/react';
 import type { ExternalAccountResource, OAuthProvider, OAuthScope, OAuthStrategy } from '@clerk/types';
 
-import { useRouter } from '../../../ui/router';
 import { appendModalState } from '../../../utils';
-import { useCoreUser, useUserProfileContext } from '../../contexts';
+import { useUserProfileContext } from '../../contexts';
 import { Badge, Col, descriptors, Flex, Image, localizationKeys } from '../../customizables';
 import { ProfileSection, useCardState, UserPreview } from '../../elements';
 import { useEnabledThirdPartyProviders } from '../../hooks';
+import { useRouter } from '../../router';
 import { handleError } from '../../utils';
 import { LinkButtonWithDescription } from './LinkButtonWithDescription';
 import { UserProfileAccordion } from './UserProfileAccordion';
 import { AddBlockButton } from './UserProfileBlockButtons';
 
 export const ConnectedAccountsSection = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
+  if (!user) {
+    return null;
+  }
   const accounts = [
     ...user.verifiedExternalAccounts,
     ...user.unverifiedExternalAccounts.filter(a => a.verification?.error),
@@ -41,7 +45,7 @@ export const ConnectedAccountsSection = () => {
 
 const ConnectedAccountAccordion = ({ account }: { account: ExternalAccountResource }) => {
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
   const router = useRouter();
   const { providerToDisplayData } = useEnabledThirdPartyProviders();
@@ -71,6 +75,10 @@ const ConnectedAccountAccordion = ({ account }: { account: ExternalAccountResour
       if (reauthorizationRequired) {
         response = await account.reauthorize({ additionalScopes, redirectUrl });
       } else {
+        if (!user) {
+          throw Error('user is not defined');
+        }
+
         response = await user.createExternalAccount({
           strategy: account.verification!.strategy as OAuthStrategy,
           redirectUrl,
diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx
index 2cb3f702c85..42148ad68bb 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx
@@ -1,4 +1,6 @@
-import { useCoreClerk, useCoreUser, useEnvironment } from '../../contexts';
+import { useClerk, useUser } from '@clerk/shared/react';
+
+import { useEnvironment } from '../../contexts';
 import { localizationKeys, Text } from '../../customizables';
 import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
 import { useRouter } from '../../router';
@@ -9,11 +11,15 @@ export const DeletePage = withCardStateProvider(() => {
   const card = useCardState();
   const environment = useEnvironment();
   const router = useRouter();
-  const user = useCoreUser();
-  const clerk = useCoreClerk();
+  const { user } = useUser();
+  const clerk = useClerk();
 
   const deleteUser = async () => {
     try {
+      if (!user) {
+        throw Error('user is not defined');
+      }
+
       await user.delete();
       if (clerk.client.activeSessions.length > 0) {
         await router.navigate(environment.displayConfig.afterSignOutOneUrl);
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailPage.tsx
index 64db4c7bbba..11bc2bd232a 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EmailPage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EmailPage.tsx
@@ -1,8 +1,9 @@
+import { useUser } from '@clerk/shared/react';
 import type { EmailAddressResource } from '@clerk/types';
 import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { localizationKeys, Text } from '../../customizables';
 import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
 import { useRouter } from '../../router';
@@ -15,14 +16,14 @@ import { VerifyWithLink } from './VerifyWithLink';
 export const EmailPage = withCardStateProvider(() => {
   const title = localizationKeys('userProfile.emailAddressPage.title');
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
   const environment = useEnvironment();
   const preferEmailLinks = emailLinksEnabledForInstance(environment);
 
   const { params } = useRouter();
   const { id } = params || {};
 
-  const emailAddressRef = React.useRef<EmailAddressResource | undefined>(user.emailAddresses.find(a => a.id === id));
+  const emailAddressRef = React.useRef<EmailAddressResource | undefined>(user?.emailAddresses.find(a => a.id === id));
   const wizard = useWizard({
     defaultStep: emailAddressRef.current ? 1 : 0,
     onNextStep: () => card.setError(undefined),
@@ -35,12 +36,12 @@ export const EmailPage = withCardStateProvider(() => {
     isRequired: true,
   });
 
-  const canSubmit = emailField.value.length > 1 && user.username !== emailField.value;
+  const canSubmit = emailField.value.length > 1 && user?.username !== emailField.value;
 
   const addEmail = async (e: React.FormEvent) => {
     e.preventDefault();
     return user
-      .createEmailAddress({ email: emailField.value })
+      ?.createEmailAddress({ email: emailField.value })
       .then(res => {
         emailAddressRef.current = res;
         wizard.nextStep();
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailSection.tsx
index bddc2169928..28d8a3ac19e 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EmailSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EmailSection.tsx
@@ -1,6 +1,6 @@
+import { useUser } from '@clerk/shared/react';
 import type { EmailAddressResource } from '@clerk/types';
 
-import { useCoreUser } from '../../contexts';
 import { Badge, Col, localizationKeys } from '../../customizables';
 import { ProfileSection, useCardState } from '../../elements';
 import { useRouter } from '../../router';
@@ -12,14 +12,14 @@ import { primaryIdentificationFirst } from './utils';
 
 export const EmailsSection = () => {
   const { navigate } = useRouter();
-  const user = useCoreUser();
+  const { user } = useUser();
 
   return (
     <ProfileSection
       title={localizationKeys('userProfile.start.emailAddressesSection.title')}
       id='emailAddresses'
     >
-      {user.emailAddresses.sort(primaryIdentificationFirst(user.primaryEmailAddressId)).map(email => (
+      {user?.emailAddresses.sort(primaryIdentificationFirst(user.primaryEmailAddressId)).map(email => (
         <EmailAccordion
           key={email.id}
           email={email}
@@ -37,12 +37,12 @@ export const EmailsSection = () => {
 
 const EmailAccordion = ({ email }: { email: EmailAddressResource }) => {
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
-  const isPrimary = user.primaryEmailAddressId === email.id;
+  const isPrimary = user?.primaryEmailAddressId === email.id;
   const isVerified = email.verification.status === 'verified';
   const setPrimary = () => {
-    return user.update({ primaryEmailAddressId: email.id }).catch(e => handleError(e, [], card.setError));
+    return user!.update({ primaryEmailAddressId: email.id }).catch(e => handleError(e, [], card.setError));
   };
 
   return (
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
index d85cdb17aa8..99f62756241 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
@@ -1,21 +1,21 @@
+import { useUser } from '@clerk/shared/react';
 import type { SamlAccountResource } from '@clerk/types';
 
-import { useRouter } from '../../../ui/router';
-import { useCoreUser } from '../../contexts';
 import { Badge, Col, descriptors, Flex, Image, localizationKeys } from '../../customizables';
 import { ProfileSection, UserPreview } from '../../elements';
 import { useSaml } from '../../hooks';
+import { useRouter } from '../../router';
 import { UserProfileAccordion } from './UserProfileAccordion';
 
 export const EnterpriseAccountsSection = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
 
   return (
     <ProfileSection
       title={localizationKeys('userProfile.start.enterpriseAccountsSection.title')}
       id='enterpriseAccounts'
     >
-      {user.samlAccounts.map(account => (
+      {user?.samlAccounts.map(account => (
         <EnterpriseAccountAccordion
           key={account.id}
           account={account}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeCreatePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeCreatePage.tsx
index cd966066b1b..179a830efde 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeCreatePage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeCreatePage.tsx
@@ -1,7 +1,7 @@
+import { useUser } from '@clerk/shared/react';
 import type { BackupCodeResource } from '@clerk/types';
 import React from 'react';
 
-import { useCoreUser } from '../../contexts';
 import { descriptors, localizationKeys, Text } from '../../customizables';
 import {
   ContentPage,
@@ -16,7 +16,7 @@ import { MfaBackupCodeList } from './MfaBackupCodeList';
 import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 
 export const MfaBackupCodeCreatePage = withCardStateProvider(() => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const card = useCardState();
   const [backupCode, setBackupCode] = React.useState<BackupCodeResource | undefined>(undefined);
 
@@ -26,7 +26,7 @@ export const MfaBackupCodeCreatePage = withCardStateProvider(() => {
     }
 
     void user
-      .createBackupCode()
+      ?.createBackupCode()
       .then((backupCode: BackupCodeResource) => setBackupCode(backupCode))
       .catch(err => handleError(err, [], card.setError));
   }, []);
diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx
index 1be49979061..0ffd4fff743 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx
@@ -1,6 +1,8 @@
+import { useUser } from '@clerk/shared/react';
+
 import { getIdentifier } from '../../../utils/user';
 import { PrintableComponent, usePrintable } from '../../common';
-import { useCoreUser, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { Button, Col, Flex, Grid, Heading, localizationKeys, Text } from '../../customizables';
 import { useClipboard } from '../../hooks';
@@ -15,9 +17,14 @@ type MfaBackupCodeListProps = {
 export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
   const { subtitle, backupCodes } = props;
   const { applicationName } = useEnvironment().displayConfig;
-  const user = useCoreUser();
+  const { user } = useUser();
+
   const { print, printableProps } = usePrintable();
   const { onCopy, hasCopied } = useClipboard(backupCodes?.join(',') || '');
+
+  if (!user) {
+    return null;
+  }
   const userIdentifier = getIdentifier(user);
 
   const onDownloadTxtFile = () => {
diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaPage.tsx
index 20dcfa28749..8401ab413f3 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/MfaPage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/MfaPage.tsx
@@ -1,7 +1,8 @@
+import { useUser } from '@clerk/shared/react';
 import type { VerificationStrategy } from '@clerk/types';
 import React from 'react';
 
-import { useCoreUser, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { Col, Grid, localizationKeys, Text } from '../../customizables';
 import {
   ContentPage,
@@ -24,7 +25,12 @@ export const MfaPage = withCardStateProvider(() => {
   const {
     userSettings: { attributes },
   } = useEnvironment();
-  const user = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
+
   const title = localizationKeys('userProfile.mfaPage.title');
   const [selectedMethod, setSelectedMethod] = React.useState<VerificationStrategy>();
 
diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodePage.tsx
index 2481ff00bf2..4e2472774f3 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodePage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodePage.tsx
@@ -1,8 +1,8 @@
+import { useUser } from '@clerk/shared/react';
 import type { PhoneNumberResource } from '@clerk/types';
 import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { Col, localizationKeys, Text } from '../../customizables';
 import {
@@ -72,7 +72,12 @@ type AddMfaProps = {
 const AddMfa = (props: AddMfaProps) => {
   const { onSuccess, title, onAddPhoneClick, onUnverifiedPhoneClick, resourceRef } = props;
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
+
   const availableMethods = user.phoneNumbers.filter(p => !p.reservedForSecondFactor);
 
   const enableMfa = async (phone: PhoneNumberResource) => {
diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx
index a74e758d59f..40244d1ddaa 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx
@@ -1,4 +1,6 @@
-import { useCoreUser, useEnvironment } from '../../contexts';
+import { useUser } from '@clerk/shared/react';
+
+import { useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { ProfileSection } from '../../elements';
 import { useRouter } from '../../router';
@@ -13,7 +15,11 @@ export const MfaSection = () => {
   const {
     userSettings: { attributes },
   } = useEnvironment();
-  const user = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
 
   const secondFactors = getSecondFactors(attributes);
   const secondFactorsAvailableToAdd = getSecondFactorsAvailableToAdd(attributes, user);
diff --git a/packages/clerk-js/src/ui/components/UserProfile/PasswordPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/PasswordPage.tsx
index 0505c1b41c1..c56852a0714 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PasswordPage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/PasswordPage.tsx
@@ -1,7 +1,8 @@
+import { useSession, useUser } from '@clerk/shared/react';
 import { useRef } from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreSession, useCoreUser, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { localizationKeys, useLocalizations } from '../../customizables';
 import {
   ContentPage,
@@ -34,8 +35,13 @@ const generateSuccessPageText = (userHasPassword: boolean, sessionSignOut: boole
 };
 
 export const PasswordPage = withCardStateProvider(() => {
-  const user = useCoreUser();
-  const session = useCoreSession();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
+
+  const { session } = useSession();
   const title = user.passwordEnabled
     ? localizationKeys('userProfile.passwordPage.changePasswordTitle')
     : localizationKeys('userProfile.passwordPage.title');
@@ -138,7 +144,7 @@ export const PasswordPage = withCardStateProvider(() => {
             readOnly
             id='identifier-field'
             name='identifier'
-            value={session.publicUserData.identifier || ''}
+            value={session?.publicUserData.identifier || ''}
             style={{ display: 'none' }}
           />
           {user.passwordEnabled && (
diff --git a/packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx
index d9a4134219c..04541ee5cd3 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx
@@ -1,4 +1,5 @@
-import { useCoreUser } from '../../contexts';
+import { useUser } from '@clerk/shared/react';
+
 import { localizationKeys, Text } from '../../customizables';
 import { ProfileSection } from '../../elements';
 import { Pencil } from '../../icons';
@@ -7,7 +8,13 @@ import { AddBlockButton } from './UserProfileBlockButtons';
 
 export const PasswordSection = () => {
   const { navigate } = useRouter();
-  const { passwordEnabled } = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
+
+  const { passwordEnabled } = user;
 
   const navigateToPage = () => {
     return navigate('password');
diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhonePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/PhonePage.tsx
index 8ede7518f06..ea75c95d338 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PhonePage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/PhonePage.tsx
@@ -1,8 +1,8 @@
+import { useUser } from '@clerk/shared/react';
 import type { PhoneNumberResource } from '@clerk/types';
 import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { localizationKeys, Text } from '../../customizables';
 import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
@@ -12,12 +12,12 @@ import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 import { VerifyWithCode } from './VerifyWithCode';
 
 export const PhonePage = withCardStateProvider(() => {
-  const user = useCoreUser();
+  const { user } = useUser();
 
   const { params } = useRouter();
   const { id } = params || {};
 
-  const phoneNumberRef = React.useRef<PhoneNumberResource | undefined>(user.phoneNumbers.find(a => a.id === id));
+  const phoneNumberRef = React.useRef<PhoneNumberResource | undefined>(user?.phoneNumbers.find(a => a.id === id));
   const wizard = useWizard({ defaultStep: phoneNumberRef.current ? 1 : 0 });
 
   return (
@@ -52,7 +52,7 @@ type AddPhoneProps = {
 export const AddPhone = (props: AddPhoneProps) => {
   const { title, onSuccess, resourceRef } = props;
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
 
   const phoneField = useFormControl('phoneNumber', '', {
     type: 'tel',
@@ -60,12 +60,12 @@ export const AddPhone = (props: AddPhoneProps) => {
     isRequired: true,
   });
 
-  const canSubmit = phoneField.value.length > 1 && user.username !== phoneField.value;
+  const canSubmit = phoneField.value.length > 1 && user?.username !== phoneField.value;
 
   const addPhone = async (e: React.FormEvent) => {
     e.preventDefault();
     return user
-      .createPhoneNumber({ phoneNumber: phoneField.value })
+      ?.createPhoneNumber({ phoneNumber: phoneField.value })
       .then(res => {
         resourceRef.current = res;
         onSuccess();
diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
index b61c1a8d82f..25c16143882 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
@@ -1,6 +1,6 @@
+import { useUser } from '@clerk/shared/react';
 import type { PhoneNumberResource } from '@clerk/types';
 
-import { useCoreUser } from '../../contexts';
 import { Badge, Col, localizationKeys, Text } from '../../customizables';
 import { ProfileSection, useCardState } from '../../elements';
 import { useRouter } from '../../router';
@@ -11,7 +11,7 @@ import { AddBlockButton } from './UserProfileBlockButtons';
 import { primaryIdentificationFirst } from './utils';
 
 export const PhoneSection = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
 
   return (
@@ -19,7 +19,7 @@ export const PhoneSection = () => {
       title={localizationKeys('userProfile.start.phoneNumbersSection.title')}
       id='phoneNumbers'
     >
-      {user.phoneNumbers.sort(primaryIdentificationFirst(user.primaryPhoneNumberId)).map(phone => (
+      {user?.phoneNumbers.sort(primaryIdentificationFirst(user.primaryPhoneNumberId)).map(phone => (
         <PhoneAccordion
           key={phone.id}
           phone={phone}
@@ -37,8 +37,13 @@ export const PhoneSection = () => {
 
 const PhoneAccordion = ({ phone }: { phone: PhoneNumberResource }) => {
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
+
+  if (!user) {
+    return null;
+  }
+
   const isPrimary = user.primaryPhoneNumberId === phone.id;
   const isVerified = phone.verification.status === 'verified';
   const setPrimary = () => {
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ProfilePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/ProfilePage.tsx
index ff40549c3e7..f04149986df 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ProfilePage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ProfilePage.tsx
@@ -1,8 +1,9 @@
+import { useUser } from '@clerk/shared/react';
 import React from 'react';
 
 import { isDefaultImage } from '../../../utils';
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import {
   ContentPage,
@@ -20,7 +21,12 @@ import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 export const ProfilePage = withCardStateProvider(() => {
   const title = localizationKeys('userProfile.profilePage.title');
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
+
   const [avatarChanged, setAvatarChanged] = React.useState(false);
   const { first_name, last_name } = useEnvironment().userSettings.attributes;
   const showFirstName = first_name.enabled;
diff --git a/packages/clerk-js/src/ui/components/UserProfile/RemoveResourcePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/RemoveResourcePage.tsx
index 324cdf88d14..eccccbc34f6 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/RemoveResourcePage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/RemoveResourcePage.tsx
@@ -1,16 +1,16 @@
+import { useUser } from '@clerk/shared/react';
 import React from 'react';
 
 import { RemoveResourcePage } from '../../common';
-import { useCoreUser } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { useEnabledThirdPartyProviders } from '../../hooks';
 import { useRouter } from '../../router';
 import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 
 export const RemoveEmailPage = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { id } = useRouter().params;
-  const resource = user.emailAddresses.find(e => e.id === id);
+  const resource = user?.emailAddresses.find(e => e.id === id);
   const ref = React.useRef(resource?.emailAddress);
 
   if (!ref.current) {
@@ -34,9 +34,9 @@ export const RemoveEmailPage = () => {
 };
 
 export const RemovePhonePage = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { id } = useRouter().params;
-  const resource = user.phoneNumbers.find(e => e.id === id);
+  const resource = user?.phoneNumbers.find(e => e.id === id);
   const ref = React.useRef(resource?.phoneNumber);
 
   if (!ref.current) {
@@ -60,9 +60,9 @@ export const RemovePhonePage = () => {
 };
 
 export const RemoveConnectedAccountPage = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { id } = useRouter().params;
-  const resource = user.externalAccounts.find(e => e.id === id);
+  const resource = user?.externalAccounts.find(e => e.id === id);
   const ref = React.useRef(resource?.provider);
   const { providerToDisplayData } = useEnabledThirdPartyProviders();
 
@@ -87,9 +87,9 @@ export const RemoveConnectedAccountPage = () => {
 };
 
 export const RemoveWeb3WalletPage = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { id } = useRouter().params;
-  const resource = user.web3Wallets.find(e => e.id === id);
+  const resource = user?.web3Wallets.find(e => e.id === id);
   const ref = React.useRef(resource?.web3Wallet);
 
   if (!ref.current) {
@@ -113,10 +113,10 @@ export const RemoveWeb3WalletPage = () => {
 };
 
 export const RemoveMfaPhoneCodePage = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { id } = useRouter().params;
   // TODO: This logic will need to change when we add more 2fa methods
-  const resource = user.phoneNumbers.find(e => e.id === id);
+  const resource = user?.phoneNumbers.find(e => e.id === id);
   const ref = React.useRef(resource?.phoneNumber);
 
   if (!ref.current) {
@@ -140,14 +140,14 @@ export const RemoveMfaPhoneCodePage = () => {
 };
 
 export const RemoveMfaTOTPPage = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   return (
     <RemoveResourcePage
       title={localizationKeys('userProfile.mfaTOTPPage.removeResource.title')}
       messageLine1={localizationKeys('userProfile.mfaTOTPPage.removeResource.messageLine1')}
       messageLine2={localizationKeys('userProfile.mfaTOTPPage.removeResource.messageLine2')}
       successMessage={localizationKeys('userProfile.mfaTOTPPage.removeResource.successMessage')}
-      deleteResource={user.disableTOTP}
+      deleteResource={user!.disableTOTP}
       Breadcrumbs={UserProfileBreadcrumbs}
     />
   );
diff --git a/packages/clerk-js/src/ui/components/UserProfile/RootPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/RootPage.tsx
index 5cb7a47fee1..237f3bd94df 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/RootPage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/RootPage.tsx
@@ -1,4 +1,6 @@
-import { useCoreUser, useEnvironment } from '../../contexts';
+import { useUser } from '@clerk/shared/react';
+
+import { useEnvironment } from '../../contexts';
 import { Col, descriptors, localizationKeys } from '../../customizables';
 import { CardAlert, Header, useCardState, withCardStateProvider } from '../../elements';
 import { NavbarMenuButtonRow } from '../../elements/Navbar';
@@ -18,16 +20,16 @@ import { Web3Section } from './Web3Section';
 export const RootPage = withCardStateProvider(() => {
   const { attributes, saml, social, instanceIsPasswordBased } = useEnvironment().userSettings;
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
   const showUsername = attributes.username.enabled;
   const showEmail = attributes.email_address.enabled;
   const showPhone = attributes.phone_number.enabled;
   const showConnectedAccounts = social && Object.values(social).filter(p => p.enabled).length > 0;
-  const showSamlAccounts = saml && saml.enabled && user.samlAccounts.length > 0;
+  const showSamlAccounts = saml && saml.enabled && user && user.samlAccounts.length > 0;
   const showWeb3 = attributes.web3_wallet.enabled;
   const showPassword = instanceIsPasswordBased;
   const showMfa = getSecondFactors(attributes).length > 0;
-  const showDelete = user.deleteSelfEnabled;
+  const showDelete = user?.deleteSelfEnabled;
 
   return (
     <Col
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx
index 51999d2b52a..9c7c3fbfb40 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx
@@ -1,4 +1,5 @@
-import { useCoreUser } from '../../contexts';
+import { useUser } from '@clerk/shared/react';
+
 import { localizationKeys } from '../../customizables';
 import { ProfileSection, UserPreview } from '../../elements';
 import { useRouter } from '../../router';
@@ -6,7 +7,13 @@ import { BlockButton } from './UserProfileBlockButtons';
 
 export const UserProfileSection = () => {
   const { navigate } = useRouter();
-  const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
+
+  const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
 
   return (
     <ProfileSection
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UsernamePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/UsernamePage.tsx
index b2aecc589f5..ada84c70bb4 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UsernamePage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UsernamePage.tsx
@@ -1,12 +1,19 @@
+import { useUser } from '@clerk/shared/react';
+
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
 import { handleError, useFormControl } from '../../utils';
 import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 
 export const UsernamePage = withCardStateProvider(() => {
-  const user = useCoreUser();
+  const { user } = useUser();
+
+  if (!user) {
+    return null;
+  }
+
   const { userSettings } = useEnvironment();
   const card = useCardState();
   const wizard = useWizard();
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx
index e4f9ac3cf58..0f9c54b31e6 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx
@@ -1,4 +1,5 @@
-import { useCoreUser } from '../../contexts';
+import { useUser } from '@clerk/shared/react';
+
 import { localizationKeys, Text } from '../../customizables';
 import { ProfileSection } from '../../elements';
 import { Pencil } from '../../icons';
@@ -6,9 +7,13 @@ import { useRouter } from '../../router';
 import { AddBlockButton } from './UserProfileBlockButtons';
 
 export const UsernameSection = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
 
+  if (!user) {
+    return null;
+  }
+
   return (
     <ProfileSection
       title={localizationKeys('userProfile.start.usernameSection.title')}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/VerifyTOTP.tsx b/packages/clerk-js/src/ui/components/UserProfile/VerifyTOTP.tsx
index 5a3b8dad27a..5c55a181038 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/VerifyTOTP.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/VerifyTOTP.tsx
@@ -1,7 +1,7 @@
+import { useUser } from '@clerk/shared/react';
 import type { TOTPResource } from '@clerk/types';
 import React from 'react';
 
-import { useCoreUser } from '../../contexts';
 import { Col, descriptors, localizationKeys } from '../../customizables';
 import { ContentPage, Form, FormButtonContainer, NavigateToFlowStartButton, useFieldOTP } from '../../elements';
 import { UserProfileBreadcrumbs } from './UserProfileNavbar';
@@ -13,12 +13,12 @@ type VerifyTOTPProps = {
 
 export const VerifyTOTP = (props: VerifyTOTPProps) => {
   const { onVerified, resourceRef } = props;
-  const user = useCoreUser();
+  const { user } = useUser();
 
   const otp = useFieldOTP<TOTPResource>({
     onCodeEntryFinished: (code, resolve, reject) => {
       user
-        .verifyTOTP({ code })
+        ?.verifyTOTP({ code })
         .then((totp: TOTPResource) => resolve(totp))
         .catch(reject);
     },
diff --git a/packages/clerk-js/src/ui/components/UserProfile/Web3Page.tsx b/packages/clerk-js/src/ui/components/UserProfile/Web3Page.tsx
index be46274b786..8470733fd7e 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/Web3Page.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/Web3Page.tsx
@@ -1,9 +1,9 @@
+import { useUser } from '@clerk/shared/react';
 import type { Web3Strategy, Web3WalletResource } from '@clerk/types';
 import React from 'react';
 
 import { generateSignatureWithMetamask, getMetamaskIdentifier } from '../../../utils/web3';
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser } from '../../contexts';
 import { Col, descriptors, Image, localizationKeys, Text } from '../../customizables';
 import {
   ArrowBlockButton,
@@ -20,12 +20,12 @@ import { getFieldError, handleError } from '../../utils';
 import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 
 export const Web3Page = withCardStateProvider(() => {
-  const user = useCoreUser();
+  const { user } = useUser();
 
   const { params } = useRouter();
   const { id } = params || {};
 
-  const ref = React.useRef<Web3WalletResource | undefined>(user.web3Wallets.find(a => a.id === id));
+  const ref = React.useRef<Web3WalletResource | undefined>(user?.web3Wallets.find(a => a.id === id));
   const wizard = useWizard({ defaultStep: ref.current ? 1 : 0 });
 
   return (
@@ -43,18 +43,25 @@ export const Web3Page = withCardStateProvider(() => {
 const AddWeb3Wallet = (props: { nextStep: () => void }) => {
   const { nextStep } = props;
   const card = useCardState();
-  const user = useCoreUser();
+  const { user } = useUser();
   const { strategyToDisplayData } = useEnabledThirdPartyProviders();
 
   // TODO: This logic is very similar to AddConnectedAccount but only metamask is supported right now
   // const enabledStrategies = strategies.filter(s => s.startsWith('web3')) as Web3Strategy[];
   // const connectedStrategies = user.web3Wallets.map(w => w.web3Wallet) as OAuthStrategy[];
   const unconnectedStrategies: Web3Strategy[] =
-    user.web3Wallets.filter(w => w.verification?.status === 'verified').length === 0 ? ['web3_metamask_signature'] : [];
+    user?.web3Wallets.filter(w => w.verification?.status === 'verified').length === 0
+      ? ['web3_metamask_signature']
+      : [];
   const connect = async (strategy: Web3Strategy) => {
     try {
       card.setLoading(strategy);
       const identifier = await getMetamaskIdentifier();
+
+      if (!user) {
+        throw new Error('user is not defined');
+      }
+
       let web3Wallet = await user.createWeb3Wallet({ web3Wallet: identifier });
       web3Wallet = await web3Wallet.prepareVerification({ strategy: 'web3_metamask_signature' });
       const nonce = web3Wallet.verification.nonce as string;
diff --git a/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx b/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
index e1fc2512eba..39b0c656cc5 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
@@ -1,6 +1,6 @@
+import { useUser } from '@clerk/shared/react';
 import type { Web3WalletResource } from '@clerk/types';
 
-import { useCoreUser } from '../../contexts';
 import { Col, Flex, Image, localizationKeys } from '../../customizables';
 import { ProfileSection } from '../../elements';
 import { useEnabledThirdPartyProviders } from '../../hooks';
@@ -10,7 +10,7 @@ import { UserProfileAccordion } from './UserProfileAccordion';
 import { AddBlockButton } from './UserProfileBlockButtons';
 
 export const Web3Section = () => {
-  const user = useCoreUser();
+  const { user } = useUser();
   const { navigate } = useRouter();
 
   return (
@@ -18,7 +18,7 @@ export const Web3Section = () => {
       title={localizationKeys('userProfile.start.web3WalletsSection.title')}
       id='web3Wallets'
     >
-      {user.web3Wallets.map(wallet => (
+      {user?.web3Wallets.map(wallet => (
         <Web3WalletAccordion
           key={wallet.id}
           wallet={wallet}
diff --git a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx b/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
index d2815dc85a7..e3c6a73f9ee 100644
--- a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
+++ b/packages/clerk-js/src/ui/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/contexts/CoreClerkContext.tsx b/packages/clerk-js/src/ui/contexts/CoreClerkContext.tsx
deleted file mode 100644
index 66b28dd85fa..00000000000
--- a/packages/clerk-js/src/ui/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/contexts/CoreClerkContextWrapper.tsx b/packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx
index bb70a7b3ec8..78b186bba95 100644
--- a/packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx
+++ b/packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx
@@ -1,11 +1,13 @@
+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 { CoreOrganizationProvider } from './CoreOrganizationContext';
-import { CoreSessionContext } from './CoreSessionContext';
-import { CoreUserContext } from './CoreUserContext';
 import { assertClerkSingletonExists } from './utils';
 
 type CoreClerkContextWrapperProps = {
@@ -45,17 +47,17 @@ export function CoreClerkContextWrapper(props: CoreClerkContextWrapperProps): JS
   );
 
   return (
-    <CoreClerkContext.Provider value={clerkCtx}>
-      <CoreClientContext.Provider value={clientCtx}>
-        <CoreSessionContext.Provider value={sessionCtx}>
-          <CoreOrganizationProvider
+    <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>
-          </CoreOrganizationProvider>
-        </CoreSessionContext.Provider>
-      </CoreClientContext.Provider>
-    </CoreClerkContext.Provider>
+            <UserContext.Provider value={userCtx}>{props.children}</UserContext.Provider>
+          </OrganizationProvider>
+        </SessionContext.Provider>
+      </ClientContext.Provider>
+    </ClerkInstanceContext.Provider>
   );
 }
diff --git a/packages/clerk-js/src/ui/contexts/CoreClientContext.tsx b/packages/clerk-js/src/ui/contexts/CoreClientContext.tsx
index b0d5ad7a427..3212a6f8ac5 100644
--- a/packages/clerk-js/src/ui/contexts/CoreClientContext.tsx
+++ b/packages/clerk-js/src/ui/contexts/CoreClientContext.tsx
@@ -1,22 +1,14 @@
 import { assertContextExists, ClientContext, useClientContext } from '@clerk/shared/react';
-import type { SessionResource, SignInResource, SignUpResource } from '@clerk/types';
-
-export const CoreClientContext = ClientContext;
+import type { SignInResource, SignUpResource } from '@clerk/types';
 
 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;
 }
-
-export function useCoreSessionList(): SessionResource[] {
-  const ctx = useClientContext();
-  assertContextExists(ctx, CoreClientContext);
-  return ctx.sessions;
-}
diff --git a/packages/clerk-js/src/ui/contexts/CoreOrganizationContext.tsx b/packages/clerk-js/src/ui/contexts/CoreOrganizationContext.tsx
deleted file mode 100644
index 4adc717cca2..00000000000
--- a/packages/clerk-js/src/ui/contexts/CoreOrganizationContext.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { OrganizationProvider, useOrganization, useOrganizationList } from '@clerk/shared/react';
-
-export const CoreOrganizationProvider = OrganizationProvider;
-export const useCoreOrganization = useOrganization;
-export const useCoreOrganizationList = useOrganizationList;
diff --git a/packages/clerk-js/src/ui/contexts/CoreSessionContext.tsx b/packages/clerk-js/src/ui/contexts/CoreSessionContext.tsx
index 3cd86e17c63..ecdd4066280 100644
--- a/packages/clerk-js/src/ui/contexts/CoreSessionContext.tsx
+++ b/packages/clerk-js/src/ui/contexts/CoreSessionContext.tsx
@@ -1,26 +1,14 @@
-import { assertContextExists, SessionContext, useSessionContext } from '@clerk/shared/react';
-import type { SessionResource } from '@clerk/types';
+import { useSessionContext } from '@clerk/shared/react';
 import React from 'react';
 
-import { clerkCoreErrorSessionIsNotDefined } from '../../core/errors';
-
-export const CoreSessionContext = SessionContext;
-
-export function useCoreSession(): SessionResource {
-  const session = useSessionContext();
-  if (!session) {
-    clerkCoreErrorSessionIsNotDefined();
-  }
-  return session;
-}
-
 export function withCoreSessionSwitchGuard<P>(Component: React.ComponentType<P>): React.ComponentType<P> {
   const Hoc = (props: P) => {
-    const ctx = React.useContext(CoreSessionContext);
-    assertContextExists(ctx, CoreSessionContext);
-    if (ctx.value === undefined) {
+    const session = useSessionContext();
+
+    if (!session) {
       return null;
     }
+
     return <Component {...(props as any)} />;
   };
 
diff --git a/packages/clerk-js/src/ui/contexts/CoreUserContext.tsx b/packages/clerk-js/src/ui/contexts/CoreUserContext.tsx
index 6936128b80e..94a32ca1715 100644
--- a/packages/clerk-js/src/ui/contexts/CoreUserContext.tsx
+++ b/packages/clerk-js/src/ui/contexts/CoreUserContext.tsx
@@ -1,25 +1,14 @@
-import { assertContextExists, UserContext, useUserContext } from '@clerk/shared/react';
-import React, { useContext } from 'react';
-
-import { clerkCoreErrorUserIsNotDefined } from '../../core/errors';
-
-export const CoreUserContext = UserContext;
-
-export const useCoreUser = () => {
-  const user = useUserContext();
-  if (!user) {
-    clerkCoreErrorUserIsNotDefined();
-  }
-  return user;
-};
+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)} />;
   };
 
diff --git a/packages/clerk-js/src/ui/contexts/index.ts b/packages/clerk-js/src/ui/contexts/index.ts
index 5a112f7cbdc..b5aae8b35da 100644
--- a/packages/clerk-js/src/ui/contexts/index.ts
+++ b/packages/clerk-js/src/ui/contexts/index.ts
@@ -1,6 +1,4 @@
-export * from './CoreClerkContext';
 export * from './CoreUserContext';
-export * from './CoreOrganizationContext';
 export * from './ClerkUIComponentsContext';
 export * from './EnvironmentContext';
 export * from './OptionsContext';
diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
index 1aec5c07959..160f75ee253 100644
--- a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
+++ b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
@@ -1,6 +1,6 @@
+import { useClerk } from '@clerk/shared/react';
 import { forwardRef, memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
-import { useCoreClerk } from '../../contexts';
 import { descriptors, Flex, Input, Text } from '../../customizables';
 import { Select, SelectButton, SelectOptionList } from '../../elements';
 import type { PropsOfComponent } from '../../styledSystem';
@@ -207,7 +207,7 @@ const Flag = (props: { iso: CountryIso }) => {
 
 export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref) => {
   // @ts-expect-error
-  const { __internal_country } = useCoreClerk();
+  const { __internal_country } = useClerk();
 
   return (
     <PhoneInputBase
diff --git a/packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganization.test.tsx b/packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganization.test.tsx
index 234de7d3bda..d02ef9ef9f3 100644
--- a/packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganization.test.tsx
+++ b/packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganization.test.tsx
@@ -1,3 +1,4 @@
+import { useOrganization } from '@clerk/shared/react';
 import { describe } from '@jest/globals';
 
 import { act, bindCreateFixtures, renderHook, waitFor } from '../../../testUtils';
@@ -6,12 +7,12 @@ import {
   createFakeOrganizationMembershipRequest,
 } from '../../components/OrganizationProfile/__tests__/utils';
 import { createFakeUserOrganizationMembership } from '../../components/OrganizationSwitcher/__tests__/utlis';
-import { useCoreOrganization } from '../../contexts';
+import { bindCreateFixtures } from '../../utils/test/createFixtures';
 
 const { createFixtures } = bindCreateFixtures('OrganizationProfile');
 
 const defaultRenderer = () =>
-  useCoreOrganization({
+  useOrganization({
     domains: {
       pageSize: 2,
     },
@@ -45,7 +46,7 @@ describe('useOrganization', () => {
       });
     });
 
-    const { result } = renderHook(useCoreOrganization, { wrapper });
+    const { result } = renderHook(() => useOrganization(), { wrapper });
 
     expect(result.current.isLoaded).toBe(true);
     expect(result.current.organization).toBeDefined();
@@ -70,7 +71,7 @@ describe('useOrganization', () => {
       });
     });
 
-    const { result } = renderHook(useCoreOrganization, { wrapper });
+    const { result } = renderHook(() => useOrganization(), { wrapper });
 
     expect(result.current.isLoaded).toBe(true);
     expect(result.current.organization).toBeNull();
diff --git a/packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx b/packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
index c69d7e72d25..e097b0ed16a 100644
--- a/packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
+++ b/packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx
@@ -1,17 +1,18 @@
+import { useOrganizationList } from '@clerk/shared/react';
 import { describe } from '@jest/globals';
 
-import { act, bindCreateFixtures, renderHook, waitFor } from '../../../testUtils';
+import { act, renderHook, waitFor } from '../../../testUtils';
 import {
   createFakeUserOrganizationInvitation,
   createFakeUserOrganizationMembership,
   createFakeUserOrganizationSuggestion,
 } from '../../components/OrganizationSwitcher/__tests__/utlis';
-import { useCoreOrganizationList } from '../../contexts';
+import { bindCreateFixtures } from '../../utils/test/createFixtures';
 
 const { createFixtures } = bindCreateFixtures('OrganizationSwitcher');
 
 const defaultRenderer = () =>
-  useCoreOrganizationList({
+  useOrganizationList({
     userMemberships: {
       pageSize: 2,
     },
@@ -33,8 +34,7 @@ describe('useOrganizationList', () => {
       });
     });
 
-    const { result } = renderHook(useCoreOrganizationList, { wrapper });
-
+    const { result } = renderHook(() => useOrganizationList(), { wrapper });
     expect(result.current.isLoaded).toBe(true);
     expect(result.current.setActive).toBeDefined();
     expect(result.current.createOrganization).toBeDefined();
@@ -213,7 +213,7 @@ describe('useOrganizationList', () => {
       );
       const { result } = renderHook(
         () =>
-          useCoreOrganizationList({
+          useOrganizationList({
             userMemberships: {
               pageSize: 2,
               infinite: true,
@@ -435,7 +435,7 @@ describe('useOrganizationList', () => {
       );
       const { result } = renderHook(
         () =>
-          useCoreOrganizationList({
+          useOrganizationList({
             userInvitations: {
               pageSize: 2,
               infinite: true,
@@ -625,7 +625,7 @@ describe('useOrganizationList', () => {
       );
       const { result } = renderHook(
         () =>
-          useCoreOrganizationList({
+          useOrganizationList({
             userSuggestions: {
               pageSize: 2,
               infinite: true,
diff --git a/packages/clerk-js/src/ui/hooks/__tests__/useSupportEmail.test.tsx b/packages/clerk-js/src/ui/hooks/__tests__/useSupportEmail.test.tsx
index 8542cf52682..7f31c0dc218 100644
--- a/packages/clerk-js/src/ui/hooks/__tests__/useSupportEmail.test.tsx
+++ b/packages/clerk-js/src/ui/hooks/__tests__/useSupportEmail.test.tsx
@@ -5,13 +5,13 @@ import { useSupportEmail } from '../useSupportEmail';
 const mockUseOptions = jest.fn();
 const mockUseEnvironment = jest.fn();
 
+jest.mock('@clerk/shared/react', () => ({
+  useClerk: () => ({
+    publishableKey: 'pk_live_Y2xlcmsuY2xlcmsuY29tJA',
+  }),
+}));
 jest.mock('../../contexts', () => {
   return {
-    useCoreClerk: () => {
-      return {
-        publishableKey: 'pk_live_Y2xlcmsuY2xlcmsuY29tJA',
-      };
-    },
     useEnvironment: () => mockUseEnvironment(),
     useOptions: () => mockUseOptions(),
   };
diff --git a/packages/clerk-js/src/ui/hooks/useFetchRoles.ts b/packages/clerk-js/src/ui/hooks/useFetchRoles.ts
index cbe0f32499f..b685c4337d8 100644
--- a/packages/clerk-js/src/ui/hooks/useFetchRoles.ts
+++ b/packages/clerk-js/src/ui/hooks/useFetchRoles.ts
@@ -1,4 +1,5 @@
-import { useCoreOrganization } from '../contexts';
+import { useOrganization } from '@clerk/shared/react';
+
 import { useLocalizations } from '../localization';
 import { customRoleLocalizationKey, roleLocalizationKey } from '../utils';
 import { useFetch } from './useFetch';
@@ -11,7 +12,7 @@ const getRolesParams = {
   pageSize: 20,
 };
 export const useFetchRoles = () => {
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { data, status } = useFetch(organization?.getRoles, getRolesParams);
 
   return {
diff --git a/packages/clerk-js/src/ui/hooks/useSetSessionWithTimeout.ts b/packages/clerk-js/src/ui/hooks/useSetSessionWithTimeout.ts
index dd4508101f6..21eb6fd716e 100644
--- a/packages/clerk-js/src/ui/hooks/useSetSessionWithTimeout.ts
+++ b/packages/clerk-js/src/ui/hooks/useSetSessionWithTimeout.ts
@@ -1,11 +1,12 @@
+import { useClerk } from '@clerk/shared/react';
 import { useEffect } from 'react';
 
-import { useCoreClerk, useSignInContext } from '../contexts';
+import { useSignInContext } from '../contexts';
 import { useRouter } from '../router';
 
 export const useSetSessionWithTimeout = (delay = 2000) => {
   const { queryString } = useRouter();
-  const { setActive } = useCoreClerk();
+  const { setActive } = useClerk();
   const { navigateAfterSignIn } = useSignInContext();
 
   useEffect(() => {
diff --git a/packages/clerk-js/src/ui/hooks/useSupportEmail.ts b/packages/clerk-js/src/ui/hooks/useSupportEmail.ts
index bcd04b6844e..1b4fb27676f 100644
--- a/packages/clerk-js/src/ui/hooks/useSupportEmail.ts
+++ b/packages/clerk-js/src/ui/hooks/useSupportEmail.ts
@@ -1,10 +1,11 @@
+import { useClerk } from '@clerk/shared/react';
 import React from 'react';
 
 import { buildEmailAddress } from '../../utils';
-import { useCoreClerk, useEnvironment, useOptions } from '../contexts';
+import { useEnvironment, useOptions } from '../contexts';
 
 export function useSupportEmail(): string {
-  const Clerk = useCoreClerk();
+  const Clerk = useClerk();
   const { supportEmail: supportEmailFromOptions } = useOptions();
   const { displayConfig } = useEnvironment();
   const { supportEmail: supportEmailFromEnvironment } = displayConfig;
diff --git a/packages/clerk-js/src/ui/localization/applyTokensToString.ts b/packages/clerk-js/src/ui/localization/applyTokensToString.ts
index fb4c8d7a12c..051cd505958 100644
--- a/packages/clerk-js/src/ui/localization/applyTokensToString.ts
+++ b/packages/clerk-js/src/ui/localization/applyTokensToString.ts
@@ -1,4 +1,6 @@
-import { useCoreClerk, useEnvironment } from '../contexts';
+import { useClerk } from '@clerk/shared/react';
+
+import { useEnvironment } from '../contexts';
 import { MODIFIERS } from './localizationModifiers';
 
 export type GlobalTokens = {
@@ -29,7 +31,7 @@ export const applyTokensToString = (s: string | undefined, tokens: Tokens): stri
 
 export const useGlobalTokens = (): GlobalTokens => {
   const { applicationName } = useEnvironment().displayConfig;
-  const { client, user } = useCoreClerk();
+  const { client, user } = useClerk();
   const { signIn } = client;
 
   return {
diff --git a/packages/clerk-js/src/ui/router/BaseRouter.tsx b/packages/clerk-js/src/ui/router/BaseRouter.tsx
index 927a4af444a..2a76d9e6072 100644
--- a/packages/clerk-js/src/ui/router/BaseRouter.tsx
+++ b/packages/clerk-js/src/ui/router/BaseRouter.tsx
@@ -1,8 +1,8 @@
+import { useClerk } from '@clerk/shared/react';
 import qs from 'qs';
 import React from 'react';
 
 import { getQueryParams, trimTrailingSlash } from '../../utils';
-import { useCoreClerk } from '../contexts';
 import { useWindowEventListener } from '../hooks';
 import { newPaths } from './newPaths';
 import { match } from './pathToRegexp';
@@ -40,7 +40,7 @@ export const BaseRouter = ({
   urlStateParam,
   children,
 }: BaseRouterProps): JSX.Element => {
-  const { navigate: externalNavigate } = useCoreClerk();
+  const { navigate: externalNavigate } = useClerk();
 
   const [routeParts, setRouteParts] = React.useState({
     path: getPath(),
diff --git a/packages/clerk-js/src/ui/router/PathRouter.tsx b/packages/clerk-js/src/ui/router/PathRouter.tsx
index c9211cd158a..ac4c81109b3 100644
--- a/packages/clerk-js/src/ui/router/PathRouter.tsx
+++ b/packages/clerk-js/src/ui/router/PathRouter.tsx
@@ -1,8 +1,8 @@
+import { useClerk } from '@clerk/shared/react';
 import type { NavigateOptions } from '@clerk/types';
 import React from 'react';
 
 import { hasUrlInFragment, mergeFragmentIntoUrl, stripOrigin } from '../../utils';
-import { useCoreClerk } from '../contexts';
 import { BaseRouter } from './BaseRouter';
 
 interface PathRouterProps {
@@ -12,7 +12,7 @@ interface PathRouterProps {
 }
 
 export const PathRouter = ({ basePath, preservedParams, children }: PathRouterProps): JSX.Element | null => {
-  const { navigate } = useCoreClerk();
+  const { navigate } = useClerk();
   const [stripped, setStripped] = React.useState(false);
 
   if (!navigate) {
diff --git a/packages/clerk-js/src/ui/router/Route.tsx b/packages/clerk-js/src/ui/router/Route.tsx
index a4f8a966ef4..4facb5a0980 100644
--- a/packages/clerk-js/src/ui/router/Route.tsx
+++ b/packages/clerk-js/src/ui/router/Route.tsx
@@ -1,7 +1,7 @@
+import { useClerk } from '@clerk/shared/react';
 import type { LoadedClerk } from '@clerk/types';
 import React from 'react';
 
-import { useCoreClerk } from '../../ui/contexts';
 import { pathFromFullPath, trimTrailingSlash } from '../../utils';
 import { useNavigateToFlowStart } from '../hooks';
 import { newPaths } from './newPaths';
@@ -18,6 +18,7 @@ interface UnguardedRouteProps {
   flowStart?: boolean;
   canActivate?: never;
 }
+
 type GuardedRouteProps = {
   path?: string;
   index?: boolean;
@@ -28,7 +29,7 @@ export type RouteProps = React.PropsWithChildren<UnguardedRouteProps | GuardedRo
 
 const RouteGuard = ({ canActivate, children }: React.PropsWithChildren<RouteGuardProps>): JSX.Element | null => {
   const { navigateToFlowStart } = useNavigateToFlowStart();
-  const clerk = useCoreClerk();
+  const clerk = useClerk();
 
   React.useEffect(() => {
     if (!canActivate(clerk)) {
diff --git a/packages/clerk-js/src/ui/router/__tests__/HashRouter.test.tsx b/packages/clerk-js/src/ui/router/__tests__/HashRouter.test.tsx
index a1d79bd9df1..9eec0bd7b99 100644
--- a/packages/clerk-js/src/ui/router/__tests__/HashRouter.test.tsx
+++ b/packages/clerk-js/src/ui/router/__tests__/HashRouter.test.tsx
@@ -7,9 +7,9 @@ import { HashRouter, Route, useRouter } from '..';
 
 const mockNavigate = jest.fn();
 
-jest.mock('ui/contexts', () => {
+jest.mock('@clerk/shared/react', () => {
   return {
-    useCoreClerk: () => {
+    useClerk: () => {
       return {
         navigate: (to: string) => {
           mockNavigate(to);
diff --git a/packages/clerk-js/src/ui/router/__tests__/PathRouter.test.tsx b/packages/clerk-js/src/ui/router/__tests__/PathRouter.test.tsx
index f74ef75d032..1b7750c1516 100644
--- a/packages/clerk-js/src/ui/router/__tests__/PathRouter.test.tsx
+++ b/packages/clerk-js/src/ui/router/__tests__/PathRouter.test.tsx
@@ -7,9 +7,9 @@ import { PathRouter, Route, useRouter } from '..';
 
 const mockNavigate = jest.fn();
 
-jest.mock('ui/contexts', () => {
+jest.mock('@clerk/shared/react', () => {
   return {
-    useCoreClerk: () => {
+    useClerk: () => {
       return {
         navigate: (to: string) => {
           mockNavigate(to);
diff --git a/packages/clerk-js/src/ui/router/__tests__/Switch.test.tsx b/packages/clerk-js/src/ui/router/__tests__/Switch.test.tsx
index ea062853951..c27bd019140 100644
--- a/packages/clerk-js/src/ui/router/__tests__/Switch.test.tsx
+++ b/packages/clerk-js/src/ui/router/__tests__/Switch.test.tsx
@@ -5,8 +5,8 @@ import { HashRouter, Route, Switch } from '../../router';
 
 const mockNavigate = jest.fn();
 
-jest.mock('ui/contexts', () => ({
-  useCoreClerk: () => ({
+jest.mock('@clerk/shared/react', () => ({
+  useClerk: () => ({
     navigate: jest.fn(to => {
       mockNavigate(to);
       if (to) {
diff --git a/packages/clerk-js/src/ui/router/__tests__/VirtualRouter.test.tsx b/packages/clerk-js/src/ui/router/__tests__/VirtualRouter.test.tsx
index 93d75e57a1b..18b7eef065f 100644
--- a/packages/clerk-js/src/ui/router/__tests__/VirtualRouter.test.tsx
+++ b/packages/clerk-js/src/ui/router/__tests__/VirtualRouter.test.tsx
@@ -6,8 +6,8 @@ import { Route, useRouter, VirtualRouter } from '..';
 
 const mockNavigate = jest.fn();
 
-jest.mock('ui/contexts', () => ({
-  useCoreClerk: () => ({
+jest.mock('@clerk/shared/react', () => ({
+  useClerk: () => ({
     navigate: jest.fn(to => {
       mockNavigate(to);
       if (to) {

From bf448755defe0aea8c9c9dfc59cb27e299820e07 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 23 Nov 2023 14:01:53 +0200
Subject: [PATCH 7/8] chore(clerk-react): Remove empty file

---
 packages/react/src/contexts/ClientContext.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 packages/react/src/contexts/ClientContext.tsx

diff --git a/packages/react/src/contexts/ClientContext.tsx b/packages/react/src/contexts/ClientContext.tsx
deleted file mode 100644
index e69de29bb2d..00000000000

From ee240721bc6753b3a1343212c044a4c524917880 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Tue, 28 Nov 2023 12:37:33 +0200
Subject: [PATCH 8/8] fix(clerk-js): Check against undefined, not falsy

---
 .../clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx  | 5 ++++-
 packages/clerk-js/src/ui/contexts/CoreSessionContext.tsx     | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx
index ecdd4066280..169cff73a0d 100644
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx
+++ b/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx
@@ -5,7 +5,10 @@ export function withCoreSessionSwitchGuard<P>(Component: React.ComponentType<P>)
   const Hoc = (props: P) => {
     const session = useSessionContext();
 
-    if (!session) {
+    /**
+     * Avoid simply checking if session is falsy, checking against undefined is preferable as it means that clerk has not loaded yet
+     */
+    if (typeof session === 'undefined') {
       return null;
     }
 
diff --git a/packages/clerk-js/src/ui/contexts/CoreSessionContext.tsx b/packages/clerk-js/src/ui/contexts/CoreSessionContext.tsx
index ecdd4066280..169cff73a0d 100644
--- a/packages/clerk-js/src/ui/contexts/CoreSessionContext.tsx
+++ b/packages/clerk-js/src/ui/contexts/CoreSessionContext.tsx
@@ -5,7 +5,10 @@ export function withCoreSessionSwitchGuard<P>(Component: React.ComponentType<P>)
   const Hoc = (props: P) => {
     const session = useSessionContext();
 
-    if (!session) {
+    /**
+     * Avoid simply checking if session is falsy, checking against undefined is preferable as it means that clerk has not loaded yet
+     */
+    if (typeof session === 'undefined') {
       return null;
     }