@stytch/react - npm Package Compare versions

Comparing version 0.0.0-idp-20241219194424 to 0.0.0-idp-20250208002140

CHANGELOG.md

 # @stytch/react
 
-## 0.0.0-idp-20241219194424
+## 0.0.0-idp-20250208002140
 
 ### Patch Changes
 
-- B2B SDK UI; bugfixes
+- IDP publish
 - Updated dependencies
-- Updated dependencies [2b0e7e32]
-  - @stytch/vanilla-js@0.0.0-idp-20241219194424
+  - @stytch/vanilla-js@0.0.0-idp-20250208002140
 
+## 0.0.0-20250208002002
+
+### Patch Changes
+
+- IDP publish
+- Updated dependencies
+  - @stytch/vanilla-js@0.0.0-20250208002002
+
+## 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
+
+- 67cbee6a: Add DFPPA to OTP Email Login Or Create
+
 ## 19.1.0
@@ -13,0 +42,0 @@

dist/adminPortal/index.d.ts

 /// <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>>;
 /**
@@ -16,4 +17,4 @@ * The Admin Portal SSO UI component.
  */
-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>>;
 /**
@@ -25,4 +26,4 @@ * The Admin Portal Organization Settings UI component.
  */
-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>>;
 /**
@@ -34,4 +35,4 @@ * The Admin Portal member management UI component.
  */
-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>>;
 /**
@@ -43,5 +44,5 @@ * The Admin Portal SCIM UI component.
  */
-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 };

dist/adminPortal/index.esm.d.ts

 /// <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>>;
 /**
@@ -16,4 +17,4 @@ * The Admin Portal SSO UI component.
  */
-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>>;
 /**
@@ -25,4 +26,4 @@ * The Admin Portal Organization Settings UI component.
  */
-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>>;
 /**
@@ -34,4 +35,4 @@ * The Admin Portal member management UI component.
  */
-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>>;
 /**
@@ -43,5 +44,5 @@ * The Admin Portal SCIM UI component.
  */
-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 };

dist/adminPortal/index.esm.js

 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-58d6e3fa.js';
+import { u as useIsMounted__INTERNAL, a as useStytchB2BClient } from '../StytchB2BContext-081081ee.js';
 import { i as invariant, n as noProviderError } from '../invariant-568a7633.js';
@@ -9,3 +9,3 @@
     const Component = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError(`<${componentName} />`));
+        invariant(useIsMounted__INTERNAL(), noProviderError(`<${componentName} />`, 'StytchB2BProvider'));
         const stytchClient = useStytchB2BClient();
@@ -12,0 +12,0 @@ const containerEl = useRef(null);

dist/adminPortal/index.js

@@ -7,3 +7,3 @@ 'use strict';
 var React = require('react');
-var StytchB2BContext = require('../StytchB2BContext-d240104b.js');
+var StytchB2BContext = require('../StytchB2BContext-865b6947.js');
 var invariant = require('../invariant-ae5a5bce.js');
@@ -17,3 +17,3 @@
     const Component = (props) => {
-        invariant.invariant(StytchB2BContext.useIsMounted__INTERNAL(), invariant.noProviderError(`<${componentName} />`));
+        invariant.invariant(StytchB2BContext.useIsMounted__INTERNAL(), invariant.noProviderError(`<${componentName} />`, 'StytchB2BProvider'));
         const stytchClient = StytchB2BContext.useStytchB2BClient();
@@ -20,0 +20,0 @@ const containerEl = React.useRef(null);

dist/b2b/index.d.ts

 /// <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> {
     /**
@@ -35,3 +35,3 @@ * An optional {@link StyleConfig} to customize the look and feel of the screen.
      */
-    callbacks?: Callbacks;
+    callbacks?: Callbacks<TProjectConfiguration>;
     /**
@@ -107,3 +107,3 @@ * A {@link StytchB2BUIConfig} object. Add products and product-specific config to this object to change the login methods shown.
  */
-declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
+declare const StytchB2B: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration>>({ styles, callbacks, config }: StytchB2BProps<TProjectConfiguration>) => React.JSX.Element;
 /**
@@ -139,4 +139,4 @@ * The Stytch B2B IDP component.
 declare const StytchB2BIDP: ({ styles, callbacks }: StytchB2BIDPProps) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-d240104b.js";
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-865b6947.js";
 export { StytchB2B, StytchB2BIDP };
-export type { StytchB2BProviderProps } from "../StytchB2BContext-d240104b.js";
+export type { StytchB2BProviderProps } from "../StytchB2BContext-865b6947.js";

dist/b2b/index.esm.d.ts

 /// <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> {
     /**
@@ -35,3 +35,3 @@ * An optional {@link StyleConfig} to customize the look and feel of the screen.
      */
-    callbacks?: Callbacks;
+    callbacks?: Callbacks<TProjectConfiguration>;
     /**
@@ -107,3 +107,3 @@ * A {@link StytchB2BUIConfig} object. Add products and product-specific config to this object to change the login methods shown.
  */
-declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
+declare const StytchB2B: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration>>({ styles, callbacks, config }: StytchB2BProps<TProjectConfiguration>) => React.JSX.Element;
 /**
@@ -139,4 +139,4 @@ * The Stytch B2B IDP component.
 declare const StytchB2BIDP: ({ styles, callbacks }: StytchB2BIDPProps) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-58d6e3fa.js";
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-081081ee.js";
 export { StytchB2B, StytchB2BIDP };
-export type { StytchB2BProviderProps } from "../StytchB2BContext-58d6e3fa.js";
+export type { StytchB2BProviderProps } from "../StytchB2BContext-081081ee.js";

dist/b2b/index.esm.js

@@ -1,3 +0,3 @@
-import { u as useIsMounted__INTERNAL, a as useStytchB2BClient, i as isUIClient, b as useStytchMember } from '../StytchB2BContext-58d6e3fa.js';
-export { S as StytchB2BProvider, a as useStytchB2BClient, d as useStytchIsAuthorized, b as useStytchMember, c as useStytchMemberSession, e as useStytchOrganization, w as withStytchB2BClient, g as withStytchMember, f as withStytchMemberSession, h as withStytchOrganization, j as withStytchPermissions } from '../StytchB2BContext-58d6e3fa.js';
+import { u as useIsMounted__INTERNAL, a as useStytchB2BClient, i as isUIClient, b as useStytchMember } from '../StytchB2BContext-081081ee.js';
+export { S as StytchB2BProvider, a as useStytchB2BClient, d as useStytchIsAuthorized, b as useStytchMember, c as useStytchMemberSession, e as useStytchOrganization, w as withStytchB2BClient, g as withStytchMember, f as withStytchMemberSession, h as withStytchOrganization, j as withStytchPermissions } from '../StytchB2BContext-081081ee.js';
 import React, { useRef, useLayoutEffect } from 'react';
@@ -40,4 +40,4 @@ import { i as invariant, b as noHeadlessClientError, n as noProviderError } from '../invariant-568a7633.js';
  */
-const StytchB2B = ({ styles, callbacks, config }) => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchB2B />'));
+const StytchB2B = ({ styles, callbacks, config, }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchB2B />', 'StytchB2BProvider'));
     const stytchClient = useStytchB2BClient();
@@ -44,0 +44,0 @@ const containerEl = useRef(null);

dist/b2b/index.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var StytchB2BContext = require('../StytchB2BContext-d240104b.js');
+var StytchB2BContext = require('../StytchB2BContext-865b6947.js');
 var React = require('react');
@@ -48,4 +48,4 @@ var invariant = require('../invariant-ae5a5bce.js');
  */
-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();
@@ -52,0 +52,0 @@ const containerEl = React.useRef(null);

dist/index.d.ts

@@ -5,6 +5,5 @@ /// <reference types="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> {
     /**
@@ -71,3 +70,3 @@ * A {@link StytchLoginConfig} object. Add products and product-specific config to this object to change the login methods shown.
      */
-    callbacks?: Callbacks;
+    callbacks?: Callbacks<TProjectConfiguration>;
 }
@@ -104,4 +103,4 @@ /**
  */
-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;
@@ -145,37 +144,5 @@ }
  */
-declare const StytchPasswordReset: ({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps) => 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 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
- */
-declare const StytchPasskeyRegistration: ({ config, styles, callbacks }: StytchProps) => React.JSX.Element;
-/**
  * The Stytch IDP component.
@@ -215,3 +182,3 @@ * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
  */
-type StytchClient = StytchUIClient | StytchHeadlessClient;
+type StytchClient<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchUIClient<TProjectConfiguration> | StytchHeadlessClient<TProjectConfiguration>;
 type SWRUser = {
@@ -267,5 +234,5 @@ /**
  */
-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>;
@@ -280,7 +247,7 @@ declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
 }>) => 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;
@@ -301,4 +268,4 @@ };
  */
-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, StytchIDP, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
 export type { StytchProviderProps };

dist/index.esm.d.ts

@@ -5,6 +5,5 @@ /// <reference types="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> {
     /**
@@ -71,3 +70,3 @@ * A {@link StytchLoginConfig} object. Add products and product-specific config to this object to change the login methods shown.
      */
-    callbacks?: Callbacks;
+    callbacks?: Callbacks<TProjectConfiguration>;
 }
@@ -104,4 +103,4 @@ /**
  */
-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;
@@ -145,37 +144,5 @@ }
  */
-declare const StytchPasswordReset: ({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps) => 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 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
- */
-declare const StytchPasskeyRegistration: ({ config, styles, callbacks }: StytchProps) => React.JSX.Element;
-/**
  * The Stytch IDP component.
@@ -215,3 +182,3 @@ * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
  */
-type StytchClient = StytchUIClient | StytchHeadlessClient;
+type StytchClient<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchUIClient<TProjectConfiguration> | StytchHeadlessClient<TProjectConfiguration>;
 type SWRUser = {
@@ -267,5 +234,5 @@ /**
  */
-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>;
@@ -280,7 +247,7 @@ declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
 }>) => 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;
@@ -301,4 +268,4 @@ };
  */
-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, StytchIDP, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
 export type { StytchProviderProps };

dist/index.esm.js

@@ -99,3 +99,3 @@ import React, { createContext, useContext, useMemo, useEffect, useRef, useLayoutEffect } from 'react';
  */
-const StytchProvider = ({ stytch, children }) => {
+const StytchProvider = ({ stytch, children, }) => {
     invariant(!useIsMounted__INTERNAL(), providerMustBeUniqueError);
@@ -152,3 +152,3 @@ invariant(typeof window !== 'undefined', noSSRError);
  */
-const StytchLogin = ({ config, styles, callbacks }) => {
+const StytchLogin = ({ config, styles, callbacks, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchLogin />'));
@@ -212,3 +212,3 @@ const stytchClient = useStytch();
  */
-const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken }) => {
+const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchResetPassword />'));
@@ -240,35 +240,35 @@ const stytchClient = useStytch();
 };
-/**
- * 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
- */
-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
+     * 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 />'));
@@ -275,0 +275,0 @@ const stytchClient = useStytch();

dist/index.js

@@ -107,3 +107,3 @@ 'use strict';
  */
-const StytchProvider = ({ stytch, children }) => {
+const StytchProvider = ({ stytch, children, }) => {
     invariant.invariant(!useIsMounted__INTERNAL(), invariant.providerMustBeUniqueError);
@@ -160,3 +160,3 @@ invariant.invariant(typeof window !== 'undefined', invariant.noSSRError);
  */
-const StytchLogin = ({ config, styles, callbacks }) => {
+const StytchLogin = ({ config, styles, callbacks, }) => {
     invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchLogin />'));
@@ -220,3 +220,3 @@ const stytchClient = useStytch();
  */
-const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken }) => {
+const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, }) => {
     invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchResetPassword />'));
@@ -248,35 +248,35 @@ const stytchClient = useStytch();
 };
-/**
- * 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
- */
-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
+     * 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 />'));
@@ -283,0 +283,0 @@ const stytchClient = useStytch();

package.json

 {
   "name": "@stytch/react",
-  "version": "0.0.0-idp-20241219194424",
+  "version": "0.0.0-idp-20250208002140",
   "description": "Stytch's official React Library",
@@ -37,3 +37,3 @@ "main": "./dist/index.js",
     "@stytch/js-utils": "0.0.0",
-    "@stytch/vanilla-js": "0.0.0-idp-20241219194424",
+    "@stytch/vanilla-js": "0.0.0-idp-20250208002140",
     "@testing-library/react": "14.0.0",
@@ -49,3 +49,3 @@ "eslint-config-custom": "0.0.1",
   "peerDependencies": {
-    "@stytch/vanilla-js": "0.0.0-idp-20241219194424",
+    "@stytch/vanilla-js": "0.0.0-idp-20250208002140",
     "react": ">= 17.0.2",
@@ -52,0 +52,0 @@ "react-dom": ">= 17.0.2"

No alert changes

Improved metrics

Total package byte prevSize

141843

increased by5.31%

Worsened metrics

Lines of code

2979

decreased by-1.78%

No dependency changes