@stytch/react 19.4.2 → 19.4.4

package/dist/index.js

@@ -26,11 +26,11 @@ const isUIClient = (client) => {
 };
 /**
  * Returns the active User.
+ * The Stytch SDKs are used for client-side authentication and session management.
  * Check the fromCache property to determine if the user data is from persistent storage.
  * @example
  * const {user} = useStytchUser();
  * return (<h1>Welcome, {user.name.first_name}</h1>);
- * @returns A {@link SWRUser}
  */
 const useStytchUser = () => {
     invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchUser'));
@@ -38,6 +38,8 @@ const useStytchUser = () => {
 };
 /**
  * Returns the active user's Stytch session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the fromCache property to determine if the session data is from persistent storage.
  * @example
  * const {session} = useStytchSession();
  * useEffect(() => {
@@ -45,7 +47,6 @@ const useStytchUser = () => {
  *     router.replace('/login')
  *   }
  * }, [session]);
- * @returns A {@link SWRSession}
  */
 const useStytchSession = () => {
     invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchSession'));
@@ -93,7 +94,7 @@ const withStytchSession = (Component) => {
 };
 /**
  * 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>')
  *
@@ -128,10 +129,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
@@ -154,7 +155,6 @@ const StytchProvider = ({ stytch, children, }) => {
  *     onEvent: (event) => console.log(event)
  *   }}
  * />
- * @param props {@link StytchProps}
  */
 const StytchLogin = ({ config, styles, callbacks, }) => {
     invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchLogin />'));
@@ -172,7 +172,7 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
             containerEl.current.id = `stytch-magic-link-${randId}`;
         }
         stytchClient.mountLogin({
-            config: config,
+            config,
             callbacks,
             elementId: `#${containerEl.current.id}`,
             styles,
@@ -182,10 +182,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
@@ -209,11 +209,6 @@ 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.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchResetPassword />'));
@@ -232,7 +227,7 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
         }
         if (passwordResetToken) {
             stytchClient.mountResetPassword({
-                config: config,
+                config,
                 callbacks,
                 elementId: `#${containerEl.current.id}`,
                 styles,
@@ -242,39 +237,32 @@ const StytchPasswordReset = ({ config, styles, callbacks, 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 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.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchPasskeyRegistration />'));
     const stytchClient = useStytch();
     const user = useStytchUser();
@@ -288,7 +276,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,
@@ -303,11 +291,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 = {
@@ -326,8 +313,6 @@ 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.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<IdentityProvider />'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/react",
-  "version": "19.4.2",
+  "version": "19.4.4",
   "description": "Stytch's official React Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -33,9 +33,10 @@
   ],
   "devDependencies": {
     "@babel/runtime": "7.26.10",
+    "@stytch/internal-test-utils": "0.0.0",
     "@stytch/internal-tsconfigs": "0.0.0",
     "@stytch/js-utils": "0.0.1",
-    "@stytch/vanilla-js": "5.21.1",
+    "@stytch/vanilla-js": "5.22.3",
     "@testing-library/react": "14.0.0",
     "@types/jest": "29.5.14",
     "eslint-config-custom": "0.0.1",