@stytch/nextjs 18.0.0 → 20.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @stytch/nextjs
 
+## 20.0.0
+
+### Patch Changes
+
+- Updated dependencies [cbab0c30]
+  - @stytch/vanilla-js@4.12.0
+
+## 19.0.0
+
+### Major Changes
+
+- a0fbe9f: Update minimum peer dependency on `@stytch/vanilla-js` to `^4.9.0`
+
+### Patch Changes
+
+- Updated dependencies [a0fbe9f]
+- Updated dependencies [a0fbe9f]
+  - @stytch/vanilla-js@4.9.0
+
 ## 18.0.0
 
 ### Patch Changes

package/dist/b2b/index.esm.js

@@ -1,5 +1,56 @@
 import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo, useLayoutEffect } from 'react';
 
+const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
+    // If comparing functions, this may need some work. Not sure the
+    // best path for this: compare instance (what it currently does),
+    // stringify and compare, etc.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const deepEqual = (a, b) => {
+        // Ensures type is the same
+        if (typeof a !== typeof b)
+            return false;
+        // arrays, null, and objects all have type 'object'
+        if (a === null || b === null)
+            return a === b;
+        if (typeof a === 'object') {
+            if (Object.keys(a).length !== Object.keys(b).length || Object.keys(a).some((k) => !(k in b)))
+                return false;
+            return Object.entries(a)
+                .filter(([k]) => !KEYS_TO_EXCLUDE.includes(k))
+                .every(([k, v]) => deepEqual(v, b[k]));
+        }
+        // boolean, string, number, undefined
+        return a === b;
+    };
+    return deepEqual;
+};
+
+const deepEqual = createDeepEqual();
+/**
+ * Returns a version of `newValue` whose properties that are deeply equal to
+ * those in `oldValue` are replaced with those from `oldValue`. This provides a
+ * limited form of "structural sharing" that provides a stable reference for
+ * unchanged slices of the object.
+ *
+ * If `oldValue` and `newValue` are referentially equal, the same value is
+ * returned.
+ *
+ * @param oldValue The old value
+ * @param newValue The new value
+ */
+const mergeWithStableProps = (oldValue, newValue) => {
+    // If the values are already referentially the same, just return the new value
+    if (oldValue === newValue) {
+        return newValue;
+    }
+    return Object.keys(oldValue).reduce((acc, key) => {
+        if (key in newValue && deepEqual(oldValue[key], newValue[key])) {
+            acc[key] = oldValue[key];
+        }
+        return acc;
+    }, Object.assign({}, newValue));
+};
+
 const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
 const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
 You must use the UI SDK to use UI elements.
@@ -256,53 +307,35 @@ const withStytchPermissions = (Component) => {
  */
 const StytchB2BProvider = ({ stytch, children }) => {
     const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [member, setMember] = useAsyncState(initialMember);
-    const [session, setMemberSession] = useAsyncState(initialMemberSession);
-    const [organization, setOrganization] = useAsyncState(initialOrganization);
+    const [{ member, session, organization }, setClientState] = useAsyncState({
+        member: initialMember,
+        session: initialMemberSession,
+        organization: initialOrganization,
+    });
     useEffect(() => {
         if (isStytchSSRProxy(stytch)) {
             return;
         }
-        setMember({
-            member: stytch.self.getSync(),
-            fromCache: true,
-            isInitialized: true,
+        setClientState({
+            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 }),
         });
-        setMemberSession({
-            session: stytch.session.getSync(),
-            fromCache: true,
-            isInitialized: true,
+        return stytch.onStateChange(() => {
+            setClientState((oldState) => {
+                const newState = {
+                    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 }),
+                };
+                return mergeWithStableProps(oldState, newState);
+            });
         });
-        setOrganization({
-            organization: stytch.organization.getSync(),
-            fromCache: true,
-            isInitialized: true,
-        });
-        const unsubscribeMember = stytch.self.onChange((member) => setMember({ member, fromCache: false, isInitialized: true }));
-        const unsubscribeMemberSession = stytch.session.onChange((session) => setMemberSession({ session, fromCache: false, isInitialized: true }));
-        const unsubscribeOrganization = stytch.organization.onChange((organization) => setOrganization({ organization, fromCache: false, isInitialized: true }));
-        return () => {
-            unsubscribeMember();
-            unsubscribeMemberSession();
-            unsubscribeOrganization();
-        };
-    }, [stytch, setMember, setMemberSession, setOrganization]);
-    const allValuesReady = !!member.member === !!session.session && !!session.session === !!organization.organization;
-    const finalValues = allValuesReady
-        ? {
-            member,
-            session,
-            organization,
-        }
-        : {
-            member: initialMember,
-            session: initialMemberSession,
-            organization: initialOrganization,
-        };
+    }, [setClientState, stytch]);
     return (React.createElement(StytchContext.Provider, { value: ctx },
-        React.createElement(StytchOrganizationContext.Provider, { value: finalValues.organization },
-            React.createElement(StytchMemberContext.Provider, { value: finalValues.member },
-                React.createElement(StytchMemberSessionContext.Provider, { value: finalValues.session }, children)))));
+        React.createElement(StytchOrganizationContext.Provider, { value: organization },
+            React.createElement(StytchMemberContext.Provider, { value: member },
+                React.createElement(StytchMemberSessionContext.Provider, { value: session }, children)))));
 };
 
 /**

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

@@ -12,5 +12,5 @@ import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
  * )
  * @returns A {@link StytchB2BHeadlessClient}
  */
-declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("@stytch/core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient;
+declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient;
 export { createStytchB2BHeadlessClient };

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

@@ -12,5 +12,5 @@ import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
  * )
  * @returns A {@link StytchB2BHeadlessClient}
  */
-declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("@stytch/core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient;
+declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient;
 export { createStytchB2BHeadlessClient };

package/dist/b2b/index.js

@@ -8,6 +8,57 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
+    // If comparing functions, this may need some work. Not sure the
+    // best path for this: compare instance (what it currently does),
+    // stringify and compare, etc.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const deepEqual = (a, b) => {
+        // Ensures type is the same
+        if (typeof a !== typeof b)
+            return false;
+        // arrays, null, and objects all have type 'object'
+        if (a === null || b === null)
+            return a === b;
+        if (typeof a === 'object') {
+            if (Object.keys(a).length !== Object.keys(b).length || Object.keys(a).some((k) => !(k in b)))
+                return false;
+            return Object.entries(a)
+                .filter(([k]) => !KEYS_TO_EXCLUDE.includes(k))
+                .every(([k, v]) => deepEqual(v, b[k]));
+        }
+        // boolean, string, number, undefined
+        return a === b;
+    };
+    return deepEqual;
+};
+
+const deepEqual = createDeepEqual();
+/**
+ * Returns a version of `newValue` whose properties that are deeply equal to
+ * those in `oldValue` are replaced with those from `oldValue`. This provides a
+ * limited form of "structural sharing" that provides a stable reference for
+ * unchanged slices of the object.
+ *
+ * If `oldValue` and `newValue` are referentially equal, the same value is
+ * returned.
+ *
+ * @param oldValue The old value
+ * @param newValue The new value
+ */
+const mergeWithStableProps = (oldValue, newValue) => {
+    // If the values are already referentially the same, just return the new value
+    if (oldValue === newValue) {
+        return newValue;
+    }
+    return Object.keys(oldValue).reduce((acc, key) => {
+        if (key in newValue && deepEqual(oldValue[key], newValue[key])) {
+            acc[key] = oldValue[key];
+        }
+        return acc;
+    }, Object.assign({}, newValue));
+};
+
 const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
 const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
 You must use the UI SDK to use UI elements.
@@ -264,53 +315,35 @@ const withStytchPermissions = (Component) => {
  */
 const StytchB2BProvider = ({ stytch, children }) => {
     const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [member, setMember] = useAsyncState(initialMember);
-    const [session, setMemberSession] = useAsyncState(initialMemberSession);
-    const [organization, setOrganization] = useAsyncState(initialOrganization);
+    const [{ member, session, organization }, setClientState] = useAsyncState({
+        member: initialMember,
+        session: initialMemberSession,
+        organization: initialOrganization,
+    });
     React.useEffect(() => {
         if (isStytchSSRProxy(stytch)) {
             return;
         }
-        setMember({
-            member: stytch.self.getSync(),
-            fromCache: true,
-            isInitialized: true,
+        setClientState({
+            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 }),
         });
-        setMemberSession({
-            session: stytch.session.getSync(),
-            fromCache: true,
-            isInitialized: true,
+        return stytch.onStateChange(() => {
+            setClientState((oldState) => {
+                const newState = {
+                    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 }),
+                };
+                return mergeWithStableProps(oldState, newState);
+            });
         });
-        setOrganization({
-            organization: stytch.organization.getSync(),
-            fromCache: true,
-            isInitialized: true,
-        });
-        const unsubscribeMember = stytch.self.onChange((member) => setMember({ member, fromCache: false, isInitialized: true }));
-        const unsubscribeMemberSession = stytch.session.onChange((session) => setMemberSession({ session, fromCache: false, isInitialized: true }));
-        const unsubscribeOrganization = stytch.organization.onChange((organization) => setOrganization({ organization, fromCache: false, isInitialized: true }));
-        return () => {
-            unsubscribeMember();
-            unsubscribeMemberSession();
-            unsubscribeOrganization();
-        };
-    }, [stytch, setMember, setMemberSession, setOrganization]);
-    const allValuesReady = !!member.member === !!session.session && !!session.session === !!organization.organization;
-    const finalValues = allValuesReady
-        ? {
-            member,
-            session,
-            organization,
-        }
-        : {
-            member: initialMember,
-            session: initialMemberSession,
-            organization: initialOrganization,
-        };
+    }, [setClientState, stytch]);
     return (React__default['default'].createElement(StytchContext.Provider, { value: ctx },
-        React__default['default'].createElement(StytchOrganizationContext.Provider, { value: finalValues.organization },
-            React__default['default'].createElement(StytchMemberContext.Provider, { value: finalValues.member },
-                React__default['default'].createElement(StytchMemberSessionContext.Provider, { value: finalValues.session }, children)))));
+        React__default['default'].createElement(StytchOrganizationContext.Provider, { value: organization },
+            React__default['default'].createElement(StytchMemberContext.Provider, { value: member },
+                React__default['default'].createElement(StytchMemberSessionContext.Provider, { value: session }, children)))));
 };
 
 /**

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

@@ -13,5 +13,5 @@ import { StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
  * )
  * @returns A {@link StytchB2BUIClient}
  */
-declare const createStytchB2BUIClient: (_PUBLIC_TOKEN: string, options?: import("@stytch/core/dist/public").StytchClientOptions | undefined) => StytchB2BUIClient;
+declare const createStytchB2BUIClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BUIClient;
 export { createStytchB2BUIClient };

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

@@ -13,5 +13,5 @@ import { StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
  * )
  * @returns A {@link StytchB2BUIClient}
  */
-declare const createStytchB2BUIClient: (_PUBLIC_TOKEN: string, options?: import("@stytch/core/dist/public").StytchClientOptions | undefined) => StytchB2BUIClient;
+declare const createStytchB2BUIClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BUIClient;
 export { createStytchB2BUIClient };

package/dist/index.esm.js

@@ -1,5 +1,56 @@
 import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo, useLayoutEffect } from 'react';
 
+const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
+    // If comparing functions, this may need some work. Not sure the
+    // best path for this: compare instance (what it currently does),
+    // stringify and compare, etc.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const deepEqual = (a, b) => {
+        // Ensures type is the same
+        if (typeof a !== typeof b)
+            return false;
+        // arrays, null, and objects all have type 'object'
+        if (a === null || b === null)
+            return a === b;
+        if (typeof a === 'object') {
+            if (Object.keys(a).length !== Object.keys(b).length || Object.keys(a).some((k) => !(k in b)))
+                return false;
+            return Object.entries(a)
+                .filter(([k]) => !KEYS_TO_EXCLUDE.includes(k))
+                .every(([k, v]) => deepEqual(v, b[k]));
+        }
+        // boolean, string, number, undefined
+        return a === b;
+    };
+    return deepEqual;
+};
+
+const deepEqual = createDeepEqual();
+/**
+ * Returns a version of `newValue` whose properties that are deeply equal to
+ * those in `oldValue` are replaced with those from `oldValue`. This provides a
+ * limited form of "structural sharing" that provides a stable reference for
+ * unchanged slices of the object.
+ *
+ * If `oldValue` and `newValue` are referentially equal, the same value is
+ * returned.
+ *
+ * @param oldValue The old value
+ * @param newValue The new value
+ */
+const mergeWithStableProps = (oldValue, newValue) => {
+    // If the values are already referentially the same, just return the new value
+    if (oldValue === newValue) {
+        return newValue;
+    }
+    return Object.keys(oldValue).reduce((acc, key) => {
+        if (key in newValue && deepEqual(oldValue[key], newValue[key])) {
+            acc[key] = oldValue[key];
+        }
+        return acc;
+    }, Object.assign({}, newValue));
+};
+
 const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
 const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
 You must use the UI SDK to use UI elements.
@@ -143,35 +194,31 @@ const withStytchSession = (Component) => {
  */
 const StytchProvider = ({ stytch, children }) => {
     const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [user, setUser] = useAsyncState(initialUser);
-    const [session, setSession] = useAsyncState(initialSession);
+    const [{ user, session }, setClientState] = useAsyncState({
+        session: initialSession,
+        user: initialUser,
+    });
     useEffect(() => {
         if (isStytchSSRProxy(stytch)) {
             return;
         }
-        setUser({
-            user: stytch.user.getSync(),
-            fromCache: true,
-            isInitialized: true,
+        setClientState({
+            session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
+            user: Object.assign(Object.assign({}, stytch.user.getInfo()), { isInitialized: true }),
         });
-        setSession({
-            session: stytch.session.getSync(),
-            fromCache: true,
-            isInitialized: true,
+        return stytch.onStateChange(() => {
+            setClientState((oldState) => {
+                const newState = {
+                    session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
+                    user: Object.assign(Object.assign({}, stytch.user.getInfo()), { isInitialized: true }),
+                };
+                return mergeWithStableProps(oldState, newState);
+            });
         });
-        const unsubscribeUser = stytch.user.onChange((user) => setUser({ user, fromCache: false, isInitialized: true }));
-        const unsubscribeSession = stytch.session.onChange((session) => setSession({ session, fromCache: false, isInitialized: true }));
-        return () => {
-            unsubscribeUser();
-            unsubscribeSession();
-        };
-    }, [stytch, setUser, setSession]);
-    // TODO (SDK-813): Remove this when we have a single top-level onChange handler
-    const finalSess = !!session.session === !!user.user ? session : initialSession;
-    const finalUser = !!session.session === !!user.user ? user : initialUser;
+    }, [setClientState, stytch]);
     return (React.createElement(StytchContext.Provider, { value: ctx },
-        React.createElement(StytchUserContext.Provider, { value: finalUser },
-            React.createElement(StytchSessionContext.Provider, { value: finalSess }, children))));
+        React.createElement(StytchUserContext.Provider, { value: user },
+            React.createElement(StytchSessionContext.Provider, { value: session }, children))));
 };
 
 // cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a

package/dist/index.headless.d.ts

@@ -1,3 +1,4 @@
+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.
@@ -11,5 +12,5 @@
  * )
  * @returns A {@link StytchHeadlessClient}
  */
-declare const createStytchHeadlessClient: any;
+declare const createStytchHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchHeadlessClient;
 export { createStytchHeadlessClient };

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

@@ -1,3 +1,4 @@
+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.
@@ -11,5 +12,5 @@
  * )
  * @returns A {@link StytchHeadlessClient}
  */
-declare const createStytchHeadlessClient: any;
+declare const createStytchHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchHeadlessClient;
 export { createStytchHeadlessClient };

package/dist/index.js

@@ -8,6 +8,57 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
+    // If comparing functions, this may need some work. Not sure the
+    // best path for this: compare instance (what it currently does),
+    // stringify and compare, etc.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const deepEqual = (a, b) => {
+        // Ensures type is the same
+        if (typeof a !== typeof b)
+            return false;
+        // arrays, null, and objects all have type 'object'
+        if (a === null || b === null)
+            return a === b;
+        if (typeof a === 'object') {
+            if (Object.keys(a).length !== Object.keys(b).length || Object.keys(a).some((k) => !(k in b)))
+                return false;
+            return Object.entries(a)
+                .filter(([k]) => !KEYS_TO_EXCLUDE.includes(k))
+                .every(([k, v]) => deepEqual(v, b[k]));
+        }
+        // boolean, string, number, undefined
+        return a === b;
+    };
+    return deepEqual;
+};
+
+const deepEqual = createDeepEqual();
+/**
+ * Returns a version of `newValue` whose properties that are deeply equal to
+ * those in `oldValue` are replaced with those from `oldValue`. This provides a
+ * limited form of "structural sharing" that provides a stable reference for
+ * unchanged slices of the object.
+ *
+ * If `oldValue` and `newValue` are referentially equal, the same value is
+ * returned.
+ *
+ * @param oldValue The old value
+ * @param newValue The new value
+ */
+const mergeWithStableProps = (oldValue, newValue) => {
+    // If the values are already referentially the same, just return the new value
+    if (oldValue === newValue) {
+        return newValue;
+    }
+    return Object.keys(oldValue).reduce((acc, key) => {
+        if (key in newValue && deepEqual(oldValue[key], newValue[key])) {
+            acc[key] = oldValue[key];
+        }
+        return acc;
+    }, Object.assign({}, newValue));
+};
+
 const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
 const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
 You must use the UI SDK to use UI elements.
@@ -151,35 +202,31 @@ const withStytchSession = (Component) => {
  */
 const StytchProvider = ({ stytch, children }) => {
     const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [user, setUser] = useAsyncState(initialUser);
-    const [session, setSession] = useAsyncState(initialSession);
+    const [{ user, session }, setClientState] = useAsyncState({
+        session: initialSession,
+        user: initialUser,
+    });
     React.useEffect(() => {
         if (isStytchSSRProxy(stytch)) {
             return;
         }
-        setUser({
-            user: stytch.user.getSync(),
-            fromCache: true,
-            isInitialized: true,
+        setClientState({
+            session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
+            user: Object.assign(Object.assign({}, stytch.user.getInfo()), { isInitialized: true }),
         });
-        setSession({
-            session: stytch.session.getSync(),
-            fromCache: true,
-            isInitialized: true,
+        return stytch.onStateChange(() => {
+            setClientState((oldState) => {
+                const newState = {
+                    session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
+                    user: Object.assign(Object.assign({}, stytch.user.getInfo()), { isInitialized: true }),
+                };
+                return mergeWithStableProps(oldState, newState);
+            });
         });
-        const unsubscribeUser = stytch.user.onChange((user) => setUser({ user, fromCache: false, isInitialized: true }));
-        const unsubscribeSession = stytch.session.onChange((session) => setSession({ session, fromCache: false, isInitialized: true }));
-        return () => {
-            unsubscribeUser();
-            unsubscribeSession();
-        };
-    }, [stytch, setUser, setSession]);
-    // TODO (SDK-813): Remove this when we have a single top-level onChange handler
-    const finalSess = !!session.session === !!user.user ? session : initialSession;
-    const finalUser = !!session.session === !!user.user ? user : initialUser;
+    }, [setClientState, stytch]);
     return (React__default['default'].createElement(StytchContext.Provider, { value: ctx },
-        React__default['default'].createElement(StytchUserContext.Provider, { value: finalUser },
-            React__default['default'].createElement(StytchSessionContext.Provider, { value: finalSess }, children))));
+        React__default['default'].createElement(StytchUserContext.Provider, { value: user },
+            React__default['default'].createElement(StytchSessionContext.Provider, { value: session }, children))));
 };
 
 // cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a

package/dist/index.ui.d.ts

@@ -1,3 +1,4 @@
+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.
@@ -12,5 +13,5 @@
  * )
  * @returns A {@link StytchUIClient}
  */
-declare const createStytchUIClient: any;
+declare const createStytchUIClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchUIClient;
 export { createStytchUIClient };

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

@@ -1,3 +1,4 @@
+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.
@@ -12,5 +13,5 @@
  * )
  * @returns A {@link StytchUIClient}
  */
-declare const createStytchUIClient: any;
+declare const createStytchUIClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchUIClient;
 export { createStytchUIClient };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/nextjs",
-  "version": "18.0.0",
+  "version": "20.0.0",
   "description": "Stytch's official Next.js Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -22,7 +22,8 @@
   "author": "Stytch",
   "devDependencies": {
     "@babel/runtime": "7.18.6",
-    "@stytch/vanilla-js": "4.7.0",
+    "@stytch/js-utils": "0.0.0",
+    "@stytch/vanilla-js": "4.12.0",
     "@testing-library/react": "14.0.0",
     "eslint-config-custom": "0.0.1",
     "react": "18.2.0",
@@ -32,7 +33,7 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@stytch/vanilla-js": "^4.7.0",
+    "@stytch/vanilla-js": "^4.12.0",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   },