@stytch/react 19.4.3 → 19.5.0

package/dist/StytchB2BContext-c5062f9b.d.ts

@@ -0,0 +1,272 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { PermissionsMap } from '@stytch/core/public';
+import { Member, MemberSession, Organization, StytchB2BUIClient } from '@stytch/vanilla-js/b2b';
+import { StytchB2BHeadlessClient, StytchProjectConfigurationInput } from '@stytch/vanilla-js/b2b/headless';
+/**
+ * The Stytch Client object passed in to <StytchB2BProvider /> in your application root.
+ * Either a StytchB2BUIClient or StytchB2BHeadlessClient.
+ */
+type StytchB2BClient<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchB2BHeadlessClient<TProjectConfiguration> | StytchB2BUIClient<TProjectConfiguration>;
+type SWRMemberUninitialized = {
+    /**
+     * Either the active {@link Member} object, or null if the member is not logged in.
+     */
+    member: null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: false;
+    /**
+     * If true, indicates that the SDK has completed initialization.
+     */
+    isInitialized: false;
+};
+type SWRMemberInitialized = {
+    /**
+     * Either the active {@link Member} object, or null if the member is not logged in.
+     */
+    member: Member | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+    /**
+     * If true, indicates that the SDK has completed initialization.
+     */
+    isInitialized: true;
+};
+type SWRMember<TAlwaysInitialized extends boolean = boolean> = TAlwaysInitialized extends true ? SWRMemberInitialized : SWRMemberInitialized | SWRMemberUninitialized;
+type SWRMemberSessionUninitialized = {
+    /**
+     * Either the active {@link MemberSession} object, or null if the member is not logged in.
+     */
+    session: null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: false;
+    /**
+     * If true, indicates that the SDK has completed initialization.
+     */
+    isInitialized: false;
+};
+type SWRMemberSessionInitialized = {
+    /**
+     * Either the active {@link MemberSession} object, or null if the member is not logged in.
+     */
+    session: MemberSession | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+    /**
+     * If true, indicates that the SDK has completed initialization.
+     */
+    isInitialized: true;
+};
+type SWRMemberSession<TAlwaysInitialized extends boolean = boolean> = TAlwaysInitialized extends true ? SWRMemberSessionInitialized : SWRMemberSessionInitialized | SWRMemberSessionUninitialized;
+type SWROrganizationUninitialized = {
+    /**
+     * Either the active {@link Organization} object, or null if the member is not logged in.
+     */
+    organization: null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: false;
+    /**
+     * If true, indicates that the SDK has completed initialization.
+     */
+    isInitialized: false;
+};
+type SWROrganizationInitialized = {
+    /**
+     * Either the active {@link Organization} object, or null if the member is not logged in.
+     */
+    organization: Organization | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+    /**
+     * If true, indicates that the SDK has completed initialization.
+     */
+    isInitialized: true;
+};
+type SWROrganization<TAlwaysInitialized extends boolean = boolean> = TAlwaysInitialized extends true ? SWROrganizationInitialized : SWROrganizationInitialized | SWROrganizationUninitialized;
+declare const useIsMounted__INTERNAL: () => boolean;
+declare const isUIClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration>>(client: StytchB2BClient<TProjectConfiguration>) => client is StytchB2BUIClient<TProjectConfiguration>;
+/**
+ * Returns the active Member.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the member data is from persistent storage.
+ * @example
+ * const {member, isInitialized, fromCache} = useStytchMember();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<h1>Welcome, {member.name}</h1>);
+ */
+declare const useStytchMember: <TAssumeHydrated extends boolean = false>() => SWRMember<TAssumeHydrated>;
+/**
+ * Returns the active member's Stytch member session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the session data is from persistent storage.
+ * @example
+ * const {session, isInitialized, fromCache} = useStytchMemberSession();
+ * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session, isInitialized]);
+ */
+declare const useStytchMemberSession: <TAssumeHydrated extends boolean = false>() => SWRMemberSession<TAssumeHydrated>;
+/**
+ * Returns the active Stytch organization.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the organization data is from persistent storage.
+ * @example
+ * const {organization, isInitialized, fromCache} = useStytchOrganization();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<p>Welcome to {organization.organization_name}</p>);
+ */
+declare const useStytchOrganization: <TAssumeHydrated extends boolean = false>() => SWROrganization<TAssumeHydrated>;
+type SWRIsAuthorizedUninitialized = {
+    /**
+     * Whether the logged-in member is allowed to perform the specified action on the specified resource.
+     */
+    isAuthorized: false;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: false;
+    /**
+     * If true, indicates that the SDK has completed initialization.
+     */
+    isInitialized: false;
+};
+type SWRIsAuthorizedInitialized = {
+    /**
+     * Whether the logged-in member is allowed to perform the specified action on the specified resource.
+     */
+    isAuthorized: boolean;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+    /**
+     * If true, indicates that the SDK has completed initialization.
+     */
+    isInitialized: boolean;
+};
+type SWRIsAuthorized<TAlwaysInitialized extends boolean> = TAlwaysInitialized extends true ? SWRIsAuthorizedInitialized : SWRIsAuthorizedInitialized | SWRIsAuthorizedUninitialized;
+/**
+ * Determines whether the logged-in member is allowed to perform the specified action on the specified resource.
+ * Returns `true` if the member can perform the action, `false` otherwise.
+ *
+ * If the member is not logged in, this method will always return false.
+ * If the resource or action provided are not valid for the configured RBAC policy, this method will return false.
+ *
+ * Remember - authorization checks for sensitive actions should always occur on the backend as well.
+ * @example
+ * const { isAuthorized } = useStytchIsAuthorized<Permissions>('documents', 'edit');
+ * return <button disabled={!isAuthorized}>Edit</button>
+ */
+declare const useStytchIsAuthorized: <TAssumeHydrated extends boolean = false>(resourceId: string, action: string) => SWRIsAuthorized<TAssumeHydrated>;
+/**
+ * Returns the Stytch B2B client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytchB2BClient();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+declare const useStytchB2BClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>() => StytchB2BHeadlessClient<TProjectConfiguration>;
+declare const withStytchB2BClient: <T extends object, TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration>>(Component: React.ComponentType<T & {
+    stytch: StytchB2BHeadlessClient<TProjectConfiguration>;
+}>) => React.ComponentType<T>;
+declare const withStytchMember: <T extends object, TAssumeHydrated extends boolean = false>(Component: React.ComponentType<T & {
+    stytchMember: Member | null;
+    stytchMemberIsInitialized: boolean;
+    stytchMemberIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+declare const withStytchMemberSession: <T extends object, TAssumeHydrated extends boolean = false>(Component: React.ComponentType<T & {
+    stytchMemberSession: MemberSession | null;
+    stytchMemberSessionIsInitialized: boolean;
+    stytchMemberSessionIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+declare const withStytchOrganization: <T extends object, TAssumeHydrated extends boolean = false>(Component: React.ComponentType<T & {
+    stytchOrganization: Organization | null;
+    stytchOrganizationIsInitialized: boolean;
+    stytchOrganizationIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+/**
+ * Wrap your component with this HOC in order to receive the permissions for the logged-in member.
+ * Evaluates all permissions granted to the logged-in member.
+ * Returns a Record<RoleId, Record<Action, boolean>> response indicating the member's permissions.
+ * Each boolean will be `true` if the member can perform the action, `false` otherwise.
+ *
+ * If the member is not logged in, all values will be false.
+ *
+ * Remember - authorization checks for sensitive actions should always occur on the backend as well.
+ * @example
+ * type Permissions = {
+ *   document: 'create' | 'read' | 'write
+ *   image: 'create' | 'read'
+ * }
+ *
+ * const MyComponent = (props) => {
+ *   const canEditDocuments = props.stytchPermissions.document.edit;
+ *   const canReadImages = props.stytchPermissions.image.read;
+ * }
+ * return withStytchPermissions<Permissions>(MyComponent)
+ */
+declare const withStytchPermissions: <Permissions_1 extends Record<string, string>, T extends object>(Component: React.ComponentType<T & {
+    stytchPermissions: PermissionsMap<Permissions_1>;
+}>) => React.ComponentType<T>;
+interface StytchB2BProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
+    /**
+     * A Stytch client instance, created using either {@link createStytchHeadlessClient} or {@link createStytchUIClient}
+     */
+    stytch: StytchB2BClient<TProjectConfiguration>;
+    /**
+     * When true, the provider will assume that the component will only be
+     * rendered in a browser environment, either in a single-page application or
+     * after completing hydration of a server-rendered application. This allows
+     * cached values to be retrieved from the browser on the first render, meaning
+     * that the `isInitialized` value returned from Stytch hooks will be `true`
+     * starting from the first render.
+     *
+     * When `false`, the provider will defer initialization until after the first
+     * render, and `isInitialized` will initially be `false`.
+     *
+     * This value defaults to `false` in `@stytch/nextjs`.
+     */
+    assumeHydrated?: boolean;
+    children?: ReactNode;
+}
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = createStytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ */
+declare const StytchB2BProvider: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ stytch, children, assumeHydrated, }: StytchB2BProviderProps<TProjectConfiguration>) => JSX.Element;
+export { useIsMounted__INTERNAL, isUIClient, useStytchMember, useStytchMemberSession, useStytchOrganization, useStytchIsAuthorized, useStytchB2BClient, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchOrganization, withStytchPermissions, StytchB2BProviderProps, StytchB2BProvider };

package/dist/StytchB2BContext-c5062f9b.js

@@ -0,0 +1,280 @@
+'use strict';
+
+var React = require('react');
+var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect-65746ef3.js');
+var StytchSSRProxy = require('./StytchSSRProxy-86bc42b3.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const initialMember = {
+    member: null,
+    fromCache: false,
+    isInitialized: false,
+};
+const initialMemberSession = {
+    session: null,
+    fromCache: false,
+    isInitialized: false,
+};
+const initialOrganization = {
+    organization: null,
+    fromCache: false,
+    isInitialized: false,
+};
+const StytchB2BContext = React.createContext({ isMounted: false });
+const StytchMemberContext = React.createContext(initialMember);
+const StytchMemberSessionContext = React.createContext(initialMemberSession);
+const StytchOrganizationContext = React.createContext(initialOrganization);
+const useIsMounted__INTERNAL = () => React.useContext(StytchB2BContext).isMounted;
+const isUIClient = (client) => {
+    return client.mount !== undefined;
+};
+/**
+ * Returns the active Member.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the member data is from persistent storage.
+ * @example
+ * const {member, isInitialized, fromCache} = useStytchMember();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<h1>Welcome, {member.name}</h1>);
+ */
+const useStytchMember = () => {
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchMember', 'StytchB2BProvider'));
+    return React.useContext(StytchMemberContext);
+};
+/**
+ * Returns the active member's Stytch member session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the session data is from persistent storage.
+ * @example
+ * const {session, isInitialized, fromCache} = useStytchMemberSession();
+ * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session, isInitialized]);
+ */
+const useStytchMemberSession = () => {
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
+    return React.useContext(StytchMemberSessionContext);
+};
+/**
+ * Returns the active Stytch organization.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the organization data is from persistent storage.
+ * @example
+ * const {organization, isInitialized, fromCache} = useStytchOrganization();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<p>Welcome to {organization.organization_name}</p>);
+ */
+const useStytchOrganization = () => {
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchOrganization', 'StytchB2BProvider'));
+    return React.useContext(StytchOrganizationContext);
+};
+/**
+ * Determines whether the logged-in member is allowed to perform the specified action on the specified resource.
+ * Returns `true` if the member can perform the action, `false` otherwise.
+ *
+ * If the member is not logged in, this method will always return false.
+ * If the resource or action provided are not valid for the configured RBAC policy, this method will return false.
+ *
+ * Remember - authorization checks for sensitive actions should always occur on the backend as well.
+ * @example
+ * const { isAuthorized } = useStytchIsAuthorized<Permissions>('documents', 'edit');
+ * return <button disabled={!isAuthorized}>Edit</button>
+ */
+const useStytchIsAuthorized = (resourceId, action) => {
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchIsAuthorized', 'StytchB2BProvider'));
+    const client = useStytchB2BClient();
+    const { session } = useStytchMemberSession();
+    const [isAuthorized, setIsAuthorized] = useIsomorphicLayoutEffect.useAsyncState({
+        isInitialized: false,
+        fromCache: false,
+        isAuthorized: false,
+    });
+    React.useEffect(() => {
+        if (StytchSSRProxy.isStytchSSRProxy(client)) {
+            return;
+        }
+        setIsAuthorized({
+            isInitialized: true,
+            fromCache: true,
+            isAuthorized: client.rbac.isAuthorizedSync(resourceId, action),
+        });
+    }, [action, client, resourceId, setIsAuthorized]);
+    React.useEffect(() => {
+        if (StytchSSRProxy.isStytchSSRProxy(client)) {
+            return;
+        }
+        client.rbac.isAuthorized(resourceId, action).then((isAuthorized) => {
+            setIsAuthorized({ isAuthorized, fromCache: false, isInitialized: true });
+        });
+    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action, setIsAuthorized]);
+    return isAuthorized;
+};
+/**
+ * Returns the Stytch B2B client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytchB2BClient();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+const useStytchB2BClient = () => {
+    const ctx = React.useContext(StytchB2BContext);
+    useIsomorphicLayoutEffect.invariant(ctx.isMounted, StytchSSRProxy.noProviderError('useStytchB2BClient', 'StytchB2BProvider'));
+    return ctx.client;
+};
+const withStytchB2BClient = (Component) => {
+    const WithStytch = (props) => {
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchB2BClient', 'StytchB2BProvider'));
+        return React__default["default"].createElement(Component, Object.assign({}, props, { stytch: useStytchB2BClient() }));
+    };
+    WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytch;
+};
+const withStytchMember = (Component) => {
+    const WithStytchUser = (props) => {
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchMember', 'StytchB2BProvider'));
+        const { member, isInitialized, fromCache } = useStytchMember();
+        return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchMember: member, stytchMemberIsInitialized: isInitialized, stytchMemberIsFromCache: fromCache })));
+    };
+    WithStytchUser.displayName = `withStytchMember(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchUser;
+};
+const withStytchMemberSession = (Component) => {
+    const WithStytchSession = (props) => {
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchMemberSession', 'StytchB2BProvider'));
+        const { session, isInitialized, fromCache } = useStytchMemberSession();
+        return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchMemberSession: session, stytchMemberSessionIsInitialized: isInitialized, stytchMemberSessionIsFromCache: fromCache })));
+    };
+    WithStytchSession.displayName = `withStytchMemberSession(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchSession;
+};
+const withStytchOrganization = (Component) => {
+    const WithStytchOrganization = (props) => {
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchOrganization', 'StytchB2BProvider'));
+        const { organization, isInitialized, fromCache } = useStytchOrganization();
+        return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchOrganization: organization, stytchOrganizationIsInitialized: isInitialized, stytchOrganizationIsFromCache: fromCache })));
+    };
+    WithStytchOrganization.displayName = `withStytchOrganization(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchOrganization;
+};
+/**
+ * Wrap your component with this HOC in order to receive the permissions for the logged-in member.
+ * Evaluates all permissions granted to the logged-in member.
+ * Returns a Record<RoleId, Record<Action, boolean>> response indicating the member's permissions.
+ * Each boolean will be `true` if the member can perform the action, `false` otherwise.
+ *
+ * If the member is not logged in, all values will be false.
+ *
+ * Remember - authorization checks for sensitive actions should always occur on the backend as well.
+ * @example
+ * type Permissions = {
+ *   document: 'create' | 'read' | 'write
+ *   image: 'create' | 'read'
+ * }
+ *
+ * const MyComponent = (props) => {
+ *   const canEditDocuments = props.stytchPermissions.document.edit;
+ *   const canReadImages = props.stytchPermissions.image.read;
+ * }
+ * return withStytchPermissions<Permissions>(MyComponent)
+ */
+const withStytchPermissions = (Component) => {
+    const WithStytchPermissions = (props) => {
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useRBACPermissions', 'StytchB2BProvider'));
+        const client = useStytchB2BClient();
+        const { session } = useStytchMemberSession();
+        const [permissions, setPermissions] = useIsomorphicLayoutEffect.useAsyncState({ loaded: false, value: null });
+        React.useEffect(() => {
+            client.rbac
+                .allPermissions()
+                .then((permissions) => setPermissions({ loaded: true, value: permissions }));
+        }, [client, session === null || session === void 0 ? void 0 : session.roles, setPermissions]);
+        if (!permissions.loaded) {
+            return null;
+        }
+        return React__default["default"].createElement(Component, Object.assign({}, props, { stytchPermissions: permissions.value }));
+    };
+    WithStytchPermissions.displayName = `withStytchPermissions(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchPermissions;
+};
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = createStytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ */
+const StytchB2BProvider = ({ stytch, children, assumeHydrated = false, }) => {
+    useIsomorphicLayoutEffect.invariant(!useIsMounted__INTERNAL(), 'You cannot render a <StytchB2BProvider> inside another <StytchB2BProvider>.');
+    useIsomorphicLayoutEffect.invariant(!assumeHydrated || typeof window !== 'undefined', 'The `assumeHydrated` prop must be set to `false` when using StytchB2BProvider in a server environment.');
+    const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
+    const getHydratedState = React.useCallback(() => {
+        return {
+            member: Object.assign(Object.assign({}, stytch.self.getInfo()), { isInitialized: true }),
+            session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
+            organization: Object.assign(Object.assign({}, stytch.organization.getInfo()), { isInitialized: true }),
+        };
+    }, [stytch]);
+    const getInitialState = () => {
+        return {
+            member: initialMember,
+            session: initialMemberSession,
+            organization: initialOrganization,
+        };
+    };
+    const [{ member, session, organization }, setClientState] = useIsomorphicLayoutEffect.useAsyncState(() => assumeHydrated ? getHydratedState() : getInitialState());
+    // Store the initial value of `assumeHydrated` in a ref, because it is
+    // logically only relevant for the first render
+    const assumeHydratedRef = React.useRef(assumeHydrated);
+    React.useEffect(() => {
+        if (StytchSSRProxy.isStytchSSRProxy(stytch)) {
+            return;
+        }
+        const updateState = () => {
+            setClientState((oldState) => useIsomorphicLayoutEffect.mergeWithStableProps(oldState, getHydratedState()));
+        };
+        if (!assumeHydratedRef.current) {
+            updateState();
+        }
+        return stytch.onStateChange(updateState);
+    }, [getHydratedState, setClientState, stytch]);
+    return (React__default["default"].createElement(StytchB2BContext.Provider, { value: ctx },
+        React__default["default"].createElement(StytchOrganizationContext.Provider, { value: organization },
+            React__default["default"].createElement(StytchMemberContext.Provider, { value: member },
+                React__default["default"].createElement(StytchMemberSessionContext.Provider, { value: session }, children)))));
+};
+
+exports.StytchB2BProvider = StytchB2BProvider;
+exports.isUIClient = isUIClient;
+exports.useIsMounted__INTERNAL = useIsMounted__INTERNAL;
+exports.useStytchB2BClient = useStytchB2BClient;
+exports.useStytchIsAuthorized = useStytchIsAuthorized;
+exports.useStytchMember = useStytchMember;
+exports.useStytchMemberSession = useStytchMemberSession;
+exports.useStytchOrganization = useStytchOrganization;
+exports.withStytchB2BClient = withStytchB2BClient;
+exports.withStytchMember = withStytchMember;
+exports.withStytchMemberSession = withStytchMemberSession;
+exports.withStytchOrganization = withStytchOrganization;
+exports.withStytchPermissions = withStytchPermissions;

package/dist/StytchSSRProxy-34c789b5.d.ts

@@ -0,0 +1,3 @@
+declare const isStytchSSRProxy: (proxy: any) => boolean;
+declare const createStytchSSRProxy: () => any;
+export { isStytchSSRProxy, createStytchSSRProxy };

package/dist/StytchSSRProxy-34c789b5.js

@@ -0,0 +1,48 @@
+const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
+const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
+const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are using a Stytch UI client, not a Stytch Headless client.`;
+const cannotInvokeMethodOnServerError = (path) => `[Stytch] Invalid serverside function call to ${path}.
+The Stytch Javascript SDK is intended to ony be used on the client side.
+Make sure to wrap your API calls in a hook to ensure they are executed on the client.
+\`\`\`
+const myComponent = () => {
+  const stytch = useStytch();
+  // This will error out on the server.
+  stytch.magicLinks.authenticate(...);
+  useEffect(() => {
+    // This will work well
+    stytch.magicLinks.authenticate(...);
+  }, []);
+}
+\`\`\`
+
+If you want to make API calls from server environments, please use the Stytch Node Library
+https://www.npmjs.com/package/stytch.
+`;
+
+const SSRStubKey = Symbol('__stytch_SSRStubKey');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isStytchSSRProxy = (proxy) => {
+    return !!proxy[SSRStubKey];
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createProxy = (path) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noop = () => { };
+    return new Proxy(noop, {
+        get(target, p) {
+            if (p === SSRStubKey) {
+                return true;
+            }
+            return createProxy(path + '.' + String(p));
+        },
+        apply() {
+            throw new Error(cannotInvokeMethodOnServerError(path));
+        },
+    });
+};
+const createStytchSSRProxy = () => createProxy('stytch');
+
+export { noHeadlessClientError as a, createStytchSSRProxy as c, isStytchSSRProxy as i, noProviderError as n, providerMustBeUniqueError as p };

package/dist/StytchSSRProxy-86bc42b3.d.ts

@@ -0,0 +1,3 @@
+declare const isStytchSSRProxy: (proxy: any) => boolean;
+declare const createStytchSSRProxy: () => any;
+export { isStytchSSRProxy, createStytchSSRProxy };

package/dist/StytchSSRProxy-86bc42b3.js

@@ -0,0 +1,54 @@
+'use strict';
+
+const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
+const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
+const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are using a Stytch UI client, not a Stytch Headless client.`;
+const cannotInvokeMethodOnServerError = (path) => `[Stytch] Invalid serverside function call to ${path}.
+The Stytch Javascript SDK is intended to ony be used on the client side.
+Make sure to wrap your API calls in a hook to ensure they are executed on the client.
+\`\`\`
+const myComponent = () => {
+  const stytch = useStytch();
+  // This will error out on the server.
+  stytch.magicLinks.authenticate(...);
+  useEffect(() => {
+    // This will work well
+    stytch.magicLinks.authenticate(...);
+  }, []);
+}
+\`\`\`
+
+If you want to make API calls from server environments, please use the Stytch Node Library
+https://www.npmjs.com/package/stytch.
+`;
+
+const SSRStubKey = Symbol('__stytch_SSRStubKey');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isStytchSSRProxy = (proxy) => {
+    return !!proxy[SSRStubKey];
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createProxy = (path) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noop = () => { };
+    return new Proxy(noop, {
+        get(target, p) {
+            if (p === SSRStubKey) {
+                return true;
+            }
+            return createProxy(path + '.' + String(p));
+        },
+        apply() {
+            throw new Error(cannotInvokeMethodOnServerError(path));
+        },
+    });
+};
+const createStytchSSRProxy = () => createProxy('stytch');
+
+exports.createStytchSSRProxy = createStytchSSRProxy;
+exports.isStytchSSRProxy = isStytchSSRProxy;
+exports.noHeadlessClientError = noHeadlessClientError;
+exports.noProviderError = noProviderError;
+exports.providerMustBeUniqueError = providerMustBeUniqueError;

package/dist/adminPortal/index.d.ts

@@ -39,6 +39,6 @@ type AdminPortalSCIMProps<TProjectConfiguration extends StytchProjectConfigurati
  * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
  */
 declare const AdminPortalSCIM: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(props: ExcludeInjectedOptions<AdminPortalSCIMMountOptions<Partial<import("@stytch/core/public").StytchProjectConfiguration>>>) => JSX.Element;
-export { AdminPortalSSO, AdminPortalOrgSettings, AdminPortalMemberManagement, AdminPortalSCIM };
 export { AdminPortalB2BProducts } from "@stytch/vanilla-js/b2b/adminPortal";
+export { AdminPortalMemberManagement, AdminPortalOrgSettings, AdminPortalSCIM, AdminPortalSSO };
 export type { AdminPortalSSOProps, AdminPortalOrgSettingsProps, AdminPortalMemberManagementProps, AdminPortalSCIMProps };