{\n const displayName = WrappedComponent.displayName || WrappedComponent.name || name || 'Component';\n const Hoc = (props: P) => {\n useMaxAllowedInstancesGuard(name, error);\n return ;\n };\n Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`;\n return Hoc;\n}\n","import type React from 'react';\nimport { useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport type UseCustomElementPortalParams = {\n component: React.ReactNode;\n id: number;\n};\n\nexport type UseCustomElementPortalReturn = {\n portal: () => React.JSX.Element;\n mount: (node: Element) => void;\n unmount: () => void;\n id: number;\n};\n\n// This function takes a component as prop, and returns functions that mount and unmount\n// the given component into a given node\nexport const useCustomElementPortal = (elements: UseCustomElementPortalParams[]) => {\n const [nodeMap, setNodeMap] = useState>(new Map());\n\n return elements.map(el => ({\n id: el.id,\n mount: (node: Element) => setNodeMap(prev => new Map(prev).set(String(el.id), node)),\n unmount: () =>\n setNodeMap(prev => {\n const newMap = new Map(prev);\n newMap.set(String(el.id), null);\n return newMap;\n }),\n portal: () => {\n const node = nodeMap.get(String(el.id));\n return node ? createPortal(el.component, node) : null;\n },\n }));\n};\n","import type { CustomPage } from '@clerk/shared/types';\nimport { logErrorInDevMode } from '@clerk/shared/utils';\nimport type { ReactElement } from 'react';\nimport React from 'react';\n\nimport {\n MenuItems,\n OrganizationProfileLink,\n OrganizationProfilePage,\n UserProfileLink,\n UserProfilePage,\n} from '../components/uiComponents';\nimport { customLinkWrongProps, customPagesIgnoredComponent, customPageWrongProps } from '../errors/messages';\nimport type { UserProfilePageProps } from '../types';\nimport { isThatComponent } from './componentValidation';\nimport type { UseCustomElementPortalParams, UseCustomElementPortalReturn } from './useCustomElementPortal';\nimport { useCustomElementPortal } from './useCustomElementPortal';\n\nexport const useUserProfileCustomPages = (\n children: React.ReactNode | React.ReactNode[],\n options?: UseCustomPagesOptions,\n) => {\n const reorderItemsLabels = ['account', 'security', 'billing', 'apiKeys'];\n return useCustomPages(\n {\n children,\n reorderItemsLabels,\n LinkComponent: UserProfileLink,\n PageComponent: UserProfilePage,\n MenuItemsComponent: MenuItems,\n componentName: 'UserProfile',\n },\n options,\n );\n};\n\nexport const useOrganizationProfileCustomPages = (\n children: React.ReactNode | React.ReactNode[],\n options?: UseCustomPagesOptions,\n) => {\n const reorderItemsLabels = ['general', 'members', 'billing', 'apiKeys'];\n return useCustomPages(\n {\n children,\n reorderItemsLabels,\n LinkComponent: OrganizationProfileLink,\n PageComponent: OrganizationProfilePage,\n componentName: 'OrganizationProfile',\n },\n options,\n );\n};\n\ntype UseCustomPagesParams = {\n children: React.ReactNode | React.ReactNode[];\n LinkComponent: any;\n PageComponent: any;\n MenuItemsComponent?: any;\n reorderItemsLabels: string[];\n componentName: string;\n};\n\ntype UseCustomPagesOptions = {\n allowForAnyChildren: boolean;\n};\n\ntype CustomPageWithIdType = UserProfilePageProps & { children?: React.ReactNode };\n\n/**\n * Exclude any children that is used for identifying Custom Pages or Custom Items.\n * Passing:\n * ```tsx\n * \n * \n * \n * \n * ```\n * Gives back\n * ```tsx\n * \n * ````\n */\nexport const useSanitizedChildren = (children: React.ReactNode) => {\n const sanitizedChildren: React.ReactNode[] = [];\n\n const excludedComponents: any[] = [\n OrganizationProfileLink,\n OrganizationProfilePage,\n MenuItems,\n UserProfilePage,\n UserProfileLink,\n ];\n\n React.Children.forEach(children, child => {\n if (!excludedComponents.some(component => isThatComponent(child, component))) {\n sanitizedChildren.push(child);\n }\n });\n\n return sanitizedChildren;\n};\n\nconst useCustomPages = (params: UseCustomPagesParams, options?: UseCustomPagesOptions) => {\n const { children, LinkComponent, PageComponent, MenuItemsComponent, reorderItemsLabels, componentName } = params;\n const { allowForAnyChildren = false } = options || {};\n const validChildren: CustomPageWithIdType[] = [];\n\n React.Children.forEach(children, child => {\n if (\n !isThatComponent(child, PageComponent) &&\n !isThatComponent(child, LinkComponent) &&\n !isThatComponent(child, MenuItemsComponent)\n ) {\n if (child && !allowForAnyChildren) {\n logErrorInDevMode(customPagesIgnoredComponent(componentName));\n }\n return;\n }\n\n const { props } = child as ReactElement;\n\n const { children, label, url, labelIcon } = props;\n\n if (isThatComponent(child, PageComponent)) {\n if (isReorderItem(props, reorderItemsLabels)) {\n // This is a reordering item\n validChildren.push({ label });\n } else if (isCustomPage(props)) {\n // this is a custom page\n validChildren.push({ label, labelIcon, children, url });\n } else {\n logErrorInDevMode(customPageWrongProps(componentName));\n return;\n }\n }\n\n if (isThatComponent(child, LinkComponent)) {\n if (isExternalLink(props)) {\n // This is an external link\n validChildren.push({ label, labelIcon, url });\n } else {\n logErrorInDevMode(customLinkWrongProps(componentName));\n return;\n }\n }\n });\n\n const customPageContents: UseCustomElementPortalParams[] = [];\n const customPageLabelIcons: UseCustomElementPortalParams[] = [];\n const customLinkLabelIcons: UseCustomElementPortalParams[] = [];\n\n validChildren.forEach((cp, index) => {\n if (isCustomPage(cp)) {\n customPageContents.push({ component: cp.children, id: index });\n customPageLabelIcons.push({ component: cp.labelIcon, id: index });\n return;\n }\n if (isExternalLink(cp)) {\n customLinkLabelIcons.push({ component: cp.labelIcon, id: index });\n }\n });\n\n const customPageContentsPortals = useCustomElementPortal(customPageContents);\n const customPageLabelIconsPortals = useCustomElementPortal(customPageLabelIcons);\n const customLinkLabelIconsPortals = useCustomElementPortal(customLinkLabelIcons);\n\n const customPages: CustomPage[] = [];\n const customPagesPortals: React.ComponentType[] = [];\n\n validChildren.forEach((cp, index) => {\n if (isReorderItem(cp, reorderItemsLabels)) {\n customPages.push({ label: cp.label });\n return;\n }\n if (isCustomPage(cp)) {\n const {\n portal: contentPortal,\n mount,\n unmount,\n } = customPageContentsPortals.find(p => p.id === index) as UseCustomElementPortalReturn;\n const {\n portal: labelPortal,\n mount: mountIcon,\n unmount: unmountIcon,\n } = customPageLabelIconsPortals.find(p => p.id === index) as UseCustomElementPortalReturn;\n customPages.push({ label: cp.label, url: cp.url, mount, unmount, mountIcon, unmountIcon });\n customPagesPortals.push(contentPortal);\n customPagesPortals.push(labelPortal);\n return;\n }\n if (isExternalLink(cp)) {\n const {\n portal: labelPortal,\n mount: mountIcon,\n unmount: unmountIcon,\n } = customLinkLabelIconsPortals.find(p => p.id === index) as UseCustomElementPortalReturn;\n customPages.push({ label: cp.label, url: cp.url, mountIcon, unmountIcon });\n customPagesPortals.push(labelPortal);\n return;\n }\n });\n\n return { customPages, customPagesPortals };\n};\n\nconst isReorderItem = (childProps: any, validItems: string[]): boolean => {\n const { children, label, url, labelIcon } = childProps;\n return !children && !url && !labelIcon && validItems.some(v => v === label);\n};\n\nconst isCustomPage = (childProps: any): boolean => {\n const { children, label, url, labelIcon } = childProps;\n return !!children && !!url && !!labelIcon && !!label;\n};\n\nconst isExternalLink = (childProps: any): boolean => {\n const { children, label, url, labelIcon } = childProps;\n return !children && !!url && !!labelIcon && !!label;\n};\n","import React from 'react';\n\nexport const isThatComponent = (v: any, component: React.ReactNode): v is React.ReactNode => {\n return !!v && React.isValidElement(v) && (v as React.ReactElement)?.type === component;\n};\n","import type { CustomMenuItem } from '@clerk/shared/types';\nimport { logErrorInDevMode } from '@clerk/shared/utils';\nimport type { ReactElement } from 'react';\nimport React from 'react';\n\nimport { MenuAction, MenuItems, MenuLink, UserProfileLink, UserProfilePage } from '../components/uiComponents';\nimport {\n customMenuItemsIgnoredComponent,\n userButtonIgnoredComponent,\n userButtonMenuItemLinkWrongProps,\n userButtonMenuItemsActionWrongsProps,\n} from '../errors/messages';\nimport type { UserButtonActionProps, UserButtonLinkProps } from '../types';\nimport { isThatComponent } from './componentValidation';\nimport type { UseCustomElementPortalParams, UseCustomElementPortalReturn } from './useCustomElementPortal';\nimport { useCustomElementPortal } from './useCustomElementPortal';\n\nexport const useUserButtonCustomMenuItems = (\n children: React.ReactNode | React.ReactNode[],\n options?: { allowForAnyChildren?: boolean },\n) => {\n const reorderItemsLabels = ['manageAccount', 'signOut'];\n return useCustomMenuItems({\n children,\n reorderItemsLabels,\n MenuItemsComponent: MenuItems,\n MenuActionComponent: MenuAction,\n MenuLinkComponent: MenuLink,\n UserProfileLinkComponent: UserProfileLink,\n UserProfilePageComponent: UserProfilePage,\n allowForAnyChildren: options?.allowForAnyChildren ?? false,\n });\n};\n\ntype UseCustomMenuItemsParams = {\n children: React.ReactNode | React.ReactNode[];\n MenuItemsComponent?: any;\n MenuActionComponent?: any;\n MenuLinkComponent?: any;\n UserProfileLinkComponent?: any;\n UserProfilePageComponent?: any;\n reorderItemsLabels: string[];\n allowForAnyChildren?: boolean;\n};\n\ntype CustomMenuItemType = UserButtonActionProps | UserButtonLinkProps;\n\nconst useCustomMenuItems = ({\n children,\n MenuItemsComponent,\n MenuActionComponent,\n MenuLinkComponent,\n UserProfileLinkComponent,\n UserProfilePageComponent,\n reorderItemsLabels,\n allowForAnyChildren = false,\n}: UseCustomMenuItemsParams) => {\n const validChildren: CustomMenuItemType[] = [];\n const customMenuItems: CustomMenuItem[] = [];\n const customMenuItemsPortals: React.ComponentType[] = [];\n\n React.Children.forEach(children, child => {\n if (\n !isThatComponent(child, MenuItemsComponent) &&\n !isThatComponent(child, UserProfileLinkComponent) &&\n !isThatComponent(child, UserProfilePageComponent)\n ) {\n if (child && !allowForAnyChildren) {\n logErrorInDevMode(userButtonIgnoredComponent);\n }\n return;\n }\n\n // Ignore UserProfileLinkComponent and UserProfilePageComponent\n if (isThatComponent(child, UserProfileLinkComponent) || isThatComponent(child, UserProfilePageComponent)) {\n return;\n }\n\n // Menu items children\n const { props } = child as ReactElement;\n\n React.Children.forEach(props.children, child => {\n if (!isThatComponent(child, MenuActionComponent) && !isThatComponent(child, MenuLinkComponent)) {\n if (child) {\n logErrorInDevMode(customMenuItemsIgnoredComponent);\n }\n\n return;\n }\n\n const { props } = child as ReactElement;\n\n const { label, labelIcon, href, onClick, open } = props;\n\n if (isThatComponent(child, MenuActionComponent)) {\n if (isReorderItem(props, reorderItemsLabels)) {\n // This is a reordering item\n validChildren.push({ label });\n } else if (isCustomMenuItem(props)) {\n const baseItem = {\n label,\n labelIcon,\n };\n\n if (onClick !== undefined) {\n validChildren.push({\n ...baseItem,\n onClick,\n });\n } else if (open !== undefined) {\n validChildren.push({\n ...baseItem,\n open: open.startsWith('/') ? open : `/${open}`,\n });\n } else {\n // Handle the case where neither onClick nor open is defined\n logErrorInDevMode('Custom menu item must have either onClick or open property');\n return;\n }\n } else {\n logErrorInDevMode(userButtonMenuItemsActionWrongsProps);\n return;\n }\n }\n\n if (isThatComponent(child, MenuLinkComponent)) {\n if (isExternalLink(props)) {\n validChildren.push({ label, labelIcon, href });\n } else {\n logErrorInDevMode(userButtonMenuItemLinkWrongProps);\n return;\n }\n }\n });\n });\n\n const customMenuItemLabelIcons: UseCustomElementPortalParams[] = [];\n const customLinkLabelIcons: UseCustomElementPortalParams[] = [];\n validChildren.forEach((mi, index) => {\n if (isCustomMenuItem(mi)) {\n customMenuItemLabelIcons.push({ component: mi.labelIcon, id: index });\n }\n if (isExternalLink(mi)) {\n customLinkLabelIcons.push({ component: mi.labelIcon, id: index });\n }\n });\n\n const customMenuItemLabelIconsPortals = useCustomElementPortal(customMenuItemLabelIcons);\n const customLinkLabelIconsPortals = useCustomElementPortal(customLinkLabelIcons);\n\n validChildren.forEach((mi, index) => {\n if (isReorderItem(mi, reorderItemsLabels)) {\n customMenuItems.push({\n label: mi.label,\n });\n }\n if (isCustomMenuItem(mi)) {\n const {\n portal: iconPortal,\n mount: mountIcon,\n unmount: unmountIcon,\n } = customMenuItemLabelIconsPortals.find(p => p.id === index) as UseCustomElementPortalReturn;\n const menuItem: CustomMenuItem = {\n label: mi.label,\n mountIcon,\n unmountIcon,\n };\n\n if ('onClick' in mi) {\n menuItem.onClick = mi.onClick;\n } else if ('open' in mi) {\n menuItem.open = mi.open;\n }\n customMenuItems.push(menuItem);\n customMenuItemsPortals.push(iconPortal);\n }\n if (isExternalLink(mi)) {\n const {\n portal: iconPortal,\n mount: mountIcon,\n unmount: unmountIcon,\n } = customLinkLabelIconsPortals.find(p => p.id === index) as UseCustomElementPortalReturn;\n customMenuItems.push({\n label: mi.label,\n href: mi.href,\n mountIcon,\n unmountIcon,\n });\n customMenuItemsPortals.push(iconPortal);\n }\n });\n\n return { customMenuItems, customMenuItemsPortals };\n};\n\nconst isReorderItem = (childProps: any, validItems: string[]): boolean => {\n const { children, label, onClick, labelIcon } = childProps;\n return !children && !onClick && !labelIcon && validItems.some(v => v === label);\n};\n\nconst isCustomMenuItem = (childProps: any): childProps is UserButtonActionProps => {\n const { label, labelIcon, onClick, open } = childProps;\n return !!labelIcon && !!label && (typeof onClick === 'function' || typeof open === 'string');\n};\n\nconst isExternalLink = (childProps: any): childProps is UserButtonLinkProps => {\n const { label, href, labelIcon } = childProps;\n return !!href && !!labelIcon && !!label;\n};\n","import { useEffect, useRef, useState } from 'react';\n\nconst createAwaitableMutationObserver = (\n globalOptions: MutationObserverInit & {\n isReady: (el: HTMLElement | null, selector: string) => boolean;\n },\n) => {\n const isReady = globalOptions?.isReady;\n\n return (options: { selector: string; root?: HTMLElement | null; timeout?: number }) =>\n new Promise((resolve, reject) => {\n const { root = document?.body, selector, timeout = 0 } = options;\n\n if (!root) {\n reject(new Error('No root element provided'));\n return;\n }\n\n let elementToWatch: HTMLElement | null = root;\n if (selector) {\n elementToWatch = root?.querySelector(selector);\n }\n\n // Initial readiness check\n if (isReady(elementToWatch, selector)) {\n resolve();\n return;\n }\n\n // Set up a MutationObserver to detect when the element has children\n const observer = new MutationObserver(mutationsList => {\n for (const mutation of mutationsList) {\n if (!elementToWatch && selector) {\n elementToWatch = root?.querySelector(selector);\n }\n\n if (\n (globalOptions.childList && mutation.type === 'childList') ||\n (globalOptions.attributes && mutation.type === 'attributes')\n ) {\n if (isReady(elementToWatch, selector)) {\n observer.disconnect();\n resolve();\n return;\n }\n }\n }\n });\n\n observer.observe(root, globalOptions);\n\n // Set up an optional timeout to reject the promise if the element never gets child nodes\n if (timeout > 0) {\n setTimeout(() => {\n observer.disconnect();\n reject(new Error(`Timeout waiting for ${selector}`));\n }, timeout);\n }\n });\n};\n\nconst waitForElementChildren = createAwaitableMutationObserver({\n childList: true,\n subtree: true,\n isReady: (el, selector) => !!el?.childElementCount && el?.matches?.(selector) && el.childElementCount > 0,\n});\n\n/**\n * Detect when a Clerk component has mounted by watching DOM updates to an element with a `data-clerk-component=\"${component}\"` property.\n */\nexport function useWaitForComponentMount(\n component?: string,\n options?: { selector: string },\n): 'rendering' | 'rendered' | 'error' {\n const watcherRef = useRef>();\n const [status, setStatus] = useState<'rendering' | 'rendered' | 'error'>('rendering');\n\n useEffect(() => {\n if (!component) {\n throw new Error('Clerk: no component name provided, unable to detect mount.');\n }\n\n if (typeof window !== 'undefined' && !watcherRef.current) {\n const defaultSelector = `[data-clerk-component=\"${component}\"]`;\n const selector = options?.selector;\n watcherRef.current = waitForElementChildren({\n selector: selector\n ? // Allows for `[data-clerk-component=\"xxxx\"][data-some-attribute=\"123\"] .my-class`\n defaultSelector + selector\n : defaultSelector,\n })\n .then(() => {\n setStatus('rendered');\n })\n .catch(() => {\n setStatus('error');\n });\n }\n }, [component, options?.selector]);\n\n return status;\n}\n","import { without } from '@clerk/shared/object';\nimport { isDeeplyEqual } from '@clerk/shared/react';\nimport type { PropsWithChildren } from 'react';\nimport React from 'react';\n\nimport type { MountProps, OpenProps } from '../types';\n\nconst isMountProps = (props: any): props is MountProps => {\n return 'mount' in props;\n};\n\nconst isOpenProps = (props: any): props is OpenProps => {\n return 'open' in props;\n};\n\nconst stripMenuItemIconHandlers = (\n menuItems?: Array<{\n mountIcon?: (el: HTMLDivElement) => void;\n unmountIcon?: (el: HTMLDivElement) => void;\n [key: string]: any;\n }>,\n) => {\n return menuItems?.map(({ mountIcon, unmountIcon, ...rest }) => rest);\n};\n\n// README: should be a class pure component in order for mount and unmount\n// lifecycle props to be invoked correctly. Replacing the class component with a\n// functional component wrapped with a React.memo is not identical to the original\n// class implementation due to React intricacies such as the useEffect’s cleanup\n// seems to run AFTER unmount, while componentWillUnmount runs BEFORE.\n\n// More information can be found at https://clerk.slack.com/archives/C015S0BGH8R/p1624891993016300\n\n// The function Portal implementation is commented out for future reference.\n\n// const Portal = React.memo(({ props, mount, unmount }: MountProps) => {\n// const portalRef = React.createRef();\n\n// useEffect(() => {\n// if (portalRef.current) {\n// mount(portalRef.current, props);\n// }\n// return () => {\n// if (portalRef.current) {\n// unmount(portalRef.current);\n// }\n// };\n// }, []);\n\n// return ;\n// });\n\n// Portal.displayName = 'ClerkPortal';\n\n/**\n * Used to orchestrate mounting of Clerk components in a host React application.\n * Components are rendered into a specific DOM node using mount/unmount methods provided by the Clerk class.\n */\nexport class ClerkHostRenderer extends React.PureComponent<\n PropsWithChildren<\n (MountProps | OpenProps) & {\n component?: string;\n hideRootHtmlElement?: boolean;\n rootProps?: JSX.IntrinsicElements['div'];\n }\n >\n> {\n private rootRef = React.createRef();\n\n componentDidUpdate(_prevProps: Readonly) {\n if (!isMountProps(_prevProps) || !isMountProps(this.props)) {\n return;\n }\n\n // Remove children and customPages from props before comparing\n // children might hold circular references which deepEqual can't handle\n // and the implementation of customPages relies on props getting new references\n const prevProps = without(_prevProps.props, 'customPages', 'customMenuItems', 'children');\n const newProps = without(this.props.props, 'customPages', 'customMenuItems', 'children');\n\n // instead, we simply use the length of customPages to determine if it changed or not\n const customPagesChanged = prevProps.customPages?.length !== newProps.customPages?.length;\n const customMenuItemsChanged = prevProps.customMenuItems?.length !== newProps.customMenuItems?.length;\n\n // Strip out mountIcon and unmountIcon handlers since they're always generated as new function references,\n // which would cause unnecessary re-renders in deep equality checks\n const prevMenuItemsWithoutHandlers = stripMenuItemIconHandlers(_prevProps.props.customMenuItems);\n const newMenuItemsWithoutHandlers = stripMenuItemIconHandlers(this.props.props.customMenuItems);\n\n if (\n !isDeeplyEqual(prevProps, newProps) ||\n !isDeeplyEqual(prevMenuItemsWithoutHandlers, newMenuItemsWithoutHandlers) ||\n customPagesChanged ||\n customMenuItemsChanged\n ) {\n if (this.rootRef.current) {\n this.props.updateProps({ node: this.rootRef.current, props: this.props.props });\n }\n }\n }\n\n componentDidMount() {\n if (this.rootRef.current) {\n if (isMountProps(this.props)) {\n this.props.mount(this.rootRef.current, this.props.props);\n }\n\n if (isOpenProps(this.props)) {\n this.props.open(this.props.props);\n }\n }\n }\n\n componentWillUnmount() {\n if (this.rootRef.current) {\n if (isMountProps(this.props)) {\n this.props.unmount(this.rootRef.current);\n }\n if (isOpenProps(this.props)) {\n this.props.close();\n }\n }\n }\n\n render() {\n const { hideRootHtmlElement = false } = this.props;\n const rootAttributes = {\n ref: this.rootRef,\n ...this.props.rootProps,\n ...(this.props.component && { 'data-clerk-component': this.props.component }),\n };\n\n return (\n <>\n {!hideRootHtmlElement && }\n {this.props.children}\n \n );\n }\n}\n","import type { LoadedClerk, Without } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';\nimport { useAssertWrappedByClerkProvider } from '../hooks/useAssertWrappedByClerkProvider';\n\nexport const withClerk =
(\n Component: React.ComponentType
,\n displayNameOrOptions?: string | { component: string; renderWhileLoading?: boolean },\n) => {\n const passedDisplayedName =\n typeof displayNameOrOptions === 'string' ? displayNameOrOptions : displayNameOrOptions?.component;\n const displayName = passedDisplayedName || Component.displayName || Component.name || 'Component';\n Component.displayName = displayName;\n\n const options = typeof displayNameOrOptions === 'string' ? undefined : displayNameOrOptions;\n\n const HOC = (props: Without) => {\n useAssertWrappedByClerkProvider(displayName || 'withClerk');\n\n const clerk = useIsomorphicClerkContext();\n\n if (!clerk.loaded && !options?.renderWhileLoading) {\n return null;\n }\n\n return (\n \n );\n };\n HOC.displayName = `withClerk(${displayName})`;\n return HOC;\n};\n","import { ClerkInstanceContext, useClerkInstanceContext } from '@clerk/shared/react';\n\nimport type { IsomorphicClerk } from '../isomorphicClerk';\n\nexport const IsomorphicClerkContext = ClerkInstanceContext;\nexport const useIsomorphicClerkContext = useClerkInstanceContext as unknown as () => IsomorphicClerk;\n","import { useAssertWrappedByClerkProvider as useSharedAssertWrappedByClerkProvider } from '@clerk/shared/react';\n\nimport { errorThrower } from '../errors/errorThrower';\n\nexport const useAssertWrappedByClerkProvider = (source: string): void => {\n useSharedAssertWrappedByClerkProvider(() => {\n errorThrower.throwMissingClerkProviderError({ source });\n });\n};\n","import { deprecated } from '@clerk/shared/deprecated';\nimport type {\n HandleOAuthCallbackParams,\n PendingSessionOptions,\n ProtectProps as _ProtectProps,\n} from '@clerk/shared/types';\nimport React from 'react';\n\nimport { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';\nimport { useSessionContext } from '../contexts/SessionContext';\nimport { useAuth } from '../hooks';\nimport { useAssertWrappedByClerkProvider } from '../hooks/useAssertWrappedByClerkProvider';\nimport type { RedirectToSignInProps, RedirectToSignUpProps, RedirectToTasksProps, WithClerkProp } from '../types';\nimport { withClerk } from './withClerk';\n\nexport const SignedIn = ({ children, treatPendingAsSignedOut }: React.PropsWithChildren) => {\n useAssertWrappedByClerkProvider('SignedIn');\n\n const { userId } = useAuth({ treatPendingAsSignedOut });\n if (userId) {\n return children;\n }\n return null;\n};\n\nexport const SignedOut = ({ children, treatPendingAsSignedOut }: React.PropsWithChildren) => {\n useAssertWrappedByClerkProvider('SignedOut');\n\n const { userId } = useAuth({ treatPendingAsSignedOut });\n if (userId === null) {\n return children;\n }\n return null;\n};\n\nexport const ClerkLoaded = ({ children }: React.PropsWithChildren) => {\n useAssertWrappedByClerkProvider('ClerkLoaded');\n\n const isomorphicClerk = useIsomorphicClerkContext();\n if (!isomorphicClerk.loaded) {\n return null;\n }\n return children;\n};\n\nexport const ClerkLoading = ({ children }: React.PropsWithChildren) => {\n useAssertWrappedByClerkProvider('ClerkLoading');\n\n const isomorphicClerk = useIsomorphicClerkContext();\n if (isomorphicClerk.status !== 'loading') {\n return null;\n }\n return children;\n};\n\nexport const ClerkFailed = ({ children }: React.PropsWithChildren) => {\n useAssertWrappedByClerkProvider('ClerkFailed');\n\n const isomorphicClerk = useIsomorphicClerkContext();\n if (isomorphicClerk.status !== 'error') {\n return null;\n }\n return children;\n};\n\nexport const ClerkDegraded = ({ children }: React.PropsWithChildren) => {\n useAssertWrappedByClerkProvider('ClerkDegraded');\n\n const isomorphicClerk = useIsomorphicClerkContext();\n if (isomorphicClerk.status !== 'degraded') {\n return null;\n }\n return children;\n};\n\nexport type ProtectProps = React.PropsWithChildren<\n _ProtectProps & {\n fallback?: React.ReactNode;\n } & PendingSessionOptions\n>;\n\n/**\n * Use `` in order to prevent unauthenticated or unauthorized users from accessing the children passed to the component.\n *\n * Examples:\n * ```\n * \n * \n * has({permission:\"a_permission_key\"})} />\n * has({role:\"a_role_key\"})} />\n * Unauthorized
} />\n * ```\n */\nexport const Protect = ({ children, fallback, treatPendingAsSignedOut, ...restAuthorizedParams }: ProtectProps) => {\n useAssertWrappedByClerkProvider('Protect');\n\n const { isLoaded, has, userId } = useAuth({ treatPendingAsSignedOut });\n\n /**\n * Avoid flickering children or fallback while clerk is loading sessionId or userId\n */\n if (!isLoaded) {\n return null;\n }\n\n /**\n * Fallback to UI provided by user or `null` if authorization checks failed\n */\n const unauthorized = fallback ?? null;\n\n const authorized = children;\n\n if (!userId) {\n return unauthorized;\n }\n\n /**\n * Check against the results of `has` called inside the callback\n */\n if (typeof restAuthorizedParams.condition === 'function') {\n if (restAuthorizedParams.condition(has)) {\n return authorized;\n }\n return unauthorized;\n }\n\n if (\n restAuthorizedParams.role ||\n restAuthorizedParams.permission ||\n restAuthorizedParams.feature ||\n restAuthorizedParams.plan\n ) {\n if (has(restAuthorizedParams)) {\n return authorized;\n }\n return unauthorized;\n }\n\n /**\n * If neither of the authorization params are passed behave as the ``.\n * If fallback is present render that instead of rendering nothing.\n */\n return authorized;\n};\n\nexport const RedirectToSignIn = withClerk(({ clerk, ...props }: WithClerkProp) => {\n const { client, session } = clerk;\n\n const hasSignedInSessions = client.signedInSessions\n ? client.signedInSessions.length > 0\n : // Compat for clerk-js<5.54.0 (which was released with the `signedInSessions` property)\n client.activeSessions && client.activeSessions.length > 0;\n\n React.useEffect(() => {\n if (session === null && hasSignedInSessions) {\n void clerk.redirectToAfterSignOut();\n } else {\n void clerk.redirectToSignIn(props);\n }\n }, []);\n\n return null;\n}, 'RedirectToSignIn');\n\nexport const RedirectToSignUp = withClerk(({ clerk, ...props }: WithClerkProp) => {\n React.useEffect(() => {\n void clerk.redirectToSignUp(props);\n }, []);\n\n return null;\n}, 'RedirectToSignUp');\n\nexport const RedirectToTasks = withClerk(({ clerk, ...props }: WithClerkProp) => {\n React.useEffect(() => {\n void clerk.redirectToTasks(props);\n }, []);\n\n return null;\n}, 'RedirectToTasks');\n\n/**\n * @function\n * @deprecated Use [`redirectToUserProfile()`](https://clerk.com/docs/reference/javascript/clerk#redirect-to-user-profile) instead.\n */\nexport const RedirectToUserProfile = withClerk(({ clerk }) => {\n React.useEffect(() => {\n deprecated('RedirectToUserProfile', 'Use the `redirectToUserProfile()` method instead.');\n void clerk.redirectToUserProfile();\n }, []);\n\n return null;\n}, 'RedirectToUserProfile');\n\n/**\n * @function\n * @deprecated Use [`redirectToOrganizationProfile()`](https://clerk.com/docs/reference/javascript/clerk#redirect-to-organization-profile) instead.\n */\nexport const RedirectToOrganizationProfile = withClerk(({ clerk }) => {\n React.useEffect(() => {\n deprecated('RedirectToOrganizationProfile', 'Use the `redirectToOrganizationProfile()` method instead.');\n void clerk.redirectToOrganizationProfile();\n }, []);\n\n return null;\n}, 'RedirectToOrganizationProfile');\n\n/**\n * @function\n * @deprecated Use [`redirectToCreateOrganization()`](https://clerk.com/docs/reference/javascript/clerk#redirect-to-create-organization) instead.\n */\nexport const RedirectToCreateOrganization = withClerk(({ clerk }) => {\n React.useEffect(() => {\n deprecated('RedirectToCreateOrganization', 'Use the `redirectToCreateOrganization()` method instead.');\n void clerk.redirectToCreateOrganization();\n }, []);\n\n return null;\n}, 'RedirectToCreateOrganization');\n\nexport const AuthenticateWithRedirectCallback = withClerk(\n ({ clerk, ...handleRedirectCallbackParams }: WithClerkProp) => {\n React.useEffect(() => {\n void clerk.handleRedirectCallback(handleRedirectCallbackParams);\n }, []);\n\n return null;\n },\n 'AuthenticateWithRedirectCallback',\n);\n\nexport const MultisessionAppSupport = ({ children }: React.PropsWithChildren) => {\n useAssertWrappedByClerkProvider('MultisessionAppSupport');\n\n const session = useSessionContext();\n return {children};\n};\n","export { SessionContext, useSessionContext } from '@clerk/shared/react';\n","import { createCheckAuthorization, resolveAuthState } from '@clerk/shared/authorization';\nimport { eventMethodCalled } from '@clerk/shared/telemetry';\nimport type {\n CheckAuthorizationWithCustomPermissions,\n GetToken,\n JwtPayload,\n PendingSessionOptions,\n SignOut,\n UseAuthReturn,\n} from '@clerk/shared/types';\nimport { useCallback } from 'react';\n\nimport { useAuthContext } from '../contexts/AuthContext';\nimport { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';\nimport { errorThrower } from '../errors/errorThrower';\nimport { invalidStateError } from '../errors/messages';\nimport { useAssertWrappedByClerkProvider } from './useAssertWrappedByClerkProvider';\nimport { createGetToken, createSignOut } from './utils';\n\n/**\n * @inline\n */\ntype UseAuthOptions = Record | PendingSessionOptions | undefined | null;\n\n/**\n * The `useAuth()` hook provides access to the current user's authentication state and methods to manage the active session.\n *\n * > [!NOTE]\n * > To access auth data server-side, see the [`Auth` object reference doc](https://clerk.com/docs/reference/backend/types/auth-object).\n *\n * \n * By default, Next.js opts all routes into static rendering. If you need to opt a route or routes into dynamic rendering because you need to access the authentication data at request time, you can create a boundary by passing the `dynamic` prop to ``. See the [guide on rendering modes](https://clerk.com/docs/guides/development/rendering-modes) for more information, including code examples.\n * \n *\n * @unionReturnHeadings\n * [\"Initialization\", \"Signed out\", \"Signed in (no active organization)\", \"Signed in (with active organization)\"]\n *\n * @param [initialAuthStateOrOptions] - An object containing the initial authentication state or options for the `useAuth()` hook. If not provided, the hook will attempt to derive the state from the context. `treatPendingAsSignedOut` is a boolean that indicates whether pending sessions are considered as signed out or not. Defaults to `true`.\n *\n * @function\n *\n * @example\n *\n * The following example demonstrates how to use the `useAuth()` hook to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the `getToken()` method to retrieve a session token for fetching data from an external resource.\n *\n * \n * \n *\n * ```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }}\n * import { useAuth } from '@clerk/clerk-react'\n *\n * export default function ExternalDataPage() {\n * const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()\n *\n * const fetchExternalData = async () => {\n * const token = await getToken()\n *\n * // Fetch data from an external API\n * const response = await fetch('https://api.example.com/data', {\n * headers: {\n * Authorization: `Bearer ${token}`,\n * },\n * })\n *\n * return response.json()\n * }\n *\n * if (!isLoaded) {\n * return
Loading...
\n * }\n *\n * if (!isSignedIn) {\n * return
Sign in to view this page
\n * }\n *\n * return (\n *
\n *
\n * Hello, {userId}! Your current active session is {sessionId}.\n *
\n * \n *
\n * )\n * }\n * ```\n *\n * \n * \n *\n * {@include ../../docs/use-auth.md#nextjs-01}\n *\n * \n * \n */\nexport const useAuth = (initialAuthStateOrOptions: UseAuthOptions = {}): UseAuthReturn => {\n useAssertWrappedByClerkProvider('useAuth');\n\n const { treatPendingAsSignedOut, ...rest } = initialAuthStateOrOptions ?? {};\n const initialAuthState = rest as any;\n\n const authContextFromHook = useAuthContext();\n let authContext = authContextFromHook;\n\n if (authContext.sessionId === undefined && authContext.userId === undefined) {\n authContext = initialAuthState != null ? initialAuthState : {};\n }\n\n const isomorphicClerk = useIsomorphicClerkContext();\n const getToken: GetToken = useCallback(createGetToken(isomorphicClerk), [isomorphicClerk]);\n const signOut: SignOut = useCallback(createSignOut(isomorphicClerk), [isomorphicClerk]);\n\n isomorphicClerk.telemetry?.record(eventMethodCalled('useAuth', { treatPendingAsSignedOut }));\n\n return useDerivedAuth(\n {\n ...authContext,\n getToken,\n signOut,\n },\n {\n treatPendingAsSignedOut,\n },\n );\n};\n\n/**\n * A hook that derives and returns authentication state and utility functions based on the provided auth object.\n *\n * @param authObject - An object containing authentication-related properties and functions.\n *\n * @returns A derived authentication state with helper methods. If the authentication state is invalid, an error is thrown.\n *\n * @remarks\n * This hook inspects session, user, and organization information to determine the current authentication state.\n * It returns an object that includes various properties such as whether the state is loaded, if a user is signed in,\n * session and user identifiers, Organization Roles, and a `has` function for authorization checks.\n * Additionally, it provides `signOut` and `getToken` functions if applicable.\n *\n * @example\n * ```tsx\n * const {\n * isLoaded,\n * isSignedIn,\n * userId,\n * orgId,\n * has,\n * signOut,\n * getToken\n * } = useDerivedAuth(authObject);\n * ```\n */\nexport function useDerivedAuth(\n authObject: any,\n { treatPendingAsSignedOut = true }: PendingSessionOptions = {},\n): UseAuthReturn {\n const { userId, orgId, orgRole, has, signOut, getToken, orgPermissions, factorVerificationAge, sessionClaims } =\n authObject ?? {};\n\n const derivedHas = useCallback(\n (params: Parameters[0]) => {\n if (has) {\n return has(params);\n }\n return createCheckAuthorization({\n userId,\n orgId,\n orgRole,\n orgPermissions,\n factorVerificationAge,\n features: ((sessionClaims as JwtPayload | undefined)?.fea as string) || '',\n plans: ((sessionClaims as JwtPayload | undefined)?.pla as string) || '',\n })(params);\n },\n [has, userId, orgId, orgRole, orgPermissions, factorVerificationAge, sessionClaims],\n );\n\n const payload = resolveAuthState({\n authObject: {\n ...authObject,\n getToken,\n signOut,\n has: derivedHas,\n },\n options: {\n treatPendingAsSignedOut,\n },\n });\n\n if (!payload) {\n return errorThrower.throw(invalidStateError);\n }\n\n return payload;\n}\n","import { createContextAndHook } from '@clerk/shared/react';\nimport type {\n ActClaim,\n JwtPayload,\n OrganizationCustomPermissionKey,\n OrganizationCustomRoleKey,\n SessionStatusClaim,\n} from '@clerk/shared/types';\n\nexport type AuthContextValue = {\n userId: string | null | undefined;\n sessionId: string | null | undefined;\n sessionStatus: SessionStatusClaim | null | undefined;\n sessionClaims: JwtPayload | null | undefined;\n actor: ActClaim | null | undefined;\n orgId: string | null | undefined;\n orgRole: OrganizationCustomRoleKey | null | undefined;\n orgSlug: string | null | undefined;\n orgPermissions: OrganizationCustomPermissionKey[] | null | undefined;\n factorVerificationAge: [number, number] | null;\n};\n\nexport const [AuthContext, useAuthContext] = createContextAndHook('AuthContext');\n","import type { IsomorphicClerk } from '../isomorphicClerk';\n\n/**\n * @internal\n */\nconst clerkLoaded = (isomorphicClerk: IsomorphicClerk) => {\n return new Promise(resolve => {\n const handler = (status: string) => {\n if (['ready', 'degraded'].includes(status)) {\n resolve();\n isomorphicClerk.off('status', handler);\n }\n };\n\n // Register the event listener\n isomorphicClerk.on('status', handler, { notify: true });\n });\n};\n\n/**\n * @internal\n */\nexport const createGetToken = (isomorphicClerk: IsomorphicClerk) => {\n return async (options: any) => {\n await clerkLoaded(isomorphicClerk);\n if (!isomorphicClerk.session) {\n return null;\n }\n return isomorphicClerk.session.getToken(options);\n };\n};\n\n/**\n * @internal\n */\nexport const createSignOut = (isomorphicClerk: IsomorphicClerk) => {\n return async (...args: any) => {\n await clerkLoaded(isomorphicClerk);\n return isomorphicClerk.signOut(...args);\n };\n};\n","import type {\n CreateEmailLinkFlowReturn,\n EmailAddressResource,\n SignInResource,\n SignInStartEmailLinkFlowParams,\n SignUpResource,\n StartEmailLinkFlowParams,\n} from '@clerk/shared/types';\nimport React from 'react';\n\ntype EmailLinkable = SignUpResource | EmailAddressResource | SignInResource;\ntype UseEmailLinkSignInReturn = CreateEmailLinkFlowReturn;\ntype UseEmailLinkSignUpReturn = CreateEmailLinkFlowReturn;\ntype UseEmailLinkEmailAddressReturn = CreateEmailLinkFlowReturn;\n\nfunction useEmailLink(resource: SignInResource): UseEmailLinkSignInReturn;\nfunction useEmailLink(resource: SignUpResource): UseEmailLinkSignUpReturn;\nfunction useEmailLink(resource: EmailAddressResource): UseEmailLinkEmailAddressReturn;\nfunction useEmailLink(\n resource: EmailLinkable,\n): UseEmailLinkSignInReturn | UseEmailLinkSignUpReturn | UseEmailLinkEmailAddressReturn {\n const { startEmailLinkFlow, cancelEmailLinkFlow } = React.useMemo(() => resource.createEmailLinkFlow(), [resource]);\n\n React.useEffect(() => {\n return cancelEmailLinkFlow;\n }, []);\n\n return {\n startEmailLinkFlow,\n cancelEmailLinkFlow,\n } as UseEmailLinkSignInReturn | UseEmailLinkSignUpReturn | UseEmailLinkEmailAddressReturn;\n}\n\nexport { useEmailLink };\n","import { useClientContext } from '@clerk/shared/react';\nimport { eventMethodCalled } from '@clerk/shared/telemetry';\nimport type { UseSignInReturn } from '@clerk/shared/types';\n\nimport { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';\nimport { useAssertWrappedByClerkProvider } from './useAssertWrappedByClerkProvider';\n\n/**\n * The `useSignIn()` hook provides access to the [`SignIn`](https://clerk.com/docs/reference/javascript/sign-in) object, which allows you to check the current state of a sign-in attempt and manage the sign-in flow. You can use this to create a [custom sign-in flow](!custom-flow).\n *\n * @unionReturnHeadings\n * [\"Initialization\", \"Loaded\"]\n *\n * @example\n * ### Check the current state of a sign-in\n *\n * The following example uses the `useSignIn()` hook to access the [`SignIn`](https://clerk.com/docs/reference/javascript/sign-in) object, which contains the current sign-in attempt status and methods to create a new sign-in attempt. The `isLoaded` property is used to handle the loading state.\n *\n * \n * \n *\n * ```tsx {{ filename: 'src/pages/SignInPage.tsx' }}\n * import { useSignIn } from '@clerk/clerk-react'\n *\n * export default function SignInPage() {\n * const { isLoaded, signIn } = useSignIn()\n *\n * if (!isLoaded) {\n * // Handle loading state\n * return null\n * }\n *\n * return
The current sign-in attempt status is {signIn?.status}.
\n * }\n * ```\n *\n * \n * \n *\n * {@include ../../docs/use-sign-in.md#nextjs-01}\n *\n * \n * \n *\n * @example\n * ### Create a custom sign-in flow with `useSignIn()`\n *\n * The `useSignIn()` hook can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` hook to create custom flows, see the [custom flow guides](https://clerk.com/docs/guides/development/custom-flows/overview).\n *\n * ```empty```\n */\nexport const useSignIn = (): UseSignInReturn => {\n useAssertWrappedByClerkProvider('useSignIn');\n\n const isomorphicClerk = useIsomorphicClerkContext();\n const client = useClientContext();\n\n isomorphicClerk.telemetry?.record(eventMethodCalled('useSignIn'));\n\n if (!client) {\n return { isLoaded: false, signIn: undefined, setActive: undefined };\n }\n\n return {\n isLoaded: true,\n signIn: client.signIn,\n setActive: isomorphicClerk.setActive,\n };\n};\n","import { useClientContext } from '@clerk/shared/react';\nimport { eventMethodCalled } from '@clerk/shared/telemetry';\nimport type { UseSignUpReturn } from '@clerk/shared/types';\n\nimport { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';\nimport { useAssertWrappedByClerkProvider } from './useAssertWrappedByClerkProvider';\n\n/**\n * The `useSignUp()` hook provides access to the [`SignUp`](https://clerk.com/docs/reference/javascript/sign-up) object, which allows you to check the current state of a sign-up attempt and manage the sign-up flow. You can use this to create a [custom sign-up flow](!custom-flow).\n *\n * @unionReturnHeadings\n * [\"Initialization\", \"Loaded\"]\n *\n * @example\n * ### Check the current state of a sign-up\n *\n * The following example uses the `useSignUp()` hook to access the [`SignUp`](https://clerk.com/docs/reference/javascript/sign-up) object, which contains the current sign-up attempt status and methods to create a new sign-up attempt. The `isLoaded` property is used to handle the loading state.\n *\n * \n * \n *\n * ```tsx {{ filename: 'src/pages/SignUpPage.tsx' }}\n * import { useSignUp } from '@clerk/clerk-react'\n *\n * export default function SignUpPage() {\n * const { isLoaded, signUp } = useSignUp()\n *\n * if (!isLoaded) {\n * // Handle loading state\n * return null\n * }\n *\n * return
The current sign-up attempt status is {signUp?.status}.
\n * }\n * ```\n *\n * \n * \n *\n * {@include ../../docs/use-sign-up.md#nextjs-01}\n *\n * \n * \n *\n * @example\n * ### Create a custom sign-up flow with `useSignUp()`\n *\n * The `useSignUp()` hook can also be used to build fully custom sign-up flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-up flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignUp()` hook to create custom flows, see the [custom flow guides](https://clerk.com/docs/guides/development/custom-flows/overview).\n *\n * ```empty```\n */\nexport const useSignUp = (): UseSignUpReturn => {\n useAssertWrappedByClerkProvider('useSignUp');\n\n const isomorphicClerk = useIsomorphicClerkContext();\n const client = useClientContext();\n\n isomorphicClerk.telemetry?.record(eventMethodCalled('useSignUp'));\n\n if (!client) {\n return { isLoaded: false, signUp: undefined, setActive: undefined };\n }\n\n return {\n isLoaded: true,\n signUp: client.signUp,\n setActive: isomorphicClerk.setActive,\n };\n};\n","export { useAuth } from './useAuth';\nexport { useEmailLink } from './useEmailLink';\nexport { useSignIn } from './useSignIn';\nexport { useSignUp } from './useSignUp';\nexport {\n useClerk,\n useOrganization,\n useOrganizationCreationDefaults,\n useOrganizationList,\n useSessionList,\n useUser,\n useSession,\n useReverification,\n __experimental_useCheckout,\n __experimental_CheckoutProvider,\n __experimental_usePaymentElement,\n __experimental_PaymentElementProvider,\n __experimental_PaymentElement,\n} from '@clerk/shared/react';\nexport type { UseOrganizationCreationDefaultsParams, UseOrganizationCreationDefaultsReturn } from '@clerk/shared/react';\n","import type { SignInButtonProps, SignInProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\nexport const SignInButton = withClerk(\n ({ clerk, children, ...props }: WithClerkProp>) => {\n const {\n // @ts-expect-error - appearance is a valid prop for SignInProps & SignInButtonPropsModal\n appearance,\n signUpFallbackRedirectUrl,\n forceRedirectUrl,\n fallbackRedirectUrl,\n signUpForceRedirectUrl,\n mode,\n initialValues,\n withSignUp,\n oauthFlow,\n ...rest\n } = props;\n children = normalizeWithDefaultValue(children, 'Sign in');\n const child = assertSingleChild(children)('SignInButton');\n\n const clickHandler = () => {\n const opts: SignInProps = {\n forceRedirectUrl,\n fallbackRedirectUrl,\n signUpFallbackRedirectUrl,\n signUpForceRedirectUrl,\n initialValues,\n withSignUp,\n oauthFlow,\n };\n\n if (mode === 'modal') {\n return clerk.openSignIn({ ...opts, appearance });\n }\n return clerk.redirectToSignIn({\n ...opts,\n signInFallbackRedirectUrl: fallbackRedirectUrl,\n signInForceRedirectUrl: forceRedirectUrl,\n });\n };\n\n const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n if (child && typeof child === 'object' && 'props' in child) {\n await safeExecute(child.props.onClick)(e);\n }\n return clickHandler();\n };\n\n const childProps = { ...rest, onClick: wrappedChildClickHandler };\n return React.cloneElement(child as React.ReactElement, childProps);\n },\n { component: 'SignInButton', renderWhileLoading: true },\n);\n","import React from 'react';\n\nimport type { SignInWithMetamaskButtonProps, WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\nexport const SignInWithMetamaskButton = withClerk(\n ({ clerk, children, ...props }: WithClerkProp) => {\n const { redirectUrl, ...rest } = props;\n\n children = normalizeWithDefaultValue(children, 'Sign in with Metamask');\n const child = assertSingleChild(children)('SignInWithMetamaskButton');\n\n // TODO: Properly fix this code\n // eslint-disable-next-line @typescript-eslint/require-await\n const clickHandler = async () => {\n async function authenticate() {\n await clerk.authenticateWithMetamask({ redirectUrl: redirectUrl || undefined });\n }\n void authenticate();\n };\n\n const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n await safeExecute((child as any).props.onClick)(e);\n return clickHandler();\n };\n\n const childProps = { ...rest, onClick: wrappedChildClickHandler };\n return React.cloneElement(child as React.ReactElement, childProps);\n },\n { component: 'SignInWithMetamask', renderWhileLoading: true },\n);\n","import type { SignOutOptions } from '@clerk/shared/types';\nimport React from 'react';\n\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\nexport type SignOutButtonProps = {\n redirectUrl?: string;\n signOutOptions?: SignOutOptions;\n children?: React.ReactNode;\n};\n\nexport const SignOutButton = withClerk(\n ({ clerk, children, ...props }: React.PropsWithChildren>) => {\n const { redirectUrl = '/', signOutOptions, ...rest } = props;\n\n children = normalizeWithDefaultValue(children, 'Sign out');\n const child = assertSingleChild(children)('SignOutButton');\n\n const clickHandler = () => clerk.signOut({ redirectUrl, ...signOutOptions });\n const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n await safeExecute((child as any).props.onClick)(e);\n return clickHandler();\n };\n\n const childProps = { ...rest, onClick: wrappedChildClickHandler };\n return React.cloneElement(child as React.ReactElement, childProps);\n },\n { component: 'SignOutButton', renderWhileLoading: true },\n);\n","import type { SignUpButtonProps, SignUpProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\nexport const SignUpButton = withClerk(\n ({ clerk, children, ...props }: WithClerkProp>) => {\n const {\n // @ts-expect-error - appearance is a valid prop for SignUpProps & SignUpButtonPropsModal\n appearance,\n // @ts-expect-error - unsafeMetadata is a valid prop for SignUpProps & SignUpButtonPropsModal\n unsafeMetadata,\n fallbackRedirectUrl,\n forceRedirectUrl,\n signInFallbackRedirectUrl,\n signInForceRedirectUrl,\n mode,\n initialValues,\n oauthFlow,\n ...rest\n } = props;\n\n children = normalizeWithDefaultValue(children, 'Sign up');\n const child = assertSingleChild(children)('SignUpButton');\n\n const clickHandler = () => {\n const opts: SignUpProps = {\n fallbackRedirectUrl,\n forceRedirectUrl,\n signInFallbackRedirectUrl,\n signInForceRedirectUrl,\n initialValues,\n oauthFlow,\n };\n\n if (mode === 'modal') {\n return clerk.openSignUp({\n ...opts,\n appearance,\n unsafeMetadata,\n });\n }\n\n return clerk.redirectToSignUp({\n ...opts,\n signUpFallbackRedirectUrl: fallbackRedirectUrl,\n signUpForceRedirectUrl: forceRedirectUrl,\n });\n };\n\n const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n if (child && typeof child === 'object' && 'props' in child) {\n await safeExecute(child.props.onClick)(e);\n }\n return clickHandler();\n };\n\n const childProps = { ...rest, onClick: wrappedChildClickHandler };\n return React.cloneElement(child as React.ReactElement, childProps);\n },\n { component: 'SignUpButton', renderWhileLoading: true },\n);\n","import { isPublishableKey } from '@clerk/shared/keys';\nimport React from 'react';\n\nimport { errorThrower } from '../errors/errorThrower';\nimport { multipleClerkProvidersError } from '../errors/messages';\nimport type { ClerkProviderProps } from '../types';\nimport { withMaxAllowedInstancesGuard } from '../utils';\nimport { ClerkContextProvider } from './ClerkContextProvider';\n\nfunction ClerkProviderBase(props: ClerkProviderProps) {\n const { initialState, children, __internal_bypassMissingPublishableKey, ...restIsomorphicClerkOptions } = props;\n const { publishableKey = '', Clerk: userInitialisedClerk } = restIsomorphicClerkOptions;\n\n if (!userInitialisedClerk && !__internal_bypassMissingPublishableKey) {\n if (!publishableKey) {\n errorThrower.throwMissingPublishableKeyError();\n } else if (publishableKey && !isPublishableKey(publishableKey)) {\n errorThrower.throwInvalidPublishableKeyError({ key: publishableKey });\n }\n }\n\n return (\n \n {children}\n \n );\n}\n\nconst ClerkProvider = withMaxAllowedInstancesGuard(ClerkProviderBase, 'ClerkProvider', multipleClerkProvidersError);\n\nClerkProvider.displayName = 'ClerkProvider';\n\nexport { ClerkProvider };\n","import { deriveState } from '@clerk/shared/deriveState';\nimport {\n __experimental_CheckoutProvider as CheckoutProvider,\n ClientContext,\n OrganizationProvider,\n SessionContext,\n UserContext,\n} from '@clerk/shared/react';\nimport type { ClientResource, InitialState, Resources } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { IsomorphicClerk } from '../isomorphicClerk';\nimport type { IsomorphicClerkOptions } from '../types';\nimport { AuthContext } from './AuthContext';\nimport { IsomorphicClerkContext } from './IsomorphicClerkContext';\n\ntype ClerkContextProvider = {\n isomorphicClerkOptions: IsomorphicClerkOptions;\n initialState: InitialState | undefined;\n children: React.ReactNode;\n};\n\nexport type ClerkContextProviderState = Resources;\n\nexport function ClerkContextProvider(props: ClerkContextProvider) {\n const { isomorphicClerkOptions, initialState, children } = props;\n const { isomorphicClerk: clerk, clerkStatus } = useLoadedIsomorphicClerk(isomorphicClerkOptions);\n\n const [state, setState] = React.useState({\n client: clerk.client as ClientResource,\n session: clerk.session,\n user: clerk.user,\n organization: clerk.organization,\n });\n\n React.useEffect(() => {\n return clerk.addListener(e => setState({ ...e }));\n }, []);\n\n const derivedState = deriveState(clerk.loaded, state, initialState);\n const clerkCtx = React.useMemo(\n () => ({ value: clerk }),\n [\n // Only update the clerk reference on status change\n clerkStatus,\n ],\n );\n const clientCtx = React.useMemo(() => ({ value: state.client }), [state.client]);\n\n const {\n sessionId,\n sessionStatus,\n sessionClaims,\n session,\n userId,\n user,\n orgId,\n actor,\n organization,\n orgRole,\n orgSlug,\n orgPermissions,\n factorVerificationAge,\n } = derivedState;\n\n const authCtx = React.useMemo(() => {\n const value = {\n sessionId,\n sessionStatus,\n sessionClaims,\n userId,\n actor,\n orgId,\n orgRole,\n orgSlug,\n orgPermissions,\n factorVerificationAge,\n };\n return { value };\n }, [sessionId, sessionStatus, userId, actor, orgId, orgRole, orgSlug, factorVerificationAge, sessionClaims?.__raw]);\n\n const sessionCtx = React.useMemo(() => ({ value: session }), [sessionId, session]);\n const userCtx = React.useMemo(() => ({ value: user }), [userId, user]);\n const organizationCtx = React.useMemo(() => {\n const value = {\n organization: organization,\n };\n return { value };\n }, [orgId, organization]);\n\n return (\n // @ts-expect-error value passed is of type IsomorphicClerk where the context expects LoadedClerk\n \n \n \n \n \n \n \n {children}\n \n \n \n \n \n \n \n );\n}\n\nconst useLoadedIsomorphicClerk = (options: IsomorphicClerkOptions) => {\n const isomorphicClerkRef = React.useRef(IsomorphicClerk.getOrCreateInstance(options));\n const [clerkStatus, setClerkStatus] = React.useState(isomorphicClerkRef.current.status);\n\n React.useEffect(() => {\n void isomorphicClerkRef.current.__unstable__updateProps({ appearance: options.appearance });\n }, [options.appearance]);\n\n React.useEffect(() => {\n void isomorphicClerkRef.current.__unstable__updateProps({ options });\n }, [options.localization]);\n\n React.useEffect(() => {\n isomorphicClerkRef.current.on('status', setClerkStatus);\n return () => {\n if (isomorphicClerkRef.current) {\n isomorphicClerkRef.current.off('status', setClerkStatus);\n }\n IsomorphicClerk.clearInstance();\n };\n }, []);\n\n return { isomorphicClerk: isomorphicClerkRef.current, clerkStatus };\n};\n","import { inBrowser } from '@clerk/shared/browser';\nimport { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';\nimport { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript';\nimport type {\n __internal_AttemptToEnableEnvironmentSettingParams,\n __internal_AttemptToEnableEnvironmentSettingResult,\n __internal_CheckoutProps,\n __internal_EnableOrganizationsPromptProps,\n __internal_OAuthConsentProps,\n __internal_PlanDetailsProps,\n __internal_SubscriptionDetailsProps,\n __internal_UserVerificationModalProps,\n __internal_UserVerificationProps,\n APIKeysNamespace,\n APIKeysProps,\n AuthenticateWithBaseParams,\n AuthenticateWithCoinbaseWalletParams,\n AuthenticateWithGoogleOneTapParams,\n AuthenticateWithMetamaskParams,\n AuthenticateWithOKXWalletParams,\n AuthenticateWithSolanaParams,\n BillingNamespace,\n Clerk,\n ClerkAuthenticateWithWeb3Params,\n ClerkOptions,\n ClerkStatus,\n ClientResource,\n CreateOrganizationParams,\n CreateOrganizationProps,\n DomainOrProxyUrl,\n GoogleOneTapProps,\n HandleEmailLinkVerificationParams,\n HandleOAuthCallbackParams,\n JoinWaitlistParams,\n ListenerCallback,\n LoadedClerk,\n OrganizationListProps,\n OrganizationProfileProps,\n OrganizationResource,\n OrganizationSwitcherProps,\n PricingTableProps,\n RedirectOptions,\n SetActiveParams,\n SignInProps,\n SignInRedirectOptions,\n SignInResource,\n SignUpProps,\n SignUpRedirectOptions,\n SignUpResource,\n State,\n TaskChooseOrganizationProps,\n TaskResetPasswordProps,\n TaskSetupMFAProps,\n TasksRedirectOptions,\n UnsubscribeCallback,\n UserAvatarProps,\n UserButtonProps,\n UserProfileProps,\n WaitlistProps,\n WaitlistResource,\n Without,\n} from '@clerk/shared/types';\nimport { handleValueOrFn } from '@clerk/shared/utils';\n\nimport { errorThrower } from './errors/errorThrower';\nimport { unsupportedNonBrowserDomainOrProxyUrlFunction } from './errors/messages';\nimport { StateProxy } from './stateProxy';\nimport type {\n BrowserClerk,\n BrowserClerkConstructor,\n ClerkProp,\n HeadlessBrowserClerk,\n HeadlessBrowserClerkConstructor,\n IsomorphicClerkOptions,\n} from './types';\nimport { isConstructor } from './utils';\n\nif (typeof globalThis.__BUILD_DISABLE_RHC__ === 'undefined') {\n globalThis.__BUILD_DISABLE_RHC__ = false;\n}\n\nconst SDK_METADATA = {\n name: PACKAGE_NAME,\n version: PACKAGE_VERSION,\n environment: process.env.NODE_ENV,\n};\n\nexport interface Global {\n Clerk?: HeadlessBrowserClerk | BrowserClerk;\n}\n\ndeclare const global: Global;\n\ntype GenericFunction = (...args: TArgs[]) => unknown;\n\ntype MethodName = {\n [P in keyof T]: T[P] extends GenericFunction ? P : never;\n}[keyof T];\n\ntype MethodCallback = () => Promise | unknown;\n\ntype WithVoidReturn any> = (\n ...args: Parameters\n) => ReturnType extends Promise ? Promise : ReturnType | void;\ntype WithVoidReturnFunctions = {\n [K in keyof T]: T[K] extends (...args: any) => any ? WithVoidReturn : T[K];\n};\n\ntype IsomorphicLoadedClerk = Without<\n WithVoidReturnFunctions,\n | 'client'\n | '__internal_addNavigationListener'\n | '__internal_getCachedResources'\n | '__internal_reloadInitialResources'\n | 'billing'\n | 'apiKeys'\n | '__internal_setActiveInProgress'\n> & {\n client: ClientResource | undefined;\n billing: BillingNamespace | undefined;\n apiKeys: APIKeysNamespace | undefined;\n};\n\nexport class IsomorphicClerk implements IsomorphicLoadedClerk {\n private readonly mode: 'browser' | 'server';\n private readonly options: IsomorphicClerkOptions;\n private readonly Clerk: ClerkProp;\n private clerkjs: BrowserClerk | HeadlessBrowserClerk | null = null;\n private preopenOneTap?: null | GoogleOneTapProps = null;\n private preopenUserVerification?: null | __internal_UserVerificationProps = null;\n private preopenEnableOrganizationsPrompt?: null | __internal_EnableOrganizationsPromptProps = null;\n private preopenSignIn?: null | SignInProps = null;\n private preopenCheckout?: null | __internal_CheckoutProps = null;\n private preopenPlanDetails: null | __internal_PlanDetailsProps = null;\n private preopenSubscriptionDetails: null | __internal_SubscriptionDetailsProps = null;\n private preopenSignUp?: null | SignUpProps = null;\n private preopenUserProfile?: null | UserProfileProps = null;\n private preopenOrganizationProfile?: null | OrganizationProfileProps = null;\n private preopenCreateOrganization?: null | CreateOrganizationProps = null;\n private preOpenWaitlist?: null | WaitlistProps = null;\n private premountSignInNodes = new Map();\n private premountSignUpNodes = new Map();\n private premountUserAvatarNodes = new Map();\n private premountUserProfileNodes = new Map();\n private premountUserButtonNodes = new Map();\n private premountOrganizationProfileNodes = new Map();\n private premountCreateOrganizationNodes = new Map();\n private premountOrganizationSwitcherNodes = new Map();\n private premountOrganizationListNodes = new Map();\n private premountMethodCalls = new Map, MethodCallback>();\n private premountWaitlistNodes = new Map();\n private premountPricingTableNodes = new Map();\n private premountAPIKeysNodes = new Map();\n private premountOAuthConsentNodes = new Map();\n private premountTaskChooseOrganizationNodes = new Map();\n private premountTaskResetPasswordNodes = new Map();\n private premountTaskSetupMFANodes = new Map();\n // A separate Map of `addListener` method calls to handle multiple listeners.\n private premountAddListenerCalls = new Map<\n ListenerCallback,\n {\n unsubscribe: UnsubscribeCallback;\n nativeUnsubscribe?: UnsubscribeCallback;\n }\n >();\n private loadedListeners: Array<() => void> = [];\n\n #status: ClerkStatus = 'loading';\n #domain: DomainOrProxyUrl['domain'];\n #proxyUrl: DomainOrProxyUrl['proxyUrl'];\n #publishableKey: string;\n #eventBus = createClerkEventBus();\n #stateProxy: StateProxy;\n\n get publishableKey(): string {\n return this.#publishableKey;\n }\n\n get loaded(): boolean {\n return this.clerkjs?.loaded || false;\n }\n\n get status(): ClerkStatus {\n /**\n * If clerk-js is not available the returned value can either be \"loading\" or \"error\".\n */\n if (!this.clerkjs) {\n return this.#status;\n }\n return (\n this.clerkjs?.status ||\n /**\n * Support older clerk-js versions.\n * If clerk-js is available but `.status` is missing it we need to fallback to `.loaded`.\n * Since \"degraded\" an \"error\" did not exist before,\n * map \"loaded\" to \"ready\" and \"not loaded\" to \"loading\".\n */\n (this.clerkjs.loaded ? 'ready' : 'loading')\n );\n }\n\n static #instance: IsomorphicClerk | null | undefined;\n\n static getOrCreateInstance(options: IsomorphicClerkOptions) {\n // During SSR: a new instance should be created for every request\n // During CSR: use the cached instance for the whole lifetime of the app\n // Also will recreate the instance if the provided Clerk instance changes\n // This method should be idempotent in both scenarios\n if (\n !inBrowser() ||\n !this.#instance ||\n (options.Clerk && this.#instance.Clerk !== options.Clerk) ||\n // Allow hot swapping PKs on the client\n this.#instance.publishableKey !== options.publishableKey\n ) {\n this.#instance = new IsomorphicClerk(options);\n }\n return this.#instance;\n }\n\n static clearInstance() {\n this.#instance = null;\n }\n\n get domain(): string {\n // This getter can run in environments where window is not available.\n // In those cases we should expect and use domain as a string\n if (typeof window !== 'undefined' && window.location) {\n return handleValueOrFn(this.#domain, new URL(window.location.href), '');\n }\n if (typeof this.#domain === 'function') {\n return errorThrower.throw(unsupportedNonBrowserDomainOrProxyUrlFunction);\n }\n return this.#domain || '';\n }\n\n get proxyUrl(): string {\n // This getter can run in environments where window is not available.\n // In those cases we should expect and use proxy as a string\n if (typeof window !== 'undefined' && window.location) {\n return handleValueOrFn(this.#proxyUrl, new URL(window.location.href), '');\n }\n if (typeof this.#proxyUrl === 'function') {\n return errorThrower.throw(unsupportedNonBrowserDomainOrProxyUrlFunction);\n }\n return this.#proxyUrl || '';\n }\n\n /**\n * Accesses private options from the `Clerk` instance and defaults to\n * `IsomorphicClerk` options when in SSR context.\n * @internal\n */\n public __internal_getOption(key: K): ClerkOptions[K] | undefined {\n return this.clerkjs?.__internal_getOption ? this.clerkjs?.__internal_getOption(key) : this.options[key];\n }\n\n constructor(options: IsomorphicClerkOptions) {\n const { Clerk = null, publishableKey } = options || {};\n this.#publishableKey = publishableKey;\n this.#proxyUrl = options?.proxyUrl;\n this.#domain = options?.domain;\n this.options = options;\n this.Clerk = Clerk;\n this.mode = inBrowser() ? 'browser' : 'server';\n this.#stateProxy = new StateProxy(this);\n\n if (!this.options.sdkMetadata) {\n this.options.sdkMetadata = SDK_METADATA;\n }\n this.#eventBus.emit(clerkEvents.Status, 'loading');\n this.#eventBus.prioritizedOn(clerkEvents.Status, status => (this.#status = status));\n\n if (this.#publishableKey) {\n void this.loadClerkJS();\n }\n }\n\n get sdkMetadata() {\n return this.clerkjs?.sdkMetadata || this.options.sdkMetadata || undefined;\n }\n\n get instanceType() {\n return this.clerkjs?.instanceType;\n }\n\n get frontendApi() {\n return this.clerkjs?.frontendApi || '';\n }\n\n get isStandardBrowser() {\n return this.clerkjs?.isStandardBrowser || this.options.standardBrowser || false;\n }\n\n get __internal_queryClient() {\n // @ts-expect-error - __internal_queryClient is not typed\n return this.clerkjs?.__internal_queryClient;\n }\n\n get isSatellite() {\n // This getter can run in environments where window is not available.\n // In those cases we should expect and use domain as a string\n if (typeof window !== 'undefined' && window.location) {\n return handleValueOrFn(this.options.isSatellite, new URL(window.location.href), false);\n }\n if (typeof this.options.isSatellite === 'function') {\n return errorThrower.throw(unsupportedNonBrowserDomainOrProxyUrlFunction);\n }\n return false;\n }\n\n buildSignInUrl = (opts?: RedirectOptions): string | void => {\n const callback = () => this.clerkjs?.buildSignInUrl(opts) || '';\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('buildSignInUrl', callback);\n }\n };\n\n buildSignUpUrl = (opts?: RedirectOptions): string | void => {\n const callback = () => this.clerkjs?.buildSignUpUrl(opts) || '';\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('buildSignUpUrl', callback);\n }\n };\n\n buildAfterSignInUrl = (...args: Parameters): string | void => {\n const callback = () => this.clerkjs?.buildAfterSignInUrl(...args) || '';\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('buildAfterSignInUrl', callback);\n }\n };\n\n buildAfterSignUpUrl = (...args: Parameters): string | void => {\n const callback = () => this.clerkjs?.buildAfterSignUpUrl(...args) || '';\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('buildAfterSignUpUrl', callback);\n }\n };\n\n buildAfterSignOutUrl = (): string | void => {\n const callback = () => this.clerkjs?.buildAfterSignOutUrl() || '';\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('buildAfterSignOutUrl', callback);\n }\n };\n\n buildNewSubscriptionRedirectUrl = (): string | void => {\n const callback = () => this.clerkjs?.buildNewSubscriptionRedirectUrl() || '';\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('buildNewSubscriptionRedirectUrl', callback);\n }\n };\n\n buildAfterMultiSessionSingleSignOutUrl = (): string | void => {\n const callback = () => this.clerkjs?.buildAfterMultiSessionSingleSignOutUrl() || '';\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('buildAfterMultiSessionSingleSignOutUrl', callback);\n }\n };\n\n buildUserProfileUrl = (): string | void => {\n const callback = () => this.clerkjs?.buildUserProfileUrl() || '';\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('buildUserProfileUrl', callback);\n }\n };\n\n buildCreateOrganizationUrl = (): string | void => {\n const callback = () => this.clerkjs?.buildCreateOrganizationUrl() || '';\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('buildCreateOrganizationUrl', callback);\n }\n };\n\n buildOrganizationProfileUrl = (): string | void => {\n const callback = () => this.clerkjs?.buildOrganizationProfileUrl() || '';\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('buildOrganizationProfileUrl', callback);\n }\n };\n\n buildWaitlistUrl = (): string | void => {\n const callback = () => this.clerkjs?.buildWaitlistUrl() || '';\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('buildWaitlistUrl', callback);\n }\n };\n\n buildTasksUrl = (): string | void => {\n const callback = () => this.clerkjs?.buildTasksUrl() || '';\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('buildTasksUrl', callback);\n }\n };\n\n buildUrlWithAuth = (to: string): string | void => {\n const callback = () => this.clerkjs?.buildUrlWithAuth(to) || '';\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('buildUrlWithAuth', callback);\n }\n };\n\n handleUnauthenticated = async () => {\n const callback = () => this.clerkjs?.handleUnauthenticated();\n if (this.clerkjs && this.loaded) {\n void callback();\n } else {\n this.premountMethodCalls.set('handleUnauthenticated', callback);\n }\n };\n\n #waitForClerkJS(): Promise {\n return new Promise(resolve => {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.addOnLoaded(() => resolve(this.clerkjs!));\n });\n }\n\n async loadClerkJS(): Promise {\n if (this.mode !== 'browser' || this.loaded) {\n return;\n }\n\n // Store frontendAPI value on window as a fallback. This value can be used as a\n // fallback during ClerkJS hot loading in case ClerkJS fails to find the\n // \"data-clerk-frontend-api\" attribute on its script tag.\n\n // This can happen when the DOM is altered completely during client rehydration.\n // For example, in Remix with React 18 the document changes completely via `hydrateRoot(document)`.\n\n // For more information refer to:\n // - https://github.com/remix-run/remix/issues/2947\n // - https://github.com/facebook/react/issues/24430\n if (typeof window !== 'undefined') {\n window.__clerk_publishable_key = this.#publishableKey;\n window.__clerk_proxy_url = this.proxyUrl;\n window.__clerk_domain = this.domain;\n }\n\n try {\n if (this.Clerk) {\n // Set a fixed Clerk version\n let c: ClerkProp;\n\n if (isConstructor(this.Clerk)) {\n // Construct a new Clerk object if a constructor is passed\n c = new this.Clerk(this.#publishableKey, {\n proxyUrl: this.proxyUrl,\n domain: this.domain,\n } as any);\n\n this.beforeLoad(c);\n await c.load(this.options);\n } else {\n // Otherwise use the instantiated Clerk object\n c = this.Clerk;\n if (!c.loaded) {\n this.beforeLoad(c);\n await c.load(this.options);\n }\n }\n\n global.Clerk = c;\n } else if (!__BUILD_DISABLE_RHC__) {\n // Hot-load latest ClerkJS from Clerk CDN\n if (!global.Clerk) {\n await loadClerkJsScript({\n ...this.options,\n publishableKey: this.#publishableKey,\n proxyUrl: this.proxyUrl,\n domain: this.domain,\n nonce: this.options.nonce,\n });\n }\n\n if (!global.Clerk) {\n throw new Error('Failed to download latest ClerkJS. Contact support@clerk.com.');\n }\n\n this.beforeLoad(global.Clerk);\n await global.Clerk.load(this.options);\n }\n\n if (global.Clerk?.loaded) {\n return this.hydrateClerkJS(global.Clerk);\n }\n return;\n } catch (err) {\n const error = err as Error;\n this.#eventBus.emit(clerkEvents.Status, 'error');\n console.error(error.stack || error.message || error);\n return;\n }\n }\n\n public on: Clerk['on'] = (...args) => {\n // Support older clerk-js versions.\n if (this.clerkjs?.on) {\n return this.clerkjs.on(...args);\n } else {\n this.#eventBus.on(...args);\n }\n };\n\n public off: Clerk['off'] = (...args) => {\n // Support older clerk-js versions.\n if (this.clerkjs?.off) {\n return this.clerkjs.off(...args);\n } else {\n this.#eventBus.off(...args);\n }\n };\n\n /**\n * @deprecated Please use `addStatusListener`. This api will be removed in the next major.\n */\n public addOnLoaded = (cb: () => void) => {\n this.loadedListeners.push(cb);\n /**\n * When IsomorphicClerk is loaded execute the callback directly\n */\n if (this.loaded) {\n this.emitLoaded();\n }\n };\n\n /**\n * @deprecated Please use `__internal_setStatus`. This api will be removed in the next major.\n */\n public emitLoaded = () => {\n this.loadedListeners.forEach(cb => cb());\n this.loadedListeners = [];\n };\n\n private beforeLoad = (clerkjs: BrowserClerk | HeadlessBrowserClerk | undefined) => {\n if (!clerkjs) {\n throw new Error('Failed to hydrate latest Clerk JS');\n }\n };\n\n private hydrateClerkJS = (clerkjs: BrowserClerk | HeadlessBrowserClerk | undefined) => {\n if (!clerkjs) {\n throw new Error('Failed to hydrate latest Clerk JS');\n }\n\n this.clerkjs = clerkjs;\n\n this.premountMethodCalls.forEach(cb => cb());\n this.premountAddListenerCalls.forEach((listenerHandlers, listener) => {\n listenerHandlers.nativeUnsubscribe = clerkjs.addListener(listener);\n });\n\n this.#eventBus.internal.retrieveListeners('status')?.forEach(listener => {\n // Since clerkjs exists it will call `this.clerkjs.on('status', listener)`\n this.on('status', listener, { notify: true });\n });\n\n // @ts-expect-error - queryClientStatus is not typed\n this.#eventBus.internal.retrieveListeners('queryClientStatus')?.forEach(listener => {\n // Since clerkjs exists it will call `this.clerkjs.on('queryClientStatus', listener)`\n // @ts-expect-error - queryClientStatus is not typed\n this.on('queryClientStatus', listener, { notify: true });\n });\n\n if (this.preopenSignIn !== null) {\n clerkjs.openSignIn(this.preopenSignIn);\n }\n\n if (this.preopenCheckout !== null) {\n clerkjs.__internal_openCheckout(this.preopenCheckout);\n }\n\n if (this.preopenPlanDetails !== null) {\n clerkjs.__internal_openPlanDetails(this.preopenPlanDetails);\n }\n\n if (this.preopenSubscriptionDetails !== null) {\n clerkjs.__internal_openSubscriptionDetails(this.preopenSubscriptionDetails);\n }\n\n if (this.preopenSignUp !== null) {\n clerkjs.openSignUp(this.preopenSignUp);\n }\n\n if (this.preopenUserProfile !== null) {\n clerkjs.openUserProfile(this.preopenUserProfile);\n }\n\n if (this.preopenUserVerification !== null) {\n clerkjs.__internal_openReverification(this.preopenUserVerification);\n }\n\n if (this.preopenOneTap !== null) {\n clerkjs.openGoogleOneTap(this.preopenOneTap);\n }\n\n if (this.preopenOrganizationProfile !== null) {\n clerkjs.openOrganizationProfile(this.preopenOrganizationProfile);\n }\n\n if (this.preopenCreateOrganization !== null) {\n clerkjs.openCreateOrganization(this.preopenCreateOrganization);\n }\n\n if (this.preOpenWaitlist !== null) {\n clerkjs.openWaitlist(this.preOpenWaitlist);\n }\n\n if (this.preopenEnableOrganizationsPrompt) {\n clerkjs.__internal_openEnableOrganizationsPrompt(this.preopenEnableOrganizationsPrompt);\n }\n\n this.premountSignInNodes.forEach((props, node) => {\n clerkjs.mountSignIn(node, props);\n });\n\n this.premountSignUpNodes.forEach((props, node) => {\n clerkjs.mountSignUp(node, props);\n });\n\n this.premountUserProfileNodes.forEach((props, node) => {\n clerkjs.mountUserProfile(node, props);\n });\n\n this.premountUserAvatarNodes.forEach((props, node) => {\n clerkjs.mountUserAvatar(node, props);\n });\n\n this.premountUserButtonNodes.forEach((props, node) => {\n clerkjs.mountUserButton(node, props);\n });\n\n this.premountOrganizationListNodes.forEach((props, node) => {\n clerkjs.mountOrganizationList(node, props);\n });\n\n this.premountWaitlistNodes.forEach((props, node) => {\n clerkjs.mountWaitlist(node, props);\n });\n\n this.premountPricingTableNodes.forEach((props, node) => {\n clerkjs.mountPricingTable(node, props);\n });\n\n this.premountAPIKeysNodes.forEach((props, node) => {\n clerkjs.mountAPIKeys(node, props);\n });\n\n this.premountOAuthConsentNodes.forEach((props, node) => {\n clerkjs.__internal_mountOAuthConsent(node, props);\n });\n\n this.premountTaskChooseOrganizationNodes.forEach((props, node) => {\n clerkjs.mountTaskChooseOrganization(node, props);\n });\n\n this.premountTaskResetPasswordNodes.forEach((props, node) => {\n clerkjs.mountTaskResetPassword(node, props);\n });\n\n this.premountTaskSetupMFANodes.forEach((props, node) => {\n clerkjs.mountTaskSetupMFA(node, props);\n });\n\n /**\n * Only update status in case `clerk.status` is missing. In any other case, `clerk-js` should be the orchestrator.\n */\n if (typeof this.clerkjs.status === 'undefined') {\n this.#eventBus.emit(clerkEvents.Status, 'ready');\n }\n\n this.emitLoaded();\n return this.clerkjs;\n };\n\n get version() {\n return this.clerkjs?.version;\n }\n\n get client(): ClientResource | undefined {\n if (this.clerkjs) {\n return this.clerkjs.client;\n // TODO: add ssr condition\n } else {\n return undefined;\n }\n }\n\n get session() {\n if (this.clerkjs) {\n return this.clerkjs.session;\n } else {\n return undefined;\n }\n }\n\n get user() {\n if (this.clerkjs) {\n return this.clerkjs.user;\n } else {\n return undefined;\n }\n }\n\n get organization() {\n if (this.clerkjs) {\n return this.clerkjs.organization;\n } else {\n return undefined;\n }\n }\n\n get telemetry() {\n if (this.clerkjs) {\n return this.clerkjs.telemetry;\n } else {\n return undefined;\n }\n }\n\n get __unstable__environment(): any {\n if (this.clerkjs) {\n return (this.clerkjs as any).__unstable__environment;\n // TODO: add ssr condition\n } else {\n return undefined;\n }\n }\n\n get isSignedIn(): boolean {\n if (this.clerkjs) {\n return this.clerkjs.isSignedIn;\n } else {\n return false;\n }\n }\n\n get billing(): BillingNamespace | undefined {\n return this.clerkjs?.billing;\n }\n\n get __internal_state(): State {\n return this.loaded && this.clerkjs ? this.clerkjs.__internal_state : this.#stateProxy;\n }\n\n get apiKeys(): APIKeysNamespace | undefined {\n return this.clerkjs?.apiKeys;\n }\n\n __experimental_checkout = (...args: Parameters) => {\n return this.clerkjs?.__experimental_checkout(...args);\n };\n\n __unstable__setEnvironment(...args: any): void {\n if (this.clerkjs && '__unstable__setEnvironment' in this.clerkjs) {\n (this.clerkjs as any).__unstable__setEnvironment(args);\n } else {\n return undefined;\n }\n }\n\n // TODO @userland-errors:\n __unstable__updateProps = async (props: any): Promise => {\n const clerkjs = await this.#waitForClerkJS();\n // Handle case where accounts has clerk-react@4 installed, but clerk-js@3 is manually loaded\n if (clerkjs && '__unstable__updateProps' in clerkjs) {\n return (clerkjs as any).__unstable__updateProps(props);\n }\n };\n\n /**\n * `setActive` can be used to set the active session and/or organization.\n */\n setActive = (params: SetActiveParams): Promise => {\n if (this.clerkjs) {\n return this.clerkjs.setActive(params);\n } else {\n return Promise.reject();\n }\n };\n\n openSignIn = (props?: SignInProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.openSignIn(props);\n } else {\n this.preopenSignIn = props;\n }\n };\n\n closeSignIn = () => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.closeSignIn();\n } else {\n this.preopenSignIn = null;\n }\n };\n\n __internal_openCheckout = (props?: __internal_CheckoutProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.__internal_openCheckout(props);\n } else {\n this.preopenCheckout = props;\n }\n };\n\n __internal_closeCheckout = () => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.__internal_closeCheckout();\n } else {\n this.preopenCheckout = null;\n }\n };\n\n __internal_openPlanDetails = (props: __internal_PlanDetailsProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.__internal_openPlanDetails(props);\n } else {\n this.preopenPlanDetails = props;\n }\n };\n\n __internal_closePlanDetails = () => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.__internal_closePlanDetails();\n } else {\n this.preopenPlanDetails = null;\n }\n };\n\n __internal_openSubscriptionDetails = (props?: __internal_SubscriptionDetailsProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.__internal_openSubscriptionDetails(props);\n } else {\n this.preopenSubscriptionDetails = props ?? null;\n }\n };\n\n __internal_closeSubscriptionDetails = () => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.__internal_closeSubscriptionDetails();\n } else {\n this.preopenSubscriptionDetails = null;\n }\n };\n\n __internal_openReverification = (props?: __internal_UserVerificationModalProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.__internal_openReverification(props);\n } else {\n this.preopenUserVerification = props;\n }\n };\n\n __internal_closeReverification = () => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.__internal_closeReverification();\n } else {\n this.preopenUserVerification = null;\n }\n };\n\n __internal_openEnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.__internal_openEnableOrganizationsPrompt(props);\n } else {\n this.preopenEnableOrganizationsPrompt = props;\n }\n };\n\n __internal_closeEnableOrganizationsPrompt = () => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.__internal_closeEnableOrganizationsPrompt();\n } else {\n this.preopenEnableOrganizationsPrompt = null;\n }\n };\n\n openGoogleOneTap = (props?: GoogleOneTapProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.openGoogleOneTap(props);\n } else {\n this.preopenOneTap = props;\n }\n };\n\n closeGoogleOneTap = () => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.closeGoogleOneTap();\n } else {\n this.preopenOneTap = null;\n }\n };\n\n openUserProfile = (props?: UserProfileProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.openUserProfile(props);\n } else {\n this.preopenUserProfile = props;\n }\n };\n\n closeUserProfile = () => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.closeUserProfile();\n } else {\n this.preopenUserProfile = null;\n }\n };\n\n openOrganizationProfile = (props?: OrganizationProfileProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.openOrganizationProfile(props);\n } else {\n this.preopenOrganizationProfile = props;\n }\n };\n\n closeOrganizationProfile = () => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.closeOrganizationProfile();\n } else {\n this.preopenOrganizationProfile = null;\n }\n };\n\n openCreateOrganization = (props?: CreateOrganizationProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.openCreateOrganization(props);\n } else {\n this.preopenCreateOrganization = props;\n }\n };\n\n closeCreateOrganization = () => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.closeCreateOrganization();\n } else {\n this.preopenCreateOrganization = null;\n }\n };\n\n openWaitlist = (props?: WaitlistProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.openWaitlist(props);\n } else {\n this.preOpenWaitlist = props;\n }\n };\n\n closeWaitlist = () => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.closeWaitlist();\n } else {\n this.preOpenWaitlist = null;\n }\n };\n\n openSignUp = (props?: SignUpProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.openSignUp(props);\n } else {\n this.preopenSignUp = props;\n }\n };\n\n closeSignUp = () => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.closeSignUp();\n } else {\n this.preopenSignUp = null;\n }\n };\n\n mountSignIn = (node: HTMLDivElement, props?: SignInProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountSignIn(node, props);\n } else {\n this.premountSignInNodes.set(node, props);\n }\n };\n\n unmountSignIn = (node: HTMLDivElement) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountSignIn(node);\n } else {\n this.premountSignInNodes.delete(node);\n }\n };\n\n mountSignUp = (node: HTMLDivElement, props?: SignUpProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountSignUp(node, props);\n } else {\n this.premountSignUpNodes.set(node, props);\n }\n };\n\n unmountSignUp = (node: HTMLDivElement) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountSignUp(node);\n } else {\n this.premountSignUpNodes.delete(node);\n }\n };\n\n mountUserAvatar = (node: HTMLDivElement, props?: UserAvatarProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountUserAvatar(node, props);\n } else {\n this.premountUserAvatarNodes.set(node, props);\n }\n };\n\n unmountUserAvatar = (node: HTMLDivElement) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountUserAvatar(node);\n } else {\n this.premountUserAvatarNodes.delete(node);\n }\n };\n\n mountUserProfile = (node: HTMLDivElement, props?: UserProfileProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountUserProfile(node, props);\n } else {\n this.premountUserProfileNodes.set(node, props);\n }\n };\n\n unmountUserProfile = (node: HTMLDivElement) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountUserProfile(node);\n } else {\n this.premountUserProfileNodes.delete(node);\n }\n };\n\n mountOrganizationProfile = (node: HTMLDivElement, props?: OrganizationProfileProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountOrganizationProfile(node, props);\n } else {\n this.premountOrganizationProfileNodes.set(node, props);\n }\n };\n\n unmountOrganizationProfile = (node: HTMLDivElement) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountOrganizationProfile(node);\n } else {\n this.premountOrganizationProfileNodes.delete(node);\n }\n };\n\n mountCreateOrganization = (node: HTMLDivElement, props?: CreateOrganizationProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountCreateOrganization(node, props);\n } else {\n this.premountCreateOrganizationNodes.set(node, props);\n }\n };\n\n unmountCreateOrganization = (node: HTMLDivElement) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountCreateOrganization(node);\n } else {\n this.premountCreateOrganizationNodes.delete(node);\n }\n };\n\n mountOrganizationSwitcher = (node: HTMLDivElement, props?: OrganizationSwitcherProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountOrganizationSwitcher(node, props);\n } else {\n this.premountOrganizationSwitcherNodes.set(node, props);\n }\n };\n\n unmountOrganizationSwitcher = (node: HTMLDivElement) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountOrganizationSwitcher(node);\n } else {\n this.premountOrganizationSwitcherNodes.delete(node);\n }\n };\n\n __experimental_prefetchOrganizationSwitcher = () => {\n const callback = () => this.clerkjs?.__experimental_prefetchOrganizationSwitcher();\n if (this.clerkjs && this.loaded) {\n void callback();\n } else {\n this.premountMethodCalls.set('__experimental_prefetchOrganizationSwitcher', callback);\n }\n };\n\n mountOrganizationList = (node: HTMLDivElement, props?: OrganizationListProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountOrganizationList(node, props);\n } else {\n this.premountOrganizationListNodes.set(node, props);\n }\n };\n\n unmountOrganizationList = (node: HTMLDivElement) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountOrganizationList(node);\n } else {\n this.premountOrganizationListNodes.delete(node);\n }\n };\n\n mountUserButton = (node: HTMLDivElement, userButtonProps?: UserButtonProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountUserButton(node, userButtonProps);\n } else {\n this.premountUserButtonNodes.set(node, userButtonProps);\n }\n };\n\n unmountUserButton = (node: HTMLDivElement) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountUserButton(node);\n } else {\n this.premountUserButtonNodes.delete(node);\n }\n };\n\n mountWaitlist = (node: HTMLDivElement, props?: WaitlistProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountWaitlist(node, props);\n } else {\n this.premountWaitlistNodes.set(node, props);\n }\n };\n\n unmountWaitlist = (node: HTMLDivElement) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountWaitlist(node);\n } else {\n this.premountWaitlistNodes.delete(node);\n }\n };\n\n mountPricingTable = (node: HTMLDivElement, props?: PricingTableProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountPricingTable(node, props);\n } else {\n this.premountPricingTableNodes.set(node, props);\n }\n };\n\n unmountPricingTable = (node: HTMLDivElement) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountPricingTable(node);\n } else {\n this.premountPricingTableNodes.delete(node);\n }\n };\n\n mountAPIKeys = (node: HTMLDivElement, props?: APIKeysProps): void => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountAPIKeys(node, props);\n } else {\n this.premountAPIKeysNodes.set(node, props);\n }\n };\n\n unmountAPIKeys = (node: HTMLDivElement): void => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountAPIKeys(node);\n } else {\n this.premountAPIKeysNodes.delete(node);\n }\n };\n\n __internal_mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.__internal_mountOAuthConsent(node, props);\n } else {\n this.premountOAuthConsentNodes.set(node, props);\n }\n };\n\n __internal_unmountOAuthConsent = (node: HTMLDivElement) => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.__internal_unmountOAuthConsent(node);\n } else {\n this.premountOAuthConsentNodes.delete(node);\n }\n };\n\n mountTaskChooseOrganization = (node: HTMLDivElement, props?: TaskChooseOrganizationProps): void => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountTaskChooseOrganization(node, props);\n } else {\n this.premountTaskChooseOrganizationNodes.set(node, props);\n }\n };\n\n unmountTaskChooseOrganization = (node: HTMLDivElement): void => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountTaskChooseOrganization(node);\n } else {\n this.premountTaskChooseOrganizationNodes.delete(node);\n }\n };\n\n mountTaskResetPassword = (node: HTMLDivElement, props?: TaskResetPasswordProps): void => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountTaskResetPassword(node, props);\n } else {\n this.premountTaskResetPasswordNodes.set(node, props);\n }\n };\n\n unmountTaskResetPassword = (node: HTMLDivElement): void => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountTaskResetPassword(node);\n } else {\n this.premountTaskResetPasswordNodes.delete(node);\n }\n };\n\n mountTaskSetupMFA = (node: HTMLDivElement, props?: TaskSetupMFAProps): void => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.mountTaskSetupMFA(node, props);\n } else {\n this.premountTaskSetupMFANodes.set(node, props);\n }\n };\n\n unmountTaskSetupMFA = (node: HTMLDivElement): void => {\n if (this.clerkjs && this.loaded) {\n this.clerkjs.unmountTaskSetupMFA(node);\n } else {\n this.premountTaskSetupMFANodes.delete(node);\n }\n };\n\n addListener = (listener: ListenerCallback): UnsubscribeCallback => {\n if (this.clerkjs) {\n return this.clerkjs.addListener(listener);\n } else {\n const unsubscribe = () => {\n const listenerHandlers = this.premountAddListenerCalls.get(listener);\n if (listenerHandlers) {\n listenerHandlers.nativeUnsubscribe?.();\n this.premountAddListenerCalls.delete(listener);\n }\n };\n this.premountAddListenerCalls.set(listener, { unsubscribe, nativeUnsubscribe: undefined });\n return unsubscribe;\n }\n };\n\n navigate = (to: string) => {\n const callback = () => this.clerkjs?.navigate(to);\n if (this.clerkjs && this.loaded) {\n void callback();\n } else {\n this.premountMethodCalls.set('navigate', callback);\n }\n };\n\n redirectWithAuth = async (...args: Parameters) => {\n const callback = () => this.clerkjs?.redirectWithAuth(...args);\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('redirectWithAuth', callback);\n return;\n }\n };\n\n redirectToSignIn = async (opts?: SignInRedirectOptions) => {\n const callback = () => this.clerkjs?.redirectToSignIn(opts as any);\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('redirectToSignIn', callback);\n return;\n }\n };\n\n redirectToSignUp = async (opts?: SignUpRedirectOptions) => {\n const callback = () => this.clerkjs?.redirectToSignUp(opts as any);\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('redirectToSignUp', callback);\n return;\n }\n };\n\n redirectToUserProfile = async () => {\n const callback = () => this.clerkjs?.redirectToUserProfile();\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('redirectToUserProfile', callback);\n return;\n }\n };\n\n redirectToAfterSignUp = (): void => {\n const callback = () => this.clerkjs?.redirectToAfterSignUp();\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('redirectToAfterSignUp', callback);\n }\n };\n\n redirectToAfterSignIn = () => {\n const callback = () => this.clerkjs?.redirectToAfterSignIn();\n if (this.clerkjs && this.loaded) {\n callback();\n } else {\n this.premountMethodCalls.set('redirectToAfterSignIn', callback);\n }\n };\n\n redirectToAfterSignOut = () => {\n const callback = () => this.clerkjs?.redirectToAfterSignOut();\n if (this.clerkjs && this.loaded) {\n callback();\n } else {\n this.premountMethodCalls.set('redirectToAfterSignOut', callback);\n }\n };\n\n redirectToOrganizationProfile = async () => {\n const callback = () => this.clerkjs?.redirectToOrganizationProfile();\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('redirectToOrganizationProfile', callback);\n return;\n }\n };\n\n redirectToCreateOrganization = async () => {\n const callback = () => this.clerkjs?.redirectToCreateOrganization();\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('redirectToCreateOrganization', callback);\n return;\n }\n };\n\n redirectToWaitlist = async () => {\n const callback = () => this.clerkjs?.redirectToWaitlist();\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('redirectToWaitlist', callback);\n return;\n }\n };\n\n redirectToTasks = async (opts?: TasksRedirectOptions) => {\n const callback = () => this.clerkjs?.redirectToTasks(opts);\n if (this.clerkjs && this.loaded) {\n return callback();\n } else {\n this.premountMethodCalls.set('redirectToTasks', callback);\n return;\n }\n };\n\n handleRedirectCallback = async (params: HandleOAuthCallbackParams): Promise => {\n const callback = () => this.clerkjs?.handleRedirectCallback(params);\n if (this.clerkjs && this.loaded) {\n void callback()?.catch(() => {\n // This error is caused when the host app is using React18\n // and strictMode is enabled. This useEffects runs twice because\n // the clerk-react ui components mounts, unmounts and mounts again\n // so the clerk-js component loses its state because of the custom\n // unmount callback we're using.\n // This needs to be solved by tweaking the logic in uiComponents.tsx\n // or by making handleRedirectCallback idempotent\n });\n } else {\n this.premountMethodCalls.set('handleRedirectCallback', callback);\n }\n };\n\n handleGoogleOneTapCallback = async (\n signInOrUp: SignInResource | SignUpResource,\n params: HandleOAuthCallbackParams,\n ): Promise => {\n const callback = () => this.clerkjs?.handleGoogleOneTapCallback(signInOrUp, params);\n if (this.clerkjs && this.loaded) {\n void callback()?.catch(() => {\n // This error is caused when the host app is using React18\n // and strictMode is enabled. This useEffects runs twice because\n // the clerk-react ui components mounts, unmounts and mounts again\n // so the clerk-js component loses its state because of the custom\n // unmount callback we're using.\n // This needs to be solved by tweaking the logic in uiComponents.tsx\n // or by making handleRedirectCallback idempotent\n });\n } else {\n this.premountMethodCalls.set('handleGoogleOneTapCallback', callback);\n }\n };\n\n handleEmailLinkVerification = async (params: HandleEmailLinkVerificationParams) => {\n const callback = () => this.clerkjs?.handleEmailLinkVerification(params);\n if (this.clerkjs && this.loaded) {\n return callback() as Promise;\n } else {\n this.premountMethodCalls.set('handleEmailLinkVerification', callback);\n }\n };\n\n authenticateWithMetamask = async (params?: AuthenticateWithMetamaskParams) => {\n const callback = () => this.clerkjs?.authenticateWithMetamask(params);\n if (this.clerkjs && this.loaded) {\n return callback() as Promise;\n } else {\n this.premountMethodCalls.set('authenticateWithMetamask', callback);\n }\n };\n\n authenticateWithCoinbaseWallet = async (params?: AuthenticateWithCoinbaseWalletParams) => {\n const callback = () => this.clerkjs?.authenticateWithCoinbaseWallet(params);\n if (this.clerkjs && this.loaded) {\n return callback() as Promise;\n } else {\n this.premountMethodCalls.set('authenticateWithCoinbaseWallet', callback);\n }\n };\n\n authenticateWithBase = async (params?: AuthenticateWithBaseParams) => {\n const callback = () => this.clerkjs?.authenticateWithBase(params);\n if (this.clerkjs && this.loaded) {\n return callback() as Promise;\n } else {\n this.premountMethodCalls.set('authenticateWithBase', callback);\n }\n };\n\n authenticateWithOKXWallet = async (params?: AuthenticateWithOKXWalletParams) => {\n const callback = () => this.clerkjs?.authenticateWithOKXWallet(params);\n if (this.clerkjs && this.loaded) {\n return callback() as Promise;\n } else {\n this.premountMethodCalls.set('authenticateWithOKXWallet', callback);\n }\n };\n\n authenticateWithSolana = async (params: AuthenticateWithSolanaParams) => {\n const callback = () => this.clerkjs?.authenticateWithSolana(params);\n if (this.clerkjs && this.loaded) {\n return callback() as Promise;\n } else {\n this.premountMethodCalls.set('authenticateWithSolana', callback);\n }\n };\n\n authenticateWithWeb3 = async (params: ClerkAuthenticateWithWeb3Params) => {\n const callback = () => this.clerkjs?.authenticateWithWeb3(params);\n if (this.clerkjs && this.loaded) {\n return callback() as Promise;\n } else {\n this.premountMethodCalls.set('authenticateWithWeb3', callback);\n }\n };\n\n authenticateWithGoogleOneTap = async (params: AuthenticateWithGoogleOneTapParams) => {\n const clerkjs = await this.#waitForClerkJS();\n return clerkjs.authenticateWithGoogleOneTap(params);\n };\n\n __internal_loadStripeJs = async () => {\n const clerkjs = await this.#waitForClerkJS();\n return clerkjs.__internal_loadStripeJs();\n };\n\n createOrganization = async (params: CreateOrganizationParams): Promise => {\n const callback = () => this.clerkjs?.createOrganization(params);\n if (this.clerkjs && this.loaded) {\n return callback() as Promise;\n } else {\n this.premountMethodCalls.set('createOrganization', callback);\n }\n };\n\n getOrganization = async (organizationId: string): Promise => {\n const callback = () => this.clerkjs?.getOrganization(organizationId);\n if (this.clerkjs && this.loaded) {\n return callback() as Promise;\n } else {\n this.premountMethodCalls.set('getOrganization', callback);\n }\n };\n\n joinWaitlist = async (params: JoinWaitlistParams): Promise => {\n const callback = () => this.clerkjs?.joinWaitlist(params);\n if (this.clerkjs && this.loaded) {\n return callback() as Promise;\n } else {\n this.premountMethodCalls.set('joinWaitlist', callback);\n }\n };\n\n signOut = async (...args: Parameters) => {\n const callback = () => this.clerkjs?.signOut(...args);\n if (this.clerkjs && this.loaded) {\n return callback() as Promise;\n } else {\n this.premountMethodCalls.set('signOut', callback);\n }\n };\n\n __internal_attemptToEnableEnvironmentSetting = (\n options: __internal_AttemptToEnableEnvironmentSettingParams,\n ): __internal_AttemptToEnableEnvironmentSettingResult | void => {\n const callback = () => this.clerkjs?.__internal_attemptToEnableEnvironmentSetting(options);\n if (this.clerkjs && this.loaded) {\n return callback() as __internal_AttemptToEnableEnvironmentSettingResult;\n } else {\n this.premountMethodCalls.set('__internal_attemptToEnableEnvironmentSetting', callback);\n }\n };\n}\n","import { inBrowser } from '@clerk/shared/browser';\nimport type { SignInErrors, SignUpErrors, State } from '@clerk/shared/types';\n\nimport { errorThrower } from './errors/errorThrower';\nimport type { IsomorphicClerk } from './isomorphicClerk';\n\nconst defaultSignInErrors = (): SignInErrors => ({\n fields: {\n identifier: null,\n password: null,\n code: null,\n },\n raw: null,\n global: null,\n});\n\nconst defaultSignUpErrors = (): SignUpErrors => ({\n fields: {\n firstName: null,\n lastName: null,\n emailAddress: null,\n phoneNumber: null,\n password: null,\n username: null,\n code: null,\n captcha: null,\n legalAccepted: null,\n },\n raw: null,\n global: null,\n});\n\nexport class StateProxy implements State {\n constructor(private isomorphicClerk: IsomorphicClerk) {}\n\n private readonly signInSignalProxy = this.buildSignInProxy();\n private readonly signUpSignalProxy = this.buildSignUpProxy();\n\n signInSignal() {\n return this.signInSignalProxy;\n }\n signUpSignal() {\n return this.signUpSignalProxy;\n }\n\n private buildSignInProxy() {\n const gateProperty = this.gateProperty.bind(this);\n const target = () => this.client.signIn.__internal_future;\n\n return {\n errors: defaultSignInErrors(),\n fetchStatus: 'idle' as const,\n signIn: {\n status: 'needs_identifier' as const,\n availableStrategies: [],\n isTransferable: false,\n get id() {\n return gateProperty(target, 'id', undefined);\n },\n get supportedFirstFactors() {\n return gateProperty(target, 'supportedFirstFactors', []);\n },\n get supportedSecondFactors() {\n return gateProperty(target, 'supportedSecondFactors', []);\n },\n get secondFactorVerification() {\n return gateProperty(target, 'secondFactorVerification', {\n status: null,\n error: null,\n expireAt: null,\n externalVerificationRedirectURL: null,\n nonce: null,\n attempts: null,\n message: null,\n strategy: null,\n verifiedAtClient: null,\n verifiedFromTheSameClient: () => false,\n __internal_toSnapshot: () => {\n throw new Error('__internal_toSnapshot called before Clerk is loaded');\n },\n pathRoot: '',\n reload: () => {\n throw new Error('__internal_toSnapshot called before Clerk is loaded');\n },\n });\n },\n get identifier() {\n return gateProperty(target, 'identifier', null);\n },\n get createdSessionId() {\n return gateProperty(target, 'createdSessionId', null);\n },\n get userData() {\n return gateProperty(target, 'userData', {});\n },\n get firstFactorVerification() {\n return gateProperty(target, 'firstFactorVerification', {\n status: null,\n error: null,\n expireAt: null,\n externalVerificationRedirectURL: null,\n nonce: null,\n attempts: null,\n message: null,\n strategy: null,\n verifiedAtClient: null,\n verifiedFromTheSameClient: () => false,\n __internal_toSnapshot: () => {\n throw new Error('__internal_toSnapshot called before Clerk is loaded');\n },\n pathRoot: '',\n reload: () => {\n throw new Error('__internal_toSnapshot called before Clerk is loaded');\n },\n });\n },\n\n create: this.gateMethod(target, 'create'),\n password: this.gateMethod(target, 'password'),\n sso: this.gateMethod(target, 'sso'),\n finalize: this.gateMethod(target, 'finalize'),\n\n emailCode: this.wrapMethods(() => target().emailCode, ['sendCode', 'verifyCode'] as const),\n emailLink: this.wrapStruct(\n () => target().emailLink,\n ['sendLink', 'waitForVerification'] as const,\n ['verification'] as const,\n { verification: null },\n ),\n resetPasswordEmailCode: this.wrapMethods(() => target().resetPasswordEmailCode, [\n 'sendCode',\n 'verifyCode',\n 'submitPassword',\n ] as const),\n phoneCode: this.wrapMethods(() => target().phoneCode, ['sendCode', 'verifyCode'] as const),\n mfa: this.wrapMethods(() => target().mfa, [\n 'sendPhoneCode',\n 'verifyPhoneCode',\n 'verifyTOTP',\n 'verifyBackupCode',\n ] as const),\n ticket: this.gateMethod(target, 'ticket'),\n passkey: this.gateMethod(target, 'passkey'),\n web3: this.gateMethod(target, 'web3'),\n },\n };\n }\n\n private buildSignUpProxy() {\n const gateProperty = this.gateProperty.bind(this);\n const gateMethod = this.gateMethod.bind(this);\n const wrapMethods = this.wrapMethods.bind(this);\n const target = () => this.client.signUp.__internal_future;\n\n return {\n errors: defaultSignUpErrors(),\n fetchStatus: 'idle' as const,\n signUp: {\n get id() {\n return gateProperty(target, 'id', undefined);\n },\n get requiredFields() {\n return gateProperty(target, 'requiredFields', []);\n },\n get optionalFields() {\n return gateProperty(target, 'optionalFields', []);\n },\n get missingFields() {\n return gateProperty(target, 'missingFields', []);\n },\n get username() {\n return gateProperty(target, 'username', null);\n },\n get firstName() {\n return gateProperty(target, 'firstName', null);\n },\n get lastName() {\n return gateProperty(target, 'lastName', null);\n },\n get emailAddress() {\n return gateProperty(target, 'emailAddress', null);\n },\n get phoneNumber() {\n return gateProperty(target, 'phoneNumber', null);\n },\n get web3Wallet() {\n return gateProperty(target, 'web3Wallet', null);\n },\n get hasPassword() {\n return gateProperty(target, 'hasPassword', false);\n },\n get unsafeMetadata() {\n return gateProperty(target, 'unsafeMetadata', {});\n },\n get createdSessionId() {\n return gateProperty(target, 'createdSessionId', null);\n },\n get createdUserId() {\n return gateProperty(target, 'createdUserId', null);\n },\n get abandonAt() {\n return gateProperty(target, 'abandonAt', null);\n },\n get legalAcceptedAt() {\n return gateProperty(target, 'legalAcceptedAt', null);\n },\n get locale() {\n return gateProperty(target, 'locale', null);\n },\n get status() {\n return gateProperty(target, 'status', 'missing_requirements');\n },\n get unverifiedFields() {\n return gateProperty(target, 'unverifiedFields', []);\n },\n get isTransferable() {\n return gateProperty(target, 'isTransferable', false);\n },\n\n create: gateMethod(target, 'create'),\n update: gateMethod(target, 'update'),\n sso: gateMethod(target, 'sso'),\n password: gateMethod(target, 'password'),\n ticket: gateMethod(target, 'ticket'),\n web3: gateMethod(target, 'web3'),\n finalize: gateMethod(target, 'finalize'),\n\n verifications: wrapMethods(() => target().verifications, [\n 'sendEmailCode',\n 'verifyEmailCode',\n 'sendPhoneCode',\n 'verifyPhoneCode',\n ] as const),\n },\n };\n }\n\n __internal_effect(_: () => void): () => void {\n throw new Error('__internal_effect called before Clerk is loaded');\n }\n __internal_computed(_: (prev?: T) => T): () => T {\n throw new Error('__internal_computed called before Clerk is loaded');\n }\n\n private get client() {\n const c = this.isomorphicClerk.client;\n if (!c) {\n throw new Error('Clerk client not ready');\n }\n return c;\n }\n\n private gateProperty(getTarget: () => T, key: K, defaultValue: T[K]) {\n return (() => {\n if (!inBrowser() || !this.isomorphicClerk.loaded) {\n return defaultValue;\n }\n const t = getTarget();\n return t[key];\n })();\n }\n\n private gateMethod(getTarget: () => T, key: K) {\n type F = Extract unknown>;\n return (async (...args: Parameters): Promise> => {\n if (!inBrowser()) {\n return errorThrower.throw(`Attempted to call a method (${key}) that is not supported on the server.`);\n }\n if (!this.isomorphicClerk.loaded) {\n await new Promise(resolve => this.isomorphicClerk.addOnLoaded(resolve));\n }\n const t = getTarget();\n return (t[key] as (...args: Parameters) => ReturnType).apply(t, args);\n }) as F;\n }\n\n private wrapMethods(\n getTarget: () => T,\n keys: K,\n ): Pick {\n return Object.fromEntries(keys.map(k => [k, this.gateMethod(getTarget, k)])) as Pick;\n }\n\n private wrapStruct(\n getTarget: () => T,\n methods: M,\n getters: G,\n fallbacks: Pick,\n ): Pick & {\n [K in M[number]]: T[K] extends (...args: any[]) => any ? T[K] : never;\n } & {\n [K in G[number]]: T[K] extends (...args: any[]) => any ? never : T[K];\n } {\n const out: any = {};\n for (const m of methods) {\n out[m] = this.gateMethod(getTarget, m as any);\n }\n for (const g of getters) {\n Object.defineProperty(out, g, {\n get: () => this.gateProperty(getTarget, g as any, (fallbacks as any)[g]),\n enumerable: true,\n });\n }\n return out;\n }\n}\n"]}