clerk-solidjs
Version:
1,595 lines (1,578 loc) • 68.3 kB
JavaScript
'use strict';
var error = require('@clerk/shared/error');
var web = require('solid-js/web');
var solidJs = require('solid-js');
var context = require('@solid-primitives/context');
var keys = require('@clerk/shared/keys');
require('@clerk/shared/loadScript');
require('@clerk/shared/proxy');
require('@clerk/shared/url');
var shared = require('@clerk/shared');
var browser = require('@clerk/shared/browser');
var loadClerkJsScript = require('@clerk/shared/loadClerkJsScript');
var utils = require('@clerk/shared/utils');
var destructure = require('@solid-primitives/destructure');
var telemetry = require('@clerk/shared/telemetry');
var memo = require('@solid-primitives/memo');
var solidQuery = require('@tanstack/solid-query');
// src/polyfills.ts
if (typeof window !== "undefined" && !window.global) {
window.global = typeof global === "undefined" ? window : global;
}
var errorThrower = error.buildErrorThrower({ packageName: "clerk-solidjs" });
function setErrorThrowerOptions(options) {
errorThrower.setMessages(options).setPackageName(options);
}
function createContextProviderAndHook(name, factoryFn) {
const [ContextProvider, useContextUnsafe] = context.createContextProvider(factoryFn);
const useContext3 = () => {
const ctx = useContextUnsafe();
if (ctx === undefined) {
throw new Error(`${name} not found`);
}
return ctx;
};
return [ContextProvider, useContext3, useContextUnsafe];
}
// src/contexts/auth.tsx
var [AuthContextProvider, useAuthContext] = createContextProviderAndHook("AuthContext", (props) => {
return {
userId: props.userId,
sessionId: props.sessionId,
actor: props.actor,
orgId: props.orgId,
orgRole: props.orgRole,
orgSlug: props.orgSlug,
orgPermissions: props.orgPermissions
};
});
var ClerkInstanceContext = solidJs.createContext();
var ClerkInstanceContextProvider = (props) => {
return web.createComponent(ClerkInstanceContext.Provider, {
get value() {
return props.clerk;
},
get children() {
return props.children;
}
});
};
function useClerkInstanceContext() {
const ctx = solidJs.useContext(ClerkInstanceContext);
if (!ctx) {
throw new Error(`ClerkInstanceProvider can only be used within the <ClerkProvider /> component. Learn more: https://clerk.com/docs/components/clerk-provider`);
}
return ctx;
}
// src/contexts/isomorphic-clerk.tsx
var IsomorphicClerkContextProvider = ClerkInstanceContextProvider;
var useIsomorphicClerkContext = useClerkInstanceContext;
function useAssertWrappedByClerkProvider(displayNameOrFn) {
const ctx = solidJs.useContext(ClerkInstanceContext);
if (!ctx) {
if (typeof displayNameOrFn === "function") {
displayNameOrFn();
return;
}
throw new Error(`${displayNameOrFn} can only be used within the <ClerkProvider /> component. Learn more: https://clerk.com/docs/components/clerk-provider`);
}
}
// src/errors/messages.ts
var multipleClerkProvidersError = "You've added multiple <ClerkProvider> components in your SolidJS component tree. Wrap your components in a single <ClerkProvider>.";
var multipleChildrenInButtonComponent = (name) => `You've passed multiple children components to <${name}/>. You can only pass a single child component or text.`;
var unsupportedNonBrowserDomainOrProxyUrlFunction = "Unsupported usage of isSatellite, domain or proxyUrl. The usage of isSatellite, domain or proxyUrl as function is not supported in non-browser environments.";
var userProfilePageRenderedError = "<UserProfile.Page /> component needs to be a direct child of `<UserProfile />` or `<UserButton />`.";
var userProfileLinkRenderedError = "<UserProfile.Link /> component needs to be a direct child of `<UserProfile />` or `<UserButton />`.";
var organizationProfilePageRenderedError = "<OrganizationProfile.Page /> component needs to be a direct child of `<OrganizationProfile />` or `<OrganizationSwitcher />`.";
var organizationProfileLinkRenderedError = "<OrganizationProfile.Link /> component needs to be a direct child of `<OrganizationProfile />` or `<OrganizationSwitcher />`.";
var useAuthHasRequiresRoleOrPermission = 'Missing parameters. `has` from `useAuth` requires a permission or role key to be passed. Example usage: `has({permission: "org:posts:edit"`';
// src/hooks/utils.ts
var clerkLoaded = (isomorphicClerk) => {
return new Promise((resolve) => {
const clerk = isomorphicClerk();
if (clerk.loaded) {
resolve();
}
clerk.addOnLoaded(resolve);
});
};
var createGetToken = (isomorphicClerk) => {
return async (options) => {
const clerk = isomorphicClerk();
await clerkLoaded(isomorphicClerk);
if (!clerk.session) {
return null;
}
return clerk.session.getToken(options);
};
};
var createSignOut = (isomorphicClerk) => {
return async (...args) => {
await clerkLoaded(isomorphicClerk);
return isomorphicClerk().signOut(...args);
};
};
// src/hooks/use-auth.ts
exports.useAuth = () => {
useAssertWrappedByClerkProvider("useAuth");
const { sessionId, userId, actor, orgId, orgRole, orgPermissions } = useAuthContext();
const isomorphicClerk = useIsomorphicClerkContext();
const getToken = createGetToken(isomorphicClerk);
const signOut = createSignOut(isomorphicClerk);
const has = (params) => {
if (!params?.permission && !params?.role) {
errorThrower.throw(useAuthHasRequiresRoleOrPermission);
}
if (!orgId() || !userId() || !orgRole() || !orgPermissions()) {
return false;
}
if (params.permission) {
return orgPermissions().includes(params.permission);
}
if (params.role) {
return orgRole() === params.role;
}
return false;
};
const isLoaded = solidJs.createMemo(
() => sessionId() !== undefined && userId() !== undefined
);
const isSignedIn = solidJs.createMemo(() => {
if (!isLoaded()) {
return undefined;
}
return sessionId() !== null && userId() !== null;
});
return {
isLoaded,
isSignedIn,
sessionId,
userId,
actor,
orgId,
orgRole,
orgPermissions,
has,
signOut,
getToken
};
};
var withClerk = (Component, displayName) => {
displayName = displayName || Component.name || "Component";
return (props) => {
useAssertWrappedByClerkProvider(displayName || "withClerk");
const clerk = useIsomorphicClerkContext();
const isLoaded = () => clerk().loaded;
return web.createComponent(solidJs.Show, {
get when() {
return isLoaded();
},
get children() {
return web.createComponent(Component, web.mergeProps(props, {
clerk
}));
}
});
};
};
// src/components/control-components.tsx
exports.SignedIn = (props) => {
useAssertWrappedByClerkProvider("SignedIn");
const {
userId
} = useAuthContext();
return web.createComponent(solidJs.Show, {
get when() {
return userId();
},
get children() {
return props.children;
}
});
};
exports.SignedOut = (props) => {
useAssertWrappedByClerkProvider("SignedOut");
const {
userId
} = useAuthContext();
return web.createComponent(solidJs.Show, {
get when() {
return userId() === null;
},
get children() {
return props.children;
}
});
};
exports.ClerkLoaded = (props) => {
useAssertWrappedByClerkProvider("ClerkLoaded");
const isomorphicClerk = useIsomorphicClerkContext();
const isLoaded = () => isomorphicClerk().loaded;
return web.createComponent(solidJs.Show, {
get when() {
return isLoaded();
},
get children() {
return props.children;
}
});
};
exports.ClerkLoading = (props) => {
useAssertWrappedByClerkProvider("ClerkLoading");
const isomorphicClerk = useIsomorphicClerkContext();
const isLoaded = () => isomorphicClerk().loaded;
return web.createComponent(solidJs.Show, {
get when() {
return !isLoaded();
},
get children() {
return props.children;
}
});
};
exports.Protect = (props) => {
useAssertWrappedByClerkProvider("Protect");
const [local, restAuthorizedParams] = solidJs.splitProps(props, ["children", "fallback"]);
const {
isLoaded,
has,
userId
} = exports.useAuth();
const unauthorized = local.fallback ?? null;
const authorized = local.children;
return web.createComponent(solidJs.Switch, {
fallback: unauthorized,
get children() {
return [web.createComponent(solidJs.Match, {
get when() {
return !isLoaded();
},
children: unauthorized
}), web.createComponent(solidJs.Match, {
get when() {
return !userId();
},
children: unauthorized
}), web.createComponent(solidJs.Match, {
get when() {
return typeof restAuthorizedParams.condition === "function" && restAuthorizedParams.condition(has);
},
children: authorized
}), web.createComponent(solidJs.Match, {
get when() {
return (restAuthorizedParams.role || restAuthorizedParams.permission) && has(restAuthorizedParams);
},
children: authorized
})];
}
});
};
exports.RedirectToSignIn = withClerk((props) => {
const [local, redirectToSignInProps] = solidJs.splitProps(props, ["clerk"]);
const hasActiveSessions = solidJs.createMemo(() => local.clerk().client.activeSessions && local.clerk().client.activeSessions.length > 0);
solidJs.createEffect(() => {
if (local.clerk().session === null && hasActiveSessions()) {
void local.clerk().redirectToAfterSignOut();
} else {
void local.clerk().redirectToSignIn(redirectToSignInProps);
}
});
return null;
}, "RedirectToSignIn");
exports.RedirectToSignUp = withClerk((props) => {
const [local, redirectToSignUpProps] = solidJs.splitProps(props, ["clerk"]);
solidJs.createEffect(() => {
void local.clerk().redirectToSignUp(redirectToSignUpProps);
});
return null;
}, "RedirectToSignUp");
exports.RedirectToUserProfile = withClerk((props) => {
solidJs.createEffect(() => {
void props.clerk().redirectToUserProfile();
});
return null;
}, "RedirectToUserProfile");
exports.RedirectToOrganizationProfile = withClerk((props) => {
solidJs.createEffect(() => {
void props.clerk().redirectToOrganizationProfile();
});
return null;
}, "RedirectToOrganizationProfile");
exports.RedirectToCreateOrganization = withClerk((props) => {
solidJs.createEffect(() => {
void props.clerk().redirectToCreateOrganization();
});
return null;
}, "RedirectToCreateOrganization");
exports.AuthenticateWithRedirectCallback = withClerk((props) => {
const [local, handleRedirectCallbackParams] = solidJs.splitProps(props, ["clerk"]);
solidJs.createEffect(() => {
void local.clerk().handleRedirectCallback(handleRedirectCallbackParams);
});
return null;
}, "AuthenticateWithRedirectCallback");
// src/utils/children-utils.tsx
var assertSingleChild = (children2) => (name) => {
try {
if (Array.isArray(children2)) {
throw new Error();
} else if (children2 instanceof Node) {
if (children2.previousSibling || children2.nextSibling) {
throw new Error();
}
}
return children2;
} catch {
return errorThrower.throw(multipleChildrenInButtonComponent(name));
}
};
var normalizeWithDefaultValue = (children2, defaultText) => {
if (!children2) {
children2 = defaultText;
}
return children2;
};
// src/utils/is-constructor.ts
function isConstructor(f) {
return typeof f === "function";
}
keys.createDevOrStagingUrlCache();
var counts = /* @__PURE__ */ new Map();
function useMaxAllowedInstancesGuard(props) {
solidJs.createEffect(() => {
const count = counts.get(props().name) || 0;
if (count == (props().maxCount ?? 1)) {
return errorThrower.throw(props().error);
}
counts.set(props().name, count + 1);
solidJs.onCleanup(() => {
counts.set(props().name, (counts.get(props().name) || 1) - 1);
});
});
}
function withMaxAllowedInstancesGuard(WrappedComponent, name, error) {
const HOC = (props) => {
useMaxAllowedInstancesGuard(() => ({
name,
error
}));
return web.createComponent(WrappedComponent, props);
};
return HOC;
}
// src/components/sign-in-button.tsx
exports.SignInButton = withClerk((props) => {
const [local, clerkProps, rest] = solidJs.splitProps(props, ["children"], ["clerk", "signUpFallbackRedirectUrl", "signUpForceRedirectUrl", "forceRedirectUrl", "fallbackRedirectUrl", "mode", "onClick"]);
const children2 = solidJs.children(() => normalizeWithDefaultValue(local.children, "Sign in"));
const child = solidJs.createMemo(() => assertSingleChild(children2())("SignInButton"));
return web.ssrElement("button", rest, web.escape(child()), false);
}, "SignInButton");
exports.SignInWithMetamaskButton = withClerk((props) => {
const [local, clerkProps, rest] = solidJs.splitProps(props, ["children"], ["clerk", "redirectUrl", "onClick"]);
const children2 = solidJs.children(() => normalizeWithDefaultValue(local.children, "Sign in with Metamask"));
const child = solidJs.createMemo(() => assertSingleChild(children2())("SignInWithMetamaskButton"));
return web.ssrElement("button", rest, web.escape(child()), false);
}, "SignInWithMetamask");
exports.SignOutButton = withClerk((props) => {
const [local, clerk, rest] = solidJs.splitProps(props, ["children"], ["clerk", "redirectUrl", "sessionId", "onClick"]);
const children2 = solidJs.children(() => normalizeWithDefaultValue(local.children, "Sign out"));
const child = solidJs.createMemo(() => assertSingleChild(children2())("SignOutButton"));
return web.ssrElement("button", rest, web.escape(child()), false);
}, "SignOutButton");
exports.SignUpButton = withClerk((props) => {
const [local, clerkProps, rest] = solidJs.splitProps(props, ["children"], ["clerk", "mode", "fallbackRedirectUrl", "forceRedirectUrl", "onClick"]);
const children2 = solidJs.children(() => normalizeWithDefaultValue(local.children, "Sign up"));
const child = solidJs.createMemo(() => assertSingleChild(children2())("SignUpButton"));
return web.ssrElement("button", rest, web.escape(child()), false);
}, "SignUpButton");
var _tmpl$ = "<div></div>";
var isMountProps = (props) => {
return "mount" in props;
};
var isOpenProps = (props) => {
return "open" in props;
};
var Portal = (props) => {
const [portalRef, setPortalRef] = solidJs.createSignal();
const componentProps = () => props.props;
solidJs.createEffect(() => {
const ref = portalRef();
if (ref && isMountProps(props)) {
props.updateProps({
node: ref,
props: componentProps()
});
}
});
solidJs.onMount(() => {
const ref = portalRef();
if (ref) {
if (isMountProps(props)) {
props.mount(ref, componentProps());
} else if (isOpenProps(props)) {
props.open(componentProps());
}
}
});
solidJs.onCleanup(() => {
const ref = portalRef();
if (ref) {
if (isMountProps(props)) {
props.unmount(ref);
} else if (isOpenProps(props)) {
props.close();
}
}
});
return web.ssr(_tmpl$);
};
exports.SignIn = withClerk((props) => {
const [local, rest] = solidJs.splitProps(props, ["clerk"]);
return web.createComponent(Portal, {
get mount() {
return local.clerk().mountSignIn;
},
get unmount() {
return local.clerk().unmountSignIn;
},
get updateProps() {
return local.clerk().__unstable__updateProps;
},
props: rest
});
}, "SignIn");
exports.SignUp = withClerk((props) => {
const [local, rest] = solidJs.splitProps(props, ["clerk"]);
return web.createComponent(Portal, {
get mount() {
return local.clerk().mountSignUp;
},
get unmount() {
return local.clerk().unmountSignUp;
},
get updateProps() {
return local.clerk().__unstable__updateProps;
},
props: rest
});
}, "SignUp");
function UserProfilePage(props) {
shared.logErrorInDevMode(userProfilePageRenderedError);
return solidJs.children(() => props.children);
}
function UserProfileLink(props) {
shared.logErrorInDevMode(userProfileLinkRenderedError);
return solidJs.children(() => props.children);
}
var _UserProfile = withClerk((props) => {
const [local, rest] = solidJs.splitProps(props, ["clerk"]);
return web.createComponent(Portal, {
get mount() {
return local.clerk().mountUserProfile;
},
get unmount() {
return local.clerk().unmountUserProfile;
},
get updateProps() {
return local.clerk().__unstable__updateProps;
},
props: rest
});
}, "UserProfile");
exports.UserProfile = Object.assign(_UserProfile, {
Page: UserProfilePage,
Link: UserProfileLink
});
var _UserButton = withClerk((props) => {
const [local, rest] = solidJs.splitProps(props, ["clerk"]);
return web.createComponent(Portal, {
get mount() {
return local.clerk().mountUserButton;
},
get unmount() {
return local.clerk().unmountUserButton;
},
get updateProps() {
return local.clerk().__unstable__updateProps;
},
props: rest
});
}, "UserButton");
exports.UserButton = Object.assign(_UserButton, {
UserProfilePage,
UserProfileLink
});
function OrganizationProfilePage(props) {
shared.logErrorInDevMode(organizationProfilePageRenderedError);
return solidJs.children(() => props.children);
}
function OrganizationProfileLink(props) {
shared.logErrorInDevMode(organizationProfileLinkRenderedError);
return solidJs.children(() => props.children);
}
var _OrganizationProfile = withClerk((props) => {
const [local, rest] = solidJs.splitProps(props, ["clerk"]);
return web.createComponent(Portal, {
get mount() {
return local.clerk().mountOrganizationProfile;
},
get unmount() {
return local.clerk().unmountOrganizationProfile;
},
get updateProps() {
return local.clerk().__unstable__updateProps;
},
props: rest
});
}, "OrganizationProfile");
exports.OrganizationProfile = Object.assign(_OrganizationProfile, {
Page: OrganizationProfilePage,
Link: OrganizationProfileLink
});
exports.CreateOrganization = withClerk((props) => {
const [local, rest] = solidJs.splitProps(props, ["clerk"]);
return web.createComponent(Portal, {
get mount() {
return local.clerk().mountCreateOrganization;
},
get unmount() {
return local.clerk().unmountCreateOrganization;
},
get updateProps() {
return local.clerk().__unstable__updateProps;
},
props: rest
});
}, "CreateOrganization");
var _OrganizationSwitcher = withClerk((props) => {
const [local, rest] = solidJs.splitProps(props, ["clerk"]);
return web.createComponent(Portal, {
get mount() {
return local.clerk().mountOrganizationSwitcher;
},
get unmount() {
return local.clerk().unmountOrganizationSwitcher;
},
get updateProps() {
return local.clerk().__unstable__updateProps;
},
props: rest
});
}, "OrganizationSwitcher");
exports.OrganizationSwitcher = Object.assign(_OrganizationSwitcher, {
OrganizationProfilePage,
OrganizationProfileLink
});
exports.OrganizationList = withClerk((props) => {
const [local, rest] = solidJs.splitProps(props, ["clerk"]);
return web.createComponent(Portal, {
get mount() {
return local.clerk().mountOrganizationList;
},
get unmount() {
return local.clerk().unmountOrganizationList;
},
get updateProps() {
return local.clerk().__unstable__updateProps;
},
props: rest
});
}, "OrganizationList");
exports.GoogleOneTap = withClerk((props) => {
const [local, rest] = solidJs.splitProps(props, ["clerk"]);
return web.createComponent(Portal, {
get open() {
return local.clerk().openGoogleOneTap;
},
get close() {
return local.clerk().closeGoogleOneTap;
},
props: rest
});
}, "GoogleOneTap");
if (typeof __BUILD_DISABLE_RHC__ === "undefined") {
globalThis.__BUILD_DISABLE_RHC__ = false;
}
var SDK_METADATA = {
name: "clerk-solidjs",
version: "2.0.10",
environment: "production"
};
var IsomorphicClerk = class _IsomorphicClerk {
mode;
options;
Clerk;
clerkjs = null;
preopenOneTap = null;
preopenUserVerification = null;
preopenSignIn = null;
preopenSignUp = null;
preopenUserProfile = null;
preopenOrganizationProfile = null;
preopenCreateOrganization = null;
preOpenWaitlist = null;
premountSignInNodes = /* @__PURE__ */ new Map();
premountSignUpNodes = /* @__PURE__ */ new Map();
premountUserProfileNodes = /* @__PURE__ */ new Map();
premountUserButtonNodes = /* @__PURE__ */ new Map();
premountOrganizationProfileNodes = /* @__PURE__ */ new Map();
premountCreateOrganizationNodes = /* @__PURE__ */ new Map();
premountOrganizationSwitcherNodes = /* @__PURE__ */ new Map();
premountOrganizationListNodes = /* @__PURE__ */ new Map();
premountMethodCalls = /* @__PURE__ */ new Map();
premountWaitlistNodes = /* @__PURE__ */ new Map();
// A separate Map of `addListener` method calls to handle multiple listeners.
premountAddListenerCalls = /* @__PURE__ */ new Map();
loadedListeners = [];
#loaded = false;
#domain;
#proxyUrl;
#publishableKey;
get publishableKey() {
return this.#publishableKey;
}
get loaded() {
return this.#loaded;
}
static #instance;
static getOrCreateInstance(options) {
if (!browser.inBrowser() || !this.#instance || options.Clerk && this.#instance.Clerk !== options.Clerk || // Allow hot swapping PKs on the client
this.#instance.publishableKey !== options.publishableKey) {
this.#instance = new _IsomorphicClerk(options);
}
return this.#instance;
}
static clearInstance() {
this.#instance = null;
}
get domain() {
if (typeof window !== "undefined" && window.location) {
return utils.handleValueOrFn(this.#domain, new URL(window.location.href), "");
}
if (typeof this.#domain === "function") {
return errorThrower.throw(unsupportedNonBrowserDomainOrProxyUrlFunction);
}
return this.#domain || "";
}
get proxyUrl() {
if (typeof window !== "undefined" && window.location) {
return utils.handleValueOrFn(this.#proxyUrl, new URL(window.location.href), "");
}
if (typeof this.#proxyUrl === "function") {
return errorThrower.throw(unsupportedNonBrowserDomainOrProxyUrlFunction);
}
return this.#proxyUrl || "";
}
__internal_getOption(key) {
return this.clerkjs?.__internal_getOption(key);
}
constructor(options) {
const { Clerk = null, publishableKey } = options || {};
this.#publishableKey = publishableKey;
this.#proxyUrl = options?.proxyUrl;
this.#domain = options?.domain;
this.options = options;
this.Clerk = Clerk;
this.mode = browser.inBrowser() ? "browser" : "server";
if (!this.options.sdkMetadata) {
this.options.sdkMetadata = SDK_METADATA;
}
if (this.#publishableKey) {
void this.loadClerkJS();
}
}
get sdkMetadata() {
return this.clerkjs?.sdkMetadata || this.options.sdkMetadata || undefined;
}
get instanceType() {
return this.clerkjs?.instanceType;
}
get frontendApi() {
return this.clerkjs?.frontendApi || "";
}
get isStandardBrowser() {
return this.clerkjs?.isStandardBrowser || this.options.standardBrowser || false;
}
get isSatellite() {
if (typeof window !== "undefined" && window.location) {
return utils.handleValueOrFn(
this.options.isSatellite,
new URL(window.location.href),
false
);
}
if (typeof this.options.isSatellite === "function") {
return errorThrower.throw(unsupportedNonBrowserDomainOrProxyUrlFunction);
}
return false;
}
buildSignInUrl = (opts) => {
const callback = () => this.clerkjs?.buildSignInUrl(opts) || "";
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("buildSignInUrl", callback);
}
};
buildSignUpUrl = (opts) => {
const callback = () => this.clerkjs?.buildSignUpUrl(opts) || "";
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("buildSignUpUrl", callback);
}
};
buildAfterSignInUrl = () => {
const callback = () => this.clerkjs?.buildAfterSignInUrl() || "";
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("buildAfterSignInUrl", callback);
}
};
buildAfterSignUpUrl = () => {
const callback = () => this.clerkjs?.buildAfterSignUpUrl() || "";
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("buildAfterSignUpUrl", callback);
}
};
buildAfterSignOutUrl = () => {
const callback = () => this.clerkjs?.buildAfterSignOutUrl() || "";
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("buildAfterSignOutUrl", callback);
}
};
buildAfterMultiSessionSingleSignOutUrl = () => {
const callback = () => this.clerkjs?.buildAfterMultiSessionSingleSignOutUrl() || "";
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set(
"buildAfterMultiSessionSingleSignOutUrl",
callback
);
}
};
buildUserProfileUrl = () => {
const callback = () => this.clerkjs?.buildUserProfileUrl() || "";
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("buildUserProfileUrl", callback);
}
};
buildCreateOrganizationUrl = () => {
const callback = () => this.clerkjs?.buildCreateOrganizationUrl() || "";
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("buildCreateOrganizationUrl", callback);
}
};
buildOrganizationProfileUrl = () => {
const callback = () => this.clerkjs?.buildOrganizationProfileUrl() || "";
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("buildOrganizationProfileUrl", callback);
}
};
buildWaitlistUrl = () => {
const callback = () => this.clerkjs?.buildWaitlistUrl() || "";
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("buildWaitlistUrl", callback);
}
};
buildUrlWithAuth = (to) => {
const callback = () => this.clerkjs?.buildUrlWithAuth(to) || "";
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("buildUrlWithAuth", callback);
}
};
handleUnauthenticated = () => {
const callback = () => this.clerkjs?.handleUnauthenticated();
if (this.clerkjs && this.#loaded) {
void callback();
} else {
this.premountMethodCalls.set("handleUnauthenticated", callback);
}
};
#waitForClerkJS() {
return new Promise((resolve) => {
this.addOnLoaded(() => resolve(this.clerkjs));
});
}
async loadClerkJS() {
if (this.mode !== "browser" || this.#loaded) {
return;
}
if (typeof window !== "undefined") {
window.__clerk_publishable_key = this.#publishableKey;
window.__clerk_proxy_url = this.proxyUrl;
window.__clerk_domain = this.domain;
}
try {
if (this.Clerk) {
let c;
if (isConstructor(this.Clerk)) {
c = new this.Clerk(this.#publishableKey, {
proxyUrl: this.proxyUrl,
domain: this.domain
});
await c.load(this.options);
} else {
c = this.Clerk;
if (!c.loaded) {
await c.load(this.options);
}
}
globalThis.Clerk = c;
} else if (!__BUILD_DISABLE_RHC__) {
if (!globalThis.Clerk) {
await loadClerkJsScript.loadClerkJsScript({
...this.options,
publishableKey: this.#publishableKey,
proxyUrl: this.proxyUrl,
domain: this.domain,
nonce: this.options.nonce
});
}
if (!globalThis.Clerk) {
throw new Error(
"Failed to download latest ClerkJS. Contact support@clerk.com."
);
}
await globalThis.Clerk.load(this.options);
}
if (globalThis.Clerk?.loaded) {
return this.hydrateClerkJS(globalThis.Clerk);
}
return;
} catch (err) {
return;
}
}
addOnLoaded = (cb) => {
this.loadedListeners.push(cb);
if (this.loaded) {
this.emitLoaded();
}
};
emitLoaded = () => {
this.loadedListeners.forEach((cb) => cb());
this.loadedListeners = [];
};
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.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.#loaded = true;
this.emitLoaded();
return this.clerkjs;
};
get version() {
return this.clerkjs?.version;
}
get client() {
if (this.clerkjs) {
return this.clerkjs.client;
} else {
return undefined;
}
}
get session() {
if (this.clerkjs) {
return this.clerkjs.session;
} else {
return undefined;
}
}
get user() {
if (this.clerkjs) {
return this.clerkjs.user;
} else {
return undefined;
}
}
get organization() {
if (this.clerkjs) {
return this.clerkjs.organization;
} else {
return undefined;
}
}
get telemetry() {
if (this.clerkjs) {
return this.clerkjs.telemetry;
} else {
return undefined;
}
}
get __unstable__environment() {
if (this.clerkjs) {
return this.clerkjs.__unstable__environment;
} else {
return undefined;
}
}
__unstable__setEnvironment(...args) {
if (this.clerkjs && "__unstable__setEnvironment" in this.clerkjs) {
this.clerkjs.__unstable__setEnvironment(args);
} else {
return undefined;
}
}
__unstable__updateProps = async (props) => {
const clerkjs = await this.#waitForClerkJS();
if (clerkjs && "__unstable__updateProps" in clerkjs) {
return clerkjs.__unstable__updateProps(props);
}
};
/**
* `setActive` can be used to set the active session and/or organization.
*/
setActive = ({
session,
organization,
beforeEmit,
redirectUrl
}) => {
if (this.clerkjs) {
return this.clerkjs.setActive({
session,
organization,
beforeEmit,
redirectUrl
});
} else {
return Promise.reject();
}
};
openSignIn = (props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.openSignIn(props);
} else {
this.preopenSignIn = props;
}
};
closeSignIn = () => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.closeSignIn();
} else {
this.preopenSignIn = null;
}
};
__internal_openReverification = (props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.__internal_openReverification(props);
} else {
this.preopenUserVerification = props;
}
};
__internal_closeReverification = () => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.__internal_closeReverification();
} else {
this.preopenUserVerification = null;
}
};
openGoogleOneTap = (props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.openGoogleOneTap(props);
} else {
this.preopenOneTap = props;
}
};
closeGoogleOneTap = () => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.closeGoogleOneTap();
} else {
this.preopenOneTap = null;
}
};
openUserProfile = (props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.openUserProfile(props);
} else {
this.preopenUserProfile = props;
}
};
closeUserProfile = () => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.closeUserProfile();
} else {
this.preopenUserProfile = null;
}
};
openOrganizationProfile = (props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.openOrganizationProfile(props);
} else {
this.preopenOrganizationProfile = props;
}
};
closeOrganizationProfile = () => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.closeOrganizationProfile();
} else {
this.preopenOrganizationProfile = null;
}
};
openCreateOrganization = (props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.openCreateOrganization(props);
} else {
this.preopenCreateOrganization = props;
}
};
closeCreateOrganization = () => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.closeCreateOrganization();
} else {
this.preopenCreateOrganization = null;
}
};
openWaitlist = (props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.openWaitlist(props);
} else {
this.preOpenWaitlist = props;
}
};
closeWaitlist = () => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.closeWaitlist();
} else {
this.preOpenWaitlist = null;
}
};
openSignUp = (props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.openSignUp(props);
} else {
this.preopenSignUp = props;
}
};
closeSignUp = () => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.closeSignUp();
} else {
this.preopenSignUp = null;
}
};
mountSignIn = (node, props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.mountSignIn(node, props);
} else {
this.premountSignInNodes.set(node, props);
}
};
unmountSignIn = (node) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.unmountSignIn(node);
} else {
this.premountSignInNodes.delete(node);
}
};
mountSignUp = (node, props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.mountSignUp(node, props);
} else {
this.premountSignUpNodes.set(node, props);
}
};
unmountSignUp = (node) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.unmountSignUp(node);
} else {
this.premountSignUpNodes.delete(node);
}
};
mountUserProfile = (node, props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.mountUserProfile(node, props);
} else {
this.premountUserProfileNodes.set(node, props);
}
};
unmountUserProfile = (node) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.unmountUserProfile(node);
} else {
this.premountUserProfileNodes.delete(node);
}
};
mountOrganizationProfile = (node, props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.mountOrganizationProfile(node, props);
} else {
this.premountOrganizationProfileNodes.set(node, props);
}
};
unmountOrganizationProfile = (node) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.unmountOrganizationProfile(node);
} else {
this.premountOrganizationProfileNodes.delete(node);
}
};
mountCreateOrganization = (node, props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.mountCreateOrganization(node, props);
} else {
this.premountCreateOrganizationNodes.set(node, props);
}
};
unmountCreateOrganization = (node) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.unmountCreateOrganization(node);
} else {
this.premountCreateOrganizationNodes.delete(node);
}
};
mountOrganizationSwitcher = (node, props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.mountOrganizationSwitcher(node, props);
} else {
this.premountOrganizationSwitcherNodes.set(node, props);
}
};
unmountOrganizationSwitcher = (node) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.unmountOrganizationSwitcher(node);
} else {
this.premountOrganizationSwitcherNodes.delete(node);
}
};
__experimental_prefetchOrganizationSwitcher = () => {
const callback = () => this.clerkjs?.__experimental_prefetchOrganizationSwitcher();
if (this.clerkjs && this.#loaded) {
void callback();
} else {
this.premountMethodCalls.set(
"__experimental_prefetchOrganizationSwitcher",
callback
);
}
};
mountOrganizationList = (node, props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.mountOrganizationList(node, props);
} else {
this.premountOrganizationListNodes.set(node, props);
}
};
unmountOrganizationList = (node) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.unmountOrganizationList(node);
} else {
this.premountOrganizationListNodes.delete(node);
}
};
mountUserButton = (node, userButtonProps) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.mountUserButton(node, userButtonProps);
} else {
this.premountUserButtonNodes.set(node, userButtonProps);
}
};
unmountUserButton = (node) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.unmountUserButton(node);
} else {
this.premountUserButtonNodes.delete(node);
}
};
mountWaitlist = (node, props) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.mountWaitlist(node, props);
} else {
this.premountWaitlistNodes.set(node, props);
}
};
unmountWaitlist = (node) => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.unmountWaitlist(node);
} else {
this.premountWaitlistNodes.delete(node);
}
};
addListener = (listener) => {
if (this.clerkjs) {
return this.clerkjs.addListener(listener);
} else {
const unsubscribe = () => {
const listenerHandlers = this.premountAddListenerCalls.get(listener);
if (listenerHandlers) {
listenerHandlers.nativeUnsubscribe?.();
this.premountAddListenerCalls.delete(listener);
}
};
this.premountAddListenerCalls.set(listener, {
unsubscribe,
nativeUnsubscribe: undefined
});
return unsubscribe;
}
};
navigate = (to) => {
const callback = () => this.clerkjs?.navigate(to);
if (this.clerkjs && this.#loaded) {
void callback();
} else {
this.premountMethodCalls.set("navigate", callback);
}
};
redirectWithAuth = async (...args) => {
const callback = () => this.clerkjs?.redirectWithAuth(...args);
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("redirectWithAuth", callback);
return;
}
};
redirectToSignIn = async (opts) => {
const callback = () => this.clerkjs?.redirectToSignIn(opts);
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("redirectToSignIn", callback);
return;
}
};
redirectToSignUp = async (opts) => {
const callback = () => this.clerkjs?.redirectToSignUp(opts);
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("redirectToSignUp", callback);
return;
}
};
redirectToUserProfile = async () => {
const callback = () => this.clerkjs?.redirectToUserProfile();
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("redirectToUserProfile", callback);
return;
}
};
redirectToAfterSignUp = () => {
const callback = () => this.clerkjs?.redirectToAfterSignUp();
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("redirectToAfterSignUp", callback);
}
};
redirectToAfterSignIn = () => {
const callback = () => this.clerkjs?.redirectToAfterSignIn();
if (this.clerkjs && this.#loaded) {
callback();
} else {
this.premountMethodCalls.set("redirectToAfterSignIn", callback);
}
};
redirectToAfterSignOut = () => {
const callback = () => this.clerkjs?.redirectToAfterSignOut();
if (this.clerkjs && this.#loaded) {
callback();
} else {
this.premountMethodCalls.set("redirectToAfterSignOut", callback);
}
};
redirectToOrganizationProfile = async () => {
const callback = () => this.clerkjs?.redirectToOrganizationProfile();
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("redirectToOrganizationProfile", callback);
return;
}
};
redirectToCreateOrganization = async () => {
const callback = () => this.clerkjs?.redirectToCreateOrganization();
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("redirectToCreateOrganization", callback);
return;
}
};
redirectToWaitlist = async () => {
const callback = () => this.clerkjs?.redirectToWaitlist();
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("redirectToWaitlist", callback);
return;
}
};
handleRedirectCallback = (params) => {
const callback = () => this.clerkjs?.handleRedirectCallback(params);
if (this.clerkjs && this.#loaded) {
void callback()?.catch(() => {
});
} else {
this.premountMethodCalls.set("handleRedirectCallback", callback);
}
};
handleGoogleOneTapCallback = (signInOrUp, params) => {
const callback = () => this.clerkjs?.handleGoogleOneTapCallback(signInOrUp, params);
if (this.clerkjs && this.#loaded) {
void callback()?.catch(() => {
});
} else {
this.premountMethodCalls.set("handleGoogleOneTapCallback", callback);
}
};
handleEmailLinkVerification = async (params) => {
const callback = () => this.clerkjs?.handleEmailLinkVerification(params);
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("handleEmailLinkVerification", callback);
}
};
authenticateWithMetamask = async (params) => {
const callback = () => this.clerkjs?.authenticateWithMetamask(params);
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("authenticateWithMetamask", callback);
}
};
authenticateWithCoinbaseWallet = async (params) => {
const callback = () => this.clerkjs?.authenticateWithCoinbaseWallet(params);
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("authenticateWithCoinbaseWallet", callback);
}
};
authenticateWithOKXWallet = async (params) => {
const callback = () => this.clerkjs?.authenticateWithOKXWallet(params);
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("authenticateWithOKXWallet", callback);
}
};
authenticateWithWeb3 = async (params) => {
const callback = () => this.clerkjs?.authenticateWithWeb3(params);
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("authenticateWithWeb3", callback);
}
};
authenticateWithGoogleOneTap = async (params) => {
const clerkjs = await this.#waitForClerkJS();
return clerkjs.authenticateWithGoogleOneTap(params);
};
createOrganization = async (params) => {
const callback = () => this.clerkjs?.createOrganization(params);
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("createOrganization", callback);
}
};
getOrganization = async (organizationId) => {
const callback = () => this.clerkjs?.getOrganization(organizationId);
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("getOrganization", callback);
}
};
joinWaitlist = async (params) => {
const callback = () => this.clerkjs?.joinWaitlist(params);
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("joinWaitlist", callback);
}
};
signOut = async (signOutCallbackOrOptions, options) => {
const callback = () => this.clerkjs?.signOut(signOutCallbackOrOptions, options);
if (this.clerkjs && this.#loaded) {
return callback();
} else {
this.premountMethodCalls.set("signOut", callback);
}
};
};
// src/contexts/client.tsx
var [ClientContextProvider, useClientContext] = createContextProviderAndHook("ClientProvider", (props) => {
return props.client;
});
// src/contexts/organization.tsx
var [OrganizationContextProvider, useOrganizationContext] = createContextProviderAndHook("OrganizationProvider", (props) => {
return props.organization;
});
// src/contexts/session.tsx
var [SessionContextProvider, useSessionContext] = createContextProviderAndHook("SessionProvider", (props) => {
return props.session;
});
// src/contexts/user.tsx
var [UserContextProvider, useUserContext] = createContextProviderAndHook("UserProvider", (props) => {
return props.user;
});
// src/contexts/clerk-context.tsx
function ClerkContextProvider(props) {
const {
isomorphicClerk: clerk,
loaded: clerkLoaded2
} = useLoadedIsomorphicClerk(() => props.isomorphicClerkOptions);
const [state, setState] = solidJs.createSignal({
client: clerk().client,
session: clerk().session,
user: clerk().user,
organization: clerk().organization
});
solidJs.createEffect(() => {
const fn = clerk().addListener((e) => setState({
...e
}));
solidJs.onCleanup(fn);
});
const derivedState = solidJs.createMemo(() => shared.deriveState(clerkLoaded2(), state(), props.initialState));
const clerkCtx = () => clerkLoaded2() ? clerk() : clerk();
return web.createComponent(IsomorphicClerkContextProvider, {
clerk: clerkCtx,
get children() {
return web.createComponent(ClientContextProvider, {
client: () => state().client,
get children() {
return web.createComponent(SessionContextProvider, {
session: () => derivedState().session,
get children() {
return web.createComponent(OrganizationContextProvider, {
organization: () => derivedState().organization,
get children() {
return web.createComponent(AuthContextProvider, {
userId: () => derivedState().userId,
sessionId: () => derivedState().sessionId,
actor: () => derivedState().actor,
orgId: () => derivedState().orgId,
orgRole: () => derivedState().orgRole,
orgSlug: () => derivedState().orgSlug,
orgPermissions: () => derivedState().orgPermissions,
get children() {
return web.createComponent(UserContextProvider, {
user: () => derivedState().user,
get children() {
return props.children;
}
});
}
});
}
});
}
});
}
});
}
});
}
var useLoadedIsomorphicClerk = (options) => {
const [loaded, setLoaded] = solidJs.createSignal(false);
const isomorphicClerk = solidJs.createMemo(() => IsomorphicClerk.getOrCreateInstance(solidJs.untrack(options)));
solidJs.createEffect(solidJs.on(() => options().appearance, (appearance) => {
void isomorphicClerk().__unstable__updateProps({
appearance
});
}));
solidJs.createEffect(solidJs.on(() => options().localization, (localization) => {
void isomorphicClerk().__unstable__updateProps({
options: {
localization
}
});
}));
solidJs.createEffect(() => {
isomorphicClerk().addOnLoaded(() => {
setLoaded(true);
});
});
solidJs.onCleanup(() => {
IsomorphicClerk.clearInstance();
});
return {
isomorphicClerk,
loaded
};
};
// src/contexts/clerk.tsx
function Clerk