@stytch/nextjs 21.4.0 → 21.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stytch/nextjs
 
+## 21.4.2
+
+### Patch Changes
+
+- 7d804d9: feat: Add support for accessTokenExchange to B2B Sessions Client
+
+## 21.4.1
+
+### Patch Changes
+
+- 9997775: Avoid warnings about useLayoutEffect with server rendering
+
 ## 21.4.0
 
 ### Minor Changes

package/dist/{StytchB2BContext-8246a922.js → StytchB2BContext-47d523b4.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
+var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect-41b6e419.js');
 var StytchSSRProxy = require('./StytchSSRProxy-63bc6323.js');
-var async = require('./async-86a7f0d6.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -45,7 +45,7 @@ const isUIClient = (client) => {
  * return (<h1>Welcome, {member.name}</h1>);
  */
 const useStytchMember = () => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchMember', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchMember', 'StytchB2BProvider'));
     return React.useContext(StytchMemberContext);
 };
 /**
@@ -66,7 +66,7 @@ const useStytchMember = () => {
  * }, [session, isInitialized]);
  */
 const useStytchMemberSession = () => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
     return React.useContext(StytchMemberSessionContext);
 };
 /**
@@ -83,7 +83,7 @@ const useStytchMemberSession = () => {
  * return (<p>Welcome to {organization.organization_name}</p>);
  */
 const useStytchOrganization = () => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchOrganization', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchOrganization', 'StytchB2BProvider'));
     return React.useContext(StytchOrganizationContext);
 };
 /**
@@ -99,10 +99,10 @@ const useStytchOrganization = () => {
  * return <button disabled={!isAuthorized}>Edit</button>
  */
 const useStytchIsAuthorized = (resourceId, action) => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchIsAuthorized', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchIsAuthorized', 'StytchB2BProvider'));
     const client = useStytchB2BClient();
     const { session } = useStytchMemberSession();
-    const [isAuthorized, setIsAuthorized] = async.useAsyncState({
+    const [isAuthorized, setIsAuthorized] = useIsomorphicLayoutEffect.useAsyncState({
         isInitialized: false,
         fromCache: false,
         isAuthorized: false,
@@ -138,12 +138,12 @@ const useStytchIsAuthorized = (resourceId, action) => {
  */
 const useStytchB2BClient = () => {
     const ctx = React.useContext(StytchContext);
-    async.invariant(ctx.isMounted, StytchSSRProxy.noProviderError('useStytchB2BClient', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(ctx.isMounted, StytchSSRProxy.noProviderError('useStytchB2BClient', 'StytchB2BProvider'));
     return ctx.client;
 };
 const withStytchB2BClient = (Component) => {
     const WithStytch = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchB2BClient', 'StytchB2BProvider'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchB2BClient', 'StytchB2BProvider'));
         return React__default["default"].createElement(Component, Object.assign({}, props, { stytch: useStytchB2BClient() }));
     };
     WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
@@ -151,7 +151,7 @@ const withStytchB2BClient = (Component) => {
 };
 const withStytchMember = (Component) => {
     const WithStytchUser = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchMember', 'StytchB2BProvider'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchMember', 'StytchB2BProvider'));
         const { member, isInitialized, fromCache } = useStytchMember();
         return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchMember: member, stytchMemberIsInitialized: isInitialized, stytchMemberIsFromCache: fromCache })));
     };
@@ -160,7 +160,7 @@ const withStytchMember = (Component) => {
 };
 const withStytchMemberSession = (Component) => {
     const WithStytchSession = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchMemberSession', 'StytchB2BProvider'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchMemberSession', 'StytchB2BProvider'));
         const { session, isInitialized, fromCache } = useStytchMemberSession();
         return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchMemberSession: session, stytchMemberSessionIsInitialized: isInitialized, stytchMemberSessionIsFromCache: fromCache })));
     };
@@ -169,7 +169,7 @@ const withStytchMemberSession = (Component) => {
 };
 const withStytchOrganization = (Component) => {
     const WithStytchOrganization = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchOrganization', 'StytchB2BProvider'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchOrganization', 'StytchB2BProvider'));
         const { organization, isInitialized, fromCache } = useStytchOrganization();
         return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchOrganization: organization, stytchOrganizationIsInitialized: isInitialized, stytchOrganizationIsFromCache: fromCache })));
     };
@@ -199,10 +199,10 @@ const withStytchOrganization = (Component) => {
  */
 const withStytchPermissions = (Component) => {
     const WithStytchPermissions = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useRBACPermissions', 'StytchB2BProvider'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useRBACPermissions', 'StytchB2BProvider'));
         const client = useStytchB2BClient();
         const { session } = useStytchMemberSession();
-        const [permissions, setPermissions] = async.useAsyncState({ loaded: false, value: null });
+        const [permissions, setPermissions] = useIsomorphicLayoutEffect.useAsyncState({ loaded: false, value: null });
         React.useEffect(() => {
             client.rbac
                 .allPermissions()
@@ -230,7 +230,7 @@ const withStytchPermissions = (Component) => {
  */
 const StytchB2BProvider = ({ stytch, children, }) => {
     const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [{ member, session, organization }, setClientState] = async.useAsyncState({
+    const [{ member, session, organization }, setClientState] = useIsomorphicLayoutEffect.useAsyncState({
         member: initialMember,
         session: initialMemberSession,
         organization: initialOrganization,
@@ -251,7 +251,7 @@ const StytchB2BProvider = ({ stytch, children, }) => {
                     session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
                     organization: Object.assign(Object.assign({}, stytch.organization.getInfo()), { isInitialized: true }),
                 };
-                return async.mergeWithStableProps(oldState, newState);
+                return useIsomorphicLayoutEffect.mergeWithStableProps(oldState, newState);
             });
         });
     }, [setClientState, stytch]);

package/dist/{StytchB2BContext-0ff0e987.js → StytchB2BContext-f172fdfe.js}

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useEffect, useMemo } from 'react';
+import { i as invariant, u as useAsyncState, m as mergeWithStableProps } from './useIsomorphicLayoutEffect-8da8c061.js';
 import { i as isStytchSSRProxy, n as noProviderError } from './StytchSSRProxy-14916009.js';
-import { i as invariant, u as useAsyncState, m as mergeWithStableProps } from './async-b1e10055.js';
 
 const initialMember = {
     member: null,

package/dist/adminPortal/index.esm.js

@@ -1,16 +1,16 @@
 import { mountAdminPortalSSO, mountAdminPortalOrgSettings, mountAdminPortalMemberManagement, mountAdminPortalSCIM } from '@stytch/vanilla-js/b2b/adminPortal';
 export { AdminPortalB2BProducts } from '@stytch/vanilla-js/b2b/adminPortal';
-import React, { useRef, useLayoutEffect } from 'react';
-import { u as useIsMounted__INTERNAL, a as useStytchB2BClient } from '../StytchB2BContext-0ff0e987.js';
+import React, { useRef } from 'react';
+import { u as useIsMounted__INTERNAL, a as useStytchB2BClient } from '../StytchB2BContext-f172fdfe.js';
 import { n as noProviderError } from '../StytchSSRProxy-14916009.js';
-import { i as invariant } from '../async-b1e10055.js';
+import { i as invariant, a as useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect-8da8c061.js';
 
 const makeAdminPortalComponent = (mountFn, componentName) => {
     const Component = (props) => {
         invariant(useIsMounted__INTERNAL(), noProviderError(`<${componentName} />`, 'StytchB2BProvider'));
         const stytchClient = useStytchB2BClient();
         const containerEl = useRef(null);
-        useLayoutEffect(() => {
+        useIsomorphicLayoutEffect(() => {
             if (!containerEl.current) {
                 return;
             }

package/dist/adminPortal/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var adminPortal = require('@stytch/vanilla-js/b2b/adminPortal');
 var React = require('react');
-var StytchB2BContext = require('../StytchB2BContext-8246a922.js');
+var StytchB2BContext = require('../StytchB2BContext-47d523b4.js');
 var StytchSSRProxy = require('../StytchSSRProxy-63bc6323.js');
-var async = require('../async-86a7f0d6.js');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect-41b6e419.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14,10 +14,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const makeAdminPortalComponent = (mountFn, componentName) => {
     const Component = (props) => {
-        async.invariant(StytchB2BContext.useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError(`<${componentName} />`, 'StytchB2BProvider'));
+        useIsomorphicLayoutEffect.invariant(StytchB2BContext.useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError(`<${componentName} />`, 'StytchB2BProvider'));
         const stytchClient = StytchB2BContext.useStytchB2BClient();
         const containerEl = React.useRef(null);
-        React.useLayoutEffect(() => {
+        useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
             if (!containerEl.current) {
                 return;
             }

package/dist/b2b/index.d.ts

@@ -145,6 +145,6 @@ declare const StytchB2B: <TProjectConfiguration extends Partial<import("@stytch/
  * @param getIDPConsentManifest - Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.
  */
 declare const B2BIdentityProvider: ({ styles, callbacks, getIDPConsentManifest }: B2BIdentityProviderProps) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-8246a922.js";
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-47d523b4.js";
 export { StytchB2B, B2BIdentityProvider };
-export type { StytchB2BProviderProps } from "../StytchB2BContext-8246a922.js";
+export type { StytchB2BProviderProps } from "../StytchB2BContext-47d523b4.js";

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

@@ -145,6 +145,6 @@ declare const StytchB2B: <TProjectConfiguration extends Partial<import("@stytch/
  * @param getIDPConsentManifest - Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.
  */
 declare const B2BIdentityProvider: ({ styles, callbacks, getIDPConsentManifest }: B2BIdentityProviderProps) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-0ff0e987.js";
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-f172fdfe.js";
 export { StytchB2B, B2BIdentityProvider };
-export type { StytchB2BProviderProps } from "../StytchB2BContext-0ff0e987.js";
+export type { StytchB2BProviderProps } from "../StytchB2BContext-f172fdfe.js";

package/dist/b2b/index.esm.js

@@ -1,7 +1,7 @@
-import { u as useIsMounted__INTERNAL, a as useStytchB2BClient, i as isUIClient, b as useStytchMember } from '../StytchB2BContext-0ff0e987.js';
-export { S as StytchB2BProvider, a as useStytchB2BClient, d as useStytchIsAuthorized, b as useStytchMember, c as useStytchMemberSession, e as useStytchOrganization, w as withStytchB2BClient, g as withStytchMember, f as withStytchMemberSession, h as withStytchOrganization, j as withStytchPermissions } from '../StytchB2BContext-0ff0e987.js';
-import React, { useRef, useLayoutEffect } from 'react';
-import { i as invariant } from '../async-b1e10055.js';
+import { u as useIsMounted__INTERNAL, a as useStytchB2BClient, i as isUIClient, b as useStytchMember } from '../StytchB2BContext-f172fdfe.js';
+export { S as StytchB2BProvider, a as useStytchB2BClient, d as useStytchIsAuthorized, b as useStytchMember, c as useStytchMemberSession, e as useStytchOrganization, w as withStytchB2BClient, g as withStytchMember, f as withStytchMemberSession, h as withStytchOrganization, j as withStytchPermissions } from '../StytchB2BContext-f172fdfe.js';
+import React, { useRef } from 'react';
+import { i as invariant, a as useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect-8da8c061.js';
 import { a as noHeadlessClientError, n as noProviderError } from '../StytchSSRProxy-14916009.js';
 
 /**
@@ -42,7 +42,7 @@ const StytchB2B = ({ styles, callbacks, config, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchB2B />', 'StytchB2BProvider'));
     const stytchClient = useStytchB2BClient();
     const containerEl = useRef(null);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(noHeadlessClientError);
         }
@@ -99,7 +99,7 @@ const B2BIdentityProvider = ({ styles, callbacks, getIDPConsentManifest }) => {
     const stytchClient = useStytchB2BClient();
     const containerEl = useRef(null);
     const { member } = useStytchMember();
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(noHeadlessClientError);
         }

package/dist/b2b/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var StytchB2BContext = require('../StytchB2BContext-8246a922.js');
+var StytchB2BContext = require('../StytchB2BContext-47d523b4.js');
 var React = require('react');
-var async = require('../async-86a7f0d6.js');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect-41b6e419.js');
 var StytchSSRProxy = require('../StytchSSRProxy-63bc6323.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -46,10 +46,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * @param props {@link StytchB2BProps}
  */
 const StytchB2B = ({ styles, callbacks, config, }) => {
-    async.invariant(StytchB2BContext.useIsMounted__INTERNAL(), StytchSSRProxy.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(StytchSSRProxy.noHeadlessClientError);
         }
@@ -102,11 +102,11 @@ const StytchB2B = ({ styles, callbacks, config, }) => {
  * @param getIDPConsentManifest - Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.
  */
 const B2BIdentityProvider = ({ styles, callbacks, getIDPConsentManifest }) => {
-    async.invariant(StytchB2BContext.useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<IdentityProvider />'));
+    useIsomorphicLayoutEffect.invariant(StytchB2BContext.useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<IdentityProvider />'));
     const stytchClient = StytchB2BContext.useStytchB2BClient();
     const containerEl = React.useRef(null);
     const { member } = StytchB2BContext.useStytchMember();
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!StytchB2BContext.isUIClient(stytchClient)) {
             throw Error(StytchSSRProxy.noHeadlessClientError);
         }

package/dist/index-b14d4efe.d.ts

@@ -1,2 +1,2 @@
 export { createDeepEqual } from "./createDeepEqual-5555f2e1.js";
-export { mergeWithStableProps } from "./async-b1e10055.js";
+export { mergeWithStableProps } from "./useIsomorphicLayoutEffect-8da8c061.js";

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import React, { createContext, useContext, useMemo, useEffect, useLayoutEffect, useRef } from 'react';
+import React, { createContext, useContext, useMemo, useEffect, useRef } from 'react';
+import { i as invariant, u as useAsyncState, m as mergeWithStableProps, a as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-8da8c061.js';
 import { i as isStytchSSRProxy, n as noProviderError, a as noHeadlessClientError } from './StytchSSRProxy-14916009.js';
-import { i as invariant, u as useAsyncState, m as mergeWithStableProps } from './async-b1e10055.js';
 
 const initialUser = {
     user: null,
@@ -138,9 +138,6 @@ const StytchProvider = ({ stytch, children, }) => {
             React.createElement(StytchSessionContext.Provider, { value: session }, children))));
 };
 
-// cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
 /**
  * The Stytch Login Screen component.
  * This component can only be used with the Stytch UI Client - use {@link createStytchUIClient}

package/dist/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect-41b6e419.js');
 var StytchSSRProxy = require('./StytchSSRProxy-63bc6323.js');
-var async = require('./async-86a7f0d6.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -41,7 +41,7 @@ const isUIClient = (client) => {
  * return (<h1>Welcome, {user.name.first_name}</h1>);
  */
 const useStytchUser = () => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchUser'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchUser'));
     return React.useContext(StytchUserContext);
 };
 /**
@@ -62,7 +62,7 @@ const useStytchUser = () => {
  * }, [session, isInitialized]);
  */
 const useStytchSession = () => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchSession'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchSession'));
     return React.useContext(StytchSessionContext);
 };
 /**
@@ -76,12 +76,12 @@ const useStytchSession = () => {
  */
 const useStytch = () => {
     const ctx = React.useContext(StytchContext);
-    async.invariant(ctx.isMounted, StytchSSRProxy.noProviderError('useStytch'));
+    useIsomorphicLayoutEffect.invariant(ctx.isMounted, StytchSSRProxy.noProviderError('useStytch'));
     return ctx.client;
 };
 const withStytch = (Component) => {
     const WithStytch = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.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'})`;
@@ -89,7 +89,7 @@ const withStytch = (Component) => {
 };
 const withStytchUser = (Component) => {
     const WithStytchUser = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchUser'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchUser'));
         const { user, isInitialized, fromCache } = useStytchUser();
         return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsInitialized: isInitialized, stytchUserIsFromCache: fromCache })));
     };
@@ -98,7 +98,7 @@ const withStytchUser = (Component) => {
 };
 const withStytchSession = (Component) => {
     const WithStytchSession = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchSession'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchSession'));
         const { session, isInitialized, fromCache } = useStytchSession();
         return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsInitialized: isInitialized, stytchSessionIsFromCache: fromCache })));
     };
@@ -119,7 +119,7 @@ const withStytchSession = (Component) => {
  */
 const StytchProvider = ({ stytch, children, }) => {
     const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [{ user, session }, setClientState] = async.useAsyncState({
+    const [{ user, session }, setClientState] = useIsomorphicLayoutEffect.useAsyncState({
         session: initialSession,
         user: initialUser,
     });
@@ -137,7 +137,7 @@ const StytchProvider = ({ stytch, children, }) => {
                     session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
                     user: Object.assign(Object.assign({}, stytch.user.getInfo()), { isInitialized: true }),
                 };
-                return async.mergeWithStableProps(oldState, newState);
+                return useIsomorphicLayoutEffect.mergeWithStableProps(oldState, newState);
             });
         });
     }, [setClientState, stytch]);
@@ -146,9 +146,6 @@ const StytchProvider = ({ stytch, children, }) => {
             React__default["default"].createElement(StytchSessionContext.Provider, { value: session }, children))));
 };
 
-// cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 /**
  * The Stytch Login Screen component.
  * This component can only be used with the Stytch UI Client - use {@link createStytchUIClient}
@@ -183,10 +180,10 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayou
  * @param callbacks - An optional {@link Callbacks} object
  */
 const StytchLogin = ({ config, styles, callbacks, }) => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchLogin />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchLogin />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(StytchSSRProxy.noHeadlessClientError);
         }
@@ -242,10 +239,10 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
  * @param callbacks - An optional {@link Callbacks} object
  */
 const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, }) => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchResetPassword />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchResetPassword />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(StytchSSRProxy.noHeadlessClientError);
         }
@@ -298,11 +295,11 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
  * @param callbacks - An optional {@link Callbacks} object
  */
 const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchPasskeyRegistration />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchPasskeyRegistration />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
     const user = useStytchUser();
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(StytchSSRProxy.noHeadlessClientError);
         }
@@ -354,11 +351,11 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
  * @param callbacks - An optional {@link Callbacks} object
  */
 const IdentityProvider = ({ styles, callbacks }) => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<IdentityProvider />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<IdentityProvider />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
     const user = useStytchUser();
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(StytchSSRProxy.noHeadlessClientError);
         }

package/dist/{async-86a7f0d6.d.ts → useIsomorphicLayoutEffect-41b6e419.d.ts}

@@ -1,4 +1,10 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, useEffect } from "react";
+// useState can cause memory leaks if it is set after the component unmounted. For example, if it is
+// set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
+declare const useAsyncState: <T>(initialState: T | (() => T)) => [
+    T,
+    Dispatch<SetStateAction<T>>
+];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare function invariant(cond: any, message: string): asserts cond;
 /**
@@ -14,5 +20,5 @@ declare function invariant(cond: any, message: string): asserts cond;
  * @param newValue The new value
  */
 declare const mergeWithStableProps: <T extends Record<string, unknown>, U extends Record<string, unknown> = T>(oldValue: U, newValue: T) => T;
-declare const useAsyncState: <T>(initialState: T | (() => T)) => [T, Dispatch<SetStateAction<T>>];
-export { invariant, mergeWithStableProps, useAsyncState };
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+export { useIsomorphicLayoutEffect as default, useAsyncState, invariant, mergeWithStableProps };

package/dist/{async-86a7f0d6.js → useIsomorphicLayoutEffect-41b6e419.js}

@@ -76,6 +76,10 @@ const useAsyncState = (initialState) => {
     return [state, setStateAction];
 };
 
+// cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 exports.invariant = invariant;
 exports.mergeWithStableProps = mergeWithStableProps;
 exports.useAsyncState = useAsyncState;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/dist/{async-b1e10055.d.ts → useIsomorphicLayoutEffect-8da8c061.d.ts}

@@ -1,4 +1,10 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, useEffect } from "react";
+// useState can cause memory leaks if it is set after the component unmounted. For example, if it is
+// set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
+declare const useAsyncState: <T>(initialState: T | (() => T)) => [
+    T,
+    Dispatch<SetStateAction<T>>
+];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare function invariant(cond: any, message: string): asserts cond;
 /**
@@ -14,5 +20,5 @@ declare function invariant(cond: any, message: string): asserts cond;
  * @param newValue The new value
  */
 declare const mergeWithStableProps: <T extends Record<string, unknown>, U extends Record<string, unknown> = T>(oldValue: U, newValue: T) => T;
-declare const useAsyncState: <T>(initialState: T | (() => T)) => [T, Dispatch<SetStateAction<T>>];
-export { invariant, mergeWithStableProps, useAsyncState };
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+export { useIsomorphicLayoutEffect as default, useAsyncState, invariant, mergeWithStableProps };

package/dist/{async-b1e10055.js → useIsomorphicLayoutEffect-8da8c061.js}

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRef, useState, useEffect, useCallback, useLayoutEffect } from 'react';
 
 const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
     // If comparing functions, this may need some work. Not sure the
@@ -74,4 +74,7 @@ const useAsyncState = (initialState) => {
     return [state, setStateAction];
 };
 
-export { invariant as i, mergeWithStableProps as m, useAsyncState as u };
+// cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect as a, invariant as i, mergeWithStableProps as m, useAsyncState as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/nextjs",
-  "version": "21.4.0",
+  "version": "21.4.2",
   "description": "Stytch's official Next.js Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -21,15 +21,22 @@
   "license": "MIT",
   "author": "Stytch",
   "devDependencies": {
-    "@babel/runtime": "7.18.6",
-    "@stytch/js-utils": "0.0.0",
-    "@stytch/vanilla-js": "5.17.0",
+    "@babel/runtime": "7.26.10",
+    "@stytch/internal-tsconfigs": "0.0.0",
+    "@stytch/js-utils": "0.0.1",
+    "@stytch/vanilla-js": "5.18.6",
     "@testing-library/react": "14.0.0",
+    "@types/jest": "29.5.14",
     "eslint-config-custom": "0.0.1",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-environment-jsdom-global": "4.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-test-renderer": "18.0.0",
     "rollup": "2.79.2",
+    "rollup-plugin-ts": "3.4.5",
+    "ts-jest": "29.2.5",
     "typescript": "5.3.3"
   },
   "peerDependencies": {