@stytch/react 19.4.4 → 19.5.0

package/dist/index.esm.js

@@ -1,13 +1,16 @@
-import React, { createContext, useContext, useMemo, useEffect, useRef, useLayoutEffect } from 'react';
-import { i as invariant, u as useAsyncState, m as mergeWithStableProps, n as noProviderError, p as providerMustBeUniqueError, a as noSSRError, b as noHeadlessClientError } from './invariant-568a7633.js';
+import React, { createContext, useContext, useMemo, useCallback, useRef, useEffect } from 'react';
+import { i as invariant, u as useAsyncState, m as mergeWithStableProps, a as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-1babb81e.js';
+import { n as noProviderError, p as providerMustBeUniqueError, i as isStytchSSRProxy, a as noHeadlessClientError } from './StytchSSRProxy-34c789b5.js';
 
 const initialUser = {
     user: null,
     fromCache: false,
+    isInitialized: false,
 };
 const initialSession = {
     session: null,
     fromCache: false,
+    isInitialized: false,
 };
 const StytchContext = createContext({ isMounted: false });
 const StytchUserContext = createContext(initialUser);
@@ -19,28 +22,36 @@ const isUIClient = (client) => {
 /**
  * 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>);
  */
-const useStytchUser = () => {
+const useStytchUser$1 = () => {
     invariant(useIsMounted__INTERNAL(), noProviderError('useStytchUser'));
     return useContext(StytchUserContext);
 };
 /**
  * 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]);
  */
-const useStytchSession = () => {
+const useStytchSession$1 = () => {
     invariant(useIsMounted__INTERNAL(), noProviderError('useStytchSession'));
     return useContext(StytchSessionContext);
 };
@@ -66,20 +77,20 @@ const withStytch = (Component) => {
     WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
     return WithStytch;
 };
-const withStytchUser = (Component) => {
+const withStytchUser$1 = (Component) => {
     const WithStytchUser = (props) => {
         invariant(useIsMounted__INTERNAL(), noProviderError('withStytchUser'));
-        const { user, fromCache } = useStytchUser();
-        return React.createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsFromCache: fromCache }));
+        const { user, isInitialized, fromCache } = useStytchUser$1();
+        return (React.createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsInitialized: isInitialized, stytchUserIsFromCache: fromCache })));
     };
     WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchUser;
 };
-const withStytchSession = (Component) => {
+const withStytchSession$1 = (Component) => {
     const WithStytchSession = (props) => {
         invariant(useIsMounted__INTERNAL(), noProviderError('withStytchSession'));
-        const { session, fromCache } = useStytchSession();
-        return React.createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsFromCache: fromCache }));
+        const { session, isInitialized, fromCache } = useStytchSession$1();
+        return (React.createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsInitialized: isInitialized, stytchSessionIsFromCache: fromCache })));
     };
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
@@ -88,32 +99,46 @@ const withStytchSession = (Component) => {
  * 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(
+ * return (
  *   <StytchProvider stytch={stytch}>
  *     <App />
- *   </StytchProvider>,
- *   document.getElementById('root'),
+ *   </StytchProvider>
  * )
  */
-const StytchProvider = ({ stytch, children, }) => {
+const StytchProvider$1 = ({ stytch, children, assumeHydrated = false, }) => {
     invariant(!useIsMounted__INTERNAL(), providerMustBeUniqueError);
-    invariant(typeof window !== 'undefined', noSSRError);
+    invariant(!assumeHydrated || typeof window !== 'undefined', 'The `assumeHydrated` prop must be set to `false` when using StytchProvider in a server environment.');
     const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [{ user, session }, setClientState] = useAsyncState({
-        session: stytch.session.getInfo(),
-        user: stytch.user.getInfo(),
-    });
-    useEffect(() => stytch.onStateChange(() => {
-        setClientState((oldState) => {
-            const newState = {
-                session: stytch.session.getInfo(),
-                user: stytch.user.getInfo(),
-            };
-            return mergeWithStableProps(oldState, newState);
-        });
-    }), [setClientState, stytch]);
+    const getHydratedState = useCallback(() => {
+        return {
+            session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
+            user: Object.assign(Object.assign({}, stytch.user.getInfo()), { isInitialized: true }),
+        };
+    }, [stytch]);
+    const getInitialState = () => {
+        return {
+            session: initialSession,
+            user: initialUser,
+        };
+    };
+    const [{ user, session }, 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(StytchContext.Provider, { value: ctx },
         React.createElement(StytchUserContext.Provider, { value: user },
             React.createElement(StytchSessionContext.Provider, { value: session }, children))));
@@ -152,7 +177,7 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchLogin />'));
     const stytchClient = useStytch();
     const containerEl = useRef(null);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(noHeadlessClientError);
         }
@@ -206,7 +231,7 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchResetPassword />'));
     const stytchClient = useStytch();
     const containerEl = useRef(null);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(noHeadlessClientError);
         }
@@ -257,9 +282,9 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
 const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchPasskeyRegistration />'));
     const stytchClient = useStytch();
-    const user = useStytchUser();
+    const user = useStytchUser$1();
     const containerEl = useRef(null);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(noHeadlessClientError);
         }
@@ -309,9 +334,9 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
 const IdentityProvider = ({ styles, callbacks }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<IdentityProvider />'));
     const stytchClient = useStytch();
-    const user = useStytchUser();
+    const user = useStytchUser$1();
     const containerEl = useRef(null);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(noHeadlessClientError);
         }
@@ -331,4 +356,53 @@ const IdentityProvider = ({ styles, callbacks }) => {
     return React.createElement("div", { ref: containerEl });
 };
 
+/**
+ * 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, isInitialized, fromCache} = useStytchUser();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<h1>Welcome, {user.name.first_name}</h1>);
+ */
+const useStytchUser = useStytchUser$1;
+/**
+ * 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, isInitialized, fromCache} = useStytchSession();
+ * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session, isInitialized]);
+ */
+const useStytchSession = useStytchSession$1;
+const withStytchUser = withStytchUser$1;
+const withStytchSession = withStytchSession$1;
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
+const StytchProvider = ({ stytch, children, assumeHydrated = true, }) => {
+    return (React.createElement(StytchProvider$1, { stytch: stytch, assumeHydrated: assumeHydrated }, children));
+};
+
 export { IdentityProvider, StytchLogin, StytchPasskeyRegistration, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };

package/dist/index.headless.d.ts

@@ -0,0 +1,16 @@
+import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+/**
+ * Creates a Headless Stytch client object to call the stytch APIs.
+ * The Stytch client is not available serverside.
+ * @example
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ * @returns A {@link StytchHeadlessClient}
+ */
+declare const createStytchHeadlessClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(_PUBLIC_TOKEN: string, options?: import("@stytch/core/public").StytchClientOptions | undefined) => StytchHeadlessClient<TProjectConfiguration>;
+export { createStytchHeadlessClient };

package/dist/index.headless.esm.d.ts

@@ -0,0 +1,16 @@
+import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+/**
+ * Creates a Headless Stytch client object to call the stytch APIs.
+ * The Stytch client is not available serverside.
+ * @example
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ * @returns A {@link StytchHeadlessClient}
+ */
+declare const createStytchHeadlessClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(_PUBLIC_TOKEN: string, options?: import("@stytch/core/public").StytchClientOptions | undefined) => StytchHeadlessClient<TProjectConfiguration>;
+export { createStytchHeadlessClient };

package/dist/index.headless.esm.js

@@ -0,0 +1,24 @@
+import { StytchHeadlessClient } from '@stytch/vanilla-js/headless';
+import { c as createStytchSSRProxy } from './StytchSSRProxy-34c789b5.js';
+
+/**
+ * Creates a Headless Stytch client object to call the stytch APIs.
+ * The Stytch client is not available serverside.
+ * @example
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ * @returns A {@link StytchHeadlessClient}
+ */
+const createStytchHeadlessClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return createStytchSSRProxy();
+    }
+    return new StytchHeadlessClient(...args);
+};
+
+export { createStytchHeadlessClient };

package/dist/index.headless.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var headless = require('@stytch/vanilla-js/headless');
+var StytchSSRProxy = require('./StytchSSRProxy-86bc42b3.js');
+
+/**
+ * Creates a Headless Stytch client object to call the stytch APIs.
+ * The Stytch client is not available serverside.
+ * @example
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ * @returns A {@link StytchHeadlessClient}
+ */
+const createStytchHeadlessClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return StytchSSRProxy.createStytchSSRProxy();
+    }
+    return new headless.StytchHeadlessClient(...args);
+};
+
+exports.createStytchHeadlessClient = createStytchHeadlessClient;

package/dist/index.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 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 }; }
 
@@ -12,10 +13,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const initialUser = {
     user: null,
     fromCache: false,
+    isInitialized: false,
 };
 const initialSession = {
     session: null,
     fromCache: false,
+    isInitialized: false,
 };
 const StytchContext = React.createContext({ isMounted: false });
 const StytchUserContext = React.createContext(initialUser);
@@ -27,29 +30,37 @@ const isUIClient = (client) => {
 /**
  * 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>);
  */
-const useStytchUser = () => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchUser'));
+const useStytchUser$1 = () => {
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchUser'));
     return React.useContext(StytchUserContext);
 };
 /**
  * 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]);
  */
-const useStytchSession = () => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchSession'));
+const useStytchSession$1 = () => {
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchSession'));
     return React.useContext(StytchSessionContext);
 };
 /**
@@ -63,31 +74,31 @@ const useStytchSession = () => {
  */
 const useStytch = () => {
     const ctx = React.useContext(StytchContext);
-    invariant.invariant(ctx.isMounted, invariant.noProviderError('useStytch'));
+    useIsomorphicLayoutEffect.invariant(ctx.isMounted, StytchSSRProxy.noProviderError('useStytch'));
     return ctx.client;
 };
 const withStytch = (Component) => {
     const WithStytch = (props) => {
-        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytch'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytch'));
         return React__default["default"].createElement(Component, Object.assign({}, props, { stytch: useStytch() }));
     };
     WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
     return WithStytch;
 };
-const withStytchUser = (Component) => {
+const withStytchUser$1 = (Component) => {
     const WithStytchUser = (props) => {
-        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytchUser'));
-        const { user, fromCache } = useStytchUser();
-        return React__default["default"].createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsFromCache: fromCache }));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchUser'));
+        const { user, isInitialized, fromCache } = useStytchUser$1();
+        return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsInitialized: isInitialized, stytchUserIsFromCache: fromCache })));
     };
     WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchUser;
 };
-const withStytchSession = (Component) => {
+const withStytchSession$1 = (Component) => {
     const WithStytchSession = (props) => {
-        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytchSession'));
-        const { session, fromCache } = useStytchSession();
-        return React__default["default"].createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsFromCache: fromCache }));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchSession'));
+        const { session, isInitialized, fromCache } = useStytchSession$1();
+        return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsInitialized: isInitialized, stytchSessionIsFromCache: fromCache })));
     };
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
@@ -96,32 +107,46 @@ const withStytchSession = (Component) => {
  * 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(
+ * return (
  *   <StytchProvider stytch={stytch}>
  *     <App />
- *   </StytchProvider>,
- *   document.getElementById('root'),
+ *   </StytchProvider>
  * )
  */
-const StytchProvider = ({ stytch, children, }) => {
-    invariant.invariant(!useIsMounted__INTERNAL(), invariant.providerMustBeUniqueError);
-    invariant.invariant(typeof window !== 'undefined', invariant.noSSRError);
+const StytchProvider$1 = ({ stytch, children, assumeHydrated = false, }) => {
+    useIsomorphicLayoutEffect.invariant(!useIsMounted__INTERNAL(), StytchSSRProxy.providerMustBeUniqueError);
+    useIsomorphicLayoutEffect.invariant(!assumeHydrated || typeof window !== 'undefined', 'The `assumeHydrated` prop must be set to `false` when using StytchProvider in a server environment.');
     const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [{ user, session }, setClientState] = invariant.useAsyncState({
-        session: stytch.session.getInfo(),
-        user: stytch.user.getInfo(),
-    });
-    React.useEffect(() => stytch.onStateChange(() => {
-        setClientState((oldState) => {
-            const newState = {
-                session: stytch.session.getInfo(),
-                user: stytch.user.getInfo(),
-            };
-            return invariant.mergeWithStableProps(oldState, newState);
-        });
-    }), [setClientState, stytch]);
+    const getHydratedState = React.useCallback(() => {
+        return {
+            session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
+            user: Object.assign(Object.assign({}, stytch.user.getInfo()), { isInitialized: true }),
+        };
+    }, [stytch]);
+    const getInitialState = () => {
+        return {
+            session: initialSession,
+            user: initialUser,
+        };
+    };
+    const [{ user, session }, 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(StytchContext.Provider, { value: ctx },
         React__default["default"].createElement(StytchUserContext.Provider, { value: user },
             React__default["default"].createElement(StytchSessionContext.Provider, { value: session }, children))));
@@ -157,12 +182,12 @@ const StytchProvider = ({ stytch, children, }) => {
  * />
  */
 const StytchLogin = ({ config, styles, callbacks, }) => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchLogin />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchLogin />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
-            throw Error(invariant.noHeadlessClientError);
+            throw Error(StytchSSRProxy.noHeadlessClientError);
         }
         if (!containerEl.current) {
             return;
@@ -211,12 +236,12 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
  * />
  */
 const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, }) => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchResetPassword />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchResetPassword />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
-            throw Error(invariant.noHeadlessClientError);
+            throw Error(StytchSSRProxy.noHeadlessClientError);
         }
         if (!containerEl.current) {
             return;
@@ -263,13 +288,13 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
  * />
  */
 const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchPasskeyRegistration />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchPasskeyRegistration />'));
     const stytchClient = useStytch();
-    const user = useStytchUser();
+    const user = useStytchUser$1();
     const containerEl = React.useRef(null);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
-            throw Error(invariant.noHeadlessClientError);
+            throw Error(StytchSSRProxy.noHeadlessClientError);
         }
         if (!containerEl.current) {
             return;
@@ -315,13 +340,13 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
  * />
  */
 const IdentityProvider = ({ styles, callbacks }) => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<IdentityProvider />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<IdentityProvider />'));
     const stytchClient = useStytch();
-    const user = useStytchUser();
+    const user = useStytchUser$1();
     const containerEl = React.useRef(null);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
-            throw Error(invariant.noHeadlessClientError);
+            throw Error(StytchSSRProxy.noHeadlessClientError);
         }
         if (!containerEl.current) {
             return;
@@ -339,6 +364,55 @@ const IdentityProvider = ({ styles, callbacks }) => {
     return React__default["default"].createElement("div", { ref: containerEl });
 };
 
+/**
+ * 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, isInitialized, fromCache} = useStytchUser();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<h1>Welcome, {user.name.first_name}</h1>);
+ */
+const useStytchUser = useStytchUser$1;
+/**
+ * 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, isInitialized, fromCache} = useStytchSession();
+ * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session, isInitialized]);
+ */
+const useStytchSession = useStytchSession$1;
+const withStytchUser = withStytchUser$1;
+const withStytchSession = withStytchSession$1;
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
+const StytchProvider = ({ stytch, children, assumeHydrated = true, }) => {
+    return (React__default["default"].createElement(StytchProvider$1, { stytch: stytch, assumeHydrated: assumeHydrated }, children));
+};
+
 exports.IdentityProvider = IdentityProvider;
 exports.StytchLogin = StytchLogin;
 exports.StytchPasskeyRegistration = StytchPasskeyRegistration;

package/dist/index.ui.d.ts

@@ -0,0 +1,17 @@
+import { StytchUIClient } from "@stytch/vanilla-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 createStytchHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ * @returns A {@link StytchUIClient}
+ */
+declare const createStytchUIClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(_PUBLIC_TOKEN: string, options?: import("@stytch/core/public").StytchClientOptions | undefined) => StytchUIClient<TProjectConfiguration>;
+export { createStytchUIClient };