@stytch/react 19.4.4 → 19.5.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @stytch/react
 
+## 19.5.0
+
+### Minor Changes
+
+- 1e9ab0e: Add `createStytch*Client` helper functions:
+
+  - `import { createStytchHeadlessClient } from '@stytch/react/headless';`
+  - `import { createStytchUIClient } from '@stytch/react/ui';`
+  - `import { createStytchB2BHeadlessClient } from '@stytch/react/b2b/headless';`
+  - `import { createStytchB2BUIClient } from '@stytch/react/b2b/ui';`
+
+  These are equivalent to the same functions in `@stytch/nextjs` and may be used instead of constructing clients directly (e.g., `new StytchUIClient()`).
+
+- 1e9ab0e: Add `isInitialized` as a returned value from `useStytchUser`, `useStytchSession`, `useStytchMember`, `useStytchMemberSession`, `useStytchOrganization`, and `useStytchIsAuthorized` hooks; add `*IsInitialized` as an injected prop to the `withStytchUser`, `withStytchSession`, `withStytchMember`, `withStytchMemberSession`, and `withStytchOrganization` HOCs. This provides parity with the same APIs in `@stytch/nextjs`.
+
+  If you set `assumeHydrated={false}` in your `StytchProvider` or `StytchB2BProvider`, `isInitialized` will initially be `false` and should be checked before accessing the other values returned by these hooks (or props injected by these HOCs). If you set `assumeHydrated={true}` (the default in `@stytch/react`), `isInitialized` will always be `true`, and it is always safe to access the other values, as in previous versions of `@stytch/react`.
+
+- 1e9ab0e: Add a new `assumeHydrated` prop to the `StytchProvider` and `StytchB2BProvider` components. This prop allows the provider to assume whether or not the app might be hydrated in a browser environment after initially being rendered in a server environment. When `true`, the provider eagerly reads from the browser's local cache to retrieve cached session and related data. When `false`, the provider defers this initialization until after the first render, to avoid hydration errors. This prop defaults to `true` in `@stytch/react`, which preserves the behavior from previous versions.
+
+  We recommend setting `assumeHydrated={false}` if your app hydrates server-rendered content on the client. Otherwise, it is safe to set `assumeHydrated={true}`. If you're unsure or notice hydration errors in your app, set `assumeHydrated={false}`.
+
+### Patch Changes
+
+- 1e9ab0e: Remove errors when attempting to use StytchProvider or StytchB2BProvider in a server environment
+
 ## 19.4.4
 
 ### Patch Changes

package/README.md

@@ -18,9 +18,9 @@ For full documentation please refer to Stytch's javascript SDK documentation at
 
 ```javascript
 import { StytchProvider } from '@stytch/react';
-import { StytchUIClient } from '@stytch/vanilla-js';
+import { createStytchUIClient } from '@stytch/react/ui';
 
-const stytch = new StytchUIClient('public-token-<find yours in the stytch dashboard>');
+const stytch = createStytchUIClient('public-token-<find yours in the stytch dashboard>');
 
 // Wrap your App in the StytchProvider
 const Root = () => (
@@ -96,18 +96,18 @@ yarn remove @stytch/stytch-react
 ### Step 3: Initialize the client in your Application Root
 
 - Determine if you need the Headless or UI client. If you plan to use the `<StytchLogin />` component in your application then you should use the the UI client. Otherwise use the Headless client to minimize application bundle size.
-- To create the Stytch Headless client, use `StytchHeadlessClient` from `@stytch/vanilla-js/headless`
-- To create the Stytch UI client, use `StytchUIClient` from `@stytch/vanilla-js`
+- To create the Stytch Headless client, use `createStytchHeadlessClient` from `@stytch/react/headless`
+- To create the Stytch UI client, use `createStytchUIClient` from `@stytch/react/ui`
 - Pass it into `<StytchProvider />` component from `@stytch/react`
 
 ```jsx
 import React from 'react';
 import { StytchProvider } from '@stytch/react';
-import { StytchHeadlessClient } from '@stytch/vanilla-js/headless';
+import { createStytchHeadlessClient } from '@stytch/react/headless';
 // Or alternately
-// import { StytchUIClient } from '@stytch/vanilla-js';
+// import { createStytchUIClient } from '@stytch/react/ui';
 
-const stytch = new StytchHeadlessClient(process.env.REACT_APP_STYTCH_PUBLIC_TOKEN);
+const stytch = createStytchHeadlessClient(process.env.REACT_APP_STYTCH_PUBLIC_TOKEN);
 
 function WrappedApp() {
   return (

package/b2b/headless/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../../dist/b2b/index.headless.js",
+  "module": "../../dist/b2b/index.headless.esm.js",
+  "types": "../../dist/b2b/index.headless.d.ts"
+}

package/b2b/ui/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../../dist/b2b/index.ui.js",
+  "module": "../../dist/b2b/index.ui.esm.js",
+  "types": "../../dist/b2b/index.ui.d.ts"
+}

package/dist/{StytchB2BContext-09d376ba.d.ts → StytchB2BContext-9c062712.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-09d376ba.js → StytchB2BContext-9c062712.js}

@@ -1,17 +1,21 @@
-import React, { createContext, useContext, useEffect, useMemo } from 'react';
-import { i as invariant, u as useAsyncState, m as mergeWithStableProps, n as noProviderError, B as B2BProviderMustBeUniqueError, a as noSSRError } from './invariant-568a7633.js';
+import React, { createContext, useContext, useEffect, useMemo, useCallback, useRef } from 'react';
+import { i as invariant, u as useAsyncState, m as mergeWithStableProps } from './useIsomorphicLayoutEffect-1babb81e.js';
+import { n as noProviderError, i as isStytchSSRProxy } from './StytchSSRProxy-34c789b5.js';
 
 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 = createContext({ isMounted: false });
 const StytchMemberContext = createContext(initialMember);
@@ -24,9 +28,13 @@ 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 = () => {
@@ -36,14 +44,18 @@ const useStytchMember = () => {
 /**
  * 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(useIsMounted__INTERNAL(), noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
@@ -52,9 +64,13 @@ const useStytchMemberSession = () => {
 /**
  * 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 = () => {
@@ -70,7 +86,7 @@ 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) => {
@@ -78,14 +94,27 @@ const useStytchIsAuthorized = (resourceId, action) => {
     const client = useStytchB2BClient();
     const { session } = useStytchMemberSession();
     const [isAuthorized, setIsAuthorized] = useAsyncState({
-        fromCache: true,
-        isAuthorized: client.rbac.isAuthorizedSync(resourceId, action),
+        isInitialized: false,
+        fromCache: false,
+        isAuthorized: false,
     });
     useEffect(() => {
-        client.rbac.isAuthorized(resourceId, action).then((isAuthorized) => setIsAuthorized({
-            fromCache: false,
-            isAuthorized,
-        }));
+        if (isStytchSSRProxy(client)) {
+            return;
+        }
+        setIsAuthorized({
+            isInitialized: true,
+            fromCache: true,
+            isAuthorized: client.rbac.isAuthorizedSync(resourceId, action),
+        });
+    }, [action, client, resourceId, setIsAuthorized]);
+    useEffect(() => {
+        if (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;
 };
@@ -114,8 +143,8 @@ const withStytchB2BClient = (Component) => {
 const withStytchMember = (Component) => {
     const WithStytchUser = (props) => {
         invariant(useIsMounted__INTERNAL(), noProviderError('withStytchMember', 'StytchB2BProvider'));
-        const { member, fromCache } = useStytchMember();
-        return React.createElement(Component, Object.assign({}, props, { stytchMember: member, stytchMemberIsFromCache: fromCache }));
+        const { member, isInitialized, fromCache } = useStytchMember();
+        return (React.createElement(Component, Object.assign({}, props, { stytchMember: member, stytchMemberIsInitialized: isInitialized, stytchMemberIsFromCache: fromCache })));
     };
     WithStytchUser.displayName = `withStytchMember(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchUser;
@@ -123,8 +152,8 @@ const withStytchMember = (Component) => {
 const withStytchMemberSession = (Component) => {
     const WithStytchSession = (props) => {
         invariant(useIsMounted__INTERNAL(), noProviderError('withStytchMemberSession', 'StytchB2BProvider'));
-        const { session, fromCache } = useStytchMemberSession();
-        return React.createElement(Component, Object.assign({}, props, { stytchMemberSession: session, stytchMemberSessionIsFromCache: fromCache }));
+        const { session, isInitialized, fromCache } = useStytchMemberSession();
+        return (React.createElement(Component, Object.assign({}, props, { stytchMemberSession: session, stytchMemberSessionIsInitialized: isInitialized, stytchMemberSessionIsFromCache: fromCache })));
     };
     WithStytchSession.displayName = `withStytchMemberSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
@@ -132,8 +161,8 @@ const withStytchMemberSession = (Component) => {
 const withStytchOrganization = (Component) => {
     const WithStytchOrganization = (props) => {
         invariant(useIsMounted__INTERNAL(), noProviderError('withStytchOrganization', 'StytchB2BProvider'));
-        const { organization, fromCache } = useStytchOrganization();
-        return React.createElement(Component, Object.assign({}, props, { stytchOrganization: organization, stytchOrganizationIsFromCache: fromCache }));
+        const { organization, isInitialized, fromCache } = useStytchOrganization();
+        return (React.createElement(Component, Object.assign({}, props, { stytchOrganization: organization, stytchOrganizationIsInitialized: isInitialized, stytchOrganizationIsFromCache: fromCache })));
     };
     WithStytchOrganization.displayName = `withStytchOrganization(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchOrganization;
@@ -182,38 +211,52 @@ 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(!useIsMounted__INTERNAL(), B2BProviderMustBeUniqueError);
-    invariant(typeof window !== 'undefined', noSSRError);
+const StytchB2BProvider = ({ stytch, children, assumeHydrated = false, }) => {
+    invariant(!useIsMounted__INTERNAL(), 'You cannot render a <StytchB2BProvider> inside another <StytchB2BProvider>.');
+    invariant(!assumeHydrated || typeof window !== 'undefined', 'The `assumeHydrated` prop must be set to `false` when using StytchB2BProvider in a server environment.');
     const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [{ member, session, organization }, setClientState] = useAsyncState({
-        session: stytch.session.getInfo(),
-        member: stytch.self.getInfo(),
-        organization: stytch.organization.getInfo(),
-    });
-    useEffect(() => stytch.onStateChange(() => {
-        setClientState((oldState) => {
-            const newState = {
-                session: stytch.session.getInfo(),
-                member: stytch.self.getInfo(),
-                organization: stytch.organization.getInfo(),
-            };
-            return mergeWithStableProps(oldState, newState);
-        });
-    }), [setClientState, stytch]);
+    const getHydratedState = 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] = 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 = useRef(assumeHydrated);
+    useEffect(() => {
+        if (isStytchSSRProxy(stytch)) {
+            return;
+        }
+        const updateState = () => {
+            setClientState((oldState) => mergeWithStableProps(oldState, getHydratedState()));
+        };
+        if (!assumeHydratedRef.current) {
+            updateState();
+        }
+        return stytch.onStateChange(updateState);
+    }, [getHydratedState, setClientState, stytch]);
     return (React.createElement(StytchB2BContext.Provider, { value: ctx },
         React.createElement(StytchOrganizationContext.Provider, { value: organization },
             React.createElement(StytchMemberContext.Provider, { value: member },
                 React.createElement(StytchMemberSessionContext.Provider, { value: session }, children)))));
 };
 
-export { StytchB2BProvider as S, useStytchB2BClient as a, useStytchMember as b, useStytchMemberSession as c, useStytchIsAuthorized as d, useStytchOrganization as e, withStytchMemberSession as f, withStytchMember as g, withStytchOrganization as h, isUIClient as i, withStytchPermissions as j, useIsMounted__INTERNAL as u, withStytchB2BClient as w };
+export { StytchB2BProvider as S, useStytchB2BClient as a, useStytchMember as b, useStytchMemberSession as c, useStytchOrganization as d, useStytchIsAuthorized as e, withStytchMemberSession as f, withStytchOrganization as g, withStytchB2BClient as h, isUIClient as i, withStytchPermissions as j, useIsMounted__INTERNAL as u, withStytchMember as w };