@stytch/react 19.4.4 → 19.5.0

package/dist/b2b/index.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var StytchB2BContext = require('../StytchB2BContext-a8d57249.js');
 var React = require('react');
-var invariant = require('../invariant-ae5a5bce.js');
+var StytchB2BContext = require('../StytchB2BContext-c5062f9b.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 }; }
 
@@ -44,12 +45,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * />
  */
 const StytchB2B = ({ styles, callbacks, config, }) => {
-    invariant.invariant(StytchB2BContext.useIsMounted__INTERNAL(), invariant.noProviderError('<StytchB2B />', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(StytchB2BContext.useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchB2B />', 'StytchB2BProvider'));
     const stytchClient = StytchB2BContext.useStytchB2BClient();
     const containerEl = React.useRef(null);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!StytchB2BContext.isUIClient(stytchClient)) {
-            throw Error(invariant.noHeadlessClientError);
+            throw Error(StytchSSRProxy.noHeadlessClientError);
         }
         if (!containerEl.current) {
             return;
@@ -96,13 +97,13 @@ const StytchB2B = ({ styles, callbacks, config, }) => {
  * />
  */
 const B2BIdentityProvider = ({ styles, callbacks, getIDPConsentManifest }) => {
-    invariant.invariant(StytchB2BContext.useIsMounted__INTERNAL(), invariant.noProviderError('<IdentityProvider />'));
+    useIsomorphicLayoutEffect.invariant(StytchB2BContext.useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<IdentityProvider />'));
     const stytchClient = StytchB2BContext.useStytchB2BClient();
     const { member } = StytchB2BContext.useStytchMember();
     const containerEl = React.useRef(null);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!StytchB2BContext.isUIClient(stytchClient)) {
-            throw Error(invariant.noHeadlessClientError);
+            throw Error(StytchSSRProxy.noHeadlessClientError);
         }
         if (!containerEl.current) {
             return;
@@ -121,16 +122,92 @@ const B2BIdentityProvider = ({ styles, callbacks, getIDPConsentManifest }) => {
     return React__default["default"].createElement("div", { ref: containerEl });
 };
 
-exports.StytchB2BProvider = StytchB2BContext.StytchB2BProvider;
+/**
+ * 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 = StytchB2BContext.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, isInitialized, fromCache} = useStytchMemberSession();
+ * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session, isInitialized]);
+ */
+const useStytchMemberSession = StytchB2BContext.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, isInitialized, fromCache} = useStytchOrganization();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<p>Welcome to {organization.organization_name}</p>);
+ */
+const useStytchOrganization = StytchB2BContext.useStytchOrganization;
+/**
+ * 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 = StytchB2BContext.useStytchIsAuthorized;
+const withStytchMember = StytchB2BContext.withStytchMember;
+const withStytchMemberSession = StytchB2BContext.withStytchMemberSession;
+const withStytchOrganization = StytchB2BContext.withStytchOrganization;
+/**
+ * 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>')
+ *
+ * ReactDOM.render(
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
+const StytchB2BProvider = ({ stytch, children, assumeHydrated = true, }) => {
+    return (React__default["default"].createElement(StytchB2BContext.StytchB2BProvider, { stytch: stytch, assumeHydrated: assumeHydrated }, children));
+};
+
 exports.useStytchB2BClient = StytchB2BContext.useStytchB2BClient;
-exports.useStytchIsAuthorized = StytchB2BContext.useStytchIsAuthorized;
-exports.useStytchMember = StytchB2BContext.useStytchMember;
-exports.useStytchMemberSession = StytchB2BContext.useStytchMemberSession;
-exports.useStytchOrganization = StytchB2BContext.useStytchOrganization;
 exports.withStytchB2BClient = StytchB2BContext.withStytchB2BClient;
-exports.withStytchMember = StytchB2BContext.withStytchMember;
-exports.withStytchMemberSession = StytchB2BContext.withStytchMemberSession;
-exports.withStytchOrganization = StytchB2BContext.withStytchOrganization;
 exports.withStytchPermissions = StytchB2BContext.withStytchPermissions;
 exports.B2BIdentityProvider = B2BIdentityProvider;
 exports.StytchB2B = StytchB2B;
+exports.StytchB2BProvider = StytchB2BProvider;
+exports.useStytchIsAuthorized = useStytchIsAuthorized;
+exports.useStytchMember = useStytchMember;
+exports.useStytchMemberSession = useStytchMemberSession;
+exports.useStytchOrganization = useStytchOrganization;
+exports.withStytchMember = withStytchMember;
+exports.withStytchMemberSession = withStytchMemberSession;
+exports.withStytchOrganization = withStytchOrganization;

package/dist/b2b/index.ui.d.ts

@@ -0,0 +1,17 @@
+import { StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchB2BHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchB2BUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ * @returns A {@link StytchB2BUIClient}
+ */
+declare const createStytchB2BUIClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(_PUBLIC_TOKEN: string, options?: import("@stytch/core/public").StytchClientOptions | undefined) => StytchB2BUIClient<TProjectConfiguration>;
+export { createStytchB2BUIClient };

package/dist/b2b/index.ui.esm.d.ts

@@ -0,0 +1,17 @@
+import { StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchB2BHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchB2BUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ * @returns A {@link StytchB2BUIClient}
+ */
+declare const createStytchB2BUIClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(_PUBLIC_TOKEN: string, options?: import("@stytch/core/public").StytchClientOptions | undefined) => StytchB2BUIClient<TProjectConfiguration>;
+export { createStytchB2BUIClient };

package/dist/b2b/index.ui.esm.js

@@ -0,0 +1,25 @@
+import { StytchB2BUIClient } from '@stytch/vanilla-js/b2b';
+import { c as createStytchSSRProxy } from '../StytchSSRProxy-34c789b5.js';
+
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchB2BHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchB2BUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ * @returns A {@link StytchB2BUIClient}
+ */
+const createStytchB2BUIClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return createStytchSSRProxy();
+    }
+    return new StytchB2BUIClient(...args);
+};
+
+export { createStytchB2BUIClient };

package/dist/b2b/index.ui.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var b2b = require('@stytch/vanilla-js/b2b');
+var StytchSSRProxy = require('../StytchSSRProxy-86bc42b3.js');
+
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchB2BHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchB2BUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ * @returns A {@link StytchB2BUIClient}
+ */
+const createStytchB2BUIClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return StytchSSRProxy.createStytchSSRProxy();
+    }
+    return new b2b.StytchB2BUIClient(...args);
+};
+
+exports.createStytchB2BUIClient = createStytchB2BUIClient;

package/dist/errors-d9d5fbc8.d.ts

@@ -0,0 +1,5 @@
+declare const noProviderError: (item: string, provider?: string) => string;
+declare const providerMustBeUniqueError = "You cannot render a <StytchProvider> inside another <StytchProvider>.";
+declare const noHeadlessClientError = "Tried to create a Stytch Login UI element using the Stytch Headless SDK.\nYou must use the UI SDK to use UI elements.\nPlease make sure you are using a Stytch UI client, not a Stytch Headless client.";
+declare const cannotInvokeMethodOnServerError: (path: string) => string;
+export { noProviderError, providerMustBeUniqueError, noHeadlessClientError, cannotInvokeMethodOnServerError };

package/dist/index-b14d4efe.d.ts

@@ -1,2 +1,2 @@
 export { createDeepEqual } from "./createDeepEqual-5555f2e1.js";
-export { mergeWithStableProps } from "./invariant-568a7633.js";
+export { mergeWithStableProps } from "./useIsomorphicLayoutEffect-1babb81e.js";

package/dist/index.d.ts

@@ -1,8 +1,28 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { Callbacks, StytchLoginConfig, StyleConfig, StytchProjectConfigurationInput, Session, StytchUIClient, User } from "@stytch/vanilla-js";
+import { StytchProjectConfigurationInput, StytchUIClient, Callbacks, StytchLoginConfig, StyleConfig } from "@stytch/vanilla-js";
 import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+import { Session as Session$0 } from "@stytch/vanilla-js/headless";
+import { User as User$0 } from "@stytch/vanilla-js/headless";
+/**
+ * The Stytch Client object passed in to <StytchProvider /> in your application root.
+ * Either a StytchUIClient or StytchHeadlessClient.
+ */
+type StytchClient<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchUIClient<TProjectConfiguration> | StytchHeadlessClient<TProjectConfiguration>;
+/**
+ * Returns the Stytch client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytch();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+declare const useStytch: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>() => StytchClient<TProjectConfiguration>;
+declare const withStytch: <T extends object, TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(Component: React.ComponentType<T & {
+    stytch: StytchClient<TProjectConfiguration>;
+}>) => React.ComponentType<T>;
 interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
      * A {@link StytchLoginConfig} object. Add products and product-specific config to this object to change the login methods shown.
@@ -189,86 +209,104 @@ declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<
  * />
  */
 declare const IdentityProvider: ({ styles, callbacks }: IdentityProviderProps) => React.JSX.Element;
-/**
- * The Stytch Client object passed in to <StytchProvider /> in your application root.
- * Either a StytchUIClient or StytchHeadlessClient.
- */
-type StytchClient<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchUIClient<TProjectConfiguration> | StytchHeadlessClient<TProjectConfiguration>;
-type SWRUser = {
-    /**
-     * Either the active {@link User} object, or null if the user is not logged in.
-     */
-    user: User | null;
-    /**
-     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
-     */
-    fromCache: boolean;
-};
-type SWRSession = {
-    /**
-     * Either the active {@link Session} object, or null if the user is not logged in.
-     */
-    session: Session | null;
-    /**
-     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
-     */
-    fromCache: boolean;
-};
 /**
  * Returns the active User.
  * 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 user data is from persistent storage.
  * @example
- * const {user} = useStytchUser();
+ * const {user, isInitialized, fromCache} = useStytchUser();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
  * return (<h1>Welcome, {user.name.first_name}</h1>);
  */
-declare const useStytchUser: () => SWRUser;
+declare const useStytchUser$0: <TAssumeHydrated extends boolean = true>() => TAssumeHydrated extends true ? {
+    user: User$0 | null;
+    fromCache: boolean;
+    isInitialized: true;
+} : {
+    user: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    user: User$0 | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
 /**
  * Returns the active user's Stytch 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} = useStytchSession();
+ * const {session, isInitialized, fromCache} = useStytchSession();
  * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
  *   if (!session) {
  *     router.replace('/login')
  *   }
- * }, [session]);
+ * }, [session, isInitialized]);
  */
-declare const useStytchSession: () => SWRSession;
-/**
- * Returns the Stytch client stored in the Stytch context.
- *
- * @example
- * const stytch = useStytch();
- * useEffect(() => {
- *   stytch.magicLinks.authenticate('...')
- * }, [stytch]);
- */
-declare const useStytch: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>() => StytchClient<TProjectConfiguration>;
-declare const withStytch: <T extends object, TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(Component: React.ComponentType<T & {
-    stytch: StytchClient<TProjectConfiguration>;
-}>) => React.ComponentType<T>;
-declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
-    stytchUser: User | null;
+declare const useStytchSession$0: <TAssumeHydrated extends boolean = true>() => TAssumeHydrated extends true ? {
+    session: Session$0 | null;
+    fromCache: boolean;
+    isInitialized: true;
+} : {
+    session: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    session: Session$0 | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
+declare const withStytchUser$0: <T extends object, TAssumeHydrated extends boolean = true>(Component: React.ComponentType<T & {
+    stytchUser: User$0 | null;
+    stytchUserIsInitialized: boolean;
     stytchUserIsFromCache: boolean;
 }>) => React.ComponentType<T>;
-declare const withStytchSession: <T extends object>(Component: React.ComponentType<T & {
-    stytchSession: Session | null;
+declare const withStytchSession$0: <T extends object, TAssumeHydrated extends boolean = true>(Component: React.ComponentType<T & {
+    stytchSession: Session$0 | null;
+    stytchSessionIsInitialized: boolean;
     stytchSessionIsFromCache: boolean;
 }>) => React.ComponentType<T>;
-interface StytchProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
+/**
+ * The Stytch Client object passed in to <StytchProvider /> in your application root.
+ * Either a StytchUIClient or StytchHeadlessClient.
+ */
+type StytchClient$0<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchUIClient<TProjectConfiguration> | StytchHeadlessClient<TProjectConfiguration>;
+interface StytchProviderProps$0<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
      * A Stytch client instance, either a {@link StytchUIClient} or {@link StytchHeadlessClient}
      */
-    stytch: StytchClient<TProjectConfiguration>;
+    stytch: StytchClient$0<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`.
+     *
+     * If you encounter hydration errors relating to the use of this component,
+     * set this to `false`.
+     *
+     * This value defaults to `true` in `@stytch/react`.
+     */
+    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 StytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
  *
  * ReactDOM.render(
  *   <StytchProvider stytch={stytch}>
@@ -277,6 +315,6 @@ interface StytchProviderProps<TProjectConfiguration extends StytchProjectConfigu
  *   document.getElementById('root'),
  * )
  */
-declare const StytchProvider: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ stytch, children }: StytchProviderProps<TProjectConfiguration>) => JSX.Element;
-export { StytchLogin, StytchPasswordReset, StytchPasskeyRegistration, IdentityProvider, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
-export type { StytchProviderProps };
+declare const StytchProvider$0: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ stytch, children, assumeHydrated }: StytchProviderProps$0<TProjectConfiguration>) => JSX.Element;
+export { StytchLogin, StytchPasswordReset, StytchPasskeyRegistration, IdentityProvider, StytchProvider$0 as StytchProvider, useStytch, useStytchSession$0 as useStytchSession, useStytchUser$0 as useStytchUser, withStytch, withStytchSession$0 as withStytchSession, withStytchUser$0 as withStytchUser };
+export type { StytchProviderProps$0 as StytchProviderProps, StytchProps, StytchResetPasswordProps, IdentityProviderProps };

package/dist/index.esm.d.ts

@@ -1,8 +1,28 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { Callbacks, StytchLoginConfig, StyleConfig, StytchProjectConfigurationInput, Session, StytchUIClient, User } from "@stytch/vanilla-js";
+import { StytchProjectConfigurationInput, StytchUIClient, Callbacks, StytchLoginConfig, StyleConfig } from "@stytch/vanilla-js";
 import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+import { Session as Session$0 } from "@stytch/vanilla-js/headless";
+import { User as User$0 } from "@stytch/vanilla-js/headless";
+/**
+ * The Stytch Client object passed in to <StytchProvider /> in your application root.
+ * Either a StytchUIClient or StytchHeadlessClient.
+ */
+type StytchClient<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchUIClient<TProjectConfiguration> | StytchHeadlessClient<TProjectConfiguration>;
+/**
+ * Returns the Stytch client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytch();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+declare const useStytch: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>() => StytchClient<TProjectConfiguration>;
+declare const withStytch: <T extends object, TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(Component: React.ComponentType<T & {
+    stytch: StytchClient<TProjectConfiguration>;
+}>) => React.ComponentType<T>;
 interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
      * A {@link StytchLoginConfig} object. Add products and product-specific config to this object to change the login methods shown.
@@ -189,86 +209,104 @@ declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<
  * />
  */
 declare const IdentityProvider: ({ styles, callbacks }: IdentityProviderProps) => React.JSX.Element;
-/**
- * The Stytch Client object passed in to <StytchProvider /> in your application root.
- * Either a StytchUIClient or StytchHeadlessClient.
- */
-type StytchClient<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchUIClient<TProjectConfiguration> | StytchHeadlessClient<TProjectConfiguration>;
-type SWRUser = {
-    /**
-     * Either the active {@link User} object, or null if the user is not logged in.
-     */
-    user: User | null;
-    /**
-     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
-     */
-    fromCache: boolean;
-};
-type SWRSession = {
-    /**
-     * Either the active {@link Session} object, or null if the user is not logged in.
-     */
-    session: Session | null;
-    /**
-     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
-     */
-    fromCache: boolean;
-};
 /**
  * Returns the active User.
  * 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 user data is from persistent storage.
  * @example
- * const {user} = useStytchUser();
+ * const {user, isInitialized, fromCache} = useStytchUser();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
  * return (<h1>Welcome, {user.name.first_name}</h1>);
  */
-declare const useStytchUser: () => SWRUser;
+declare const useStytchUser$0: <TAssumeHydrated extends boolean = true>() => TAssumeHydrated extends true ? {
+    user: User$0 | null;
+    fromCache: boolean;
+    isInitialized: true;
+} : {
+    user: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    user: User$0 | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
 /**
  * Returns the active user's Stytch 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} = useStytchSession();
+ * const {session, isInitialized, fromCache} = useStytchSession();
  * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
  *   if (!session) {
  *     router.replace('/login')
  *   }
- * }, [session]);
+ * }, [session, isInitialized]);
  */
-declare const useStytchSession: () => SWRSession;
-/**
- * Returns the Stytch client stored in the Stytch context.
- *
- * @example
- * const stytch = useStytch();
- * useEffect(() => {
- *   stytch.magicLinks.authenticate('...')
- * }, [stytch]);
- */
-declare const useStytch: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>() => StytchClient<TProjectConfiguration>;
-declare const withStytch: <T extends object, TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(Component: React.ComponentType<T & {
-    stytch: StytchClient<TProjectConfiguration>;
-}>) => React.ComponentType<T>;
-declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
-    stytchUser: User | null;
+declare const useStytchSession$0: <TAssumeHydrated extends boolean = true>() => TAssumeHydrated extends true ? {
+    session: Session$0 | null;
+    fromCache: boolean;
+    isInitialized: true;
+} : {
+    session: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    session: Session$0 | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
+declare const withStytchUser$0: <T extends object, TAssumeHydrated extends boolean = true>(Component: React.ComponentType<T & {
+    stytchUser: User$0 | null;
+    stytchUserIsInitialized: boolean;
     stytchUserIsFromCache: boolean;
 }>) => React.ComponentType<T>;
-declare const withStytchSession: <T extends object>(Component: React.ComponentType<T & {
-    stytchSession: Session | null;
+declare const withStytchSession$0: <T extends object, TAssumeHydrated extends boolean = true>(Component: React.ComponentType<T & {
+    stytchSession: Session$0 | null;
+    stytchSessionIsInitialized: boolean;
     stytchSessionIsFromCache: boolean;
 }>) => React.ComponentType<T>;
-interface StytchProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
+/**
+ * The Stytch Client object passed in to <StytchProvider /> in your application root.
+ * Either a StytchUIClient or StytchHeadlessClient.
+ */
+type StytchClient$0<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchUIClient<TProjectConfiguration> | StytchHeadlessClient<TProjectConfiguration>;
+interface StytchProviderProps$0<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
      * A Stytch client instance, either a {@link StytchUIClient} or {@link StytchHeadlessClient}
      */
-    stytch: StytchClient<TProjectConfiguration>;
+    stytch: StytchClient$0<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`.
+     *
+     * If you encounter hydration errors relating to the use of this component,
+     * set this to `false`.
+     *
+     * This value defaults to `true` in `@stytch/react`.
+     */
+    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 StytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
  *
  * ReactDOM.render(
  *   <StytchProvider stytch={stytch}>
@@ -277,6 +315,6 @@ interface StytchProviderProps<TProjectConfiguration extends StytchProjectConfigu
  *   document.getElementById('root'),
  * )
  */
-declare const StytchProvider: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ stytch, children }: StytchProviderProps<TProjectConfiguration>) => JSX.Element;
-export { StytchLogin, StytchPasswordReset, StytchPasskeyRegistration, IdentityProvider, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
-export type { StytchProviderProps };
+declare const StytchProvider$0: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ stytch, children, assumeHydrated }: StytchProviderProps$0<TProjectConfiguration>) => JSX.Element;
+export { StytchLogin, StytchPasswordReset, StytchPasskeyRegistration, IdentityProvider, StytchProvider$0 as StytchProvider, useStytch, useStytchSession$0 as useStytchSession, useStytchUser$0 as useStytchUser, withStytch, withStytchSession$0 as withStytchSession, withStytchUser$0 as withStytchUser };
+export type { StytchProviderProps$0 as StytchProviderProps, StytchProps, StytchResetPasswordProps, IdentityProviderProps };