@stytch/react 19.4.3 → 19.5.0

package/dist/index.esm.js

@@ -1,13 +1,16 @@
-import React, { createContext, useContext, useMemo, useEffect, useRef, useLayoutEffect } from 'react';
-import { i as invariant, u as useAsyncState, m as mergeWithStableProps, n as noProviderError, p as providerMustBeUniqueError, a as noSSRError, b as noHeadlessClientError } from './invariant-568a7633.js';
+import React, { createContext, useContext, useMemo, useCallback, useRef, useEffect } from 'react';
+import { i as invariant, u as useAsyncState, m as mergeWithStableProps, a as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-1babb81e.js';
+import { n as noProviderError, p as providerMustBeUniqueError, i as isStytchSSRProxy, a as noHeadlessClientError } from './StytchSSRProxy-34c789b5.js';
 
 const initialUser = {
     user: null,
     fromCache: false,
+    isInitialized: false,
 };
 const initialSession = {
     session: null,
     fromCache: false,
+    isInitialized: false,
 };
 const StytchContext = createContext({ isMounted: false });
 const StytchUserContext = createContext(initialUser);
@@ -18,28 +21,37 @@ const isUIClient = (client) => {
 };
 /**
  * Returns the active User.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
  * Check the fromCache property to determine if the user data is from persistent storage.
  * @example
- * const {user} = useStytchUser();
+ * const {user, isInitialized, fromCache} = useStytchUser();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
  * return (<h1>Welcome, {user.name.first_name}</h1>);
- * @returns A {@link SWRUser}
  */
-const useStytchUser = () => {
+const useStytchUser$1 = () => {
     invariant(useIsMounted__INTERNAL(), noProviderError('useStytchUser'));
     return useContext(StytchUserContext);
 };
 /**
  * Returns the active user's Stytch session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the session data is from persistent storage.
  * @example
- * const {session} = useStytchSession();
+ * const {session, isInitialized, fromCache} = useStytchSession();
  * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
  *   if (!session) {
  *     router.replace('/login')
  *   }
- * }, [session]);
- * @returns A {@link SWRSession}
+ * }, [session, isInitialized]);
  */
-const useStytchSession = () => {
+const useStytchSession$1 = () => {
     invariant(useIsMounted__INTERNAL(), noProviderError('useStytchSession'));
     return useContext(StytchSessionContext);
 };
@@ -65,54 +77,68 @@ const withStytch = (Component) => {
     WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
     return WithStytch;
 };
-const withStytchUser = (Component) => {
+const withStytchUser$1 = (Component) => {
     const WithStytchUser = (props) => {
         invariant(useIsMounted__INTERNAL(), noProviderError('withStytchUser'));
-        const { user, fromCache } = useStytchUser();
-        return React.createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsFromCache: fromCache }));
+        const { user, isInitialized, fromCache } = useStytchUser$1();
+        return (React.createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsInitialized: isInitialized, stytchUserIsFromCache: fromCache })));
     };
     WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchUser;
 };
-const withStytchSession = (Component) => {
+const withStytchSession$1 = (Component) => {
     const WithStytchSession = (props) => {
         invariant(useIsMounted__INTERNAL(), noProviderError('withStytchSession'));
-        const { session, fromCache } = useStytchSession();
-        return React.createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsFromCache: fromCache }));
+        const { session, isInitialized, fromCache } = useStytchSession$1();
+        return (React.createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsInitialized: isInitialized, stytchSessionIsFromCache: fromCache })));
     };
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
 };
 /**
  * The Stytch Context Provider.
- * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
+ * Wrap your application with this component in order to use Stytch everywhere in your app.
  * @example
- * const stytch = new StytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
  *
- * ReactDOM.render(
+ * return (
  *   <StytchProvider stytch={stytch}>
  *     <App />
- *   </StytchProvider>,
- *   document.getElementById('root'),
+ *   </StytchProvider>
  * )
  */
-const StytchProvider = ({ stytch, children, }) => {
+const StytchProvider$1 = ({ stytch, children, assumeHydrated = false, }) => {
     invariant(!useIsMounted__INTERNAL(), providerMustBeUniqueError);
-    invariant(typeof window !== 'undefined', noSSRError);
+    invariant(!assumeHydrated || typeof window !== 'undefined', 'The `assumeHydrated` prop must be set to `false` when using StytchProvider in a server environment.');
     const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [{ user, session }, setClientState] = useAsyncState({
-        session: stytch.session.getInfo(),
-        user: stytch.user.getInfo(),
-    });
-    useEffect(() => stytch.onStateChange(() => {
-        setClientState((oldState) => {
-            const newState = {
-                session: stytch.session.getInfo(),
-                user: stytch.user.getInfo(),
-            };
-            return mergeWithStableProps(oldState, newState);
-        });
-    }), [setClientState, stytch]);
+    const getHydratedState = useCallback(() => {
+        return {
+            session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
+            user: Object.assign(Object.assign({}, stytch.user.getInfo()), { isInitialized: true }),
+        };
+    }, [stytch]);
+    const getInitialState = () => {
+        return {
+            session: initialSession,
+            user: initialUser,
+        };
+    };
+    const [{ user, session }, setClientState] = useAsyncState(() => assumeHydrated ? getHydratedState() : getInitialState());
+    // Store the initial value of `assumeHydrated` in a ref, because it is
+    // logically only relevant for the first render
+    const assumeHydratedRef = useRef(assumeHydrated);
+    useEffect(() => {
+        if (isStytchSSRProxy(stytch)) {
+            return;
+        }
+        const updateState = () => {
+            setClientState((oldState) => mergeWithStableProps(oldState, getHydratedState()));
+        };
+        if (!assumeHydratedRef.current) {
+            updateState();
+        }
+        return stytch.onStateChange(updateState);
+    }, [getHydratedState, setClientState, stytch]);
     return (React.createElement(StytchContext.Provider, { value: ctx },
         React.createElement(StytchUserContext.Provider, { value: user },
             React.createElement(StytchSessionContext.Provider, { value: session }, children))));
@@ -120,10 +146,10 @@ const StytchProvider = ({ stytch, children, }) => {
 
 /**
  * The Stytch Login Screen component.
- * This component can only be used with a {@link StytchUIClient} client constructor
- * passed into the {@link StytchProvider}
+ * This component can only be used with a Stytch UI Client
+ * passed into the StytchProvider.
  *
- * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * See the {@link https://stytch.com/docs/sdks online reference}
  *
  * @example
  * <StytchLogin
@@ -146,13 +172,12 @@ const StytchProvider = ({ stytch, children, }) => {
  *     onEvent: (event) => console.log(event)
  *   }}
  * />
- * @param props {@link StytchProps}
  */
 const StytchLogin = ({ config, styles, callbacks, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchLogin />'));
     const stytchClient = useStytch();
     const containerEl = useRef(null);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(noHeadlessClientError);
         }
@@ -164,7 +189,7 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
             containerEl.current.id = `stytch-magic-link-${randId}`;
         }
         stytchClient.mountLogin({
-            config: config,
+            config,
             callbacks,
             elementId: `#${containerEl.current.id}`,
             styles,
@@ -174,10 +199,10 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
 };
 /**
  * The Stytch Reset Password component.
- * This component can only be used with a {@link StytchUIClient} client constructor
- * passed into the {@link StytchProvider}
+ * This component can only be used with a Stytch UI Client
+ * passed into the StytchProvider.
  *
- * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * See the {@link https://stytch.com/docs/sdks online reference}
  *
  * @example
  * <StytchPasswordReset
@@ -201,17 +226,12 @@ const StytchLogin = ({ config, styles, 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 = useRef(null);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(noHeadlessClientError);
         }
@@ -224,7 +244,7 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
         }
         if (passwordResetToken) {
             stytchClient.mountResetPassword({
-                config: config,
+                config,
                 callbacks,
                 elementId: `#${containerEl.current.id}`,
                 styles,
@@ -234,44 +254,37 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
     }, [stytchClient, config, styles, callbacks, passwordResetToken]);
     return React.createElement("div", { ref: containerEl });
 };
+/**
+ * The Stytch Passkey Registration component.
+ * This component can only be used with a Stytch UI Client
+ * passed into the StytchProvider.
+ *
+ * See the {@link https://stytch.com/docs/sdks online reference}
+ *
+ * @example
+ * const styles = {
+ *     container: {
+ *       backgroundColor: '#e11e1e',
+ *     },
+ *     colors: {
+ *       primary: '#ff00f7',
+ *       secondary: '#5C727D',
+ *     },
+ *    }
+ *
+ * <StytchPasskeyRegistration
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ */
 const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
-    /**
-     * 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}
-     *
-     *
-     * @example
-     * const styles = {
-     *     container: {
-     *       backgroundColor: '#e11e1e',
-     *     },
-     *     colors: {
-     *       primary: '#ff00f7',
-     *       secondary: '#5C727D',
-     *     },
-     *    }
-     *
-     * <StytchPasskeyRegistration
-     *   config={{
-     *      products: ['passkey'],
-     *    }}
-     *   styles={styles}
-     *   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
-     */
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchPasskeyRegistration />'));
     const stytchClient = useStytch();
-    const user = useStytchUser();
+    const user = useStytchUser$1();
     const containerEl = useRef(null);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(noHeadlessClientError);
         }
@@ -280,7 +293,7 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
         }
         if (!containerEl.current.id) {
             const randId = Math.floor(Math.random() * 1e6);
-            containerEl.current.id = `stytch-reset-passkey-${randId}`;
+            containerEl.current.id = `stytch-passkey-registration-${randId}`;
         }
         stytchClient.mountPasskeyRegistration({
             config,
@@ -295,11 +308,10 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
  * The Stytch IDP component.
  * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
  * Requires the user to be logged in.
- * 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}
+ * This component can only be used with a Stytch UI Client
+ * passed into the StytchProvider.
  *
+ * See the {@link https://stytch.com/docs/sdks online reference}
  *
  * @example
  * const styles = {
@@ -318,15 +330,13 @@ const StytchPasskeyRegistration = ({ config, 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 IdentityProvider = ({ styles, callbacks }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<IdentityProvider />'));
     const stytchClient = useStytch();
-    const user = useStytchUser();
+    const user = useStytchUser$1();
     const containerEl = useRef(null);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(noHeadlessClientError);
         }
@@ -346,4 +356,53 @@ const IdentityProvider = ({ styles, callbacks }) => {
     return React.createElement("div", { ref: containerEl });
 };
 
+/**
+ * Returns the active User.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the user data is from persistent storage.
+ * @example
+ * const {user, isInitialized, fromCache} = useStytchUser();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<h1>Welcome, {user.name.first_name}</h1>);
+ */
+const useStytchUser = useStytchUser$1;
+/**
+ * Returns the active user's Stytch session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the session data is from persistent storage.
+ * @example
+ * const {session, isInitialized, fromCache} = useStytchSession();
+ * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session, isInitialized]);
+ */
+const useStytchSession = useStytchSession$1;
+const withStytchUser = withStytchUser$1;
+const withStytchSession = withStytchSession$1;
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
+const StytchProvider = ({ stytch, children, assumeHydrated = true, }) => {
+    return (React.createElement(StytchProvider$1, { stytch: stytch, assumeHydrated: assumeHydrated }, children));
+};
+
 export { IdentityProvider, StytchLogin, StytchPasskeyRegistration, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };

package/dist/index.headless.d.ts

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

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

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

package/dist/index.headless.esm.js

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

package/dist/index.headless.js

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