@stytch/nextjs 4.0.0 → 5.0.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @stytch/nextjs
 
+## 5.0.1
+
+### Patch Changes
+
+- 8c54ee1: Missing export in the nextjs SDK for the UI component
+
+## 5.0.0
+
+### Minor Changes
+
+- 15dbe7d: Releasing UI components for our B2B SDKs.
+
+### Patch Changes
+
+- Updated dependencies [15dbe7d]
+  - @stytch/vanilla-js@0.13.0
+
 ## 4.0.0
 
 ### Patch Changes

package/dist/b2b/index.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { StytchB2BHeadlessClient, Member, MemberSession } from "@stytch/vanilla-js/b2b/";
+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`.
  * Either a StytchUIClient or StytchHeadlessClient.
  */
-type StytchB2BClient = StytchB2BHeadlessClient;
+type StytchB2BClient = StytchB2BHeadlessClient | StytchB2BUIClient;
 type SWRMember = {
     member: null;
     fromCache: false;
@@ -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

@@ -1,13 +1,14 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { StytchB2BHeadlessClient, Member, MemberSession } from "@stytch/vanilla-js/b2b/";
+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`.
  * Either a StytchUIClient or StytchHeadlessClient.
  */
-type StytchB2BClient = StytchB2BHeadlessClient;
+type StytchB2BClient = StytchB2BHeadlessClient | StytchB2BUIClient;
 type SWRMember = {
     member: null;
     fromCache: false;
@@ -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 };