@stytch/react 0.0.0-idp-20241212005436

package/dist/b2b/index.esm.js

@@ -0,0 +1,66 @@
+import { u as useIsMounted__INTERNAL, a as useStytchB2BClient, i as isUIClient } from '../StytchB2BContext-8acafb28.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-8acafb28.js';
+import React, { useRef, useLayoutEffect } from 'react';
+import { i as invariant, b as noHeadlessClientError, n as noProviderError } from '../invariant-568a7633.js';
+
+/**
+ * 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,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- SDK-1354
+    }, [stytchClient, styles, callbacks]);
+    return React.createElement("div", { ref: containerEl });
+};
+
+export { StytchB2B };

package/dist/b2b/index.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var StytchB2BContext = require('../StytchB2BContext-d240104b.js');
+var React = require('react');
+var invariant = require('../invariant-ae5a5bce.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * 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.invariant(StytchB2BContext.useIsMounted__INTERNAL(), invariant.noProviderError('<StytchB2B />'));
+    const stytchClient = StytchB2BContext.useStytchB2BClient();
+    const containerEl = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (!StytchB2BContext.isUIClient(stytchClient)) {
+            throw Error(invariant.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,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- SDK-1354
+    }, [stytchClient, styles, callbacks]);
+    return React__default["default"].createElement("div", { ref: containerEl });
+};
+
+exports.StytchB2BProvider = StytchB2BContext.StytchB2BProvider;
+exports.useStytchB2BClient = StytchB2BContext.useStytchB2BClient;
+exports.useStytchIsAuthorized = StytchB2BContext.useStytchIsAuthorized;
+exports.useStytchMember = StytchB2BContext.useStytchMember;
+exports.useStytchMemberSession = StytchB2BContext.useStytchMemberSession;
+exports.useStytchOrganization = StytchB2BContext.useStytchOrganization;
+exports.withStytchB2BClient = StytchB2BContext.withStytchB2BClient;
+exports.withStytchMember = StytchB2BContext.withStytchMember;
+exports.withStytchMemberSession = StytchB2BContext.withStytchMemberSession;
+exports.withStytchOrganization = StytchB2BContext.withStytchOrganization;
+exports.withStytchPermissions = StytchB2BContext.withStytchPermissions;
+exports.StytchB2B = StytchB2B;

package/dist/createDeepEqual-5555f2e1.d.ts

@@ -0,0 +1,5 @@
+type DeepEqualOpts = {
+    KEYS_TO_EXCLUDE?: string[];
+};
+declare const createDeepEqual: ({ KEYS_TO_EXCLUDE }?: DeepEqualOpts) => (a: any, b: any) => boolean;
+export { createDeepEqual };

package/dist/index-b14d4efe.d.ts

@@ -0,0 +1,2 @@
+export { createDeepEqual } from "./createDeepEqual-5555f2e1.js";
+export { mergeWithStableProps } from "./invariant-568a7633.js";

package/dist/index.d.ts

@@ -0,0 +1,296 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+// We need to import the StytchUIClient type to give the TSDoc parser a hint as to where it is from
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Callbacks, StytchLoginConfig, StyleConfig, Session, StytchUIClient, User } from "@stytch/vanilla-js";
+import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+interface StytchProps {
+    /**
+     * A {@link StytchLoginConfig} object. Add products and product-specific config to this object to change the login methods shown.
+     *
+     * @example
+     * {
+     *   products: ['crypto', 'otps']
+     * }
+     *
+     * @example
+     * {
+     *   products: ['emailMagicLinks'>]
+     *   emailMagicLinksOptions: {
+     *     loginRedirectURL: 'https://example.com/authenticate',
+     *     signupRedirectURL: 'https://example.com/authenticate',
+     *   }
+     * }
+     *
+     * @example
+     * {
+     *   products: ['oauth'>]
+     *   oauthOptions: {
+     *   providers: [
+     *       { type: 'google', one_tap: true, position: 'embedded' },
+     *       { type: 'microsoft' },
+     *       { type: 'apple' },
+     *       { type: 'facebook' },
+     *     ],
+     *   }
+     * }
+     */
+    config: StytchLoginConfig;
+    /**
+     * 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 login screen error', message)
+     *   }
+     * }
+     *
+     * @example
+     * {
+     *   onEvent: ({type, data}) => {
+     *     if(type === StytchEventType.CryptoWalletAuthenticate) {
+     *       console.log('Logged in with crypto wallet', data);
+     *     }
+     *   }
+     * }
+     */
+    callbacks?: Callbacks;
+}
+/**
+ * The Stytch Login Screen 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}
+ *
+ * @example
+ * <StytchLogin
+ *   config={{
+ *     products: ['emailMagicLinks', 'oauth'],
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     oauthOptions: {
+ *      providers: [{ type: OAuthProviders.Google }, { type: OAuthProviders.Microsoft }],
+ *    },
+ *   }}
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * @param props {@link StytchProps}
+ */
+declare const StytchLogin: ({ config, styles, callbacks }: StytchProps) => React.JSX.Element;
+interface StytchResetPasswordProps extends StytchProps {
+    passwordResetToken: string;
+}
+type StytchIDPProps = 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}
+ *
+ * @example
+ * <StytchPasswordReset
+ *   config={{
+ *     products: ['emailMagicLinks', 'oauth'],
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     oauthOptions: {
+ *      providers: [{ type: OAuthProviders.Google }, { type: OAuthProviders.Microsoft }],
+ *    },
+ *   }}
+ *   passwordResetToken="PvC5UudZ7TPZbELt95yXAQ-8MeEUCRob8bUQ-g52fIJs"
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param config - A {@link StytchLoginConfig} object
+ * @param passwordResetToken - A Stytch password reset token
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+declare const StytchPasswordReset: ({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps) => React.JSX.Element;
+/**
+ * The Stytch Passkey Registration 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}
+ *
+ *
+ * @example
+ * const styles = {
+ *     container: {
+ *       backgroundColor: '#e11e1e',
+ *     },
+ *     colors: {
+ *       primary: '#ff00f7',
+ *       secondary: '#5C727D',
+ *     },
+ *    }
+ *
+ * <StytchPasskeyRegistration
+ *   config={{
+ *      products: ['passkey'],
+ *    }}
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * @param config - A {@link StytchLoginConfig} object
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+declare const StytchPasskeyRegistration: ({ config, styles, callbacks }: StytchProps) => React.JSX.Element;
+/**
+ * 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',
+ *   },
+ * }
+ *
+ * <StytchIDP
+ *   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 StytchIDP: ({ styles, callbacks }: StytchIDPProps) => React.JSX.Element;
+/**
+ * The Stytch Client object passed in to <StytchProvider /> in your application root.
+ * Either a StytchUIClient or StytchHeadlessClient.
+ */
+type StytchClient = StytchUIClient | StytchHeadlessClient;
+type SWRUser = {
+    /**
+     * Either the active {@link User} object, or null if the user is not logged in.
+     */
+    user: User | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+type SWRSession = {
+    /**
+     * Either the active {@link Session} object, or null if the user is not logged in.
+     */
+    session: Session | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+/**
+ * Returns the active User.
+ * Check the fromCache property to determine if the user data is from persistent storage.
+ * @example
+ * const {user} = useStytchUser();
+ * return (<h1>Welcome, {user.name.first_name}</h1>);
+ * @returns A {@link SWRUser}
+ */
+declare const useStytchUser: () => SWRUser;
+/**
+ * Returns the active user's Stytch session.
+ * @example
+ * const {session} = useStytchSession();
+ * useEffect(() => {
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session]);
+ * @returns A {@link SWRSession}
+ */
+declare const useStytchSession: () => SWRSession;
+/**
+ * Returns the Stytch client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytch();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+declare const useStytch: () => StytchClient;
+declare const withStytch: <T extends object>(Component: React.ComponentType<T & {
+    stytch: StytchClient;
+}>) => React.ComponentType<T>;
+declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
+    stytchUser: User | null;
+    stytchUserIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+declare const withStytchSession: <T extends object>(Component: React.ComponentType<T & {
+    stytchSession: Session | null;
+    stytchSessionIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+type StytchProviderProps = {
+    /**
+     * A Stytch client instance, either a {@link StytchUIClient} or {@link StytchHeadlessClient}
+     */
+    stytch: StytchClient;
+    children?: ReactNode;
+};
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = new StytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
+declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
+export { StytchLogin, StytchPasswordReset, StytchPasskeyRegistration, StytchIDP, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+export type { StytchProviderProps };