fix(clerk-js): Remove internal useCore hooks (#2111)

* chore(clerk-js,shared,clerk-react): Migrate useCoreSession, useCoreUser -> useSession, useUser

* chore(clerk-js,clerk-react): Replace useCoreOrganization with useOrganization (#2113)

this also include useOrganizationList

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

* chore(clerk-js): Migrate usage of useCoreClerk to useClerk

* fix(repo): Resolve conflicts

* chore(clerk-js): Sync changes to `ui` directory

* chore(clerk-react): Remove empty file

* fix(clerk-js): Check against undefined, not falsy

---------

Co-authored-by: panteliselef <[email protected]>

.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

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');

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),
   };
 };
 

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();
 

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();
 

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', '', {

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();
 

packages/clerk-js/src/ui.retheme/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,15 +89,16 @@ 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>
   );
 };
 
 const _ImpersonationFab = () => {
-  const session = useCoreSession();
+  const { session } = useSession();
   const { t } = useLocalizations();
   const { parsedInternalTheme } = useAppearance();
   const containerRef = useRef<HTMLDivElement>(null);

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;

packages/clerk-js/src/ui.retheme/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,
   });
 

packages/clerk-js/src/ui.retheme/components/OrganizationList/UserMembershipList.tsx

@@ -1,14 +1,15 @@
+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';
 
 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;
 

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,
   });
 

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];

packages/clerk-js/src/ui.retheme/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;

packages/clerk-js/src/ui.retheme/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 (

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', '', {

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,