diff --git a/packages/clerk-js/src/ui.retheme/contexts/ClerkUIComponentsContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/ClerkUIComponentsContext.tsx index 1d1ce8a084..67435eb19a 100644 --- a/packages/clerk-js/src/ui.retheme/contexts/ClerkUIComponentsContext.tsx +++ b/packages/clerk-js/src/ui.retheme/contexts/ClerkUIComponentsContext.tsx @@ -1,10 +1,11 @@ +import { useClerk } from '@clerk/shared/react'; import { snakeToCamel } from '@clerk/shared/underscore'; import type { OrganizationResource, UserResource } from '@clerk/types'; import React, { useMemo } from 'react'; import { SIGN_IN_INITIAL_VALUE_KEYS, SIGN_UP_INITIAL_VALUE_KEYS } from '../../core/constants'; import { buildAuthQueryString, buildURL, createDynamicParamParser, pickRedirectionProp } from '../../utils'; -import { useCoreClerk, useEnvironment, useOptions } from '../contexts'; +import { useEnvironment, useOptions } from '../contexts'; import type { NavbarRoute } from '../elements'; import type { ParsedQs } from '../router'; import { useRouter } from '../router'; @@ -52,7 +53,7 @@ export const useSignUpContext = (): SignUpContextType => { const { displayConfig } = useEnvironment(); const { queryParams, queryString } = useRouter(); const options = useOptions(); - const clerk = useCoreClerk(); + const clerk = useClerk(); const initialValuesFromQueryParams = useMemo( () => getInitialValuesFromQueryParams(queryString, SIGN_UP_INITIAL_VALUE_KEYS), @@ -128,7 +129,7 @@ export const useSignInContext = (): SignInContextType => { const { displayConfig } = useEnvironment(); const { queryParams, queryString } = useRouter(); const options = useOptions(); - const clerk = useCoreClerk(); + const clerk = useClerk(); const initialValuesFromQueryParams = useMemo( () => getInitialValuesFromQueryParams(queryString, SIGN_IN_INITIAL_VALUE_KEYS), @@ -220,7 +221,7 @@ export const useUserProfileContext = (): UserProfileContextType => { export const useUserButtonContext = () => { const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as UserButtonCtx; - const Clerk = useCoreClerk(); + const clerk = useClerk(); const { navigate } = useRouter(); const { displayConfig } = useEnvironment(); const options = useOptions(); @@ -233,7 +234,7 @@ export const useUserButtonContext = () => { const userProfileUrl = ctx.userProfileUrl || displayConfig.userProfileUrl; const afterMultiSessionSingleSignOutUrl = ctx.afterMultiSessionSingleSignOutUrl || displayConfig.afterSignOutOneUrl; - const navigateAfterMultiSessionSingleSignOut = () => Clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl); + const navigateAfterMultiSessionSingleSignOut = () => clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl); const afterSignOutUrl = ctx.afterSignOutUrl || displayConfig.afterSignOutAllUrl; const navigateAfterSignOut = () => navigate(afterSignOutUrl); diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContext.tsx deleted file mode 100644 index 66b28dd85f..0000000000 --- a/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContext.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { ClerkInstanceContext, useClerkInstanceContext } from '@clerk/shared/react'; - -export const [CoreClerkContext, useCoreClerk] = [ClerkInstanceContext, useClerkInstanceContext]; diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx index 2518623fbe..78b186bba9 100644 --- a/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx +++ b/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx @@ -1,10 +1,13 @@ -import { OrganizationProvider, SessionContext } from '@clerk/shared/react'; +import { + ClerkInstanceContext, + ClientContext, + OrganizationProvider, + SessionContext, + UserContext, +} from '@clerk/shared/react'; import type { Clerk, LoadedClerk, Resources } from '@clerk/types'; import React from 'react'; -import { CoreClerkContext } from './CoreClerkContext'; -import { CoreClientContext } from './CoreClientContext'; -import { CoreUserContext } from './CoreUserContext'; import { assertClerkSingletonExists } from './utils'; type CoreClerkContextWrapperProps = { @@ -44,17 +47,17 @@ export function CoreClerkContextWrapper(props: CoreClerkContextWrapperProps): JS ); return ( - - + + - {props.children} + {props.children} - - + + ); } diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx index 125d314907..3212a6f8ac 100644 --- a/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx +++ b/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx @@ -1,16 +1,14 @@ import { assertContextExists, ClientContext, useClientContext } from '@clerk/shared/react'; import type { SignInResource, SignUpResource } from '@clerk/types'; -export const CoreClientContext = ClientContext; - export function useCoreSignIn(): SignInResource { const ctx = useClientContext(); - assertContextExists(ctx, CoreClientContext); + assertContextExists(ctx, ClientContext); return ctx.signIn; } export function useCoreSignUp(): SignUpResource { const ctx = useClientContext(); - assertContextExists(ctx, CoreClientContext); + assertContextExists(ctx, ClientContext); return ctx.signUp; } diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreOrganizationContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreOrganizationContext.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx index 526981d813..ecdd406628 100644 --- a/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx +++ b/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx @@ -1,13 +1,14 @@ -import { assertContextExists, SessionContext } from '@clerk/shared/react'; +import { useSessionContext } from '@clerk/shared/react'; import React from 'react'; export function withCoreSessionSwitchGuard

(Component: React.ComponentType

): React.ComponentType

{ const Hoc = (props: P) => { - const ctx = React.useContext(SessionContext); - assertContextExists(ctx, SessionContext); - if (ctx.value === undefined) { + const session = useSessionContext(); + + if (!session) { return null; } + return ; }; diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx index c64420c45f..94a32ca171 100644 --- a/packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx +++ b/packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx @@ -1,15 +1,14 @@ -import { assertContextExists, UserContext } from '@clerk/shared/react'; -import React, { useContext } from 'react'; - -export const CoreUserContext = UserContext; +import { useUserContext } from '@clerk/shared/react'; +import React from 'react'; export function withCoreUserGuard

(Component: React.ComponentType

): React.ComponentType

{ const Hoc = (props: P) => { - const ctx = useContext(CoreUserContext); - assertContextExists(ctx, CoreUserContext); - if (!ctx.value) { + const user = useUserContext(); + + if (!user) { return null; } + return ; }; diff --git a/packages/clerk-js/src/ui.retheme/contexts/index.ts b/packages/clerk-js/src/ui.retheme/contexts/index.ts index 98305c394a..b5aae8b35d 100644 --- a/packages/clerk-js/src/ui.retheme/contexts/index.ts +++ b/packages/clerk-js/src/ui.retheme/contexts/index.ts @@ -1,4 +1,3 @@ -export * from './CoreClerkContext'; export * from './CoreUserContext'; export * from './ClerkUIComponentsContext'; export * from './EnvironmentContext'; diff --git a/packages/react/src/contexts/ClerkContextProvider.tsx b/packages/react/src/contexts/ClerkContextProvider.tsx index f8fd4846e4..adafd31c07 100644 --- a/packages/react/src/contexts/ClerkContextProvider.tsx +++ b/packages/react/src/contexts/ClerkContextProvider.tsx @@ -1,3 +1,4 @@ +import { ClientContext, OrganizationProvider, SessionContext, UserContext } from '@clerk/shared/react'; import type { ClientResource, InitialState, Resources } from '@clerk/types'; import React from 'react'; @@ -5,11 +6,7 @@ import IsomorphicClerk from '../isomorphicClerk'; import type { IsomorphicClerkOptions } from '../types'; import { deriveState } from '../utils/deriveState'; import { AuthContext } from './AuthContext'; -import { ClientContext } from './ClientContext'; import { IsomorphicClerkContext } from './IsomorphicClerkContext'; -import { OrganizationProvider } from './OrganizationContext'; -import { SessionContext } from './SessionContext'; -import { UserContext } from './UserContext'; type ClerkContextProvider = { isomorphicClerkOptions: IsomorphicClerkOptions; @@ -54,7 +51,7 @@ export function ClerkContextProvider(props: ClerkContextProvider): JSX.Element | }, [orgId, organization]); return ( - // @ts-expect-error + // @ts-expect-error value passed is of type IsomorphicClerk where the context expects LoadedClerk diff --git a/packages/react/src/contexts/ClientContext.tsx b/packages/react/src/contexts/ClientContext.tsx index 7dd27732e1..e69de29bb2 100644 --- a/packages/react/src/contexts/ClientContext.tsx +++ b/packages/react/src/contexts/ClientContext.tsx @@ -1 +0,0 @@ -export { ClientContext, useClientContext } from '@clerk/shared/react'; diff --git a/packages/react/src/contexts/IsomorphicClerkContext.tsx b/packages/react/src/contexts/IsomorphicClerkContext.tsx index fc2476711b..9b03ebd06b 100644 --- a/packages/react/src/contexts/IsomorphicClerkContext.tsx +++ b/packages/react/src/contexts/IsomorphicClerkContext.tsx @@ -1,3 +1,6 @@ import { ClerkInstanceContext, useClerkInstanceContext } from '@clerk/shared/react'; -export const [IsomorphicClerkContext, useIsomorphicClerkContext] = [ClerkInstanceContext, useClerkInstanceContext]; +import type IsomorphicClerk from '../isomorphicClerk'; + +export const IsomorphicClerkContext = ClerkInstanceContext; +export const useIsomorphicClerkContext = useClerkInstanceContext as unknown as () => IsomorphicClerk; diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts index feae53f443..043d301103 100644 --- a/packages/react/src/hooks/index.ts +++ b/packages/react/src/hooks/index.ts @@ -1,6 +1,12 @@ export { useAuth } from './useAuth'; -export { useClerk } from './useClerk'; export { useEmailLink } from './useEmailLink'; export { useSignIn } from './useSignIn'; export { useSignUp } from './useSignUp'; -export { useOrganization, useOrganizationList, useSessionList, useUser, useSession } from '@clerk/shared/react'; +export { + useClerk, + useOrganization, + useOrganizationList, + useSessionList, + useUser, + useSession, +} from '@clerk/shared/react'; diff --git a/packages/react/src/hooks/useAuth.ts b/packages/react/src/hooks/useAuth.ts index f5f6c531d3..96ae836004 100644 --- a/packages/react/src/hooks/useAuth.ts +++ b/packages/react/src/hooks/useAuth.ts @@ -10,7 +10,6 @@ import { useCallback } from 'react'; import { useAuthContext } from '../contexts/AuthContext'; import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext'; import { invalidStateError } from '../errors'; -import type IsomorphicClerk from '../isomorphicClerk'; import { errorThrower } from '../utils'; import { createGetToken, createSignOut } from './utils'; @@ -127,7 +126,7 @@ type UseAuth = () => UseAuthReturn; */ export const useAuth: UseAuth = () => { const { sessionId, userId, actor, orgId, orgRole, orgSlug } = useAuthContext(); - const isomorphicClerk = useIsomorphicClerkContext() as unknown as IsomorphicClerk; + const isomorphicClerk = useIsomorphicClerkContext(); const getToken: GetToken = useCallback(createGetToken(isomorphicClerk), [isomorphicClerk]); const signOut: SignOut = useCallback(createSignOut(isomorphicClerk), [isomorphicClerk]); diff --git a/packages/react/src/hooks/useClerk.ts b/packages/react/src/hooks/useClerk.ts deleted file mode 100644 index 45849ac840..0000000000 --- a/packages/react/src/hooks/useClerk.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { LoadedClerk } from '@clerk/types'; - -import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext'; - -export const useClerk = (): LoadedClerk => { - const isomorphicClerk = useIsomorphicClerkContext(); - // The actual value is an instance of IsomorphicClerk, not Clerk - // we expose is as a Clerk instance - return isomorphicClerk as unknown as LoadedClerk; -}; diff --git a/packages/react/src/hooks/useSignIn.ts b/packages/react/src/hooks/useSignIn.ts index b607c739e3..73885d47cc 100644 --- a/packages/react/src/hooks/useSignIn.ts +++ b/packages/react/src/hooks/useSignIn.ts @@ -1,6 +1,6 @@ +import { useClientContext } from '@clerk/shared/react'; import type { SetActive, SignInResource } from '@clerk/types'; -import { useClientContext } from '../contexts/ClientContext'; import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext'; type UseSignInReturn = diff --git a/packages/react/src/hooks/useSignUp.ts b/packages/react/src/hooks/useSignUp.ts index 0b0222879e..1398773b2a 100644 --- a/packages/react/src/hooks/useSignUp.ts +++ b/packages/react/src/hooks/useSignUp.ts @@ -1,6 +1,6 @@ +import { useClientContext } from '@clerk/shared/react'; import type { SetActive, SignUpResource } from '@clerk/types'; -import { useClientContext } from '../contexts/ClientContext'; import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext'; type UseSignUpReturn = diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts index 6e1636ea4a..6f2215fc36 100644 --- a/packages/react/src/isomorphicClerk.ts +++ b/packages/react/src/isomorphicClerk.ts @@ -12,7 +12,6 @@ import type { HandleOAuthCallbackParams, ListenerCallback, OrganizationListProps, - OrganizationMembershipResource, OrganizationProfileProps, OrganizationResource, OrganizationSwitcherProps, diff --git a/packages/shared/src/react/hooks/index.ts b/packages/shared/src/react/hooks/index.ts index bfda9d97fb..b0d9779bc8 100644 --- a/packages/shared/src/react/hooks/index.ts +++ b/packages/shared/src/react/hooks/index.ts @@ -5,3 +5,4 @@ export { useSafeLayoutEffect } from './useSafeLayoutEffect'; export { useSession } from './useSession'; export { useSessionList } from './useSessionList'; export { useUser } from './useUser'; +export { useClerk } from './useClerk'; diff --git a/packages/shared/src/react/hooks/useClerk.ts b/packages/shared/src/react/hooks/useClerk.ts new file mode 100644 index 0000000000..505cab5e80 --- /dev/null +++ b/packages/shared/src/react/hooks/useClerk.ts @@ -0,0 +1,5 @@ +import type { LoadedClerk } from '@clerk/types'; + +import { useClerkInstanceContext } from '../contexts'; + +export const useClerk: () => LoadedClerk = useClerkInstanceContext;