@stytch/nextjs 13.0.0 → 14.0.0

package/dist/index.headless.js

@@ -1,18 +1,65 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var headless = require('@stytch/vanilla-js/headless');
+
+const cannotInvokeMethodOnServerError = (path) => `[Stytch] Invalid serverside function call to ${path}.
+The Stytch Javascript SDK is intended to ony be used on the client side.
+Make sure to wrap your API calls in a hook to ensure they are executed on the client.
+\`\`\`
+const myComponent = () => {
+  const stytch = useStytch();
+  // This will error out on the server.
+  stytch.magicLinks.authenticate(...);
+  useEffect(() => {
+    // This will work well
+    stytch.magicLinks.authenticate(...);
+  }, []);
+}
+\`\`\`
+
+If you want to make API calls from server environments, please use the Stytch Node Library
+https://www.npmjs.com/package/stytch.
+`;
+
+const SSRStubKey = Symbol('__stytch_SSRStubKey');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createProxy = (path) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noop = () => { };
+    return new Proxy(noop, {
+        get(target, p) {
+            if (p === SSRStubKey) {
+                return true;
+            }
+            return createProxy(path + '.' + String(p));
+        },
+        apply() {
+            throw new Error(cannotInvokeMethodOnServerError(path));
+        },
+    });
+};
+const createStytchSSRProxy = () => createProxy('stytch');
+
+/**
+ * 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();
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+    return new headless.StytchHeadlessClient(...args);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./createStytchHeadlessClient"), exports);
-//# sourceMappingURL=index.headless.js.map
+
+exports.createStytchHeadlessClient = createStytchHeadlessClient;

package/dist/index.js

@@ -1,16 +1,374 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StytchPasskeyRegistration = exports.StytchPasswordReset = exports.StytchLogin = exports.withStytchUser = exports.withStytchSession = exports.withStytch = exports.useStytchUser = exports.useStytchSession = exports.useStytch = exports.StytchProvider = void 0;
-var StytchContext_1 = require("./StytchContext");
-Object.defineProperty(exports, "StytchProvider", { enumerable: true, get: function () { return StytchContext_1.StytchProvider; } });
-Object.defineProperty(exports, "useStytch", { enumerable: true, get: function () { return StytchContext_1.useStytch; } });
-Object.defineProperty(exports, "useStytchSession", { enumerable: true, get: function () { return StytchContext_1.useStytchSession; } });
-Object.defineProperty(exports, "useStytchUser", { enumerable: true, get: function () { return StytchContext_1.useStytchUser; } });
-Object.defineProperty(exports, "withStytch", { enumerable: true, get: function () { return StytchContext_1.withStytch; } });
-Object.defineProperty(exports, "withStytchSession", { enumerable: true, get: function () { return StytchContext_1.withStytchSession; } });
-Object.defineProperty(exports, "withStytchUser", { enumerable: true, get: function () { return StytchContext_1.withStytchUser; } });
-var Stytch_1 = require("./Stytch");
-Object.defineProperty(exports, "StytchLogin", { enumerable: true, get: function () { return Stytch_1.StytchLogin; } });
-Object.defineProperty(exports, "StytchPasswordReset", { enumerable: true, get: function () { return Stytch_1.StytchPasswordReset; } });
-Object.defineProperty(exports, "StytchPasskeyRegistration", { enumerable: true, get: function () { return Stytch_1.StytchPasskeyRegistration; } });
-//# sourceMappingURL=index.js.map
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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.
+Please make sure you are importing createStytchHeadlessClient from @stytch/nextjs/ui and not from @stytch/nextjs/headless.`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function invariant(cond, message) {
+    if (!cond)
+        throw new Error(message);
+}
+
+// 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.
+const useAsyncState = (initialState) => {
+    const isMounted = React.useRef(true);
+    const [state, setState] = React.useState(initialState);
+    React.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const setStateAction = React.useCallback((newState) => {
+        isMounted.current && setState(newState);
+    }, []);
+    return [state, setStateAction];
+};
+
+const SSRStubKey = Symbol('__stytch_SSRStubKey');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isStytchSSRProxy = (proxy) => {
+    return !!proxy[SSRStubKey];
+};
+
+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);
+const StytchSessionContext = React.createContext(initialSession);
+const useIsMounted__INTERNAL = () => React.useContext(StytchContext).isMounted;
+const isUIClient = (client) => {
+    return client.mountLogin !== undefined;
+};
+/**
+ * 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 session data is from persistent storage.
+ * See Next's {@link https://nextjs.org/docs/authentication#authenticating-statically-generated-pages documentation} for more.
+ * @example
+ * const {user, isInitialized, fromCache} = useStytchUser();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<h1>Welcome, {user.name.first_name}</h1>);
+ */
+const useStytchUser = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchUser'));
+    return React.useContext(StytchUserContext);
+};
+/**
+ * Returns the user's active 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.
+ * See Next's {@link https://nextjs.org/docs/authentication#authenticating-statically-generated-pages documentation} for more.
+ * @example
+ * const {session, isInitialized, fromCache} = useStytchSession();
+ * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session, isInitialized]);
+ */
+const useStytchSession = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchSession'));
+    return React.useContext(StytchSessionContext);
+};
+/**
+ * Returns the Stytch client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytch();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+const useStytch = () => {
+    const ctx = React.useContext(StytchContext);
+    invariant(ctx.isMounted, noProviderError('useStytch'));
+    return ctx.client;
+};
+const withStytch = (Component) => {
+    const WithStytch = (props) => {
+        invariant(useIsMounted__INTERNAL(), 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 = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchUser'));
+        const { user, isInitialized, fromCache } = useStytchUser();
+        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 = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchSession'));
+        const { session, isInitialized, fromCache } = useStytchSession();
+        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;
+};
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in `_app.js` in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ */
+const StytchProvider = ({ stytch, children }) => {
+    const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
+    const [user, setUser] = useAsyncState(initialUser);
+    const [session, setSession] = useAsyncState(initialSession);
+    React.useEffect(() => {
+        if (isStytchSSRProxy(stytch)) {
+            return;
+        }
+        setUser({
+            user: stytch.user.getSync(),
+            fromCache: true,
+            isInitialized: true,
+        });
+        setSession({
+            session: stytch.session.getSync(),
+            fromCache: true,
+            isInitialized: true,
+        });
+        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;
+    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))));
+};
+
+// 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}
+ * in your `_app.jsx` file.
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * and {@link https://storybook.stytch.com interactive examples} for more.
+ *
+ * @example
+ * <StytchLogin
+ *   config={{
+ *     products: ['emailMagicLinks', 'oauth'],
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     oauthOptions: {
+ *      providers: [{ type: OAuthProviders.Google }, { type: OAuthProviders.Microsoft }],
+ *    },
+ *   }}
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param config - A {@link StytchLoginConfig} object
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+const StytchLogin = ({ config, styles, callbacks }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchLogin />'));
+    const stytchClient = useStytch();
+    const containerEl = React.useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-magic-link-${randId}`;
+        }
+        stytchClient.mountLogin({
+            config,
+            callbacks,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [stytchClient, config, styles, callbacks]);
+    return React__default['default'].createElement("div", { ref: containerEl });
+};
+/**
+ * The Stytch Reset Password component.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * and {@link https://storybook.stytch.com interactive examples} for more.
+ *
+ * @example
+ * <StytchPasswordReset
+ *   config={{
+ *     products: ['emailMagicLinks', 'oauth'],
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     oauthOptions: {
+ *      providers: [{ type: OAuthProviders.Google }, { type: OAuthProviders.Microsoft }],
+ *    },
+ *   }}
+ *   passwordResetToken="PvC5UudZ7TPZbELt95yXAQ-8MeEUCRob8bUQ-g52fIJs"
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param config - A {@link StytchLoginConfig} object
+ * @param passwordResetToken - A Stytch password reset token
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchResetPassword />'));
+    const stytchClient = useStytch();
+    const containerEl = React.useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-reset-password-${randId}`;
+        }
+        if (passwordResetToken) {
+            stytchClient.mountResetPassword({
+                config,
+                callbacks,
+                elementId: `#${containerEl.current.id}`,
+                styles,
+                passwordResetToken,
+            });
+        }
+    }, [stytchClient, config, styles, callbacks, passwordResetToken]);
+    return React__default['default'].createElement("div", { ref: containerEl });
+};
+/**
+ * The Stytch Passkey Registration component.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * and {@link https://storybook.stytch.com interactive examples} for more.
+ *
+ * @example
+ * const styles = {
+ *     container: {
+ *       backgroundColor: '#e11e1e',
+ *     },
+ *     colors: {
+ *       primary: '#ff00f7',
+ *       secondary: '#5C727D',
+ *     },
+ *    }
+ *
+ * <StytchPasskeyRegistration
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * />
+ *
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+const StytchPasskeyRegistration = ({ config, styles, callbacks }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchPasskeyRegistration />'));
+    const stytchClient = useStytch();
+    const containerEl = React.useRef(null);
+    const user = useStytchUser();
+    useIsomorphicLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-passkey-registration-${randId}`;
+        }
+        stytchClient.mountPasskeyRegistration({
+            config,
+            callbacks,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [stytchClient, config, styles, callbacks, user]);
+    return React__default['default'].createElement("div", { ref: containerEl });
+};
+
+exports.StytchLogin = StytchLogin;
+exports.StytchPasskeyRegistration = StytchPasskeyRegistration;
+exports.StytchPasswordReset = StytchPasswordReset;
+exports.StytchProvider = StytchProvider;
+exports.useStytch = useStytch;
+exports.useStytchSession = useStytchSession;
+exports.useStytchUser = useStytchUser;
+exports.withStytch = withStytch;
+exports.withStytchSession = withStytchSession;
+exports.withStytchUser = withStytchUser;

package/dist/index.ui.d.ts

@@ -1 +1,17 @@
-export * from './createStytchUIClient';
+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: (_PUBLIC_TOKEN: string, options?: import("@stytch/core/dist/public").StytchClientOptions | undefined) => StytchUIClient;
+export { createStytchUIClient };

package/dist/index.ui.js

@@ -1,18 +1,66 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vanillaJs = require('@stytch/vanilla-js');
+
+const cannotInvokeMethodOnServerError = (path) => `[Stytch] Invalid serverside function call to ${path}.
+The Stytch Javascript SDK is intended to ony be used on the client side.
+Make sure to wrap your API calls in a hook to ensure they are executed on the client.
+\`\`\`
+const myComponent = () => {
+  const stytch = useStytch();
+  // This will error out on the server.
+  stytch.magicLinks.authenticate(...);
+  useEffect(() => {
+    // This will work well
+    stytch.magicLinks.authenticate(...);
+  }, []);
+}
+\`\`\`
+
+If you want to make API calls from server environments, please use the Stytch Node Library
+https://www.npmjs.com/package/stytch.
+`;
+
+const SSRStubKey = Symbol('__stytch_SSRStubKey');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createProxy = (path) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noop = () => { };
+    return new Proxy(noop, {
+        get(target, p) {
+            if (p === SSRStubKey) {
+                return true;
+            }
+            return createProxy(path + '.' + String(p));
+        },
+        apply() {
+            throw new Error(cannotInvokeMethodOnServerError(path));
+        },
+    });
+};
+const createStytchSSRProxy = () => createProxy('stytch');
+
+/**
+ * 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}
+ */
+const createStytchUIClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return createStytchSSRProxy();
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+    return new vanillaJs.StytchUIClient(...args);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./createStytchUIClient"), exports);
-//# sourceMappingURL=index.ui.js.map
+
+exports.createStytchUIClient = createStytchUIClient;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/nextjs",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "description": "Stytch's official Next.js Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -22,7 +22,7 @@
   "author": "Stytch",
   "devDependencies": {
     "@babel/runtime": "7.18.6",
-    "@stytch/vanilla-js": "3.1.0",
+    "@stytch/vanilla-js": "3.2.0",
     "@testing-library/react": "14.0.0",
     "eslint-config-custom": "0.0.1",
     "react-dom": ">= 17.0.2",
@@ -31,7 +31,7 @@
     "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "@stytch/vanilla-js": "^3.1.0",
+    "@stytch/vanilla-js": "^3.2.0",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   },