@stytch/nextjs 5.0.0 → 5.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stytch/nextjs
 
+## 5.0.1
+
+### Patch Changes
+
+- 8c54ee1: Missing export in the nextjs SDK for the UI component
+
 ## 5.0.0
 
 ### Minor Changes

package/dist/b2b/index.d.ts

@@ -2,6 +2,7 @@
 import React from "react";
 import { ReactNode } from "react";
 import { StytchB2BHeadlessClient, StytchB2BUIClient, Member, MemberSession } from "@stytch/vanilla-js/b2b/";
+import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
 import { StytchB2BHeadlessClient as StytchB2BHeadlessClient$0 } from "@stytch/vanilla-js/b2b";
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your `_app.js`.
@@ -101,6 +102,108 @@ interface StytchB2BProviderProps {
  * )
  */
 declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps) => JSX.Element;
+interface StytchB2BProps {
+    /**
+     * An optional {@link StyleConfig} to customize the look and feel of the screen.
+     *
+     * @example
+     * {
+     *    fontFamily: 'Arial, Helvetica, sans-serif',
+     *    width: '360px',
+     *    primaryColor: '#19303D',
+     * }
+     */
+    styles?: StyleConfig;
+    /**
+     * An optional {@link Callbacks} object.
+     *
+     * @example
+     * {
+     *   onError: ({message}) => {
+     *      console.error('Stytch error', message)
+     *   }
+     * }
+     *
+     * @example
+     * {
+     *   onEvent: ({type, data}) => {
+     *     if(type === StytchEventType.B2BMagicLinkAuthenticate) {
+     *       console.log('Logged in with', data);
+     *     }
+     *   }
+     * }
+     */
+    callbacks?: Callbacks;
+    /**
+     * A {@link StytchB2BUIConfig} object. Add products and product-specific config to this object to change the login methods shown.
+     *
+     *
+     * @example
+     * {
+     *   products: ['emailMagicLinks'],
+     *   authFlowType: "Discovery",
+     *   emailMagicLinksOptions: {
+     *     discoveryRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   sessionOptions: {
+     *     sessionDurationMinutes: 60,
+     *   },
+     * }
+     *
+     * @example
+     * {
+     *   products: ['emailMagicLinks', 'sso'],
+     *   authFlowType: "Organization",
+     *   emailMagicLinksOptions: {
+     *     loginRedirectURL: 'https://example.com/authenticate',
+     *     signupRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   ssoOptions: {
+     *     loginRedirectURL: 'https://example.com/authenticate',
+     *     signupRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   sessionOptions: {
+     *     sessionDurationMinutes: 60,
+     *   },
+     * }
+     */
+    config: StytchB2BUIConfig;
+}
+/**
+ * The Stytch B2B UI component.
+ * This component can only be used with a {@link StytchB2BUIClient} client constructor
+ * passed into the {@link StytchB2BProvider}
+ *
+ * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * <StytchB2B
+ *   config={{
+ *     authFlowType: "Organization",
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     ssoOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     sessionOptions: {
+ *       sessionDurationMinutes: 60,
+ *     }
+ *   }}
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * @param props {@link StytchB2BProps}
+ */
+declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => JSX.Element;
 /**
  * Creates a Headless Stytch client object to call the stytch B2B APIs.
  * The Stytch client is not available serverside.
@@ -115,5 +218,5 @@ declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps)
  * @returns A {@link StytchHeadlessClient}
  */
 declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient$0;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, createStytchB2BHeadlessClient };
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, StytchB2B, createStytchB2BHeadlessClient };
 export type { StytchB2BProviderProps };

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

@@ -2,6 +2,7 @@
 import React from "react";
 import { ReactNode } from "react";
 import { StytchB2BHeadlessClient, StytchB2BUIClient, Member, MemberSession } from "@stytch/vanilla-js/b2b/";
+import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
 import { StytchB2BHeadlessClient as StytchB2BHeadlessClient$0 } from "@stytch/vanilla-js/b2b";
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your `_app.js`.
@@ -101,6 +102,108 @@ interface StytchB2BProviderProps {
  * )
  */
 declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps) => JSX.Element;
+interface StytchB2BProps {
+    /**
+     * An optional {@link StyleConfig} to customize the look and feel of the screen.
+     *
+     * @example
+     * {
+     *    fontFamily: 'Arial, Helvetica, sans-serif',
+     *    width: '360px',
+     *    primaryColor: '#19303D',
+     * }
+     */
+    styles?: StyleConfig;
+    /**
+     * An optional {@link Callbacks} object.
+     *
+     * @example
+     * {
+     *   onError: ({message}) => {
+     *      console.error('Stytch error', message)
+     *   }
+     * }
+     *
+     * @example
+     * {
+     *   onEvent: ({type, data}) => {
+     *     if(type === StytchEventType.B2BMagicLinkAuthenticate) {
+     *       console.log('Logged in with', data);
+     *     }
+     *   }
+     * }
+     */
+    callbacks?: Callbacks;
+    /**
+     * A {@link StytchB2BUIConfig} object. Add products and product-specific config to this object to change the login methods shown.
+     *
+     *
+     * @example
+     * {
+     *   products: ['emailMagicLinks'],
+     *   authFlowType: "Discovery",
+     *   emailMagicLinksOptions: {
+     *     discoveryRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   sessionOptions: {
+     *     sessionDurationMinutes: 60,
+     *   },
+     * }
+     *
+     * @example
+     * {
+     *   products: ['emailMagicLinks', 'sso'],
+     *   authFlowType: "Organization",
+     *   emailMagicLinksOptions: {
+     *     loginRedirectURL: 'https://example.com/authenticate',
+     *     signupRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   ssoOptions: {
+     *     loginRedirectURL: 'https://example.com/authenticate',
+     *     signupRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   sessionOptions: {
+     *     sessionDurationMinutes: 60,
+     *   },
+     * }
+     */
+    config: StytchB2BUIConfig;
+}
+/**
+ * The Stytch B2B UI component.
+ * This component can only be used with a {@link StytchB2BUIClient} client constructor
+ * passed into the {@link StytchB2BProvider}
+ *
+ * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * <StytchB2B
+ *   config={{
+ *     authFlowType: "Organization",
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     ssoOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     sessionOptions: {
+ *       sessionDurationMinutes: 60,
+ *     }
+ *   }}
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * @param props {@link StytchB2BProps}
+ */
+declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => JSX.Element;
 /**
  * Creates a Headless Stytch client object to call the stytch B2B APIs.
  * The Stytch client is not available serverside.
@@ -115,5 +218,5 @@ declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps)
  * @returns A {@link StytchHeadlessClient}
  */
 declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient$0;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, createStytchB2BHeadlessClient };
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, StytchB2B, createStytchB2BHeadlessClient };
 export type { StytchB2BProviderProps };

package/dist/b2b/index.esm.js

@@ -1,6 +1,9 @@
-import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo } from 'react';
+import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo, useLayoutEffect } from 'react';
 
 const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
+const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are importing createStytchHeadlessClient from @stytch/nextjs/ui and not from @stytch/nextjs/headless.`;
 const cannotInvokeMethodOnServerError = (path) => `[Stytch] Invalid serverside function call to ${path}.
 The Stytch Javascript SDK is intended to ony be used on the client side.
 Make sure to wrap your API calls in a hook to ensure they are executed on the client.
@@ -80,6 +83,9 @@ const StytchContext = createContext({ isMounted: false });
 const StytchMemberContext = createContext(initialMember);
 const StytchMemberSessionContext = createContext(initialMemberSession);
 const useIsMounted__INTERNAL = () => useContext(StytchContext).isMounted;
+const isUIClient = (client) => {
+    return client.mount !== undefined;
+};
 /**
  * Returns the active member.
  * The Stytch SDKs are used for client-side authentication and session management.
@@ -202,6 +208,65 @@ const StytchB2BProvider = ({ stytch, children }) => {
             React.createElement(StytchMemberSessionContext.Provider, { value: finalMemberSession }, children))));
 };
 
+/**
+ * The Stytch B2B UI component.
+ * This component can only be used with a {@link StytchB2BUIClient} client constructor
+ * passed into the {@link StytchB2BProvider}
+ *
+ * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * <StytchB2B
+ *   config={{
+ *     authFlowType: "Organization",
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     ssoOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     sessionOptions: {
+ *       sessionDurationMinutes: 60,
+ *     }
+ *   }}
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * @param props {@link StytchB2BProps}
+ */
+const StytchB2B = ({ styles, callbacks, config }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchB2B />'));
+    const stytchClient = useStytchB2BClient();
+    const containerEl = useRef(null);
+    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-ui-${randId}`;
+        }
+        stytchClient.mount({
+            callbacks,
+            config,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [stytchClient, styles, callbacks]);
+    return React.createElement("div", { ref: containerEl });
+};
+
 var e, t, n, r, o, i, a, s, u, l, c, f, d, p, h, m, g, v, y, b, w, _, k, S;
 function E(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 function x(e, t) { var n = "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"]; if (!n) {
@@ -5562,4 +5627,4 @@ const createStytchB2BHeadlessClient = (...args) => {
     return new Tt(...args);
 };
 
-export { StytchB2BProvider, createStytchB2BHeadlessClient, useStytchB2BClient, useStytchMember, useStytchMemberSession, withStytchB2BClient, withStytchMember, withStytchMemberSession };
+export { StytchB2B, StytchB2BProvider, createStytchB2BHeadlessClient, useStytchB2BClient, useStytchMember, useStytchMemberSession, withStytchB2BClient, withStytchMember, withStytchMemberSession };

package/dist/b2b/index.js

@@ -9,6 +9,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
+const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are importing createStytchHeadlessClient from @stytch/nextjs/ui and not from @stytch/nextjs/headless.`;
 const cannotInvokeMethodOnServerError = (path) => `[Stytch] Invalid serverside function call to ${path}.
 The Stytch Javascript SDK is intended to ony be used on the client side.
 Make sure to wrap your API calls in a hook to ensure they are executed on the client.
@@ -88,6 +91,9 @@ const StytchContext = React.createContext({ isMounted: false });
 const StytchMemberContext = React.createContext(initialMember);
 const StytchMemberSessionContext = React.createContext(initialMemberSession);
 const useIsMounted__INTERNAL = () => React.useContext(StytchContext).isMounted;
+const isUIClient = (client) => {
+    return client.mount !== undefined;
+};
 /**
  * Returns the active member.
  * The Stytch SDKs are used for client-side authentication and session management.
@@ -210,6 +216,65 @@ const StytchB2BProvider = ({ stytch, children }) => {
             React__default['default'].createElement(StytchMemberSessionContext.Provider, { value: finalMemberSession }, children))));
 };
 
+/**
+ * The Stytch B2B UI component.
+ * This component can only be used with a {@link StytchB2BUIClient} client constructor
+ * passed into the {@link StytchB2BProvider}
+ *
+ * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * <StytchB2B
+ *   config={{
+ *     authFlowType: "Organization",
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     ssoOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     sessionOptions: {
+ *       sessionDurationMinutes: 60,
+ *     }
+ *   }}
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * @param props {@link StytchB2BProps}
+ */
+const StytchB2B = ({ styles, callbacks, config }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchB2B />'));
+    const stytchClient = useStytchB2BClient();
+    const containerEl = React.useRef(null);
+    React.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-ui-${randId}`;
+        }
+        stytchClient.mount({
+            callbacks,
+            config,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [stytchClient, styles, callbacks]);
+    return React__default['default'].createElement("div", { ref: containerEl });
+};
+
 var e, t, n, r, o, i, a, s, u, l, c, f, d, p, h, m, g, v, y, b, w, _, k, S;
 function E(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 function x(e, t) { var n = "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"]; if (!n) {
@@ -5570,6 +5635,7 @@ const createStytchB2BHeadlessClient = (...args) => {
     return new Tt(...args);
 };
 
+exports.StytchB2B = StytchB2B;
 exports.StytchB2BProvider = StytchB2BProvider;
 exports.createStytchB2BHeadlessClient = createStytchB2BHeadlessClient;
 exports.useStytchB2BClient = useStytchB2BClient;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/nextjs",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Stytch's official Next.js Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",