@stytch/react 19.5.5 → 19.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stytch/react
 
+## 19.6.0
+
+### Minor Changes
+
+- a665bfa: Allow specifying text overrides and text translastion via the `strings` configuration.
+
 ## 19.5.5
 
 ### Patch Changes

package/dist/b2b/index.d.ts

@@ -3,9 +3,9 @@ import React from "react";
 import { ReactNode } from "react";
 import { Member, MemberSession, Organization, StytchB2BUIClient, IDPConsentScreenManifest } from "@stytch/vanilla-js/b2b";
 import { StytchB2BHeadlessClient, StytchProjectConfigurationInput } from "@stytch/vanilla-js/b2b/headless";
-import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
+import { Callbacks, StringsOptions, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
 import { StytchProjectConfigurationInput as StytchProjectConfigurationInput$0 } from "@stytch/vanilla-js";
-interface StytchB2BProps<TProjectConfiguration extends StytchProjectConfigurationInput$0 = Stytch.DefaultProjectConfiguration> {
+interface StytchB2BProps<TProjectConfiguration extends StytchProjectConfigurationInput$0 = Stytch.DefaultProjectConfiguration> extends StringsOptions {
     /**
      * An optional {@link StyleConfig} to customize the look and feel of the screen.
      *
@@ -115,7 +115,7 @@ type B2BIdentityProviderProps = Omit<StytchB2BProps, "config"> & {
  *   }}
  * />
  */
-declare const StytchB2B: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ styles, callbacks, config }: StytchB2BProps<TProjectConfiguration>) => React.JSX.Element;
+declare const StytchB2B: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ styles, callbacks, config, strings }: StytchB2BProps<TProjectConfiguration>) => React.JSX.Element;
 /**
  * The Stytch B2B IDP component.
  * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.

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

@@ -3,9 +3,9 @@ import React from "react";
 import { ReactNode } from "react";
 import { Member, MemberSession, Organization, StytchB2BUIClient, IDPConsentScreenManifest } from "@stytch/vanilla-js/b2b";
 import { StytchB2BHeadlessClient, StytchProjectConfigurationInput } from "@stytch/vanilla-js/b2b/headless";
-import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
+import { Callbacks, StringsOptions, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
 import { StytchProjectConfigurationInput as StytchProjectConfigurationInput$0 } from "@stytch/vanilla-js";
-interface StytchB2BProps<TProjectConfiguration extends StytchProjectConfigurationInput$0 = Stytch.DefaultProjectConfiguration> {
+interface StytchB2BProps<TProjectConfiguration extends StytchProjectConfigurationInput$0 = Stytch.DefaultProjectConfiguration> extends StringsOptions {
     /**
      * An optional {@link StyleConfig} to customize the look and feel of the screen.
      *
@@ -115,7 +115,7 @@ type B2BIdentityProviderProps = Omit<StytchB2BProps, "config"> & {
  *   }}
  * />
  */
-declare const StytchB2B: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ styles, callbacks, config }: StytchB2BProps<TProjectConfiguration>) => React.JSX.Element;
+declare const StytchB2B: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ styles, callbacks, config, strings }: StytchB2BProps<TProjectConfiguration>) => React.JSX.Element;
 /**
  * The Stytch B2B IDP component.
  * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.

package/dist/b2b/index.esm.js

@@ -37,7 +37,7 @@ import { a as noHeadlessClientError, n as noProviderError } from '../StytchSSRPr
  *   }}
  * />
  */
-const StytchB2B = ({ styles, callbacks, config, }) => {
+const StytchB2B = ({ styles, callbacks, config, strings, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchB2B />', 'StytchB2BProvider'));
     const stytchClient = useStytchB2BClient();
     const containerEl = useRef(null);
@@ -57,8 +57,9 @@ const StytchB2B = ({ styles, callbacks, config, }) => {
             config,
             elementId: `#${containerEl.current.id}`,
             styles,
+            strings,
         });
-    }, [stytchClient, styles, callbacks]);
+    }, [stytchClient, styles, callbacks, strings]);
     return React.createElement("div", { ref: containerEl });
 };
 /**

package/dist/b2b/index.js

@@ -44,7 +44,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  *   }}
  * />
  */
-const StytchB2B = ({ styles, callbacks, config, }) => {
+const StytchB2B = ({ styles, callbacks, config, strings, }) => {
     useIsomorphicLayoutEffect.invariant(StytchB2BContext.useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchB2B />', 'StytchB2BProvider'));
     const stytchClient = StytchB2BContext.useStytchB2BClient();
     const containerEl = React.useRef(null);
@@ -64,8 +64,9 @@ const StytchB2B = ({ styles, callbacks, config, }) => {
             config,
             elementId: `#${containerEl.current.id}`,
             styles,
+            strings,
         });
-    }, [stytchClient, styles, callbacks]);
+    }, [stytchClient, styles, callbacks, strings]);
     return React__default["default"].createElement("div", { ref: containerEl });
 };
 /**

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { StytchProjectConfigurationInput, StytchUIClient, Callbacks, StytchLoginConfig, StyleConfig } from "@stytch/vanilla-js";
+import { StytchProjectConfigurationInput, StytchUIClient, Callbacks, StringsOptions, StytchLoginConfig, StyleConfig } from "@stytch/vanilla-js";
 import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
 import { Session as Session$0 } from "@stytch/vanilla-js/headless";
 import { User as User$0 } from "@stytch/vanilla-js/headless";
@@ -23,7 +23,7 @@ declare const useStytch: <TProjectConfiguration extends Partial<import("@stytch/
 declare const withStytch: <T extends object, TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(Component: React.ComponentType<T & {
     stytch: StytchClient<TProjectConfiguration>;
 }>) => React.ComponentType<T>;
-interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
+interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends StringsOptions {
     /**
      * A {@link StytchLoginConfig} object. Add products and product-specific config to this object to change the login methods shown.
      *
@@ -116,7 +116,7 @@ interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationIn
  *   }}
  * />
  */
-declare const StytchLogin: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
+declare const StytchLogin: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks, strings }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
 interface StytchResetPasswordProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends StytchProps<TProjectConfiguration> {
     /**
      * A Stytch password reset token.
@@ -154,7 +154,7 @@ type IdentityProviderProps = Omit<StytchProps, "config">;
  *   }}
  * />
  */
-declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps<TProjectConfiguration>) => React.JSX.Element;
+declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks, strings, passwordResetToken }: StytchResetPasswordProps<TProjectConfiguration>) => React.JSX.Element;
 /**
  * The Stytch Passkey Registration component.
  * This component can only be used with a Stytch UI Client
@@ -180,7 +180,7 @@ declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import
  *   }}
  * />
  */
-declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
+declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks, strings }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
 /**
  * The Stytch IDP component.
  * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
@@ -208,7 +208,7 @@ declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<
  *   }}
  * />
  */
-declare const IdentityProvider: ({ styles, callbacks }: IdentityProviderProps) => React.JSX.Element;
+declare const IdentityProvider: ({ styles, callbacks, strings }: IdentityProviderProps) => React.JSX.Element;
 /**
  * Returns the active User.
  * The Stytch SDKs are used for client-side authentication and session management.

package/dist/index.esm.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { StytchProjectConfigurationInput, StytchUIClient, Callbacks, StytchLoginConfig, StyleConfig } from "@stytch/vanilla-js";
+import { StytchProjectConfigurationInput, StytchUIClient, Callbacks, StringsOptions, StytchLoginConfig, StyleConfig } from "@stytch/vanilla-js";
 import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
 import { Session as Session$0 } from "@stytch/vanilla-js/headless";
 import { User as User$0 } from "@stytch/vanilla-js/headless";
@@ -23,7 +23,7 @@ declare const useStytch: <TProjectConfiguration extends Partial<import("@stytch/
 declare const withStytch: <T extends object, TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(Component: React.ComponentType<T & {
     stytch: StytchClient<TProjectConfiguration>;
 }>) => React.ComponentType<T>;
-interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
+interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends StringsOptions {
     /**
      * A {@link StytchLoginConfig} object. Add products and product-specific config to this object to change the login methods shown.
      *
@@ -116,7 +116,7 @@ interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationIn
  *   }}
  * />
  */
-declare const StytchLogin: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
+declare const StytchLogin: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks, strings }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
 interface StytchResetPasswordProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends StytchProps<TProjectConfiguration> {
     /**
      * A Stytch password reset token.
@@ -154,7 +154,7 @@ type IdentityProviderProps = Omit<StytchProps, "config">;
  *   }}
  * />
  */
-declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps<TProjectConfiguration>) => React.JSX.Element;
+declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks, strings, passwordResetToken }: StytchResetPasswordProps<TProjectConfiguration>) => React.JSX.Element;
 /**
  * The Stytch Passkey Registration component.
  * This component can only be used with a Stytch UI Client
@@ -180,7 +180,7 @@ declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import
  *   }}
  * />
  */
-declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
+declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks, strings }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
 /**
  * The Stytch IDP component.
  * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
@@ -208,7 +208,7 @@ declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<
  *   }}
  * />
  */
-declare const IdentityProvider: ({ styles, callbacks }: IdentityProviderProps) => React.JSX.Element;
+declare const IdentityProvider: ({ styles, callbacks, strings }: IdentityProviderProps) => React.JSX.Element;
 /**
  * Returns the active User.
  * The Stytch SDKs are used for client-side authentication and session management.

package/dist/index.esm.js

@@ -173,7 +173,7 @@ const StytchProvider$1 = ({ stytch, children, assumeHydrated = false, }) => {
  *   }}
  * />
  */
-const StytchLogin = ({ config, styles, callbacks, }) => {
+const StytchLogin = ({ config, styles, callbacks, strings, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchLogin />'));
     const stytchClient = useStytch();
     const containerEl = useRef(null);
@@ -193,8 +193,9 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
             callbacks,
             elementId: `#${containerEl.current.id}`,
             styles,
+            strings,
         });
-    }, [stytchClient, config, styles, callbacks]);
+    }, [stytchClient, config, styles, callbacks, strings]);
     return React.createElement("div", { ref: containerEl });
 };
 /**
@@ -227,7 +228,7 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
  *   }}
  * />
  */
-const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, }) => {
+const StytchPasswordReset = ({ config, styles, callbacks, strings, passwordResetToken, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchResetPassword />'));
     const stytchClient = useStytch();
     const containerEl = useRef(null);
@@ -248,10 +249,11 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
                 callbacks,
                 elementId: `#${containerEl.current.id}`,
                 styles,
+                strings,
                 passwordResetToken,
             });
         }
-    }, [stytchClient, config, styles, callbacks, passwordResetToken]);
+    }, [stytchClient, config, styles, callbacks, strings, passwordResetToken]);
     return React.createElement("div", { ref: containerEl });
 };
 /**
@@ -279,7 +281,7 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
  *   }}
  * />
  */
-const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
+const StytchPasskeyRegistration = ({ config, styles, callbacks, strings, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchPasskeyRegistration />'));
     const stytchClient = useStytch();
     const user = useStytchUser$1();
@@ -300,8 +302,9 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
             callbacks,
             elementId: `#${containerEl.current.id}`,
             styles,
+            strings,
         });
-    }, [stytchClient, config, styles, callbacks, user]);
+    }, [stytchClient, config, styles, callbacks, strings, user]);
     return React.createElement("div", { ref: containerEl });
 };
 /**
@@ -331,7 +334,7 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
  *   }}
  * />
  */
-const IdentityProvider = ({ styles, callbacks }) => {
+const IdentityProvider = ({ styles, callbacks, strings }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<IdentityProvider />'));
     const stytchClient = useStytch();
     const user = useStytchUser$1();
@@ -351,8 +354,9 @@ const IdentityProvider = ({ styles, callbacks }) => {
             callbacks,
             elementId: `#${containerEl.current.id}`,
             styles,
+            strings,
         });
-    }, [stytchClient, styles, callbacks, user]);
+    }, [stytchClient, styles, callbacks, user, strings]);
     return React.createElement("div", { ref: containerEl });
 };
 

package/dist/index.js

@@ -181,7 +181,7 @@ const StytchProvider$1 = ({ stytch, children, assumeHydrated = false, }) => {
  *   }}
  * />
  */
-const StytchLogin = ({ config, styles, callbacks, }) => {
+const StytchLogin = ({ config, styles, callbacks, strings, }) => {
     useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchLogin />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
@@ -201,8 +201,9 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
             callbacks,
             elementId: `#${containerEl.current.id}`,
             styles,
+            strings,
         });
-    }, [stytchClient, config, styles, callbacks]);
+    }, [stytchClient, config, styles, callbacks, strings]);
     return React__default["default"].createElement("div", { ref: containerEl });
 };
 /**
@@ -235,7 +236,7 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
  *   }}
  * />
  */
-const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, }) => {
+const StytchPasswordReset = ({ config, styles, callbacks, strings, passwordResetToken, }) => {
     useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchResetPassword />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
@@ -256,10 +257,11 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
                 callbacks,
                 elementId: `#${containerEl.current.id}`,
                 styles,
+                strings,
                 passwordResetToken,
             });
         }
-    }, [stytchClient, config, styles, callbacks, passwordResetToken]);
+    }, [stytchClient, config, styles, callbacks, strings, passwordResetToken]);
     return React__default["default"].createElement("div", { ref: containerEl });
 };
 /**
@@ -287,7 +289,7 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
  *   }}
  * />
  */
-const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
+const StytchPasskeyRegistration = ({ config, styles, callbacks, strings, }) => {
     useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchPasskeyRegistration />'));
     const stytchClient = useStytch();
     const user = useStytchUser$1();
@@ -308,8 +310,9 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
             callbacks,
             elementId: `#${containerEl.current.id}`,
             styles,
+            strings,
         });
-    }, [stytchClient, config, styles, callbacks, user]);
+    }, [stytchClient, config, styles, callbacks, strings, user]);
     return React__default["default"].createElement("div", { ref: containerEl });
 };
 /**
@@ -339,7 +342,7 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
  *   }}
  * />
  */
-const IdentityProvider = ({ styles, callbacks }) => {
+const IdentityProvider = ({ styles, callbacks, strings }) => {
     useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<IdentityProvider />'));
     const stytchClient = useStytch();
     const user = useStytchUser$1();
@@ -359,8 +362,9 @@ const IdentityProvider = ({ styles, callbacks }) => {
             callbacks,
             elementId: `#${containerEl.current.id}`,
             styles,
+            strings,
         });
-    }, [stytchClient, styles, callbacks, user]);
+    }, [stytchClient, styles, callbacks, user, strings]);
     return React__default["default"].createElement("div", { ref: containerEl });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/react",
-  "version": "19.5.5",
+  "version": "19.6.0",
   "description": "Stytch's official React Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -34,12 +34,12 @@
     "user"
   ],
   "devDependencies": {
-    "@babel/runtime": "7.27.0",
+    "@babel/runtime": "7.27.1",
     "@stytch/internal-react-shared": "0.0.0",
     "@stytch/internal-test-utils": "0.0.0",
     "@stytch/internal-tsconfigs": "0.0.0",
     "@stytch/js-utils": "0.0.1",
-    "@stytch/vanilla-js": "5.24.6",
+    "@stytch/vanilla-js": "5.25.0",
     "@testing-library/react": "14.0.0",
     "@types/jest": "29.5.14",
     "eslint-config-custom": "0.0.1",