@clerk/clerk-react
Version:
Clerk React library
1,423 lines (1,402 loc) • 77.1 kB
JavaScript
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