UNPKG

@clerk/clerk-react

Version:

Clerk React library

1,423 lines (1,402 loc) • 77.1 kB
import { AuthContext, AuthenticateWithRedirectCallback, ClerkLoaded, ClerkLoading, IsomorphicClerkContext, Protect, RedirectToCreateOrganization, RedirectToOrganizationProfile, RedirectToSignIn, RedirectToSignUp, RedirectToUserProfile, SignedIn, SignedOut, customLinkWrongProps, customMenuItemsIgnoredComponent, customPageWrongProps, customPagesIgnoredComponent, errorThrower, multipleChildrenInButtonComponent, multipleClerkProvidersError, organizationProfileLinkRenderedError, organizationProfilePageRenderedError, setErrorThrowerOptions, unsupportedNonBrowserDomainOrProxyUrlFunction, useAuth, useClerk, useEmailLink, useOrganization, useOrganizationList, useReverification, useSession, useSessionList, useSignIn, useSignUp, useUser, userButtonIgnoredComponent, userButtonMenuActionRenderedError, userButtonMenuItemLinkWrongProps, userButtonMenuItemsActionWrongsProps, userButtonMenuItemsRenderedError, userButtonMenuLinkRenderedError, userProfileLinkRenderedError, userProfilePageRenderedError, withClerk } from "./chunk-XIGERTC5.mjs"; import { __privateAdd, __privateGet, __privateMethod, __privateSet } from "./chunk-OANWQR3B.mjs"; // src/polyfills.ts if (typeof window !== "undefined" && !window.global) { window.global = typeof global === "undefined" ? window : global; } // src/index.ts import { setClerkJsLoadingErrorPackageName } from "@clerk/shared/loadClerkJsScript"; // src/components/uiComponents.tsx import { logErrorInDevMode as logErrorInDevMode3 } from "@clerk/shared/utils"; import React8, { createContext, createElement, useContext } from "react"; // src/utils/childrenUtils.tsx import React from "react"; var assertSingleChild = (children) => (name) => { try { return React.Children.only(children); } catch { return errorThrower.throw(multipleChildrenInButtonComponent(name)); } }; var normalizeWithDefaultValue = (children, defaultText) => { if (!children) { children = defaultText; } if (typeof children === "string") { children = /* @__PURE__ */ React.createElement("button", null, children); } return children; }; var safeExecute = (cb) => (...args) => { if (cb && typeof cb === "function") { return cb(...args); } }; // src/utils/isConstructor.ts function isConstructor(f) { return typeof f === "function"; } // src/utils/useMaxAllowedInstancesGuard.tsx import React2 from "react"; var counts = /* @__PURE__ */ new Map(); function useMaxAllowedInstancesGuard(name, error, maxCount = 1) { React2.useEffect(() => { const count = counts.get(name) || 0; if (count == maxCount) { return errorThrower.throw(error); } counts.set(name, count + 1); return () => { counts.set(name, (counts.get(name) || 1) - 1); }; }, []); } function withMaxAllowedInstancesGuard(WrappedComponent, name, error) { const displayName = WrappedComponent.displayName || WrappedComponent.name || name || "Component"; const Hoc = (props) => { useMaxAllowedInstancesGuard(name, error); return /* @__PURE__ */ React2.createElement(WrappedComponent, { ...props }); }; Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`; return Hoc; } // src/utils/useCustomElementPortal.tsx import React3, { useState } from "react"; import { createPortal } from "react-dom"; var useCustomElementPortal = (elements) => { const initialState = Array(elements.length).fill(null); const [nodes, setNodes] = useState(initialState); return elements.map((el, index) => ({ id: el.id, mount: (node) => setNodes((prevState) => prevState.map((n, i) => i === index ? node : n)), unmount: () => setNodes((prevState) => prevState.map((n, i) => i === index ? null : n)), portal: () => /* @__PURE__ */ React3.createElement(React3.Fragment, null, nodes[index] ? createPortal(el.component, nodes[index]) : null) })); }; // src/utils/useCustomPages.tsx import { logErrorInDevMode } from "@clerk/shared/utils"; import React5 from "react"; // src/utils/componentValidation.ts import React4 from "react"; var isThatComponent = (v, component) => { return !!v && React4.isValidElement(v) && (v == null ? void 0 : v.type) === component; }; // src/utils/useCustomPages.tsx var useUserProfileCustomPages = (children, options) => { const reorderItemsLabels = ["account", "security"]; return useCustomPages( { children, reorderItemsLabels, LinkComponent: UserProfileLink, PageComponent: UserProfilePage, MenuItemsComponent: MenuItems, componentName: "UserProfile" }, options ); }; var useOrganizationProfileCustomPages = (children, options) => { const reorderItemsLabels = ["general", "members"]; return useCustomPages( { children, reorderItemsLabels, LinkComponent: OrganizationProfileLink, PageComponent: OrganizationProfilePage, componentName: "OrganizationProfile" }, options ); }; var useSanitizedChildren = (children) => { const sanitizedChildren = []; const excludedComponents = [ OrganizationProfileLink, OrganizationProfilePage, MenuItems, UserProfilePage, UserProfileLink ]; React5.Children.forEach(children, (child) => { if (!excludedComponents.some((component) => isThatComponent(child, component))) { sanitizedChildren.push(child); } }); return sanitizedChildren; }; var useCustomPages = (params, options) => { const { children, LinkComponent, PageComponent, MenuItemsComponent, reorderItemsLabels, componentName } = params; const { allowForAnyChildren = false } = options || {}; const validChildren = []; React5.Children.forEach(children, (child) => { if (!isThatComponent(child, PageComponent) && !isThatComponent(child, LinkComponent) && !isThatComponent(child, MenuItemsComponent)) { if (child && !allowForAnyChildren) { logErrorInDevMode(customPagesIgnoredComponent(componentName)); } return; } const { props } = child; const { children: children2, label, url, labelIcon } = props; if (isThatComponent(child, PageComponent)) { if (isReorderItem(props, reorderItemsLabels)) { validChildren.push({ label }); } else if (isCustomPage(props)) { validChildren.push({ label, labelIcon, children: children2, url }); } else { logErrorInDevMode(customPageWrongProps(componentName)); return; } } if (isThatComponent(child, LinkComponent)) { if (isExternalLink(props)) { validChildren.push({ label, labelIcon, url }); } else { logErrorInDevMode(customLinkWrongProps(componentName)); return; } } }); const customPageContents = []; const customPageLabelIcons = []; const customLinkLabelIcons = []; validChildren.forEach((cp, index) => { if (isCustomPage(cp)) { customPageContents.push({ component: cp.children, id: index }); customPageLabelIcons.push({ component: cp.labelIcon, id: index }); return; } if (isExternalLink(cp)) { customLinkLabelIcons.push({ component: cp.labelIcon, id: index }); } }); const customPageContentsPortals = useCustomElementPortal(customPageContents); const customPageLabelIconsPortals = useCustomElementPortal(customPageLabelIcons); const customLinkLabelIconsPortals = useCustomElementPortal(customLinkLabelIcons); const customPages = []; const customPagesPortals = []; validChildren.forEach((cp, index) => { if (isReorderItem(cp, reorderItemsLabels)) { customPages.push({ label: cp.label }); return; } if (isCustomPage(cp)) { const { portal: contentPortal, mount, unmount } = customPageContentsPortals.find((p) => p.id === index); const { portal: labelPortal, mount: mountIcon, unmount: unmountIcon } = customPageLabelIconsPortals.find((p) => p.id === index); customPages.push({ label: cp.label, url: cp.url, mount, unmount, mountIcon, unmountIcon }); customPagesPortals.push(contentPortal); customPagesPortals.push(labelPortal); return; } if (isExternalLink(cp)) { const { portal: labelPortal, mount: mountIcon, unmount: unmountIcon } = customLinkLabelIconsPortals.find((p) => p.id === index); customPages.push({ label: cp.label, url: cp.url, mountIcon, unmountIcon }); customPagesPortals.push(labelPortal); return; } }); return { customPages, customPagesPortals }; }; var isReorderItem = (childProps, validItems) => { const { children, label, url, labelIcon } = childProps; return !children && !url && !labelIcon && validItems.some((v) => v === label); }; var isCustomPage = (childProps) => { const { children, label, url, labelIcon } = childProps; return !!children && !!url && !!labelIcon && !!label; }; var isExternalLink = (childProps) => { const { children, label, url, labelIcon } = childProps; return !children && !!url && !!labelIcon && !!label; }; // src/utils/useCustomMenuItems.tsx import { logErrorInDevMode as logErrorInDevMode2 } from "@clerk/shared/utils"; import React6 from "react"; var useUserButtonCustomMenuItems = (children) => { const reorderItemsLabels = ["manageAccount", "signOut"]; return useCustomMenuItems({ children, reorderItemsLabels, MenuItemsComponent: MenuItems, MenuActionComponent: MenuAction, MenuLinkComponent: MenuLink, UserProfileLinkComponent: UserProfileLink, UserProfilePageComponent: UserProfilePage }); }; var useCustomMenuItems = ({ children, MenuItemsComponent, MenuActionComponent, MenuLinkComponent, UserProfileLinkComponent, UserProfilePageComponent, reorderItemsLabels }) => { const validChildren = []; const customMenuItems = []; const customMenuItemsPortals = []; React6.Children.forEach(children, (child) => { if (!isThatComponent(child, MenuItemsComponent) && !isThatComponent(child, UserProfileLinkComponent) && !isThatComponent(child, UserProfilePageComponent)) { if (child) { logErrorInDevMode2(userButtonIgnoredComponent); } return; } if (isThatComponent(child, UserProfileLinkComponent) || isThatComponent(child, UserProfilePageComponent)) { return; } const { props } = child; React6.Children.forEach(props.children, (child2) => { if (!isThatComponent(child2, MenuActionComponent) && !isThatComponent(child2, MenuLinkComponent)) { if (child2) { logErrorInDevMode2(customMenuItemsIgnoredComponent); } return; } const { props: props2 } = child2; const { label, labelIcon, href, onClick, open } = props2; if (isThatComponent(child2, MenuActionComponent)) { if (isReorderItem2(props2, reorderItemsLabels)) { validChildren.push({ label }); } else if (isCustomMenuItem(props2)) { const baseItem = { label, labelIcon }; if (onClick !== void 0) { validChildren.push({ ...baseItem, onClick }); } else if (open !== void 0) { validChildren.push({ ...baseItem, open: open.startsWith("/") ? open : `/${open}` }); } else { logErrorInDevMode2("Custom menu item must have either onClick or open property"); return; } } else { logErrorInDevMode2(userButtonMenuItemsActionWrongsProps); return; } } if (isThatComponent(child2, MenuLinkComponent)) { if (isExternalLink2(props2)) { validChildren.push({ label, labelIcon, href }); } else { logErrorInDevMode2(userButtonMenuItemLinkWrongProps); return; } } }); }); const customMenuItemLabelIcons = []; const customLinkLabelIcons = []; validChildren.forEach((mi, index) => { if (isCustomMenuItem(mi)) { customMenuItemLabelIcons.push({ component: mi.labelIcon, id: index }); } if (isExternalLink2(mi)) { customLinkLabelIcons.push({ component: mi.labelIcon, id: index }); } }); const customMenuItemLabelIconsPortals = useCustomElementPortal(customMenuItemLabelIcons); const customLinkLabelIconsPortals = useCustomElementPortal(customLinkLabelIcons); validChildren.forEach((mi, index) => { if (isReorderItem2(mi, reorderItemsLabels)) { customMenuItems.push({ label: mi.label }); } if (isCustomMenuItem(mi)) { const { portal: iconPortal, mount: mountIcon, unmount: unmountIcon } = customMenuItemLabelIconsPortals.find((p) => p.id === index); const menuItem = { label: mi.label, mountIcon, unmountIcon }; if ("onClick" in mi) { menuItem.onClick = mi.onClick; } else if ("open" in mi) { menuItem.open = mi.open; } customMenuItems.push(menuItem); customMenuItemsPortals.push(iconPortal); } if (isExternalLink2(mi)) { const { portal: iconPortal, mount: mountIcon, unmount: unmountIcon } = customLinkLabelIconsPortals.find((p) => p.id === index); customMenuItems.push({ label: mi.label, href: mi.href, mountIcon, unmountIcon }); customMenuItemsPortals.push(iconPortal); } }); return { customMenuItems, customMenuItemsPortals }; }; var isReorderItem2 = (childProps, validItems) => { const { children, label, onClick, labelIcon } = childProps; return !children && !onClick && !labelIcon && validItems.some((v) => v === label); }; var isCustomMenuItem = (childProps) => { const { label, labelIcon, onClick, open } = childProps; return !!labelIcon && !!label && (typeof onClick === "function" || typeof open === "string"); }; var isExternalLink2 = (childProps) => { const { label, href, labelIcon } = childProps; return !!href && !!labelIcon && !!label; }; // src/utils/useWaitForComponentMount.ts import { useEffect, useRef, useState as useState2 } from "react"; function waitForElementChildren(options) { const { root = document == null ? void 0 : document.body, selector, timeout = 0 } = options; return new Promise((resolve, reject) => { if (!root) { reject(new Error("No root element provided")); return; } let elementToWatch = root; if (selector) { elementToWatch = root == null ? void 0 : root.querySelector(selector); } const isElementAlreadyPresent = (elementToWatch == null ? void 0 : elementToWatch.childElementCount) && elementToWatch.childElementCount > 0; if (isElementAlreadyPresent) { resolve(); return; } const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type === "childList") { if (!elementToWatch && selector) { elementToWatch = root == null ? void 0 : root.querySelector(selector); } if ((elementToWatch == null ? void 0 : elementToWatch.childElementCount) && elementToWatch.childElementCount > 0) { observer.disconnect(); resolve(); return; } } } }); observer.observe(root, { childList: true, subtree: true }); if (timeout > 0) { setTimeout(() => { observer.disconnect(); reject(new Error(`Timeout waiting for element children`)); }, timeout); } }); } function useWaitForComponentMount(component) { const watcherRef = useRef(); const [status, setStatus] = useState2("rendering"); useEffect(() => { if (!component) { throw new Error("Clerk: no component name provided, unable to detect mount."); } if (typeof window !== "undefined" && !watcherRef.current) { watcherRef.current = waitForElementChildren({ selector: `[data-clerk-component="${component}"]` }).then(() => { setStatus("rendered"); }).catch(() => { setStatus("error"); }); } }, [component]); return status; } // src/components/ClerkHostRenderer.tsx import { without } from "@clerk/shared/object"; import { isDeeplyEqual } from "@clerk/shared/react"; import React7 from "react"; var isMountProps = (props) => { return "mount" in props; }; var isOpenProps = (props) => { return "open" in props; }; var stripMenuItemIconHandlers = (menuItems) => { return menuItems == null ? void 0 : menuItems.map(({ mountIcon, unmountIcon, ...rest }) => rest); }; var ClerkHostRenderer = class extends React7.PureComponent { constructor() { super(...arguments); this.rootRef = React7.createRef(); } componentDidUpdate(_prevProps) { var _a, _b, _c, _d; if (!isMountProps(_prevProps) || !isMountProps(this.props)) { return; } const prevProps = without(_prevProps.props, "customPages", "customMenuItems", "children"); const newProps = without(this.props.props, "customPages", "customMenuItems", "children"); const customPagesChanged = ((_a = prevProps.customPages) == null ? void 0 : _a.length) !== ((_b = newProps.customPages) == null ? void 0 : _b.length); const customMenuItemsChanged = ((_c = prevProps.customMenuItems) == null ? void 0 : _c.length) !== ((_d = newProps.customMenuItems) == null ? void 0 : _d.length); const prevMenuItemsWithoutHandlers = stripMenuItemIconHandlers(_prevProps.props.customMenuItems); const newMenuItemsWithoutHandlers = stripMenuItemIconHandlers(this.props.props.customMenuItems); if (!isDeeplyEqual(prevProps, newProps) || !isDeeplyEqual(prevMenuItemsWithoutHandlers, newMenuItemsWithoutHandlers) || customPagesChanged || customMenuItemsChanged) { if (this.rootRef.current) { this.props.updateProps({ node: this.rootRef.current, props: this.props.props }); } } } componentDidMount() { if (this.rootRef.current) { if (isMountProps(this.props)) { this.props.mount(this.rootRef.current, this.props.props); } if (isOpenProps(this.props)) { this.props.open(this.props.props); } } } componentWillUnmount() { if (this.rootRef.current) { if (isMountProps(this.props)) { this.props.unmount(this.rootRef.current); } if (isOpenProps(this.props)) { this.props.close(); } } } render() { const { hideRootHtmlElement = false } = this.props; const rootAttributes = { ref: this.rootRef, ...this.props.rootProps, ...this.props.component && { "data-clerk-component": this.props.component } }; return /* @__PURE__ */ React7.createElement(React7.Fragment, null, !hideRootHtmlElement && /* @__PURE__ */ React7.createElement("div", { ...rootAttributes }), this.props.children); } }; // src/components/uiComponents.tsx var CustomPortalsRenderer = (props) => { var _a, _b; return /* @__PURE__ */ React8.createElement(React8.Fragment, null, (_a = props == null ? void 0 : props.customPagesPortals) == null ? void 0 : _a.map((portal, index) => createElement(portal, { key: index })), (_b = props == null ? void 0 : props.customMenuItemsPortals) == null ? void 0 : _b.map((portal, index) => createElement(portal, { key: index }))); }; var SignIn = withClerk( ({ clerk, component, fallback, ...props }) => { const mountingStatus = useWaitForComponentMount(component); const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded; const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } }; return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement( ClerkHostRenderer, { component, mount: clerk.mountSignIn, unmount: clerk.unmountSignIn, updateProps: clerk.__unstable__updateProps, props, rootProps: rendererRootProps } )); }, { component: "SignIn", renderWhileLoading: true } ); var SignUp = withClerk( ({ clerk, component, fallback, ...props }) => { const mountingStatus = useWaitForComponentMount(component); const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded; const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } }; return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement( ClerkHostRenderer, { component, mount: clerk.mountSignUp, unmount: clerk.unmountSignUp, updateProps: clerk.__unstable__updateProps, props, rootProps: rendererRootProps } )); }, { component: "SignUp", renderWhileLoading: true } ); function UserProfilePage({ children }) { logErrorInDevMode3(userProfilePageRenderedError); return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children); } function UserProfileLink({ children }) { logErrorInDevMode3(userProfileLinkRenderedError); return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children); } var _UserProfile = withClerk( ({ clerk, component, fallback, ...props }) => { const mountingStatus = useWaitForComponentMount(component); const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded; const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } }; const { customPages, customPagesPortals } = useUserProfileCustomPages(props.children); return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, /* @__PURE__ */ React8.createElement( ClerkHostRenderer, { component, mount: clerk.mountUserProfile, unmount: clerk.unmountUserProfile, updateProps: clerk.__unstable__updateProps, props: { ...props, customPages }, rootProps: rendererRootProps }, /* @__PURE__ */ React8.createElement(CustomPortalsRenderer, { customPagesPortals }) )); }, { component: "UserProfile", renderWhileLoading: true } ); var UserProfile = Object.assign(_UserProfile, { Page: UserProfilePage, Link: UserProfileLink }); var UserButtonContext = createContext({ mount: () => { }, unmount: () => { }, updateProps: () => { } }); var _UserButton = withClerk( ({ clerk, component, fallback, ...props }) => { const mountingStatus = useWaitForComponentMount(component); const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded; const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } }; const { customPages, customPagesPortals } = useUserProfileCustomPages(props.children, { allowForAnyChildren: !!props.__experimental_asProvider }); const userProfileProps = Object.assign(props.userProfileProps || {}, { customPages }); const { customMenuItems, customMenuItemsPortals } = useUserButtonCustomMenuItems(props.children); const sanitizedChildren = useSanitizedChildren(props.children); const passableProps = { mount: clerk.mountUserButton, unmount: clerk.unmountUserButton, updateProps: clerk.__unstable__updateProps, props: { ...props, userProfileProps, customMenuItems } }; const portalProps = { customPagesPortals, customMenuItemsPortals }; return /* @__PURE__ */ React8.createElement(UserButtonContext.Provider, { value: passableProps }, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement( ClerkHostRenderer, { component, ...passableProps, hideRootHtmlElement: !!props.__experimental_asProvider, rootProps: rendererRootProps }, props.__experimental_asProvider ? sanitizedChildren : null, /* @__PURE__ */ React8.createElement(CustomPortalsRenderer, { ...portalProps }) )); }, { component: "UserButton", renderWhileLoading: true } ); function MenuItems({ children }) { logErrorInDevMode3(userButtonMenuItemsRenderedError); return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children); } function MenuAction({ children }) { logErrorInDevMode3(userButtonMenuActionRenderedError); return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children); } function MenuLink({ children }) { logErrorInDevMode3(userButtonMenuLinkRenderedError); return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children); } function UserButtonOutlet(outletProps) { const providerProps = useContext(UserButtonContext); const portalProps = { ...providerProps, props: { ...providerProps.props, ...outletProps } }; return /* @__PURE__ */ React8.createElement(ClerkHostRenderer, { ...portalProps }); } var UserButton = Object.assign(_UserButton, { UserProfilePage, UserProfileLink, MenuItems, Action: MenuAction, Link: MenuLink, __experimental_Outlet: UserButtonOutlet }); function OrganizationProfilePage({ children }) { logErrorInDevMode3(organizationProfilePageRenderedError); return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children); } function OrganizationProfileLink({ children }) { logErrorInDevMode3(organizationProfileLinkRenderedError); return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children); } var _OrganizationProfile = withClerk( ({ clerk, component, fallback, ...props }) => { const mountingStatus = useWaitForComponentMount(component); const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded; const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } }; const { customPages, customPagesPortals } = useOrganizationProfileCustomPages(props.children); return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement( ClerkHostRenderer, { component, mount: clerk.mountOrganizationProfile, unmount: clerk.unmountOrganizationProfile, updateProps: clerk.__unstable__updateProps, props: { ...props, customPages }, rootProps: rendererRootProps }, /* @__PURE__ */ React8.createElement(CustomPortalsRenderer, { customPagesPortals }) )); }, { component: "OrganizationProfile", renderWhileLoading: true } ); var OrganizationProfile = Object.assign(_OrganizationProfile, { Page: OrganizationProfilePage, Link: OrganizationProfileLink }); var CreateOrganization = withClerk( ({ clerk, component, fallback, ...props }) => { const mountingStatus = useWaitForComponentMount(component); const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded; const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } }; return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement( ClerkHostRenderer, { component, mount: clerk.mountCreateOrganization, unmount: clerk.unmountCreateOrganization, updateProps: clerk.__unstable__updateProps, props, rootProps: rendererRootProps } )); }, { component: "CreateOrganization", renderWhileLoading: true } ); var OrganizationSwitcherContext = createContext({ mount: () => { }, unmount: () => { }, updateProps: () => { } }); var _OrganizationSwitcher = withClerk( ({ clerk, component, fallback, ...props }) => { const mountingStatus = useWaitForComponentMount(component); const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded; const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } }; const { customPages, customPagesPortals } = useOrganizationProfileCustomPages(props.children, { allowForAnyChildren: !!props.__experimental_asProvider }); const organizationProfileProps = Object.assign(props.organizationProfileProps || {}, { customPages }); const sanitizedChildren = useSanitizedChildren(props.children); const passableProps = { mount: clerk.mountOrganizationSwitcher, unmount: clerk.unmountOrganizationSwitcher, updateProps: clerk.__unstable__updateProps, props: { ...props, organizationProfileProps }, rootProps: rendererRootProps, component }; clerk.__experimental_prefetchOrganizationSwitcher(); return /* @__PURE__ */ React8.createElement(OrganizationSwitcherContext.Provider, { value: passableProps }, /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement( ClerkHostRenderer, { ...passableProps, hideRootHtmlElement: !!props.__experimental_asProvider }, props.__experimental_asProvider ? sanitizedChildren : null, /* @__PURE__ */ React8.createElement(CustomPortalsRenderer, { customPagesPortals }) ))); }, { component: "OrganizationSwitcher", renderWhileLoading: true } ); function OrganizationSwitcherOutlet(outletProps) { const providerProps = useContext(OrganizationSwitcherContext); const portalProps = { ...providerProps, props: { ...providerProps.props, ...outletProps } }; return /* @__PURE__ */ React8.createElement(ClerkHostRenderer, { ...portalProps }); } var OrganizationSwitcher = Object.assign(_OrganizationSwitcher, { OrganizationProfilePage, OrganizationProfileLink, __experimental_Outlet: OrganizationSwitcherOutlet }); var OrganizationList = withClerk( ({ clerk, component, fallback, ...props }) => { const mountingStatus = useWaitForComponentMount(component); const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded; const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } }; return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement( ClerkHostRenderer, { component, mount: clerk.mountOrganizationList, unmount: clerk.unmountOrganizationList, updateProps: clerk.__unstable__updateProps, props, rootProps: rendererRootProps } )); }, { component: "OrganizationList", renderWhileLoading: true } ); var GoogleOneTap = withClerk( ({ clerk, component, fallback, ...props }) => { const mountingStatus = useWaitForComponentMount(component); const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded; const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } }; return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement( ClerkHostRenderer, { component, open: clerk.openGoogleOneTap, close: clerk.closeGoogleOneTap, updateProps: clerk.__unstable__updateProps, props, rootProps: rendererRootProps } )); }, { component: "GoogleOneTap", renderWhileLoading: true } ); var Waitlist = withClerk( ({ clerk, component, fallback, ...props }) => { const mountingStatus = useWaitForComponentMount(component); const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded; const rendererRootProps = { ...shouldShowFallback && fallback && { style: { display: "none" } } }; return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement( ClerkHostRenderer, { component, mount: clerk.mountWaitlist, unmount: clerk.unmountWaitlist, updateProps: clerk.__unstable__updateProps, props, rootProps: rendererRootProps } )); }, { component: "Waitlist", renderWhileLoading: true } ); // src/components/SignInButton.tsx import React9 from "react"; var SignInButton = withClerk( ({ clerk, children, ...props }) => { const { signUpFallbackRedirectUrl, forceRedirectUrl, fallbackRedirectUrl, signUpForceRedirectUrl, mode, initialValues, withSignUp, oauthFlow, ...rest } = props; children = normalizeWithDefaultValue(children, "Sign in"); const child = assertSingleChild(children)("SignInButton"); const clickHandler = () => { const opts = { forceRedirectUrl, fallbackRedirectUrl, signUpFallbackRedirectUrl, signUpForceRedirectUrl, initialValues, withSignUp, oauthFlow }; if (mode === "modal") { return clerk.openSignIn({ ...opts, appearance: props.appearance }); } return clerk.redirectToSignIn({ ...opts, signInFallbackRedirectUrl: fallbackRedirectUrl, signInForceRedirectUrl: forceRedirectUrl }); }; const wrappedChildClickHandler = async (e) => { if (child && typeof child === "object" && "props" in child) { await safeExecute(child.props.onClick)(e); } return clickHandler(); }; const childProps = { ...rest, onClick: wrappedChildClickHandler }; return React9.cloneElement(child, childProps); }, { component: "SignInButton", renderWhileLoading: true } ); // src/components/SignUpButton.tsx import React10 from "react"; var SignUpButton = withClerk( ({ clerk, children, ...props }) => { const { fallbackRedirectUrl, forceRedirectUrl, signInFallbackRedirectUrl, signInForceRedirectUrl, mode, unsafeMetadata, initialValues, oauthFlow, ...rest } = props; children = normalizeWithDefaultValue(children, "Sign up"); const child = assertSingleChild(children)("SignUpButton"); const clickHandler = () => { const opts = { fallbackRedirectUrl, forceRedirectUrl, signInFallbackRedirectUrl, signInForceRedirectUrl, unsafeMetadata, initialValues, oauthFlow }; if (mode === "modal") { return clerk.openSignUp({ ...opts, appearance: props.appearance }); } return clerk.redirectToSignUp({ ...opts, signUpFallbackRedirectUrl: fallbackRedirectUrl, signUpForceRedirectUrl: forceRedirectUrl }); }; const wrappedChildClickHandler = async (e) => { if (child && typeof child === "object" && "props" in child) { await safeExecute(child.props.onClick)(e); } return clickHandler(); }; const childProps = { ...rest, onClick: wrappedChildClickHandler }; return React10.cloneElement(child, childProps); }, { component: "SignUpButton", renderWhileLoading: true } ); // src/components/SignOutButton.tsx import React11 from "react"; var SignOutButton = withClerk( ({ clerk, children, ...props }) => { const { redirectUrl = "/", signOutOptions, ...rest } = props; children = normalizeWithDefaultValue(children, "Sign out"); const child = assertSingleChild(children)("SignOutButton"); const clickHandler = () => clerk.signOut({ redirectUrl, ...signOutOptions }); const wrappedChildClickHandler = async (e) => { await safeExecute(child.props.onClick)(e); return clickHandler(); }; const childProps = { ...rest, onClick: wrappedChildClickHandler }; return React11.cloneElement(child, childProps); }, { component: "SignOutButton", renderWhileLoading: true } ); // src/components/SignInWithMetamaskButton.tsx import React12 from "react"; var SignInWithMetamaskButton = withClerk( ({ clerk, children, ...props }) => { const { redirectUrl, ...rest } = props; children = normalizeWithDefaultValue(children, "Sign in with Metamask"); const child = assertSingleChild(children)("SignInWithMetamaskButton"); const clickHandler = async () => { async function authenticate() { await clerk.authenticateWithMetamask({ redirectUrl: redirectUrl || void 0 }); } void authenticate(); }; const wrappedChildClickHandler = async (e) => { await safeExecute(child.props.onClick)(e); return clickHandler(); }; const childProps = { ...rest, onClick: wrappedChildClickHandler }; return React12.cloneElement(child, childProps); }, { component: "SignInWithMetamask", renderWhileLoading: true } ); // src/contexts/ClerkProvider.tsx import { isPublishableKey } from "@clerk/shared/keys"; import React14 from "react"; // src/contexts/ClerkContextProvider.tsx import { deriveState } from "@clerk/shared/deriveState"; import { ClientContext, OrganizationProvider, SessionContext, UserContext } from "@clerk/shared/react"; import React13 from "react"; // src/isomorphicClerk.ts import { inBrowser } from "@clerk/shared/browser"; import { loadClerkJsScript } from "@clerk/shared/loadClerkJsScript"; import { handleValueOrFn } from "@clerk/shared/utils"; if (typeof globalThis.__BUILD_DISABLE_RHC__ === "undefined") { globalThis.__BUILD_DISABLE_RHC__ = false; } var SDK_METADATA = { name: "@clerk/clerk-react", version: "5.28.2", environment: process.env.NODE_ENV }; var _loaded, _domain, _proxyUrl, _publishableKey, _instance, _IsomorphicClerk_instances, waitForClerkJS_fn; var _IsomorphicClerk = class _IsomorphicClerk { constructor(options) { __privateAdd(this, _IsomorphicClerk_instances); this.clerkjs = null; this.preopenOneTap = null; this.preopenUserVerification = null; this.preopenSignIn = null; this.preopenCheckout = null; this.preopenSignUp = null; this.preopenUserProfile = null; this.preopenOrganizationProfile = null; this.preopenCreateOrganization = null; this.preOpenWaitlist = null; this.premountSignInNodes = /* @__PURE__ */ new Map(); this.premountSignUpNodes = /* @__PURE__ */ new Map(); this.premountUserProfileNodes = /* @__PURE__ */ new Map(); this.premountUserButtonNodes = /* @__PURE__ */ new Map(); this.premountOrganizationProfileNodes = /* @__PURE__ */ new Map(); this.premountCreateOrganizationNodes = /* @__PURE__ */ new Map(); this.premountOrganizationSwitcherNodes = /* @__PURE__ */ new Map(); this.premountOrganizationListNodes = /* @__PURE__ */ new Map(); this.premountMethodCalls = /* @__PURE__ */ new Map(); this.premountWaitlistNodes = /* @__PURE__ */ new Map(); this.premountPricingTableNodes = /* @__PURE__ */ new Map(); // A separate Map of `addListener` method calls to handle multiple listeners. this.premountAddListenerCalls = /* @__PURE__ */ new Map(); this.loadedListeners = []; __privateAdd(this, _loaded, false); __privateAdd(this, _domain); __privateAdd(this, _proxyUrl); __privateAdd(this, _publishableKey); this.buildSignInUrl = (opts) => { const callback = () => { var _a; return ((_a = this.clerkjs) == null ? void 0 : _a.buildSignInUrl(opts)) || ""; }; if (this.clerkjs && __privateGet(this, _loaded)) { return callback(); } else { this.premountMethodCalls.set("buildSignInUrl", callback); } }; this.buildSignUpUrl = (opts) => { const callback = () => { var _a; return ((_a = this.clerkjs) == null ? void 0 : _a.buildSignUpUrl(opts)) || ""; }; if (this.clerkjs && __privateGet(this, _loaded)) { return callback(); } else { this.premountMethodCalls.set("buildSignUpUrl", callback); } }; this.buildAfterSignInUrl = (...args) => { const callback = () => { var _a; return ((_a = this.clerkjs) == null ? void 0 : _a.buildAfterSignInUrl(...args)) || ""; }; if (this.clerkjs && __privateGet(this, _loaded)) { return callback(); } else { this.premountMethodCalls.set("buildAfterSignInUrl", callback); } }; this.buildAfterSignUpUrl = (...args) => { const callback = () => { var _a; return ((_a = this.clerkjs) == null ? void 0 : _a.buildAfterSignUpUrl(...args)) || ""; }; if (this.clerkjs && __privateGet(this, _loaded)) { return callback(); } else { this.premountMethodCalls.set("buildAfterSignUpUrl", callback); } }; this.buildAfterSignOutUrl = () => { const callback = () => { var _a; return ((_a = this.clerkjs) == null ? void 0 : _a.buildAfterSignOutUrl()) || ""; }; if (this.clerkjs && __privateGet(this, _loaded)) { return callback(); } else { this.premountMethodCalls.set("buildAfterSignOutUrl", callback); } }; this.buildAfterMultiSessionSingleSignOutUrl = () => { const callback = () => { var _a; return ((_a = this.clerkjs) == null ? void 0 : _a.buildAfterMultiSessionSingleSignOutUrl()) || ""; }; if (this.clerkjs && __privateGet(this, _loaded)) { return callback(); } else { this.premountMethodCalls.set("buildAfterMultiSessionSingleSignOutUrl", callback); } }; this.buildUserProfileUrl = () => { const callback = () => { var _a; return ((_a = this.clerkjs) == null ? void 0 : _a.buildUserProfileUrl()) || ""; }; if (this.clerkjs && __privateGet(this, _loaded)) { return callback(); } else { this.premountMethodCalls.set("buildUserProfileUrl", callback); } }; this.buildCreateOrganizationUrl = () => { const callback = () => { var _a; return ((_a = this.clerkjs) == null ? void 0 : _a.buildCreateOrganizationUrl()) || ""; }; if (this.clerkjs && __privateGet(this, _loaded)) { return callback(); } else { this.premountMethodCalls.set("buildCreateOrganizationUrl", callback); } }; this.buildOrganizationProfileUrl = () => { const callback = () => { var _a; return ((_a = this.clerkjs) == null ? void 0 : _a.buildOrganizationProfileUrl()) || ""; }; if (this.clerkjs && __privateGet(this, _loaded)) { return callback(); } else { this.premountMethodCalls.set("buildOrganizationProfileUrl", callback); } }; this.buildWaitlistUrl = () => { const callback = () => { var _a; return ((_a = this.clerkjs) == null ? void 0 : _a.buildWaitlistUrl()) || ""; }; if (this.clerkjs && __privateGet(this, _loaded)) { return callback(); } else { this.premountMethodCalls.set("buildWaitlistUrl", callback); } }; this.buildUrlWithAuth = (to) => { const callback = () => { var _a; return ((_a = this.clerkjs) == null ? void 0 : _a.buildUrlWithAuth(to)) || ""; }; if (this.clerkjs && __privateGet(this, _loaded)) { return callback(); } else { this.premountMethodCalls.set("buildUrlWithAuth", callback); } }; this.handleUnauthenticated = async () => { const callback = () => { var _a; return (_a = this.clerkjs) == null ? void 0 : _a.handleUnauthenticated(); }; if (this.clerkjs && __privateGet(this, _loaded)) { void callback(); } else { this.premountMethodCalls.set("handleUnauthenticated", callback); } }; this.addOnLoaded = (cb) => { this.loadedListeners.push(cb); if (this.loaded) { this.emitLoaded(); } }; this.emitLoaded = () => { this.loadedListeners.forEach((cb) => cb()); this.loadedListeners = []; }; this.hydrateClerkJS = (clerkjs) => { if (!clerkjs) { throw new Error("Failed to hydrate latest Clerk JS"); } this.clerkjs = clerkjs; this.premountMethodCalls.forEach((cb) => cb()); this.premountAddListenerCalls.forEach((listenerHandlers, listener) => { listenerHandlers.nativeUnsubscribe = clerkjs.addListener(listener); }); if (this.preopenSignIn !== null) { clerkjs.openSignIn(this.preopenSignIn); } if (this.preopenCheckout !== null) { clerkjs.__internal_openCheckout(this.preopenCheckout); } if (this.preopenSignUp !== null) { clerkjs.openSignUp(this.preopenSignUp); } if (this.preopenUserProfile !== null) { clerkjs.openUserProfile(this.preopenUserProfile); } if (this.preopenUserVerification !== null) { clerkjs.__internal_openReverification(this.preopenUserVerification); } if (this.preopenOneTap !== null) { clerkjs.openGoogleOneTap(this.preopenOneTap); } if (this.preopenOrganizationProfile !== null) { clerkjs.openOrganizationProfile(this.preopenOrganizationProfile); } if (this.preopenCreateOrganization !== null) { clerkjs.openCreateOrganization(this.preopenCreateOrganization); } if (this.preOpenWaitlist !== null) { clerkjs.openWaitlist(this.preOpenWaitlist); } this.premountSignInNodes.forEach((props, node) => { clerkjs.mountSignIn(node, props); }); this.premountSignUpNodes.forEach((props, node) => { clerkjs.mountSignUp(node, props); }); this.premountUserProfileNodes.forEach((props, node) => { clerkjs.mountUserProfile(node, props); }); this.premountUserButtonNodes.forEach((props, node) => { clerkjs.mountUserButton(node, props); }); this.premountOrganizationListNodes.forEach((props, node) => { clerkjs.mountOrganizationList(node, props); }); this.premountWaitlistNodes.forEach((props, node) => { clerkjs.mountWaitlist(node, props); }); this.premountPricingTableNodes.forEach((props, node) => { clerkjs.__experimental_mountPricingTable(node, props); }); __privateSet(this, _loaded, true); this.emitLoaded(); return this.clerkjs; }; this.__unstable__updateProps = async (props) => { const clerkjs = await __privateMethod(this, _IsomorphicClerk_instances, waitForClerkJS_fn).call(this); if (clerkjs && "__unstable__updateProps" in clerkjs) { return clerkjs.__unstable__updateProps(props); } }; this.__experimental_nextTask = async (params) => { if (this.clerkjs) { return this.clerkjs.__experimental_nextTask(params); } else { return Promise.reject(); } }; /** * `setActive` can be used to set the active session and/or organization. */ this.setActive = (params) => { if (this.clerkjs) { return this.clerkjs.setActive(params); } else { return Promise.reject(); } }; this.openSignIn = (props) => { if (this.clerkjs && __privateGet(this, _loaded)) { this.clerkjs.openSignIn(props); } else { this.preopenSignIn = props; } }; this.closeSignIn = () => { if (this.clerkjs && __privateGet(this, _loaded)) { this.clerkjs.closeSignIn(); } else { this.preopenSignIn = null; } }; this.__internal_openCheckout = (props) => { if (this.clerkjs && __privateGet(this, _loaded)) { this.clerkjs.__internal_openCheckout(props); } else { this.preopenCheckout = props; } }; this.__internal_closeCheckout = () => { if (this.clerkjs && __privateGet(this, _loaded)) { this.clerkjs.__internal_closeCheckout(); } else { this.preopenCheckout = null; } }; this.__internal_openReverification = (props) => { if (this.clerkjs && __privateGet(this, _loaded)) { this.clerkjs.__internal_openReverification(props); } else { this.preopenUserVerification = props; } }; this.__internal_closeReverification = () => { if (this.clerkjs && __privateGet(this, _loaded)) { this.clerkjs.__internal_closeReverification(); } else { this.preopenUserVerification = null; } }; this.openGoogleOneTap = (props) => { if (this.clerkjs && __privateGet(this, _loaded)) { this.clerkjs.openGoogleOneTap(props); } else { this.preopenOneTap = props; } }; this.closeGoogleOneTap = () => { if (this.clerkjs && __privateGet(this, _loaded)) { this.clerkjs.closeGoogleOneTap(); } else { this.preopenOneTap = null; } }; this.openUserProfile = (props) => { if (this.clerkjs && __privateGet(this, _loaded)) { this.clerkjs.openUserProfile(props); } else { this.preopenUserProfile = props; } }; this.closeUserProfile = () => { if (this.clerkjs && __privateGet(this, _loaded)) { this.clerkjs.closeUserProfile(); } else { this.preopenUserProfile = null; } }; this.openOrganizationProfile = (props) => { if (this.clerkjs && __privateGet(this, _loaded)) { this.clerkjs.openOrganizationProfile(props); } else { this.preopenOrganizationProfile = props; } }; this.closeOrganizationProfile = () => { if (this.clerkjs && __privateGet(this, _loaded)) { this.clerkjs.closeOrganizationProfile(); } else { this.preopenOrganizationProfile = null; } }; this.openCreateOrganization = (props) => { if (this.clerkjs && __privateGet(this, _loaded)) { this.clerkjs.openCreateOrganization(props); } else { this.preopenCreateOrganization = props; } }; this.closeCreateOrganiza