@stytch/react 19.1.1 → 19.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @stytch/react
 
+## 19.2.0
+
+### Minor Changes
+
+- 6daadc7: Add support for TypeScript-based Stytch project configurations
+
+### Patch Changes
+
+- ac0778e: Fix error message when mounting Admin Portal components without a StytchB2BProvider
+
+## 19.1.2
+
+### Patch Changes
+
+- 26a2e95: Fixed <StytchB2B /> error message
+
 ## 19.1.1
 
 ### Patch Changes

package/dist/{StytchB2BContext-8acafb28.d.ts → StytchB2BContext-865b6947.d.ts}

@@ -2,12 +2,12 @@
 import React from 'react';
 import { ReactNode } from "react";
 import { Member, MemberSession, Organization, StytchB2BUIClient } from '@stytch/vanilla-js/b2b';
-import { StytchB2BHeadlessClient } from '@stytch/vanilla-js/b2b/headless';
+import { StytchB2BHeadlessClient, StytchProjectConfigurationInput } from '@stytch/vanilla-js/b2b/headless';
 import { PermissionsMap } from '@stytch/core/public';
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your application root.
  */
-type StytchB2BClient = StytchB2BHeadlessClient | StytchB2BUIClient;
+type StytchB2BClient<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchB2BHeadlessClient<TProjectConfiguration> | StytchB2BUIClient<TProjectConfiguration>;
 type SWRMember = {
     /**
      * Either the active {@link Member} object, or null if the member is not logged in.
@@ -39,7 +39,7 @@ type SWROrganization = {
     fromCache: boolean;
 };
 declare const useIsMounted__INTERNAL: () => boolean;
-declare const isUIClient: (client: StytchB2BClient) => client is StytchB2BUIClient;
+declare const isUIClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration>>(client: StytchB2BClient<TProjectConfiguration>) => client is StytchB2BUIClient<TProjectConfiguration>;
 /**
  * Returns the active Member.
  * Check the fromCache property to determine if the member data is from persistent storage.
@@ -101,9 +101,9 @@ declare const useStytchIsAuthorized: (resourceId: string, action: string) => SWR
  *   stytch.magicLinks.authenticate('...')
  * }, [stytch]);
  */
-declare const useStytchB2BClient: () => StytchB2BHeadlessClient;
-declare const withStytchB2BClient: <T extends object>(Component: React.ComponentType<T & {
-    stytch: StytchB2BHeadlessClient;
+declare const useStytchB2BClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>() => StytchB2BHeadlessClient<TProjectConfiguration>;
+declare const withStytchB2BClient: <T extends object, TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration>>(Component: React.ComponentType<T & {
+    stytch: StytchB2BHeadlessClient<TProjectConfiguration>;
 }>) => React.ComponentType<T>;
 declare const withStytchMember: <T extends object>(Component: React.ComponentType<T & {
     stytchMember: Member | null;
@@ -141,11 +141,11 @@ declare const withStytchOrganization: <T extends object>(Component: React.Compon
 declare const withStytchPermissions: <Permissions_1 extends Record<string, string>, T extends object>(Component: React.ComponentType<T & {
     stytchPermissions: PermissionsMap<Permissions_1>;
 }>) => React.ComponentType<T>;
-type StytchB2BProviderProps = {
+type StytchB2BProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> = {
     /**
      * A Stytch client instance {@link StytchB2BHeadlessClient}
      */
-    stytch: StytchB2BClient;
+    stytch: StytchB2BClient<TProjectConfiguration>;
     children?: ReactNode;
 };
 /**
@@ -161,5 +161,5 @@ type StytchB2BProviderProps = {
  *   document.getElementById('root'),
  * )
  */
-declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps) => JSX.Element;
+declare const StytchB2BProvider: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ stytch, children, }: StytchB2BProviderProps<TProjectConfiguration>) => JSX.Element;
 export { useIsMounted__INTERNAL, isUIClient, useStytchMember, useStytchMemberSession, useStytchOrganization, useStytchIsAuthorized, useStytchB2BClient, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchOrganization, withStytchPermissions, StytchB2BProviderProps, StytchB2BProvider };

package/dist/{StytchB2BContext-d240104b.js → StytchB2BContext-865b6947.js}

@@ -195,7 +195,7 @@ const withStytchPermissions = (Component) => {
  *   document.getElementById('root'),
  * )
  */
-const StytchB2BProvider = ({ stytch, children }) => {
+const StytchB2BProvider = ({ stytch, children, }) => {
     invariant.invariant(!useIsMounted__INTERNAL(), invariant.B2BProviderMustBeUniqueError);
     invariant.invariant(typeof window !== 'undefined', invariant.noSSRError);
     const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);

package/dist/{StytchB2BContext-d240104b.d.ts → StytchB2BContext-b356bcf6.d.ts}

@@ -2,12 +2,12 @@
 import React from 'react';
 import { ReactNode } from "react";
 import { Member, MemberSession, Organization, StytchB2BUIClient } from '@stytch/vanilla-js/b2b';
-import { StytchB2BHeadlessClient } from '@stytch/vanilla-js/b2b/headless';
+import { StytchB2BHeadlessClient, StytchProjectConfigurationInput } from '@stytch/vanilla-js/b2b/headless';
 import { PermissionsMap } from '@stytch/core/public';
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your application root.
  */
-type StytchB2BClient = StytchB2BHeadlessClient | StytchB2BUIClient;
+type StytchB2BClient<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchB2BHeadlessClient<TProjectConfiguration> | StytchB2BUIClient<TProjectConfiguration>;
 type SWRMember = {
     /**
      * Either the active {@link Member} object, or null if the member is not logged in.
@@ -39,7 +39,7 @@ type SWROrganization = {
     fromCache: boolean;
 };
 declare const useIsMounted__INTERNAL: () => boolean;
-declare const isUIClient: (client: StytchB2BClient) => client is StytchB2BUIClient;
+declare const isUIClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration>>(client: StytchB2BClient<TProjectConfiguration>) => client is StytchB2BUIClient<TProjectConfiguration>;
 /**
  * Returns the active Member.
  * Check the fromCache property to determine if the member data is from persistent storage.
@@ -101,9 +101,9 @@ declare const useStytchIsAuthorized: (resourceId: string, action: string) => SWR
  *   stytch.magicLinks.authenticate('...')
  * }, [stytch]);
  */
-declare const useStytchB2BClient: () => StytchB2BHeadlessClient;
-declare const withStytchB2BClient: <T extends object>(Component: React.ComponentType<T & {
-    stytch: StytchB2BHeadlessClient;
+declare const useStytchB2BClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>() => StytchB2BHeadlessClient<TProjectConfiguration>;
+declare const withStytchB2BClient: <T extends object, TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration>>(Component: React.ComponentType<T & {
+    stytch: StytchB2BHeadlessClient<TProjectConfiguration>;
 }>) => React.ComponentType<T>;
 declare const withStytchMember: <T extends object>(Component: React.ComponentType<T & {
     stytchMember: Member | null;
@@ -141,11 +141,11 @@ declare const withStytchOrganization: <T extends object>(Component: React.Compon
 declare const withStytchPermissions: <Permissions_1 extends Record<string, string>, T extends object>(Component: React.ComponentType<T & {
     stytchPermissions: PermissionsMap<Permissions_1>;
 }>) => React.ComponentType<T>;
-type StytchB2BProviderProps = {
+type StytchB2BProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> = {
     /**
      * A Stytch client instance {@link StytchB2BHeadlessClient}
      */
-    stytch: StytchB2BClient;
+    stytch: StytchB2BClient<TProjectConfiguration>;
     children?: ReactNode;
 };
 /**
@@ -161,5 +161,5 @@ type StytchB2BProviderProps = {
  *   document.getElementById('root'),
  * )
  */
-declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps) => JSX.Element;
+declare const StytchB2BProvider: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ stytch, children, }: StytchB2BProviderProps<TProjectConfiguration>) => JSX.Element;
 export { useIsMounted__INTERNAL, isUIClient, useStytchMember, useStytchMemberSession, useStytchOrganization, useStytchIsAuthorized, useStytchB2BClient, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchOrganization, withStytchPermissions, StytchB2BProviderProps, StytchB2BProvider };

package/dist/{StytchB2BContext-8acafb28.js → StytchB2BContext-b356bcf6.js}

@@ -189,7 +189,7 @@ const withStytchPermissions = (Component) => {
  *   document.getElementById('root'),
  * )
  */
-const StytchB2BProvider = ({ stytch, children }) => {
+const StytchB2BProvider = ({ stytch, children, }) => {
     invariant(!useIsMounted__INTERNAL(), B2BProviderMustBeUniqueError);
     invariant(typeof window !== 'undefined', noSSRError);
     const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);

package/dist/adminPortal/index.d.ts

@@ -1,43 +1,44 @@
 /// <reference types="react" />
 import { AdminPortalSSOMountOptions, AdminPortalOrgSettingsMountOptions, AdminPortalMemberManagementMountOptions, AdminPortalSCIMMountOptions } from "@stytch/vanilla-js/b2b/adminPortal";
-import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
-interface InjectedOptions {
-    client: StytchB2BHeadlessClient;
+import { StytchB2BHeadlessClient, StytchProjectConfigurationInput } from "@stytch/vanilla-js/b2b/headless";
+import { StytchProjectConfigurationInput as StytchProjectConfigurationInput$0 } from "@stytch/vanilla-js";
+interface InjectedOptions<TProjectConfiguration extends StytchProjectConfigurationInput> {
+    client: StytchB2BHeadlessClient<TProjectConfiguration>;
     element: HTMLElement;
 }
-type ExcludeInjectedOptions<T> = Omit<T, keyof InjectedOptions>;
-type AdminPortalSSOProps = ExcludeInjectedOptions<AdminPortalSSOMountOptions>;
+type ExcludeInjectedOptions<T> = Omit<T, keyof InjectedOptions<StytchProjectConfigurationInput>>;
+type AdminPortalSSOProps<TProjectConfiguration extends StytchProjectConfigurationInput$0 = Stytch.DefaultProjectConfiguration> = ExcludeInjectedOptions<AdminPortalSSOMountOptions<TProjectConfiguration>>;
 /**
  * The Admin Portal SSO UI component.
  * This component must be rendered within a {@link StytchB2BProvider}.
  *
  * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
  */
-declare const AdminPortalSSO: (props: ExcludeInjectedOptions<AdminPortalSSOMountOptions>) => JSX.Element;
-type AdminPortalOrgSettingsProps = ExcludeInjectedOptions<AdminPortalOrgSettingsMountOptions>;
+declare const AdminPortalSSO: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(props: ExcludeInjectedOptions<AdminPortalSSOMountOptions<Partial<import("core/dist/public").StytchProjectConfiguration>>>) => JSX.Element;
+type AdminPortalOrgSettingsProps<TProjectConfiguration extends StytchProjectConfigurationInput$0 = Stytch.DefaultProjectConfiguration> = ExcludeInjectedOptions<AdminPortalOrgSettingsMountOptions<TProjectConfiguration>>;
 /**
  * The Admin Portal Organization Settings UI component.
  * This component must be rendered within a {@link StytchB2BProvider}.
  *
  * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
  */
-declare const AdminPortalOrgSettings: (props: ExcludeInjectedOptions<AdminPortalOrgSettingsMountOptions>) => JSX.Element;
-type AdminPortalMemberManagementProps = ExcludeInjectedOptions<AdminPortalMemberManagementMountOptions>;
+declare const AdminPortalOrgSettings: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(props: ExcludeInjectedOptions<AdminPortalOrgSettingsMountOptions<Partial<import("core/dist/public").StytchProjectConfiguration>>>) => JSX.Element;
+type AdminPortalMemberManagementProps<TProjectConfiguration extends StytchProjectConfigurationInput$0 = Stytch.DefaultProjectConfiguration> = ExcludeInjectedOptions<AdminPortalMemberManagementMountOptions<TProjectConfiguration>>;
 /**
  * The Admin Portal member management UI component.
  * This component must be rendered within a {@link StytchB2BProvider}.
  *
  * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
  */
-declare const AdminPortalMemberManagement: (props: ExcludeInjectedOptions<AdminPortalMemberManagementMountOptions>) => JSX.Element;
-type AdminPortalSCIMProps = ExcludeInjectedOptions<AdminPortalSCIMMountOptions>;
+declare const AdminPortalMemberManagement: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(props: ExcludeInjectedOptions<AdminPortalMemberManagementMountOptions<Partial<import("core/dist/public").StytchProjectConfiguration>>>) => JSX.Element;
+type AdminPortalSCIMProps<TProjectConfiguration extends StytchProjectConfigurationInput$0 = Stytch.DefaultProjectConfiguration> = ExcludeInjectedOptions<AdminPortalSCIMMountOptions<TProjectConfiguration>>;
 /**
  * The Admin Portal SCIM UI component.
  * This component must be rendered within a {@link StytchB2BProvider}.
  *
  * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
  */
-declare const AdminPortalSCIM: (props: ExcludeInjectedOptions<AdminPortalSCIMMountOptions>) => JSX.Element;
+declare const AdminPortalSCIM: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(props: ExcludeInjectedOptions<AdminPortalSCIMMountOptions<Partial<import("core/dist/public").StytchProjectConfiguration>>>) => JSX.Element;
 export { AdminPortalSSO, AdminPortalOrgSettings, AdminPortalMemberManagement, AdminPortalSCIM };
 export { AdminPortalB2BProducts } from "@stytch/vanilla-js/b2b/adminPortal";
 export type { AdminPortalSSOProps, AdminPortalOrgSettingsProps, AdminPortalMemberManagementProps, AdminPortalSCIMProps };

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

@@ -1,43 +1,44 @@
 /// <reference types="react" />
 import { AdminPortalSSOMountOptions, AdminPortalOrgSettingsMountOptions, AdminPortalMemberManagementMountOptions, AdminPortalSCIMMountOptions } from "@stytch/vanilla-js/b2b/adminPortal";
-import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
-interface InjectedOptions {
-    client: StytchB2BHeadlessClient;
+import { StytchB2BHeadlessClient, StytchProjectConfigurationInput } from "@stytch/vanilla-js/b2b/headless";
+import { StytchProjectConfigurationInput as StytchProjectConfigurationInput$0 } from "@stytch/vanilla-js";
+interface InjectedOptions<TProjectConfiguration extends StytchProjectConfigurationInput> {
+    client: StytchB2BHeadlessClient<TProjectConfiguration>;
     element: HTMLElement;
 }
-type ExcludeInjectedOptions<T> = Omit<T, keyof InjectedOptions>;
-type AdminPortalSSOProps = ExcludeInjectedOptions<AdminPortalSSOMountOptions>;
+type ExcludeInjectedOptions<T> = Omit<T, keyof InjectedOptions<StytchProjectConfigurationInput>>;
+type AdminPortalSSOProps<TProjectConfiguration extends StytchProjectConfigurationInput$0 = Stytch.DefaultProjectConfiguration> = ExcludeInjectedOptions<AdminPortalSSOMountOptions<TProjectConfiguration>>;
 /**
  * The Admin Portal SSO UI component.
  * This component must be rendered within a {@link StytchB2BProvider}.
  *
  * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
  */
-declare const AdminPortalSSO: (props: ExcludeInjectedOptions<AdminPortalSSOMountOptions>) => JSX.Element;
-type AdminPortalOrgSettingsProps = ExcludeInjectedOptions<AdminPortalOrgSettingsMountOptions>;
+declare const AdminPortalSSO: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(props: ExcludeInjectedOptions<AdminPortalSSOMountOptions<Partial<import("core/dist/public").StytchProjectConfiguration>>>) => JSX.Element;
+type AdminPortalOrgSettingsProps<TProjectConfiguration extends StytchProjectConfigurationInput$0 = Stytch.DefaultProjectConfiguration> = ExcludeInjectedOptions<AdminPortalOrgSettingsMountOptions<TProjectConfiguration>>;
 /**
  * The Admin Portal Organization Settings UI component.
  * This component must be rendered within a {@link StytchB2BProvider}.
  *
  * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
  */
-declare const AdminPortalOrgSettings: (props: ExcludeInjectedOptions<AdminPortalOrgSettingsMountOptions>) => JSX.Element;
-type AdminPortalMemberManagementProps = ExcludeInjectedOptions<AdminPortalMemberManagementMountOptions>;
+declare const AdminPortalOrgSettings: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(props: ExcludeInjectedOptions<AdminPortalOrgSettingsMountOptions<Partial<import("core/dist/public").StytchProjectConfiguration>>>) => JSX.Element;
+type AdminPortalMemberManagementProps<TProjectConfiguration extends StytchProjectConfigurationInput$0 = Stytch.DefaultProjectConfiguration> = ExcludeInjectedOptions<AdminPortalMemberManagementMountOptions<TProjectConfiguration>>;
 /**
  * The Admin Portal member management UI component.
  * This component must be rendered within a {@link StytchB2BProvider}.
  *
  * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
  */
-declare const AdminPortalMemberManagement: (props: ExcludeInjectedOptions<AdminPortalMemberManagementMountOptions>) => JSX.Element;
-type AdminPortalSCIMProps = ExcludeInjectedOptions<AdminPortalSCIMMountOptions>;
+declare const AdminPortalMemberManagement: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(props: ExcludeInjectedOptions<AdminPortalMemberManagementMountOptions<Partial<import("core/dist/public").StytchProjectConfiguration>>>) => JSX.Element;
+type AdminPortalSCIMProps<TProjectConfiguration extends StytchProjectConfigurationInput$0 = Stytch.DefaultProjectConfiguration> = ExcludeInjectedOptions<AdminPortalSCIMMountOptions<TProjectConfiguration>>;
 /**
  * The Admin Portal SCIM UI component.
  * This component must be rendered within a {@link StytchB2BProvider}.
  *
  * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
  */
-declare const AdminPortalSCIM: (props: ExcludeInjectedOptions<AdminPortalSCIMMountOptions>) => JSX.Element;
+declare const AdminPortalSCIM: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(props: ExcludeInjectedOptions<AdminPortalSCIMMountOptions<Partial<import("core/dist/public").StytchProjectConfiguration>>>) => JSX.Element;
 export { AdminPortalSSO, AdminPortalOrgSettings, AdminPortalMemberManagement, AdminPortalSCIM };
 export { AdminPortalB2BProducts } from "@stytch/vanilla-js/b2b/adminPortal";
 export type { AdminPortalSSOProps, AdminPortalOrgSettingsProps, AdminPortalMemberManagementProps, AdminPortalSCIMProps };

package/dist/adminPortal/index.esm.js

@@ -1,12 +1,12 @@
 import { mountAdminPortalSSO, mountAdminPortalOrgSettings, mountAdminPortalMemberManagement, mountAdminPortalSCIM } from '@stytch/vanilla-js/b2b/adminPortal';
 export { AdminPortalB2BProducts } from '@stytch/vanilla-js/b2b/adminPortal';
 import React, { useRef, useLayoutEffect } from 'react';
-import { u as useIsMounted__INTERNAL, a as useStytchB2BClient } from '../StytchB2BContext-8acafb28.js';
+import { u as useIsMounted__INTERNAL, a as useStytchB2BClient } from '../StytchB2BContext-b356bcf6.js';
 import { i as invariant, n as noProviderError } from '../invariant-568a7633.js';
 
 const makeAdminPortalComponent = (mountFn, componentName) => {
     const Component = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError(`<${componentName} />`));
+        invariant(useIsMounted__INTERNAL(), noProviderError(`<${componentName} />`, 'StytchB2BProvider'));
         const stytchClient = useStytchB2BClient();
         const containerEl = useRef(null);
         useLayoutEffect(() => {

package/dist/adminPortal/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var adminPortal = require('@stytch/vanilla-js/b2b/adminPortal');
 var React = require('react');
-var StytchB2BContext = require('../StytchB2BContext-d240104b.js');
+var StytchB2BContext = require('../StytchB2BContext-865b6947.js');
 var invariant = require('../invariant-ae5a5bce.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -13,7 +13,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const makeAdminPortalComponent = (mountFn, componentName) => {
     const Component = (props) => {
-        invariant.invariant(StytchB2BContext.useIsMounted__INTERNAL(), invariant.noProviderError(`<${componentName} />`));
+        invariant.invariant(StytchB2BContext.useIsMounted__INTERNAL(), invariant.noProviderError(`<${componentName} />`, 'StytchB2BProvider'));
         const stytchClient = StytchB2BContext.useStytchB2BClient();
         const containerEl = React.useRef(null);
         React.useLayoutEffect(() => {

package/dist/b2b/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
-import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
-interface StytchB2BProps {
+import { Callbacks, StyleConfig, StytchB2BUIConfig, StytchProjectConfigurationInput } from "@stytch/vanilla-js";
+interface StytchB2BProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
      * An optional {@link StyleConfig} to customize the look and feel of the screen.
      *
@@ -32,7 +32,7 @@ interface StytchB2BProps {
      *   }
      * }
      */
-    callbacks?: Callbacks;
+    callbacks?: Callbacks<TProjectConfiguration>;
     /**
      * A {@link StytchB2BUIConfig} object. Add products and product-specific config to this object to change the login methods shown.
      *
@@ -102,7 +102,7 @@ interface StytchB2BProps {
  * />
  * @param props {@link StytchB2BProps}
  */
-declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-d240104b.js";
+declare const StytchB2B: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration>>({ styles, callbacks, config }: StytchB2BProps<TProjectConfiguration>) => React.JSX.Element;
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-865b6947.js";
 export { StytchB2B };
-export type { StytchB2BProviderProps } from "../StytchB2BContext-d240104b.js";
+export type { StytchB2BProviderProps } from "../StytchB2BContext-865b6947.js";

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
-import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
-interface StytchB2BProps {
+import { Callbacks, StyleConfig, StytchB2BUIConfig, StytchProjectConfigurationInput } from "@stytch/vanilla-js";
+interface StytchB2BProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
      * An optional {@link StyleConfig} to customize the look and feel of the screen.
      *
@@ -32,7 +32,7 @@ interface StytchB2BProps {
      *   }
      * }
      */
-    callbacks?: Callbacks;
+    callbacks?: Callbacks<TProjectConfiguration>;
     /**
      * A {@link StytchB2BUIConfig} object. Add products and product-specific config to this object to change the login methods shown.
      *
@@ -102,7 +102,7 @@ interface StytchB2BProps {
  * />
  * @param props {@link StytchB2BProps}
  */
-declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-8acafb28.js";
+declare const StytchB2B: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration>>({ styles, callbacks, config }: StytchB2BProps<TProjectConfiguration>) => React.JSX.Element;
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-b356bcf6.js";
 export { StytchB2B };
-export type { StytchB2BProviderProps } from "../StytchB2BContext-8acafb28.js";
+export type { StytchB2BProviderProps } from "../StytchB2BContext-b356bcf6.js";

package/dist/b2b/index.esm.js

@@ -1,5 +1,5 @@
-import { u as useIsMounted__INTERNAL, a as useStytchB2BClient, i as isUIClient } from '../StytchB2BContext-8acafb28.js';
-export { S as StytchB2BProvider, a as useStytchB2BClient, d as useStytchIsAuthorized, c as useStytchMember, b as useStytchMemberSession, e as useStytchOrganization, w as withStytchB2BClient, g as withStytchMember, f as withStytchMemberSession, h as withStytchOrganization, j as withStytchPermissions } from '../StytchB2BContext-8acafb28.js';
+import { u as useIsMounted__INTERNAL, a as useStytchB2BClient, i as isUIClient } from '../StytchB2BContext-b356bcf6.js';
+export { S as StytchB2BProvider, a as useStytchB2BClient, d as useStytchIsAuthorized, c as useStytchMember, b as useStytchMemberSession, e as useStytchOrganization, w as withStytchB2BClient, g as withStytchMember, f as withStytchMemberSession, h as withStytchOrganization, j as withStytchPermissions } from '../StytchB2BContext-b356bcf6.js';
 import React, { useRef, useLayoutEffect } from 'react';
 import { i as invariant, b as noHeadlessClientError, n as noProviderError } from '../invariant-568a7633.js';
 
@@ -37,8 +37,8 @@ import { i as invariant, b as noHeadlessClientError, n as noProviderError } from
  * />
  * @param props {@link StytchB2BProps}
  */
-const StytchB2B = ({ styles, callbacks, config }) => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchB2B />'));
+const StytchB2B = ({ styles, callbacks, config, }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchB2B />', 'StytchB2BProvider'));
     const stytchClient = useStytchB2BClient();
     const containerEl = useRef(null);
     useLayoutEffect(() => {

package/dist/b2b/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var StytchB2BContext = require('../StytchB2BContext-d240104b.js');
+var StytchB2BContext = require('../StytchB2BContext-865b6947.js');
 var React = require('react');
 var invariant = require('../invariant-ae5a5bce.js');
 
@@ -44,8 +44,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * />
  * @param props {@link StytchB2BProps}
  */
-const StytchB2B = ({ styles, callbacks, config }) => {
-    invariant.invariant(StytchB2BContext.useIsMounted__INTERNAL(), invariant.noProviderError('<StytchB2B />'));
+const StytchB2B = ({ styles, callbacks, config, }) => {
+    invariant.invariant(StytchB2BContext.useIsMounted__INTERNAL(), invariant.noProviderError('<StytchB2B />', 'StytchB2BProvider'));
     const stytchClient = StytchB2BContext.useStytchB2BClient();
     const containerEl = React.useRef(null);
     React.useLayoutEffect(() => {

package/dist/index.d.ts

@@ -2,10 +2,9 @@
 import React from "react";
 import { ReactNode } from "react";
 // We need to import the StytchUIClient type to give the TSDoc parser a hint as to where it is from
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Callbacks, StytchLoginConfig, StyleConfig, Session, StytchUIClient, User } from "@stytch/vanilla-js";
+import { Callbacks, StytchLoginConfig, StyleConfig, StytchProjectConfigurationInput, Session, StytchUIClient, User } from "@stytch/vanilla-js";
 import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
-interface StytchProps {
+interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
      * A {@link StytchLoginConfig} object. Add products and product-specific config to this object to change the login methods shown.
      *
@@ -67,7 +66,7 @@ interface StytchProps {
      *   }
      * }
      */
-    callbacks?: Callbacks;
+    callbacks?: Callbacks<TProjectConfiguration>;
 }
 /**
  * The Stytch Login Screen component.
@@ -100,8 +99,8 @@ interface StytchProps {
  * />
  * @param props {@link StytchProps}
  */
-declare const StytchLogin: ({ config, styles, callbacks }: StytchProps) => React.JSX.Element;
-interface StytchResetPasswordProps extends StytchProps {
+declare const StytchLogin: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
+interface StytchResetPasswordProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends StytchProps<TProjectConfiguration> {
     passwordResetToken: string;
 }
 /**
@@ -140,13 +139,13 @@ interface StytchResetPasswordProps extends StytchProps {
  * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
  * @param callbacks - An optional {@link Callbacks} object
  */
-declare const StytchPasswordReset: ({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps) => React.JSX.Element;
-declare const StytchPasskeyRegistration: ({ config, styles, callbacks }: StytchProps) => React.JSX.Element;
+declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps<TProjectConfiguration>) => React.JSX.Element;
+declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your application root.
  * Either a StytchUIClient or StytchHeadlessClient.
  */
-type StytchClient = StytchUIClient | StytchHeadlessClient;
+type StytchClient<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchUIClient<TProjectConfiguration> | StytchHeadlessClient<TProjectConfiguration>;
 type SWRUser = {
     /**
      * Either the active {@link User} object, or null if the user is not logged in.
@@ -197,9 +196,9 @@ declare const useStytchSession: () => SWRSession;
  *   stytch.magicLinks.authenticate('...')
  * }, [stytch]);
  */
-declare const useStytch: () => StytchClient;
-declare const withStytch: <T extends object>(Component: React.ComponentType<T & {
-    stytch: StytchClient;
+declare const useStytch: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>() => StytchClient<TProjectConfiguration>;
+declare const withStytch: <T extends object, TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(Component: React.ComponentType<T & {
+    stytch: StytchClient<TProjectConfiguration>;
 }>) => React.ComponentType<T>;
 declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
     stytchUser: User | null;
@@ -209,11 +208,11 @@ declare const withStytchSession: <T extends object>(Component: React.ComponentTy
     stytchSession: Session | null;
     stytchSessionIsFromCache: boolean;
 }>) => React.ComponentType<T>;
-type StytchProviderProps = {
+type StytchProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> = {
     /**
      * A Stytch client instance, either a {@link StytchUIClient} or {@link StytchHeadlessClient}
      */
-    stytch: StytchClient;
+    stytch: StytchClient<TProjectConfiguration>;
     children?: ReactNode;
 };
 /**
@@ -229,6 +228,6 @@ type StytchProviderProps = {
  *   document.getElementById('root'),
  * )
  */
-declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
+declare const StytchProvider: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ stytch, children }: StytchProviderProps<TProjectConfiguration>) => JSX.Element;
 export { StytchLogin, StytchPasswordReset, StytchPasskeyRegistration, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
 export type { StytchProviderProps };

package/dist/index.esm.d.ts

@@ -2,10 +2,9 @@
 import React from "react";
 import { ReactNode } from "react";
 // We need to import the StytchUIClient type to give the TSDoc parser a hint as to where it is from
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Callbacks, StytchLoginConfig, StyleConfig, Session, StytchUIClient, User } from "@stytch/vanilla-js";
+import { Callbacks, StytchLoginConfig, StyleConfig, StytchProjectConfigurationInput, Session, StytchUIClient, User } from "@stytch/vanilla-js";
 import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
-interface StytchProps {
+interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
      * A {@link StytchLoginConfig} object. Add products and product-specific config to this object to change the login methods shown.
      *
@@ -67,7 +66,7 @@ interface StytchProps {
      *   }
      * }
      */
-    callbacks?: Callbacks;
+    callbacks?: Callbacks<TProjectConfiguration>;
 }
 /**
  * The Stytch Login Screen component.
@@ -100,8 +99,8 @@ interface StytchProps {
  * />
  * @param props {@link StytchProps}
  */
-declare const StytchLogin: ({ config, styles, callbacks }: StytchProps) => React.JSX.Element;
-interface StytchResetPasswordProps extends StytchProps {
+declare const StytchLogin: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
+interface StytchResetPasswordProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends StytchProps<TProjectConfiguration> {
     passwordResetToken: string;
 }
 /**
@@ -140,13 +139,13 @@ interface StytchResetPasswordProps extends StytchProps {
  * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
  * @param callbacks - An optional {@link Callbacks} object
  */
-declare const StytchPasswordReset: ({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps) => React.JSX.Element;
-declare const StytchPasskeyRegistration: ({ config, styles, callbacks }: StytchProps) => React.JSX.Element;
+declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps<TProjectConfiguration>) => React.JSX.Element;
+declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your application root.
  * Either a StytchUIClient or StytchHeadlessClient.
  */
-type StytchClient = StytchUIClient | StytchHeadlessClient;
+type StytchClient<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchUIClient<TProjectConfiguration> | StytchHeadlessClient<TProjectConfiguration>;
 type SWRUser = {
     /**
      * Either the active {@link User} object, or null if the user is not logged in.
@@ -197,9 +196,9 @@ declare const useStytchSession: () => SWRSession;
  *   stytch.magicLinks.authenticate('...')
  * }, [stytch]);
  */
-declare const useStytch: () => StytchClient;
-declare const withStytch: <T extends object>(Component: React.ComponentType<T & {
-    stytch: StytchClient;
+declare const useStytch: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>() => StytchClient<TProjectConfiguration>;
+declare const withStytch: <T extends object, TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(Component: React.ComponentType<T & {
+    stytch: StytchClient<TProjectConfiguration>;
 }>) => React.ComponentType<T>;
 declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
     stytchUser: User | null;
@@ -209,11 +208,11 @@ declare const withStytchSession: <T extends object>(Component: React.ComponentTy
     stytchSession: Session | null;
     stytchSessionIsFromCache: boolean;
 }>) => React.ComponentType<T>;
-type StytchProviderProps = {
+type StytchProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> = {
     /**
      * A Stytch client instance, either a {@link StytchUIClient} or {@link StytchHeadlessClient}
      */
-    stytch: StytchClient;
+    stytch: StytchClient<TProjectConfiguration>;
     children?: ReactNode;
 };
 /**
@@ -229,6 +228,6 @@ type StytchProviderProps = {
  *   document.getElementById('root'),
  * )
  */
-declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
+declare const StytchProvider: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ stytch, children }: StytchProviderProps<TProjectConfiguration>) => JSX.Element;
 export { StytchLogin, StytchPasswordReset, StytchPasskeyRegistration, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
 export type { StytchProviderProps };

package/dist/index.esm.js

@@ -96,7 +96,7 @@ const withStytchSession = (Component) => {
  *   document.getElementById('root'),
  * )
  */
-const StytchProvider = ({ stytch, children }) => {
+const StytchProvider = ({ stytch, children, }) => {
     invariant(!useIsMounted__INTERNAL(), providerMustBeUniqueError);
     invariant(typeof window !== 'undefined', noSSRError);
     const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
@@ -149,7 +149,7 @@ const StytchProvider = ({ stytch, children }) => {
  * />
  * @param props {@link StytchProps}
  */
-const StytchLogin = ({ config, styles, callbacks }) => {
+const StytchLogin = ({ config, styles, callbacks, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchLogin />'));
     const stytchClient = useStytch();
     const containerEl = useRef(null);
@@ -209,7 +209,7 @@ const StytchLogin = ({ config, styles, callbacks }) => {
  * @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 }) => {
+const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchResetPassword />'));
     const stytchClient = useStytch();
     const containerEl = useRef(null);
@@ -236,7 +236,7 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken })
     }, [stytchClient, config, styles, callbacks, passwordResetToken]);
     return React.createElement("div", { ref: containerEl });
 };
-const StytchPasskeyRegistration = ({ config, styles, callbacks }) => {
+const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
     /**
      * The Stytch Passkey Registration component.
      * This component can only be used with a {@link StytchUIClient} client constructor

package/dist/index.js

@@ -104,7 +104,7 @@ const withStytchSession = (Component) => {
  *   document.getElementById('root'),
  * )
  */
-const StytchProvider = ({ stytch, children }) => {
+const StytchProvider = ({ stytch, children, }) => {
     invariant.invariant(!useIsMounted__INTERNAL(), invariant.providerMustBeUniqueError);
     invariant.invariant(typeof window !== 'undefined', invariant.noSSRError);
     const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
@@ -157,7 +157,7 @@ const StytchProvider = ({ stytch, children }) => {
  * />
  * @param props {@link StytchProps}
  */
-const StytchLogin = ({ config, styles, callbacks }) => {
+const StytchLogin = ({ config, styles, callbacks, }) => {
     invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchLogin />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
@@ -217,7 +217,7 @@ const StytchLogin = ({ config, styles, callbacks }) => {
  * @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 }) => {
+const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, }) => {
     invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchResetPassword />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
@@ -244,7 +244,7 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken })
     }, [stytchClient, config, styles, callbacks, passwordResetToken]);
     return React__default["default"].createElement("div", { ref: containerEl });
 };
-const StytchPasskeyRegistration = ({ config, styles, callbacks }) => {
+const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
     /**
      * The Stytch Passkey Registration component.
      * This component can only be used with a {@link StytchUIClient} client constructor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/react",
-  "version": "19.1.1",
+  "version": "19.2.0",
   "description": "Stytch's official React Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -34,7 +34,7 @@
   "devDependencies": {
     "@babel/runtime": "7.18.6",
     "@stytch/js-utils": "0.0.0",
-    "@stytch/vanilla-js": "5.9.4",
+    "@stytch/vanilla-js": "5.11.0",
     "@testing-library/react": "14.0.0",
     "eslint-config-custom": "0.0.1",
     "react": "18.2.0",