@stytch/nextjs 21.3.0 → 21.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stytch/nextjs
 
+## 21.4.1
+
+### Patch Changes
+
+- 9997775: Avoid warnings about useLayoutEffect with server rendering
+
+## 21.4.0
+
+### Minor Changes
+
+- 0abb940: feat: Connected Apps OAuth Authorization component support (BETA)
+
 ## 21.3.0
 
 ### Minor Changes

package/dist/{StytchB2BContext-72d99610.js → StytchB2BContext-03d66270.js}

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useEffect, useMemo } from 'react';
 import { i as isStytchSSRProxy, n as noProviderError } from './StytchSSRProxy-14916009.js';
-import { i as invariant, u as useAsyncState, m as mergeWithStableProps } from './async-b1e10055.js';
+import { i as invariant, u as useAsyncState, m as mergeWithStableProps } from './useIsomorphicLayoutEffect-8da8c061.js';
 
 const initialMember = {
     member: null,
@@ -255,4 +255,4 @@ const StytchB2BProvider = ({ stytch, children, }) => {
                 React.createElement(StytchMemberSessionContext.Provider, { value: session }, children)))));
 };
 
-export { StytchB2BProvider as S, useStytchB2BClient as a, useStytchMemberSession as b, useStytchMember as c, useStytchIsAuthorized as d, useStytchOrganization as e, withStytchMemberSession as f, withStytchMember as g, withStytchOrganization as h, isUIClient as i, withStytchPermissions as j, useIsMounted__INTERNAL as u, withStytchB2BClient as w };
+export { StytchB2BProvider as S, useStytchB2BClient as a, useStytchMember as b, useStytchMemberSession as c, useStytchIsAuthorized as d, useStytchOrganization as e, withStytchMemberSession as f, withStytchMember as g, withStytchOrganization as h, isUIClient as i, withStytchPermissions as j, useIsMounted__INTERNAL as u, withStytchB2BClient as w };

package/dist/{StytchB2BContext-8246a922.js → StytchB2BContext-156a7bdd.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var StytchSSRProxy = require('./StytchSSRProxy-63bc6323.js');
-var async = require('./async-86a7f0d6.js');
+var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect-41b6e419.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -45,7 +45,7 @@ const isUIClient = (client) => {
  * return (<h1>Welcome, {member.name}</h1>);
  */
 const useStytchMember = () => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchMember', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchMember', 'StytchB2BProvider'));
     return React.useContext(StytchMemberContext);
 };
 /**
@@ -66,7 +66,7 @@ const useStytchMember = () => {
  * }, [session, isInitialized]);
  */
 const useStytchMemberSession = () => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
     return React.useContext(StytchMemberSessionContext);
 };
 /**
@@ -83,7 +83,7 @@ const useStytchMemberSession = () => {
  * return (<p>Welcome to {organization.organization_name}</p>);
  */
 const useStytchOrganization = () => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchOrganization', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchOrganization', 'StytchB2BProvider'));
     return React.useContext(StytchOrganizationContext);
 };
 /**
@@ -99,10 +99,10 @@ const useStytchOrganization = () => {
  * return <button disabled={!isAuthorized}>Edit</button>
  */
 const useStytchIsAuthorized = (resourceId, action) => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchIsAuthorized', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchIsAuthorized', 'StytchB2BProvider'));
     const client = useStytchB2BClient();
     const { session } = useStytchMemberSession();
-    const [isAuthorized, setIsAuthorized] = async.useAsyncState({
+    const [isAuthorized, setIsAuthorized] = useIsomorphicLayoutEffect.useAsyncState({
         isInitialized: false,
         fromCache: false,
         isAuthorized: false,
@@ -138,12 +138,12 @@ const useStytchIsAuthorized = (resourceId, action) => {
  */
 const useStytchB2BClient = () => {
     const ctx = React.useContext(StytchContext);
-    async.invariant(ctx.isMounted, StytchSSRProxy.noProviderError('useStytchB2BClient', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(ctx.isMounted, StytchSSRProxy.noProviderError('useStytchB2BClient', 'StytchB2BProvider'));
     return ctx.client;
 };
 const withStytchB2BClient = (Component) => {
     const WithStytch = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchB2BClient', 'StytchB2BProvider'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchB2BClient', 'StytchB2BProvider'));
         return React__default["default"].createElement(Component, Object.assign({}, props, { stytch: useStytchB2BClient() }));
     };
     WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
@@ -151,7 +151,7 @@ const withStytchB2BClient = (Component) => {
 };
 const withStytchMember = (Component) => {
     const WithStytchUser = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchMember', 'StytchB2BProvider'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchMember', 'StytchB2BProvider'));
         const { member, isInitialized, fromCache } = useStytchMember();
         return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchMember: member, stytchMemberIsInitialized: isInitialized, stytchMemberIsFromCache: fromCache })));
     };
@@ -160,7 +160,7 @@ const withStytchMember = (Component) => {
 };
 const withStytchMemberSession = (Component) => {
     const WithStytchSession = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchMemberSession', 'StytchB2BProvider'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchMemberSession', 'StytchB2BProvider'));
         const { session, isInitialized, fromCache } = useStytchMemberSession();
         return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchMemberSession: session, stytchMemberSessionIsInitialized: isInitialized, stytchMemberSessionIsFromCache: fromCache })));
     };
@@ -169,7 +169,7 @@ const withStytchMemberSession = (Component) => {
 };
 const withStytchOrganization = (Component) => {
     const WithStytchOrganization = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchOrganization', 'StytchB2BProvider'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchOrganization', 'StytchB2BProvider'));
         const { organization, isInitialized, fromCache } = useStytchOrganization();
         return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchOrganization: organization, stytchOrganizationIsInitialized: isInitialized, stytchOrganizationIsFromCache: fromCache })));
     };
@@ -199,10 +199,10 @@ const withStytchOrganization = (Component) => {
  */
 const withStytchPermissions = (Component) => {
     const WithStytchPermissions = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useRBACPermissions', 'StytchB2BProvider'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useRBACPermissions', 'StytchB2BProvider'));
         const client = useStytchB2BClient();
         const { session } = useStytchMemberSession();
-        const [permissions, setPermissions] = async.useAsyncState({ loaded: false, value: null });
+        const [permissions, setPermissions] = useIsomorphicLayoutEffect.useAsyncState({ loaded: false, value: null });
         React.useEffect(() => {
             client.rbac
                 .allPermissions()
@@ -230,7 +230,7 @@ const withStytchPermissions = (Component) => {
  */
 const StytchB2BProvider = ({ stytch, children, }) => {
     const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [{ member, session, organization }, setClientState] = async.useAsyncState({
+    const [{ member, session, organization }, setClientState] = useIsomorphicLayoutEffect.useAsyncState({
         member: initialMember,
         session: initialMemberSession,
         organization: initialOrganization,
@@ -251,7 +251,7 @@ const StytchB2BProvider = ({ stytch, children, }) => {
                     session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
                     organization: Object.assign(Object.assign({}, stytch.organization.getInfo()), { isInitialized: true }),
                 };
-                return async.mergeWithStableProps(oldState, newState);
+                return useIsomorphicLayoutEffect.mergeWithStableProps(oldState, newState);
             });
         });
     }, [setClientState, stytch]);

package/dist/adminPortal/index.esm.js

@@ -1,16 +1,16 @@
 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-72d99610.js';
+import React, { useRef } from 'react';
+import { u as useIsMounted__INTERNAL, a as useStytchB2BClient } from '../StytchB2BContext-03d66270.js';
 import { n as noProviderError } from '../StytchSSRProxy-14916009.js';
-import { i as invariant } from '../async-b1e10055.js';
+import { i as invariant, a as useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect-8da8c061.js';
 
 const makeAdminPortalComponent = (mountFn, componentName) => {
     const Component = (props) => {
         invariant(useIsMounted__INTERNAL(), noProviderError(`<${componentName} />`, 'StytchB2BProvider'));
         const stytchClient = useStytchB2BClient();
         const containerEl = useRef(null);
-        useLayoutEffect(() => {
+        useIsomorphicLayoutEffect(() => {
             if (!containerEl.current) {
                 return;
             }

package/dist/adminPortal/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var adminPortal = require('@stytch/vanilla-js/b2b/adminPortal');
 var React = require('react');
-var StytchB2BContext = require('../StytchB2BContext-8246a922.js');
+var StytchB2BContext = require('../StytchB2BContext-156a7bdd.js');
 var StytchSSRProxy = require('../StytchSSRProxy-63bc6323.js');
-var async = require('../async-86a7f0d6.js');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect-41b6e419.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14,10 +14,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const makeAdminPortalComponent = (mountFn, componentName) => {
     const Component = (props) => {
-        async.invariant(StytchB2BContext.useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError(`<${componentName} />`, 'StytchB2BProvider'));
+        useIsomorphicLayoutEffect.invariant(StytchB2BContext.useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError(`<${componentName} />`, 'StytchB2BProvider'));
         const stytchClient = StytchB2BContext.useStytchB2BClient();
         const containerEl = React.useRef(null);
-        React.useLayoutEffect(() => {
+        useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
             if (!containerEl.current) {
                 return;
             }

package/dist/b2b/index.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import React from "react";
 import { Callbacks, StyleConfig, StytchB2BUIConfig, StytchProjectConfigurationInput } from "@stytch/vanilla-js";
+// We need to import the StytchB2BUIClient type to give the TSDoc parser a hint as to where it is from
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { IDPConsentScreenManifest } from "@stytch/vanilla-js/b2b";
 interface StytchB2BProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
      * An optional {@link StyleConfig} to customize the look and feel of the screen.
@@ -68,6 +71,13 @@ interface StytchB2BProps<TProjectConfiguration extends StytchProjectConfiguratio
      */
     config: StytchB2BUIConfig;
 }
+type B2BIDPConsentManifestGenerator = (input: {
+    scopes: string[];
+    clientName: string;
+}) => IDPConsentScreenManifest;
+type B2BIdentityProviderProps = Omit<StytchB2BProps, "config"> & {
+    getIDPConsentManifest?: B2BIDPConsentManifestGenerator;
+};
 /**
  * The Stytch B2B UI component.
  * This component can only be used with a {@link StytchB2BUIClient} client constructor
@@ -103,6 +113,38 @@ interface StytchB2BProps<TProjectConfiguration extends StytchProjectConfiguratio
  * @param props {@link StytchB2BProps}
  */
 declare const StytchB2B: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ styles, callbacks, config }: StytchB2BProps<TProjectConfiguration>) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-8246a922.js";
-export { StytchB2B };
-export type { StytchB2BProviderProps } from "../StytchB2BContext-8246a922.js";
+/**
+ * The Stytch B2B IDP component.
+ * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
+ * Requires the user to be logged in.
+ * This component can only be used with a {@link StytchB2BUIClient} client constructor
+ * passed into the {@link StytchB2BProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * const styles = {
+ *     container: {
+ *       backgroundColor: '#e11e1e',
+ *     },
+ *     colors: {
+ *       primary: '#ff00f7',
+ *       secondary: '#5C727D',
+ *     },
+ *    }
+ *
+ * <B2BIdentityProvider
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ * @param getIDPConsentManifest - Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.
+ */
+declare const B2BIdentityProvider: ({ styles, callbacks, getIDPConsentManifest }: B2BIdentityProviderProps) => React.JSX.Element;
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-156a7bdd.js";
+export { StytchB2B, B2BIdentityProvider };
+export type { StytchB2BProviderProps } from "../StytchB2BContext-156a7bdd.js";

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

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import React from "react";
 import { Callbacks, StyleConfig, StytchB2BUIConfig, StytchProjectConfigurationInput } from "@stytch/vanilla-js";
+// We need to import the StytchB2BUIClient type to give the TSDoc parser a hint as to where it is from
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { IDPConsentScreenManifest } from "@stytch/vanilla-js/b2b";
 interface StytchB2BProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
      * An optional {@link StyleConfig} to customize the look and feel of the screen.
@@ -68,6 +71,13 @@ interface StytchB2BProps<TProjectConfiguration extends StytchProjectConfiguratio
      */
     config: StytchB2BUIConfig;
 }
+type B2BIDPConsentManifestGenerator = (input: {
+    scopes: string[];
+    clientName: string;
+}) => IDPConsentScreenManifest;
+type B2BIdentityProviderProps = Omit<StytchB2BProps, "config"> & {
+    getIDPConsentManifest?: B2BIDPConsentManifestGenerator;
+};
 /**
  * The Stytch B2B UI component.
  * This component can only be used with a {@link StytchB2BUIClient} client constructor
@@ -103,6 +113,38 @@ interface StytchB2BProps<TProjectConfiguration extends StytchProjectConfiguratio
  * @param props {@link StytchB2BProps}
  */
 declare const StytchB2B: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ styles, callbacks, config }: StytchB2BProps<TProjectConfiguration>) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-72d99610.js";
-export { StytchB2B };
-export type { StytchB2BProviderProps } from "../StytchB2BContext-72d99610.js";
+/**
+ * The Stytch B2B IDP component.
+ * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
+ * Requires the user to be logged in.
+ * This component can only be used with a {@link StytchB2BUIClient} client constructor
+ * passed into the {@link StytchB2BProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * const styles = {
+ *     container: {
+ *       backgroundColor: '#e11e1e',
+ *     },
+ *     colors: {
+ *       primary: '#ff00f7',
+ *       secondary: '#5C727D',
+ *     },
+ *    }
+ *
+ * <B2BIdentityProvider
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ * @param getIDPConsentManifest - Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.
+ */
+declare const B2BIdentityProvider: ({ styles, callbacks, getIDPConsentManifest }: B2BIdentityProviderProps) => React.JSX.Element;
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-03d66270.js";
+export { StytchB2B, B2BIdentityProvider };
+export type { StytchB2BProviderProps } from "../StytchB2BContext-03d66270.js";

package/dist/b2b/index.esm.js

@@ -1,7 +1,7 @@
-import { u as useIsMounted__INTERNAL, a as useStytchB2BClient, i as isUIClient } from '../StytchB2BContext-72d99610.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-72d99610.js';
-import React, { useRef, useLayoutEffect } from 'react';
-import { i as invariant } from '../async-b1e10055.js';
+import { u as useIsMounted__INTERNAL, a as useStytchB2BClient, i as isUIClient, b as useStytchMember } from '../StytchB2BContext-03d66270.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-03d66270.js';
+import React, { useRef } from 'react';
+import { i as invariant, a as useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect-8da8c061.js';
 import { a as noHeadlessClientError, n as noProviderError } from '../StytchSSRProxy-14916009.js';
 
 /**
@@ -42,7 +42,7 @@ const StytchB2B = ({ styles, callbacks, config, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchB2B />', 'StytchB2BProvider'));
     const stytchClient = useStytchB2BClient();
     const containerEl = useRef(null);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(noHeadlessClientError);
         }
@@ -63,5 +63,61 @@ const StytchB2B = ({ styles, callbacks, config, }) => {
     }, [stytchClient, styles, callbacks]);
     return React.createElement("div", { ref: containerEl });
 };
+/**
+ * The Stytch B2B IDP component.
+ * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
+ * Requires the user to be logged in.
+ * This component can only be used with a {@link StytchB2BUIClient} client constructor
+ * passed into the {@link StytchB2BProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * const styles = {
+ *     container: {
+ *       backgroundColor: '#e11e1e',
+ *     },
+ *     colors: {
+ *       primary: '#ff00f7',
+ *       secondary: '#5C727D',
+ *     },
+ *    }
+ *
+ * <B2BIdentityProvider
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ * @param getIDPConsentManifest - Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.
+ */
+const B2BIdentityProvider = ({ styles, callbacks, getIDPConsentManifest }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<IdentityProvider />'));
+    const stytchClient = useStytchB2BClient();
+    const containerEl = useRef(null);
+    const { member } = useStytchMember();
+    useIsomorphicLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-b2b-idp-${randId}`;
+        }
+        stytchClient.mountIdentityProvider({
+            callbacks,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+            getIDPConsentManifest,
+        });
+    }, [stytchClient, styles, callbacks, member, getIDPConsentManifest]);
+    return React.createElement("div", { ref: containerEl });
+};
 
-export { StytchB2B };
+export { B2BIdentityProvider, StytchB2B };

package/dist/b2b/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var StytchB2BContext = require('../StytchB2BContext-8246a922.js');
+var StytchB2BContext = require('../StytchB2BContext-156a7bdd.js');
 var React = require('react');
-var async = require('../async-86a7f0d6.js');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect-41b6e419.js');
 var StytchSSRProxy = require('../StytchSSRProxy-63bc6323.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -46,10 +46,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * @param props {@link StytchB2BProps}
  */
 const StytchB2B = ({ styles, callbacks, config, }) => {
-    async.invariant(StytchB2BContext.useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchB2B />', 'StytchB2BProvider'));
+    useIsomorphicLayoutEffect.invariant(StytchB2BContext.useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchB2B />', 'StytchB2BProvider'));
     const stytchClient = StytchB2BContext.useStytchB2BClient();
     const containerEl = React.useRef(null);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!StytchB2BContext.isUIClient(stytchClient)) {
             throw Error(StytchSSRProxy.noHeadlessClientError);
         }
@@ -70,6 +70,62 @@ const StytchB2B = ({ styles, callbacks, config, }) => {
     }, [stytchClient, styles, callbacks]);
     return React__default["default"].createElement("div", { ref: containerEl });
 };
+/**
+ * The Stytch B2B IDP component.
+ * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
+ * Requires the user to be logged in.
+ * This component can only be used with a {@link StytchB2BUIClient} client constructor
+ * passed into the {@link StytchB2BProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * const styles = {
+ *     container: {
+ *       backgroundColor: '#e11e1e',
+ *     },
+ *     colors: {
+ *       primary: '#ff00f7',
+ *       secondary: '#5C727D',
+ *     },
+ *    }
+ *
+ * <B2BIdentityProvider
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ * @param getIDPConsentManifest - Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.
+ */
+const B2BIdentityProvider = ({ styles, callbacks, getIDPConsentManifest }) => {
+    useIsomorphicLayoutEffect.invariant(StytchB2BContext.useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<IdentityProvider />'));
+    const stytchClient = StytchB2BContext.useStytchB2BClient();
+    const containerEl = React.useRef(null);
+    const { member } = StytchB2BContext.useStytchMember();
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        if (!StytchB2BContext.isUIClient(stytchClient)) {
+            throw Error(StytchSSRProxy.noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-b2b-idp-${randId}`;
+        }
+        stytchClient.mountIdentityProvider({
+            callbacks,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+            getIDPConsentManifest,
+        });
+    }, [stytchClient, styles, callbacks, member, getIDPConsentManifest]);
+    return React__default["default"].createElement("div", { ref: containerEl });
+};
 
 exports.StytchB2BProvider = StytchB2BContext.StytchB2BProvider;
 exports.useStytchB2BClient = StytchB2BContext.useStytchB2BClient;
@@ -82,4 +138,5 @@ exports.withStytchMember = StytchB2BContext.withStytchMember;
 exports.withStytchMemberSession = StytchB2BContext.withStytchMemberSession;
 exports.withStytchOrganization = StytchB2BContext.withStytchOrganization;
 exports.withStytchPermissions = StytchB2BContext.withStytchPermissions;
+exports.B2BIdentityProvider = B2BIdentityProvider;
 exports.StytchB2B = StytchB2B;

package/dist/index-b14d4efe.d.ts

@@ -1,2 +1,2 @@
 export { createDeepEqual } from "./createDeepEqual-5555f2e1.js";
-export { mergeWithStableProps } from "./async-b1e10055.js";
+export { mergeWithStableProps } from "./useIsomorphicLayoutEffect-8da8c061.js";

package/dist/index.d.ts

@@ -171,7 +171,6 @@ interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationIn
  * in your `_app.jsx` file.
  *
  * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
- * and {@link https://storybook.stytch.com interactive examples} for more.
  *
  * @example
  * <StytchLogin
@@ -203,13 +202,13 @@ declare const StytchLogin: <TProjectConfiguration extends Partial<import("@stytc
 interface StytchResetPasswordProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends StytchProps<TProjectConfiguration> {
     passwordResetToken: string;
 }
+type IdentityProviderProps = Omit<StytchProps, "config">;
 /**
  * The Stytch Reset Password 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}
- * and {@link https://storybook.stytch.com interactive examples} for more.
  *
  * @example
  * <StytchPasswordReset
@@ -246,7 +245,6 @@ declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import
  * passed into the {@link StytchProvider}
  *
  * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
- * and {@link https://storybook.stytch.com interactive examples} for more.
  *
  * @example
  * const styles = {
@@ -271,5 +269,37 @@ declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import
  * @param callbacks - An optional {@link Callbacks} object
  */
 declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
-export { StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser, StytchLogin, StytchPasswordReset, StytchPasskeyRegistration };
+/**
+ * The Stytch IDP component.
+ * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
+ * Requires the user to be logged in.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * const styles = {
+ *     container: {
+ *       backgroundColor: '#e11e1e',
+ *     },
+ *     colors: {
+ *       primary: '#ff00f7',
+ *       secondary: '#5C727D',
+ *     },
+ *    }
+ *
+ * <IdentityProvider
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * />
+ *
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+declare const IdentityProvider: ({ styles, callbacks }: IdentityProviderProps) => React.JSX.Element;
+export { StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser, StytchLogin, StytchPasswordReset, StytchPasskeyRegistration, IdentityProvider };
 export type { StytchProviderProps };

package/dist/index.esm.d.ts

@@ -171,7 +171,6 @@ interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationIn
  * in your `_app.jsx` file.
  *
  * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
- * and {@link https://storybook.stytch.com interactive examples} for more.
  *
  * @example
  * <StytchLogin
@@ -203,13 +202,13 @@ declare const StytchLogin: <TProjectConfiguration extends Partial<import("@stytc
 interface StytchResetPasswordProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends StytchProps<TProjectConfiguration> {
     passwordResetToken: string;
 }
+type IdentityProviderProps = Omit<StytchProps, "config">;
 /**
  * The Stytch Reset Password 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}
- * and {@link https://storybook.stytch.com interactive examples} for more.
  *
  * @example
  * <StytchPasswordReset
@@ -246,7 +245,6 @@ declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import
  * passed into the {@link StytchProvider}
  *
  * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
- * and {@link https://storybook.stytch.com interactive examples} for more.
  *
  * @example
  * const styles = {
@@ -271,5 +269,37 @@ declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import
  * @param callbacks - An optional {@link Callbacks} object
  */
 declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
-export { StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser, StytchLogin, StytchPasswordReset, StytchPasskeyRegistration };
+/**
+ * The Stytch IDP component.
+ * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
+ * Requires the user to be logged in.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * const styles = {
+ *     container: {
+ *       backgroundColor: '#e11e1e',
+ *     },
+ *     colors: {
+ *       primary: '#ff00f7',
+ *       secondary: '#5C727D',
+ *     },
+ *    }
+ *
+ * <IdentityProvider
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * />
+ *
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+declare const IdentityProvider: ({ styles, callbacks }: IdentityProviderProps) => React.JSX.Element;
+export { StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser, StytchLogin, StytchPasswordReset, StytchPasskeyRegistration, IdentityProvider };
 export type { StytchProviderProps };

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import React, { createContext, useContext, useMemo, useEffect, useLayoutEffect, useRef } from 'react';
+import React, { createContext, useContext, useMemo, useEffect, useRef } from 'react';
 import { i as isStytchSSRProxy, n as noProviderError, a as noHeadlessClientError } from './StytchSSRProxy-14916009.js';
-import { i as invariant, u as useAsyncState, m as mergeWithStableProps } from './async-b1e10055.js';
+import { i as invariant, u as useAsyncState, m as mergeWithStableProps, a as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-8da8c061.js';
 
 const initialUser = {
     user: null,
@@ -138,16 +138,12 @@ const StytchProvider = ({ stytch, children, }) => {
             React.createElement(StytchSessionContext.Provider, { value: session }, children))));
 };
 
-// cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
 /**
  * The Stytch Login Screen component.
  * This component can only be used with the Stytch UI Client - use {@link createStytchUIClient}
  * in your `_app.jsx` file.
  *
  * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
- * and {@link https://storybook.stytch.com interactive examples} for more.
  *
  * @example
  * <StytchLogin
@@ -205,7 +201,6 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
  * passed into the {@link StytchProvider}
  *
  * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
- * and {@link https://storybook.stytch.com interactive examples} for more.
  *
  * @example
  * <StytchPasswordReset
@@ -268,7 +263,6 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
  * passed into the {@link StytchProvider}
  *
  * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
- * and {@link https://storybook.stytch.com interactive examples} for more.
  *
  * @example
  * const styles = {
@@ -317,5 +311,60 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
     }, [stytchClient, config, styles, callbacks, user]);
     return React.createElement("div", { ref: containerEl });
 };
+/**
+ * The Stytch IDP component.
+ * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
+ * Requires the user to be logged in.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * const styles = {
+ *     container: {
+ *       backgroundColor: '#e11e1e',
+ *     },
+ *     colors: {
+ *       primary: '#ff00f7',
+ *       secondary: '#5C727D',
+ *     },
+ *    }
+ *
+ * <IdentityProvider
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * />
+ *
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+const IdentityProvider = ({ styles, callbacks }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<IdentityProvider />'));
+    const stytchClient = useStytch();
+    const containerEl = useRef(null);
+    const user = useStytchUser();
+    useIsomorphicLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-idp-${randId}`;
+        }
+        stytchClient.mountIdentityProvider({
+            callbacks,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [stytchClient, styles, callbacks, user]);
+    return React.createElement("div", { ref: containerEl });
+};
 
-export { StytchLogin, StytchPasskeyRegistration, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+export { IdentityProvider, StytchLogin, StytchPasskeyRegistration, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };

package/dist/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var StytchSSRProxy = require('./StytchSSRProxy-63bc6323.js');
-var async = require('./async-86a7f0d6.js');
+var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect-41b6e419.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -41,7 +41,7 @@ const isUIClient = (client) => {
  * return (<h1>Welcome, {user.name.first_name}</h1>);
  */
 const useStytchUser = () => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchUser'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchUser'));
     return React.useContext(StytchUserContext);
 };
 /**
@@ -62,7 +62,7 @@ const useStytchUser = () => {
  * }, [session, isInitialized]);
  */
 const useStytchSession = () => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchSession'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchSession'));
     return React.useContext(StytchSessionContext);
 };
 /**
@@ -76,12 +76,12 @@ const useStytchSession = () => {
  */
 const useStytch = () => {
     const ctx = React.useContext(StytchContext);
-    async.invariant(ctx.isMounted, StytchSSRProxy.noProviderError('useStytch'));
+    useIsomorphicLayoutEffect.invariant(ctx.isMounted, StytchSSRProxy.noProviderError('useStytch'));
     return ctx.client;
 };
 const withStytch = (Component) => {
     const WithStytch = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytch'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytch'));
         return React__default["default"].createElement(Component, Object.assign({}, props, { stytch: useStytch() }));
     };
     WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
@@ -89,7 +89,7 @@ const withStytch = (Component) => {
 };
 const withStytchUser = (Component) => {
     const WithStytchUser = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchUser'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchUser'));
         const { user, isInitialized, fromCache } = useStytchUser();
         return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsInitialized: isInitialized, stytchUserIsFromCache: fromCache })));
     };
@@ -98,7 +98,7 @@ const withStytchUser = (Component) => {
 };
 const withStytchSession = (Component) => {
     const WithStytchSession = (props) => {
-        async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchSession'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchSession'));
         const { session, isInitialized, fromCache } = useStytchSession();
         return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsInitialized: isInitialized, stytchSessionIsFromCache: fromCache })));
     };
@@ -119,7 +119,7 @@ const withStytchSession = (Component) => {
  */
 const StytchProvider = ({ stytch, children, }) => {
     const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [{ user, session }, setClientState] = async.useAsyncState({
+    const [{ user, session }, setClientState] = useIsomorphicLayoutEffect.useAsyncState({
         session: initialSession,
         user: initialUser,
     });
@@ -137,7 +137,7 @@ const StytchProvider = ({ stytch, children, }) => {
                     session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
                     user: Object.assign(Object.assign({}, stytch.user.getInfo()), { isInitialized: true }),
                 };
-                return async.mergeWithStableProps(oldState, newState);
+                return useIsomorphicLayoutEffect.mergeWithStableProps(oldState, newState);
             });
         });
     }, [setClientState, stytch]);
@@ -146,16 +146,12 @@ const StytchProvider = ({ stytch, children, }) => {
             React__default["default"].createElement(StytchSessionContext.Provider, { value: session }, children))));
 };
 
-// cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 /**
  * The Stytch Login Screen component.
  * This component can only be used with the Stytch UI Client - use {@link createStytchUIClient}
  * in your `_app.jsx` file.
  *
  * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
- * and {@link https://storybook.stytch.com interactive examples} for more.
  *
  * @example
  * <StytchLogin
@@ -184,10 +180,10 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayou
  * @param callbacks - An optional {@link Callbacks} object
  */
 const StytchLogin = ({ config, styles, callbacks, }) => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchLogin />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchLogin />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(StytchSSRProxy.noHeadlessClientError);
         }
@@ -213,7 +209,6 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
  * passed into the {@link StytchProvider}
  *
  * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
- * and {@link https://storybook.stytch.com interactive examples} for more.
  *
  * @example
  * <StytchPasswordReset
@@ -244,10 +239,10 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
  * @param callbacks - An optional {@link Callbacks} object
  */
 const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, }) => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchResetPassword />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchResetPassword />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(StytchSSRProxy.noHeadlessClientError);
         }
@@ -276,7 +271,6 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
  * passed into the {@link StytchProvider}
  *
  * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
- * and {@link https://storybook.stytch.com interactive examples} for more.
  *
  * @example
  * const styles = {
@@ -301,11 +295,11 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
  * @param callbacks - An optional {@link Callbacks} object
  */
 const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
-    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchPasskeyRegistration />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchPasskeyRegistration />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
     const user = useStytchUser();
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
             throw Error(StytchSSRProxy.noHeadlessClientError);
         }
@@ -325,7 +319,63 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
     }, [stytchClient, config, styles, callbacks, user]);
     return React__default["default"].createElement("div", { ref: containerEl });
 };
+/**
+ * The Stytch IDP component.
+ * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
+ * Requires the user to be logged in.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * const styles = {
+ *     container: {
+ *       backgroundColor: '#e11e1e',
+ *     },
+ *     colors: {
+ *       primary: '#ff00f7',
+ *       secondary: '#5C727D',
+ *     },
+ *    }
+ *
+ * <IdentityProvider
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * />
+ *
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+const IdentityProvider = ({ styles, callbacks }) => {
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<IdentityProvider />'));
+    const stytchClient = useStytch();
+    const containerEl = React.useRef(null);
+    const user = useStytchUser();
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(StytchSSRProxy.noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-idp-${randId}`;
+        }
+        stytchClient.mountIdentityProvider({
+            callbacks,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [stytchClient, styles, callbacks, user]);
+    return React__default["default"].createElement("div", { ref: containerEl });
+};
 
+exports.IdentityProvider = IdentityProvider;
 exports.StytchLogin = StytchLogin;
 exports.StytchPasskeyRegistration = StytchPasskeyRegistration;
 exports.StytchPasswordReset = StytchPasswordReset;

package/dist/{async-86a7f0d6.d.ts → useIsomorphicLayoutEffect-41b6e419.d.ts}

@@ -1,4 +1,10 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, useEffect } from "react";
+// useState can cause memory leaks if it is set after the component unmounted. For example, if it is
+// set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
+declare const useAsyncState: <T>(initialState: T | (() => T)) => [
+    T,
+    Dispatch<SetStateAction<T>>
+];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare function invariant(cond: any, message: string): asserts cond;
 /**
@@ -14,5 +20,5 @@ declare function invariant(cond: any, message: string): asserts cond;
  * @param newValue The new value
  */
 declare const mergeWithStableProps: <T extends Record<string, unknown>, U extends Record<string, unknown> = T>(oldValue: U, newValue: T) => T;
-declare const useAsyncState: <T>(initialState: T | (() => T)) => [T, Dispatch<SetStateAction<T>>];
-export { invariant, mergeWithStableProps, useAsyncState };
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+export { useIsomorphicLayoutEffect as default, useAsyncState, invariant, mergeWithStableProps };

package/dist/{async-86a7f0d6.js → useIsomorphicLayoutEffect-41b6e419.js}

@@ -76,6 +76,10 @@ const useAsyncState = (initialState) => {
     return [state, setStateAction];
 };
 
+// cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 exports.invariant = invariant;
 exports.mergeWithStableProps = mergeWithStableProps;
 exports.useAsyncState = useAsyncState;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/dist/{async-b1e10055.d.ts → useIsomorphicLayoutEffect-8da8c061.d.ts}

@@ -1,4 +1,10 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, useEffect } from "react";
+// useState can cause memory leaks if it is set after the component unmounted. For example, if it is
+// set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
+declare const useAsyncState: <T>(initialState: T | (() => T)) => [
+    T,
+    Dispatch<SetStateAction<T>>
+];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare function invariant(cond: any, message: string): asserts cond;
 /**
@@ -14,5 +20,5 @@ declare function invariant(cond: any, message: string): asserts cond;
  * @param newValue The new value
  */
 declare const mergeWithStableProps: <T extends Record<string, unknown>, U extends Record<string, unknown> = T>(oldValue: U, newValue: T) => T;
-declare const useAsyncState: <T>(initialState: T | (() => T)) => [T, Dispatch<SetStateAction<T>>];
-export { invariant, mergeWithStableProps, useAsyncState };
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+export { useIsomorphicLayoutEffect as default, useAsyncState, invariant, mergeWithStableProps };

package/dist/{async-b1e10055.js → useIsomorphicLayoutEffect-8da8c061.js}

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRef, useState, useEffect, useCallback, useLayoutEffect } from 'react';
 
 const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
     // If comparing functions, this may need some work. Not sure the
@@ -74,4 +74,7 @@ const useAsyncState = (initialState) => {
     return [state, setStateAction];
 };
 
-export { invariant as i, mergeWithStableProps as m, useAsyncState as u };
+// cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect as a, invariant as i, mergeWithStableProps as m, useAsyncState as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/nextjs",
-  "version": "21.3.0",
+  "version": "21.4.1",
   "description": "Stytch's official Next.js Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -23,7 +23,7 @@
   "devDependencies": {
     "@babel/runtime": "7.18.6",
     "@stytch/js-utils": "0.0.0",
-    "@stytch/vanilla-js": "5.16.0",
+    "@stytch/vanilla-js": "5.17.1",
     "@testing-library/react": "14.0.0",
     "eslint-config-custom": "0.0.1",
     "react": "18.2.0",