@stytch/nextjs 21.3.0 → 21.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stytch/nextjs
 
+## 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-0ff0e987.js}

@@ -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/adminPortal/index.esm.js

@@ -1,7 +1,7 @@
 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 { u as useIsMounted__INTERNAL, a as useStytchB2BClient } from '../StytchB2BContext-0ff0e987.js';
 import { n as noProviderError } from '../StytchSSRProxy-14916009.js';
 import { i as invariant } from '../async-b1e10055.js';
 

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;
+/**
+ * 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-8246a922.js";
-export { StytchB2B };
+export { StytchB2B, B2BIdentityProvider };
 export type { StytchB2BProviderProps } from "../StytchB2BContext-8246a922.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-0ff0e987.js";
+export { StytchB2B, B2BIdentityProvider };
+export type { StytchB2BProviderProps } from "../StytchB2BContext-0ff0e987.js";

package/dist/b2b/index.esm.js

@@ -1,5 +1,5 @@
-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 { u as useIsMounted__INTERNAL, a as useStytchB2BClient, i as isUIClient, b as useStytchMember } from '../StytchB2BContext-0ff0e987.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-0ff0e987.js';
 import React, { useRef, useLayoutEffect } from 'react';
 import { i as invariant } from '../async-b1e10055.js';
 import { a as noHeadlessClientError, n as noProviderError } from '../StytchSSRProxy-14916009.js';
@@ -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();
+    useLayoutEffect(() => {
+        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

@@ -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 }) => {
+    async.invariant(StytchB2BContext.useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<IdentityProvider />'));
+    const stytchClient = StytchB2BContext.useStytchB2BClient();
+    const containerEl = React.useRef(null);
+    const { member } = StytchB2BContext.useStytchMember();
+    React.useLayoutEffect(() => {
+        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.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

@@ -147,7 +147,6 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffec
  * 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 +204,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 +266,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 +314,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

@@ -155,7 +155,6 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayou
  * 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
@@ -213,7 +212,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
@@ -276,7 +274,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 = {
@@ -325,7 +322,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 }) => {
+    async.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<IdentityProvider />'));
+    const stytchClient = useStytch();
+    const containerEl = React.useRef(null);
+    const user = useStytchUser();
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/nextjs",
-  "version": "21.3.0",
+  "version": "21.4.0",
   "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.0",
     "@testing-library/react": "14.0.0",
     "eslint-config-custom": "0.0.1",
     "react": "18.2.0",