@stytch/react 0.0.0-idp-20241212005436

package/dist/index.esm.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 };

package/dist/index.esm.js

@@ -0,0 +1,349 @@
+import React, { createContext, useContext, useMemo, useEffect, useRef, useLayoutEffect } from 'react';
+import { i as invariant, u as useAsyncState, m as mergeWithStableProps, n as noProviderError, p as providerMustBeUniqueError, a as noSSRError, b as noHeadlessClientError } from './invariant-568a7633.js';
+
+const initialUser = {
+    user: null,
+    fromCache: false,
+};
+const initialSession = {
+    session: null,
+    fromCache: false,
+};
+const StytchContext = createContext({ isMounted: false });
+const StytchUserContext = createContext(initialUser);
+const StytchSessionContext = createContext(initialSession);
+const useIsMounted__INTERNAL = () => useContext(StytchContext).isMounted;
+const isUIClient = (client) => {
+    return client.mountLogin !== undefined;
+};
+/**
+ * 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}
+ */
+const useStytchUser = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchUser'));
+    return useContext(StytchUserContext);
+};
+/**
+ * Returns the active user's Stytch session.
+ * @example
+ * const {session} = useStytchSession();
+ * useEffect(() => {
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session]);
+ * @returns A {@link SWRSession}
+ */
+const useStytchSession = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchSession'));
+    return useContext(StytchSessionContext);
+};
+/**
+ * Returns the Stytch client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytch();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+const useStytch = () => {
+    const ctx = useContext(StytchContext);
+    invariant(ctx.isMounted, noProviderError('useStytch'));
+    return ctx.client;
+};
+const withStytch = (Component) => {
+    const WithStytch = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytch'));
+        return React.createElement(Component, Object.assign({}, props, { stytch: useStytch() }));
+    };
+    WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytch;
+};
+const withStytchUser = (Component) => {
+    const WithStytchUser = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchUser'));
+        const { user, fromCache } = useStytchUser();
+        return React.createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsFromCache: fromCache }));
+    };
+    WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchUser;
+};
+const withStytchSession = (Component) => {
+    const WithStytchSession = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchSession'));
+        const { session, fromCache } = useStytchSession();
+        return React.createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsFromCache: fromCache }));
+    };
+    WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchSession;
+};
+/**
+ * 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'),
+ * )
+ */
+const StytchProvider = ({ stytch, children }) => {
+    invariant(!useIsMounted__INTERNAL(), providerMustBeUniqueError);
+    invariant(typeof window !== 'undefined', noSSRError);
+    const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
+    const [{ user, session }, setClientState] = useAsyncState({
+        session: stytch.session.getInfo(),
+        user: stytch.user.getInfo(),
+    });
+    useEffect(() => stytch.onStateChange(() => {
+        setClientState((oldState) => {
+            const newState = {
+                session: stytch.session.getInfo(),
+                user: stytch.user.getInfo(),
+            };
+            return mergeWithStableProps(oldState, newState);
+        });
+    }), [setClientState, stytch]);
+    return (React.createElement(StytchContext.Provider, { value: ctx },
+        React.createElement(StytchUserContext.Provider, { value: user },
+            React.createElement(StytchSessionContext.Provider, { value: session }, children))));
+};
+
+/**
+ * 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}
+ */
+const StytchLogin = ({ config, styles, callbacks }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchLogin />'));
+    const stytchClient = useStytch();
+    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-magic-link-${randId}`;
+        }
+        stytchClient.mountLogin({
+            config: config,
+            callbacks,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [stytchClient, config, styles, callbacks]);
+    return React.createElement("div", { ref: containerEl });
+};
+/**
+ * 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
+ */
+const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchResetPassword />'));
+    const stytchClient = useStytch();
+    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-reset-password-${randId}`;
+        }
+        if (passwordResetToken) {
+            stytchClient.mountResetPassword({
+                config: config,
+                callbacks,
+                elementId: `#${containerEl.current.id}`,
+                styles,
+                passwordResetToken,
+            });
+        }
+    }, [stytchClient, config, styles, callbacks, passwordResetToken]);
+    return React.createElement("div", { ref: containerEl });
+};
+/**
+ * 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
+ */
+const StytchPasskeyRegistration = ({ config, styles, callbacks }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchPasskeyRegistration />'));
+    const stytchClient = useStytch();
+    const user = useStytchUser();
+    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-reset-passkey-${randId}`;
+        }
+        stytchClient.mountPasskeyRegistration({
+            config,
+            callbacks,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [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',
+ *   },
+ * }
+ *
+ * <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
+ */
+const StytchIDP = ({ styles, callbacks }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchIDP />'));
+    const stytchClient = useStytch();
+    const user = useStytchUser();
+    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-idp-${randId}`;
+        }
+        stytchClient.mountIDP({
+            callbacks,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [stytchClient, styles, callbacks, user]);
+    return React.createElement("div", { ref: containerEl });
+};
+
+export { StytchIDP, StytchLogin, StytchPasskeyRegistration, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };