@stytch/react 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -1,18 +1,22 @@
 # @stytch/react
 
-## 0.8.0
+## 0.10.0
+
+### Minor Changes
+
+- Launching B2B SDKs
 
 ### Patch Changes
 
 - Updated dependencies
-  - @stytch/vanilla-js@0.8.0
+  - @stytch/vanilla-js@0.10.0
 
-## 0.7.0
+## 0.9.0
 
 ### Patch Changes
 
 - Updated dependencies
-  - @stytch/vanilla-js@0.7.0
+  - @stytch/vanilla-js@0.9.0
 
 ## 0.6.0
 

package/dist/b2b/index.d.ts

@@ -0,0 +1,93 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { Member, MemberSession, StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b";
+/**
+ * The Stytch Client object passed in to <StytchProvider /> in your application root.
+ */
+type StytchB2BClient = StytchB2BHeadlessClient;
+type SWRMember = {
+    /**
+     * Either the active {@link Member} object, or null if the user is not logged in.
+     */
+    member: Member | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+type SWRMemberSession = {
+    /**
+     * Either the active {@link MemberSession} object, or null if the user is not logged in.
+     */
+    session: MemberSession | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+/**
+ * Returns the active Member.
+ * Check the fromCache property to determine if the member data is from persistent storage.
+ * @example
+ * const {member} = useStytchMember();
+ * return (<h1>Welcome, {member.name}</h1>);
+ * @returns A {@link SWRUser}
+ */
+declare const useStytchMember: () => SWRMember;
+/**
+ * Returns the active member's Stytch member session.
+ * @example
+ * const { session } = useStytchMemberSession();
+ * useEffect(() => {
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session]);
+ * @returns A {@link SWRMemberSession}
+ */
+declare const useStytchMemberSession: () => SWRMemberSession;
+/**
+ * Returns the Stytch B2B client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytchB2BClient();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+declare const useStytchB2BClient: () => StytchB2BClient;
+declare const withStytchB2BClient: <T extends object>(Component: React.ComponentType<T & {
+    stytch: StytchB2BClient;
+}>) => React.ComponentType<T>;
+declare const withStytchMember: <T extends object>(Component: React.ComponentType<T & {
+    stytchMember: Member | null;
+    stytchMemberIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+declare const withStytchMemberSession: <T extends object>(Component: React.ComponentType<T & {
+    stytchMemberSession: MemberSession | null;
+    stytchMemberSessionIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+type StytchB2BProviderProps = {
+    /**
+     * A Stytch client instance {@link StytchB2BHeadlessClient}
+     */
+    stytch: StytchB2BClient;
+    children?: ReactNode;
+};
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
+declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps) => JSX.Element;
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember };
+export type { StytchB2BProviderProps };

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

@@ -0,0 +1,93 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { Member, MemberSession, StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b";
+/**
+ * The Stytch Client object passed in to <StytchProvider /> in your application root.
+ */
+type StytchB2BClient = StytchB2BHeadlessClient;
+type SWRMember = {
+    /**
+     * Either the active {@link Member} object, or null if the user is not logged in.
+     */
+    member: Member | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+type SWRMemberSession = {
+    /**
+     * Either the active {@link MemberSession} object, or null if the user is not logged in.
+     */
+    session: MemberSession | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+/**
+ * Returns the active Member.
+ * Check the fromCache property to determine if the member data is from persistent storage.
+ * @example
+ * const {member} = useStytchMember();
+ * return (<h1>Welcome, {member.name}</h1>);
+ * @returns A {@link SWRUser}
+ */
+declare const useStytchMember: () => SWRMember;
+/**
+ * Returns the active member's Stytch member session.
+ * @example
+ * const { session } = useStytchMemberSession();
+ * useEffect(() => {
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session]);
+ * @returns A {@link SWRMemberSession}
+ */
+declare const useStytchMemberSession: () => SWRMemberSession;
+/**
+ * Returns the Stytch B2B client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytchB2BClient();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+declare const useStytchB2BClient: () => StytchB2BClient;
+declare const withStytchB2BClient: <T extends object>(Component: React.ComponentType<T & {
+    stytch: StytchB2BClient;
+}>) => React.ComponentType<T>;
+declare const withStytchMember: <T extends object>(Component: React.ComponentType<T & {
+    stytchMember: Member | null;
+    stytchMemberIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+declare const withStytchMemberSession: <T extends object>(Component: React.ComponentType<T & {
+    stytchMemberSession: MemberSession | null;
+    stytchMemberSessionIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+type StytchB2BProviderProps = {
+    /**
+     * A Stytch client instance {@link StytchB2BHeadlessClient}
+     */
+    stytch: StytchB2BClient;
+    children?: ReactNode;
+};
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
+declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps) => JSX.Element;
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember };
+export type { StytchB2BProviderProps };

package/dist/b2b/index.esm.js

@@ -0,0 +1,159 @@
+import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo } from 'react';
+
+const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
+const B2BProviderMustBeUniqueError = 'You cannot render a <StytchB2BProvider> inside another <StytchB2BProvider>.';
+const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
+Use the @stytch/nextjs library instead - 
+npm remove @stytch/react && npm install @stytch/nextjs
+`;
+
+// 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 = useRef(true);
+    const [state, setState] = useState(initialState);
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const setStateAction = useCallback((newState) => {
+        isMounted.current && setState(newState);
+    }, []);
+    return [state, setStateAction];
+};
+
+const initialMember = {
+    member: null,
+    fromCache: false,
+};
+const initialMemberSession = {
+    session: null,
+    fromCache: false,
+};
+const StytchB2BContext = createContext({ isMounted: false });
+const StytchMemberContext = createContext(initialMember);
+const StytchMemberSessionContext = createContext(initialMemberSession);
+const useIsMounted__INTERNAL = () => useContext(StytchB2BContext).isMounted;
+/**
+ * Returns the active Member.
+ * Check the fromCache property to determine if the member data is from persistent storage.
+ * @example
+ * const {member} = useStytchMember();
+ * return (<h1>Welcome, {member.name}</h1>);
+ * @returns A {@link SWRUser}
+ */
+const useStytchMember = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMember', 'StytchB2BProvider'));
+    return useContext(StytchMemberContext);
+};
+/**
+ * Returns the active member's Stytch member session.
+ * @example
+ * const { session } = useStytchMemberSession();
+ * useEffect(() => {
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session]);
+ * @returns A {@link SWRMemberSession}
+ */
+const useStytchMemberSession = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
+    return useContext(StytchMemberSessionContext);
+};
+/**
+ * Returns the Stytch B2B client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytchB2BClient();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+const useStytchB2BClient = () => {
+    const ctx = useContext(StytchB2BContext);
+    invariant(ctx.isMounted, noProviderError('useStytchB2BClient', 'StytchB2BProvider'));
+    return ctx.client;
+};
+const withStytchB2BClient = (Component) => {
+    const WithStytch = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchB2BClient', 'StytchB2BProvider'));
+        return React.createElement(Component, Object.assign({}, props, { stytch: useStytchB2BClient() }));
+    };
+    WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytch;
+};
+const withStytchMember = (Component) => {
+    const WithStytchUser = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchMember', 'StytchB2BProvider'));
+        const { member, fromCache } = useStytchMember();
+        return React.createElement(Component, Object.assign({}, props, { stytchMember: member, stytchMemberIsFromCache: fromCache }));
+    };
+    WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchUser;
+};
+const withStytchMemberSession = (Component) => {
+    const WithStytchSession = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchMemberSession', 'StytchB2BProvider'));
+        const { session, fromCache } = useStytchMemberSession();
+        return React.createElement(Component, Object.assign({}, props, { stytchMemberSession: session, stytchMemberSessionIsFromCache: fromCache }));
+    };
+    WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchSession;
+};
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
+const StytchB2BProvider = ({ stytch, children }) => {
+    invariant(!useIsMounted__INTERNAL(), B2BProviderMustBeUniqueError);
+    invariant(typeof window !== 'undefined', noSSRError);
+    const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
+    const [member, setMember] = useAsyncState({
+        member: stytch.member.getSync(),
+        fromCache: true,
+    });
+    const [session, setMemberSession] = useAsyncState({
+        session: stytch.session.getSync(),
+        fromCache: true,
+    });
+    useEffect(() => {
+        const unsubscribeMember = stytch.member.onChange((member) => setMember({
+            member,
+            fromCache: false,
+        }));
+        const unsubscribeSession = stytch.session.onChange((session) => setMemberSession({
+            session,
+            fromCache: false,
+        }));
+        return () => {
+            unsubscribeMember();
+            unsubscribeSession();
+        };
+    }, [stytch, setMember, setMemberSession]);
+    // TODO (SDK-813): Remove this when we have a single top-level onChange handler
+    const finalMemberSession = !!session.session === !!member.member ? session : initialMemberSession;
+    const finalMember = !!session.session === !!member.member ? member : initialMember;
+    return (React.createElement(StytchB2BContext.Provider, { value: ctx },
+        React.createElement(StytchMemberContext.Provider, { value: finalMember },
+            React.createElement(StytchMemberSessionContext.Provider, { value: finalMemberSession }, children))));
+};
+
+export { StytchB2BProvider, useStytchB2BClient, useStytchMember, useStytchMemberSession, withStytchB2BClient, withStytchMember, withStytchMemberSession };

package/dist/b2b/index.js

@@ -0,0 +1,173 @@
+'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 B2BProviderMustBeUniqueError = 'You cannot render a <StytchB2BProvider> inside another <StytchB2BProvider>.';
+const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
+Use the @stytch/nextjs library instead - 
+npm remove @stytch/react && npm install @stytch/nextjs
+`;
+
+// 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 initialMember = {
+    member: null,
+    fromCache: false,
+};
+const initialMemberSession = {
+    session: null,
+    fromCache: false,
+};
+const StytchB2BContext = React.createContext({ isMounted: false });
+const StytchMemberContext = React.createContext(initialMember);
+const StytchMemberSessionContext = React.createContext(initialMemberSession);
+const useIsMounted__INTERNAL = () => React.useContext(StytchB2BContext).isMounted;
+/**
+ * Returns the active Member.
+ * Check the fromCache property to determine if the member data is from persistent storage.
+ * @example
+ * const {member} = useStytchMember();
+ * return (<h1>Welcome, {member.name}</h1>);
+ * @returns A {@link SWRUser}
+ */
+const useStytchMember = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMember', 'StytchB2BProvider'));
+    return React.useContext(StytchMemberContext);
+};
+/**
+ * Returns the active member's Stytch member session.
+ * @example
+ * const { session } = useStytchMemberSession();
+ * useEffect(() => {
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session]);
+ * @returns A {@link SWRMemberSession}
+ */
+const useStytchMemberSession = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
+    return React.useContext(StytchMemberSessionContext);
+};
+/**
+ * Returns the Stytch B2B client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytchB2BClient();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+const useStytchB2BClient = () => {
+    const ctx = React.useContext(StytchB2BContext);
+    invariant(ctx.isMounted, noProviderError('useStytchB2BClient', 'StytchB2BProvider'));
+    return ctx.client;
+};
+const withStytchB2BClient = (Component) => {
+    const WithStytch = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchB2BClient', 'StytchB2BProvider'));
+        return React__default['default'].createElement(Component, Object.assign({}, props, { stytch: useStytchB2BClient() }));
+    };
+    WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytch;
+};
+const withStytchMember = (Component) => {
+    const WithStytchUser = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchMember', 'StytchB2BProvider'));
+        const { member, fromCache } = useStytchMember();
+        return React__default['default'].createElement(Component, Object.assign({}, props, { stytchMember: member, stytchMemberIsFromCache: fromCache }));
+    };
+    WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchUser;
+};
+const withStytchMemberSession = (Component) => {
+    const WithStytchSession = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchMemberSession', 'StytchB2BProvider'));
+        const { session, fromCache } = useStytchMemberSession();
+        return React__default['default'].createElement(Component, Object.assign({}, props, { stytchMemberSession: session, stytchMemberSessionIsFromCache: fromCache }));
+    };
+    WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchSession;
+};
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
+const StytchB2BProvider = ({ stytch, children }) => {
+    invariant(!useIsMounted__INTERNAL(), B2BProviderMustBeUniqueError);
+    invariant(typeof window !== 'undefined', noSSRError);
+    const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
+    const [member, setMember] = useAsyncState({
+        member: stytch.member.getSync(),
+        fromCache: true,
+    });
+    const [session, setMemberSession] = useAsyncState({
+        session: stytch.session.getSync(),
+        fromCache: true,
+    });
+    React.useEffect(() => {
+        const unsubscribeMember = stytch.member.onChange((member) => setMember({
+            member,
+            fromCache: false,
+        }));
+        const unsubscribeSession = stytch.session.onChange((session) => setMemberSession({
+            session,
+            fromCache: false,
+        }));
+        return () => {
+            unsubscribeMember();
+            unsubscribeSession();
+        };
+    }, [stytch, setMember, setMemberSession]);
+    // TODO (SDK-813): Remove this when we have a single top-level onChange handler
+    const finalMemberSession = !!session.session === !!member.member ? session : initialMemberSession;
+    const finalMember = !!session.session === !!member.member ? member : initialMember;
+    return (React__default['default'].createElement(StytchB2BContext.Provider, { value: ctx },
+        React__default['default'].createElement(StytchMemberContext.Provider, { value: finalMember },
+            React__default['default'].createElement(StytchMemberSessionContext.Provider, { value: finalMemberSession }, children))));
+};
+
+exports.StytchB2BProvider = StytchB2BProvider;
+exports.useStytchB2BClient = useStytchB2BClient;
+exports.useStytchMember = useStytchMember;
+exports.useStytchMemberSession = useStytchMemberSession;
+exports.withStytchB2BClient = withStytchB2BClient;
+exports.withStytchMember = withStytchMember;
+exports.withStytchMemberSession = withStytchMemberSession;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo, useLayoutEffect } from 'react';
 
-const noProviderError = (item) => `${item} can only be used inside <StytchProvider>.`;
+const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
 const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
 const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
 Use the @stytch/nextjs library instead - 
@@ -154,6 +154,7 @@ const StytchProvider = ({ stytch, children }) => {
             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.createElement(StytchContext.Provider, { value: ctx },

package/dist/index.js

@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const noProviderError = (item) => `${item} can only be used inside <StytchProvider>.`;
+const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
 const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
 const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
 Use the @stytch/nextjs library instead - 
@@ -162,6 +162,7 @@ const StytchProvider = ({ stytch, children }) => {
             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 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/react",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Stytch's official React Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -31,14 +31,14 @@
   ],
   "devDependencies": {
     "@babel/runtime": "7.18.6",
-    "@stytch/vanilla-js": "0.8.0",
+    "@stytch/vanilla-js": "0.10.0",
     "@testing-library/react": "12.1.3",
     "eslint-config-custom": "0.0.0",
     "rollup": "2.56.3",
     "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "@stytch/vanilla-js": "^0.8.0",
+    "@stytch/vanilla-js": "^0.10.0",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   }