@stytch/nextjs 13.0.0 → 14.0.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @stytch/nextjs
 
+## 14.0.0
+
+### Patch Changes
+
+- Updated dependencies [ec1962c]
+  - @stytch/vanilla-js@3.2.0
+
 ## 13.0.0
 
 ### Minor Changes

package/dist/b2b/index.d.ts

@@ -1,3 +1,208 @@
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, } from './StytchB2BContext';
-export { StytchB2B } from './Stytch';
-export type { StytchB2BProviderProps } from './StytchB2BContext';
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { Member, MemberSession, StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
+import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
+import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
+/**
+ * The Stytch Client object passed in to <StytchProvider /> in your `_app.js`.
+ * Either a StytchUIClient or StytchHeadlessClient.
+ */
+type StytchB2BClient = StytchB2BHeadlessClient | StytchB2BUIClient;
+type SWRMember = {
+    member: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    member: Member | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
+type SWRMemberSession = {
+    session: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    session: MemberSession | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
+/**
+ * Returns the active member.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the session data is from persistent storage.
+ * See Next's {@link https://nextjs.org/docs/authentication#authenticating-statically-generated-pages documentation} for more.
+ * @example
+ * const {member, isInitialized, fromCache} = useStytchMember();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<h1>Welcome, {member.name}</h1>);
+ */
+declare const useStytchMember: () => SWRMember;
+/**
+ * Returns the member's active Stytch member session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the session data is from persistent storage.
+ * See Next's {@link https://nextjs.org/docs/authentication#authenticating-statically-generated-pages documentation} for more.
+ * @example
+ * const {session, isInitialized, fromCache} = useStytchMemberSession();
+ * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session, isInitialized]);
+ */
+declare const useStytchMemberSession: () => SWRMemberSession;
+/**
+ * Returns the Stytch client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytch();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+declare const useStytchB2BClient: () => StytchB2BClient;
+declare const withStytchB2BClient: <T extends object>(Component: React.ComponentType<T & {
+    stytch: StytchB2BClient;
+}>) => React.ComponentType<T>;
+declare const withStytchMember: <T extends object>(Component: React.ComponentType<T & {
+    stytchMember: Member | null;
+    stytchMemberIsInitialized: boolean;
+    stytchMemberIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+declare const withStytchMemberSession: <T extends object>(Component: React.ComponentType<T & {
+    stytchMemberSession: MemberSession | null;
+    stytchMemberSessionIsInitialized: boolean;
+    stytchMemberSessionIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+interface StytchB2BProviderProps {
+    /**
+     * A Stytch client instance, created using either {@link createStytchHeadlessClient} or {@link createStytchUIClient}
+     */
+    stytch: StytchB2BClient;
+    children?: ReactNode;
+}
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in `_app.js` in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = createStytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ */
+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) => React.JSX.Element;
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, StytchB2B };
+export type { StytchB2BProviderProps };

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

@@ -1 +1,16 @@
-export * from './createStytchB2BHeadlessClient';
+import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
+/**
+ * Creates a Headless Stytch client object to call the stytch B2B APIs.
+ * The Stytch client is not available serverside.
+ * @example
+ * const stytch = createStytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ * @returns A {@link StytchB2BHeadlessClient}
+ */
+declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient;
+export { createStytchB2BHeadlessClient };

package/dist/b2b/index.headless.esm.js

@@ -3194,7 +3194,7 @@ var Ie = /*#__PURE__*/ function () {
                     },
                     sdk: {
                         identifier: "Stytch.js Javascript SDK",
-                        version: "3.0.3"
+                        version: "3.2.0"
                     }
                 });
             }