@stytch/react 19.4.4 → 19.5.0

package/dist/{StytchB2BContext-a8d57249.d.ts → StytchB2BContext-c5062f9b.d.ts}

@@ -1,15 +1,29 @@
 /// <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';
-import { PermissionsMap } from '@stytch/core/public';
 /**
  * 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 SWRMember = {
+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.
      */
@@ -18,8 +32,27 @@ type SWRMember = {
      * 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 = {
+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.
      */
@@ -28,8 +61,27 @@ type SWRMemberSession = {
      * 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 = {
+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.
      */
@@ -38,41 +90,72 @@ type SWROrganization = {
      * 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} = useStytchMember();
+ * const {member, isInitialized, fromCache} = useStytchMember();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
  * return (<h1>Welcome, {member.name}</h1>);
  */
-declare const useStytchMember: () => SWRMember;
+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 } = useStytchMemberSession();
+ * const {session, isInitialized, fromCache} = useStytchMemberSession();
  * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
  *   if (!session) {
  *     router.replace('/login')
  *   }
- * }, [session]);
+ * }, [session, isInitialized]);
  */
-declare const useStytchMemberSession: () => SWRMemberSession;
+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 } = useStytchOrganization();
+ * const {organization, isInitialized, fromCache} = useStytchOrganization();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
  * return (<p>Welcome to {organization.organization_name}</p>);
  */
-declare const useStytchOrganization: () => SWROrganization;
-type SWRIsAuthorized = {
+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.
      */
@@ -81,7 +164,12 @@ type SWRIsAuthorized = {
      * 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.
@@ -91,10 +179,10 @@ type SWRIsAuthorized = {
  *
  * Remember - authorization checks for sensitive actions should always occur on the backend as well.
  * @example
- * const isAuthorized = useStytchIsAuthorized<Permissions>('documents', 'edit');
+ * const { isAuthorized } = useStytchIsAuthorized<Permissions>('documents', 'edit');
  * return <button disabled={!isAuthorized}>Edit</button>
  */
-declare const useStytchIsAuthorized: (resourceId: string, action: string) => SWRIsAuthorized;
+declare const useStytchIsAuthorized: <TAssumeHydrated extends boolean = false>(resourceId: string, action: string) => SWRIsAuthorized<TAssumeHydrated>;
 /**
  * Returns the Stytch B2B client stored in the Stytch context.
  *
@@ -108,16 +196,19 @@ declare const useStytchB2BClient: <TProjectConfiguration extends Partial<import(
 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>(Component: 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>(Component: 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>(Component: 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>;
 /**
@@ -146,23 +237,36 @@ declare const withStytchPermissions: <Permissions_1 extends Record<string, strin
 }>) => React.ComponentType<T>;
 interface StytchB2BProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
-     * A Stytch client instance, either a {@link StytchB2BUIClient} or {@link StytchB2BHeadlessClient}
+     * 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 = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ * const stytch = createStytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
  *
- * ReactDOM.render(
+ * return (
  *   <StytchB2BProvider stytch={stytch}>
  *     <App />
- *   </StytchProvider>,
- *   document.getElementById('root'),
+ *   </StytchB2BProvider>
  * )
  */
-declare const StytchB2BProvider: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ stytch, children, }: StytchB2BProviderProps<TProjectConfiguration>) => JSX.Element;
+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-a8d57249.js → StytchB2BContext-c5062f9b.js}

@@ -1,7 +1,8 @@
 'use strict';
 
 var React = require('react');
-var invariant = require('./invariant-ae5a5bce.js');
+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 }; }
 
@@ -10,14 +11,17 @@ 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);
@@ -30,41 +34,53 @@ const isUIClient = (client) => {
 /**
  * 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} = useStytchMember();
+ * const {member, isInitialized, fromCache} = useStytchMember();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
  * return (<h1>Welcome, {member.name}</h1>);
  */
 const useStytchMember = () => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchMember', 'StytchB2BProvider'));
+    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 } = useStytchMemberSession();
+ * const {session, isInitialized, fromCache} = useStytchMemberSession();
  * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
  *   if (!session) {
  *     router.replace('/login')
  *   }
- * }, [session]);
+ * }, [session, isInitialized]);
  */
 const useStytchMemberSession = () => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
+    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 } = useStytchOrganization();
+ * const {organization, isInitialized, fromCache} = useStytchOrganization();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
  * return (<p>Welcome to {organization.organization_name}</p>);
  */
 const useStytchOrganization = () => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchOrganization', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchOrganization', 'StytchB2BProvider'));
     return React.useContext(StytchOrganizationContext);
 };
 /**
@@ -76,22 +92,35 @@ const useStytchOrganization = () => {
  *
  * Remember - authorization checks for sensitive actions should always occur on the backend as well.
  * @example
- * const isAuthorized = useStytchIsAuthorized<Permissions>('documents', 'edit');
+ * const { isAuthorized } = useStytchIsAuthorized<Permissions>('documents', 'edit');
  * return <button disabled={!isAuthorized}>Edit</button>
  */
 const useStytchIsAuthorized = (resourceId, action) => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchIsAuthorized', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchIsAuthorized', 'StytchB2BProvider'));
     const client = useStytchB2BClient();
     const { session } = useStytchMemberSession();
-    const [isAuthorized, setIsAuthorized] = invariant.useAsyncState({
-        fromCache: true,
-        isAuthorized: client.rbac.isAuthorizedSync(resourceId, action),
+    const [isAuthorized, setIsAuthorized] = useIsomorphicLayoutEffect.useAsyncState({
+        isInitialized: false,
+        fromCache: false,
+        isAuthorized: false,
     });
     React.useEffect(() => {
-        client.rbac.isAuthorized(resourceId, action).then((isAuthorized) => setIsAuthorized({
-            fromCache: false,
-            isAuthorized,
-        }));
+        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;
 };
@@ -106,12 +135,12 @@ const useStytchIsAuthorized = (resourceId, action) => {
  */
 const useStytchB2BClient = () => {
     const ctx = React.useContext(StytchB2BContext);
-    invariant.invariant(ctx.isMounted, invariant.noProviderError('useStytchB2BClient', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(ctx.isMounted, StytchSSRProxy.noProviderError('useStytchB2BClient', 'StytchB2BProvider'));
     return ctx.client;
 };
 const withStytchB2BClient = (Component) => {
     const WithStytch = (props) => {
-        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytchB2BClient', 'StytchB2BProvider'));
+        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'})`;
@@ -119,27 +148,27 @@ const withStytchB2BClient = (Component) => {
 };
 const withStytchMember = (Component) => {
     const WithStytchUser = (props) => {
-        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytchMember', 'StytchB2BProvider'));
-        const { member, fromCache } = useStytchMember();
-        return React__default["default"].createElement(Component, Object.assign({}, props, { stytchMember: member, stytchMemberIsFromCache: fromCache }));
+        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) => {
-        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytchMemberSession', 'StytchB2BProvider'));
-        const { session, fromCache } = useStytchMemberSession();
-        return React__default["default"].createElement(Component, Object.assign({}, props, { stytchMemberSession: session, stytchMemberSessionIsFromCache: fromCache }));
+        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) => {
-        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytchOrganization', 'StytchB2BProvider'));
-        const { organization, fromCache } = useStytchOrganization();
-        return React__default["default"].createElement(Component, Object.assign({}, props, { stytchOrganization: organization, stytchOrganizationIsFromCache: fromCache }));
+        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;
@@ -167,10 +196,10 @@ const withStytchOrganization = (Component) => {
  */
 const withStytchPermissions = (Component) => {
     const WithStytchPermissions = (props) => {
-        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useRBACPermissions', 'StytchB2BProvider'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useRBACPermissions', 'StytchB2BProvider'));
         const client = useStytchB2BClient();
         const { session } = useStytchMemberSession();
-        const [permissions, setPermissions] = invariant.useAsyncState({ loaded: false, value: null });
+        const [permissions, setPermissions] = useIsomorphicLayoutEffect.useAsyncState({ loaded: false, value: null });
         React.useEffect(() => {
             client.rbac
                 .allPermissions()
@@ -188,34 +217,48 @@ const withStytchPermissions = (Component) => {
  * The Stytch Context Provider.
  * Wrap your application with this component in order to use Stytch everywhere in your app.
  * @example
- * const stytch = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ * const stytch = createStytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
  *
- * ReactDOM.render(
+ * return (
  *   <StytchB2BProvider stytch={stytch}>
  *     <App />
- *   </StytchProvider>,
- *   document.getElementById('root'),
+ *   </StytchB2BProvider>
  * )
  */
-const StytchB2BProvider = ({ stytch, children, }) => {
-    invariant.invariant(!useIsMounted__INTERNAL(), invariant.B2BProviderMustBeUniqueError);
-    invariant.invariant(typeof window !== 'undefined', invariant.noSSRError);
+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 [{ member, session, organization }, setClientState] = invariant.useAsyncState({
-        session: stytch.session.getInfo(),
-        member: stytch.self.getInfo(),
-        organization: stytch.organization.getInfo(),
-    });
-    React.useEffect(() => stytch.onStateChange(() => {
-        setClientState((oldState) => {
-            const newState = {
-                session: stytch.session.getInfo(),
-                member: stytch.self.getInfo(),
-                organization: stytch.organization.getInfo(),
-            };
-            return invariant.mergeWithStableProps(oldState, newState);
-        });
-    }), [setClientState, 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 },

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 };