@stytch/nextjs 19.0.0 → 20.1.0

package/dist/b2b/index.esm.js

@@ -1,342 +1,8 @@
-import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo, useLayoutEffect } from 'react';
-
-const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
-    // If comparing functions, this may need some work. Not sure the
-    // best path for this: compare instance (what it currently does),
-    // stringify and compare, etc.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const deepEqual = (a, b) => {
-        // Ensures type is the same
-        if (typeof a !== typeof b)
-            return false;
-        // arrays, null, and objects all have type 'object'
-        if (a === null || b === null)
-            return a === b;
-        if (typeof a === 'object') {
-            if (Object.keys(a).length !== Object.keys(b).length || Object.keys(a).some((k) => !(k in b)))
-                return false;
-            return Object.entries(a)
-                .filter(([k]) => !KEYS_TO_EXCLUDE.includes(k))
-                .every(([k, v]) => deepEqual(v, b[k]));
-        }
-        // boolean, string, number, undefined
-        return a === b;
-    };
-    return deepEqual;
-};
-
-const deepEqual = createDeepEqual();
-/**
- * Returns a version of `newValue` whose properties that are deeply equal to
- * those in `oldValue` are replaced with those from `oldValue`. This provides a
- * limited form of "structural sharing" that provides a stable reference for
- * unchanged slices of the object.
- *
- * If `oldValue` and `newValue` are referentially equal, the same value is
- * returned.
- *
- * @param oldValue The old value
- * @param newValue The new value
- */
-const mergeWithStableProps = (oldValue, newValue) => {
-    // If the values are already referentially the same, just return the new value
-    if (oldValue === newValue) {
-        return newValue;
-    }
-    return Object.keys(oldValue).reduce((acc, key) => {
-        if (key in newValue && deepEqual(oldValue[key], newValue[key])) {
-            acc[key] = oldValue[key];
-        }
-        return acc;
-    }, Object.assign({}, newValue));
-};
-
-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.`;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function invariant(cond, message) {
-    if (!cond)
-        throw new Error(message);
-}
-
-// useState can cause memory leaks if it is set after the component unmounted. For example, if it is
-// set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
-const useAsyncState = (initialState) => {
-    const isMounted = useRef(true);
-    const [state, setState] = useState(initialState);
-    useEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-    const setStateAction = useCallback((newState) => {
-        isMounted.current && setState(newState);
-    }, []);
-    return [state, setStateAction];
-};
-
-const SSRStubKey = Symbol('__stytch_SSRStubKey');
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const isStytchSSRProxy = (proxy) => {
-    return !!proxy[SSRStubKey];
-};
-
-const initialMember = {
-    member: null,
-    fromCache: false,
-    isInitialized: false,
-};
-const initialMemberSession = {
-    session: null,
-    fromCache: false,
-    isInitialized: false,
-};
-const initialOrganization = {
-    organization: null,
-    fromCache: false,
-    isInitialized: false,
-};
-const StytchContext = createContext({ isMounted: false });
-const StytchMemberContext = createContext(initialMember);
-const StytchMemberSessionContext = createContext(initialMemberSession);
-const StytchOrganizationContext = createContext(initialOrganization);
-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.
- * 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>);
- */
-const useStytchMember = () => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMember', 'StytchB2BProvider'));
-    return useContext(StytchMemberContext);
-};
-/**
- * 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]);
- */
-const useStytchMemberSession = () => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
-    return useContext(StytchMemberSessionContext);
-};
-/**
- * Returns the active Stytch organization.
- * 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 {organization, isInitialized, fromCache} = useStytchOrganization();
- * if (!isInitialized) {
- *     return <p>Loading...</p>;
- * }
- * return (<p>Welcome to {organization.organization_name}</p>);
- */
-const useStytchOrganization = () => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchOrganization', 'StytchB2BProvider'));
-    return useContext(StytchOrganizationContext);
-};
-/**
- * Determines whether the logged-in member is allowed to perform the specified action on the specified resource.
- * Returns `true` if the member can perform the action, `false` otherwise.
- *
- * If the member is not logged in, this method will always return false.
- * If the resource or action provided are not valid for the configured RBAC policy, this method will return false.
- *
- * Remember - authorization checks for sensitive actions should always occur on the backend as well.
- * @example
- * const isAuthorized = useStytchIsAuthorized<Permissions>('documents', 'edit');
- * return <button disabled={!isAuthorized}>Edit</button>
- */
-const useStytchIsAuthorized = (resourceId, action) => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchIsAuthorized', 'StytchB2BProvider'));
-    const client = useStytchB2BClient();
-    const { session } = useStytchMemberSession();
-    const [isAuthorized, setIsAuthorized] = useAsyncState({
-        isInitialized: false,
-        fromCache: false,
-        isAuthorized: false,
-    });
-    useEffect(() => {
-        if (isStytchSSRProxy(client)) {
-            return;
-        }
-        setIsAuthorized({
-            isInitialized: true,
-            fromCache: true,
-            isAuthorized: client.rbac.isAuthorizedSync(resourceId, action),
-        });
-    }, [action, client, resourceId, setIsAuthorized]);
-    useEffect(() => {
-        if (isStytchSSRProxy(client)) {
-            return;
-        }
-        client.rbac.isAuthorized(resourceId, action).then((isAuthorized) => {
-            setIsAuthorized({ isAuthorized, fromCache: false, isInitialized: true });
-        });
-    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action, setIsAuthorized]);
-    return isAuthorized;
-};
-/**
- * Returns the Stytch client stored in the Stytch context.
- *
- * @example
- * const stytch = useStytch();
- * useEffect(() => {
- *   stytch.magicLinks.authenticate('...')
- * }, [stytch]);
- */
-const useStytchB2BClient = () => {
-    const ctx = useContext(StytchContext);
-    invariant(ctx.isMounted, noProviderError('useStytchB2BClient', 'StytchB2BProvider'));
-    return ctx.client;
-};
-const withStytchB2BClient = (Component) => {
-    const WithStytch = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchB2BClient', 'StytchB2BProvider'));
-        return React.createElement(Component, Object.assign({}, props, { stytch: useStytchB2BClient() }));
-    };
-    WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
-    return WithStytch;
-};
-const withStytchMember = (Component) => {
-    const WithStytchUser = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchMember', 'StytchB2BProvider'));
-        const { member, isInitialized, fromCache } = useStytchMember();
-        return (React.createElement(Component, Object.assign({}, props, { stytchMember: member, stytchMemberIsInitialized: isInitialized, stytchMemberIsFromCache: fromCache })));
-    };
-    WithStytchUser.displayName = `withStytchMember(${Component.displayName || Component.name || 'Component'})`;
-    return WithStytchUser;
-};
-const withStytchMemberSession = (Component) => {
-    const WithStytchSession = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchMemberSession', 'StytchB2BProvider'));
-        const { session, isInitialized, fromCache } = useStytchMemberSession();
-        return (React.createElement(Component, Object.assign({}, props, { stytchMemberSession: session, stytchMemberSessionIsInitialized: isInitialized, stytchMemberSessionIsFromCache: fromCache })));
-    };
-    WithStytchSession.displayName = `withStytchMemberSession(${Component.displayName || Component.name || 'Component'})`;
-    return WithStytchSession;
-};
-const withStytchOrganization = (Component) => {
-    const WithStytchOrganization = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchOrganization', 'StytchB2BProvider'));
-        const { organization, isInitialized, fromCache } = useStytchOrganization();
-        return (React.createElement(Component, Object.assign({}, props, { stytchOrganization: organization, stytchOrganizationIsInitialized: isInitialized, stytchOrganizationIsFromCache: fromCache })));
-    };
-    WithStytchOrganization.displayName = `withStytchOrganization(${Component.displayName || Component.name || 'Component'})`;
-    return WithStytchOrganization;
-};
-/**
- * Wrap your component with this HOC in order to receive the permissions for the logged-in member.
- * Evaluates all permissions granted to the logged-in member.
- * Returns a Record<RoleId, Record<Action, boolean>> response indicating the member's permissions.
- * Each boolean will be `true` if the member can perform the action, `false` otherwise.
- *
- * If the member is not logged in, all values will be false.
- *
- * Remember - authorization checks for sensitive actions should always occur on the backend as well.
- * @example
- * type Permissions = {
- *   document: 'create' | 'read' | 'write
- *   image: 'create' | 'read'
- * }
- *
- * const MyComponent = (props) => {
- *   const canEditDocuments = props.stytchPermissions.document.edit;
- *   const canReadImages = props.stytchPermissions.image.read;
- * }
- * return withStytchPermissions<Permissions>(MyComponent)
- */
-const withStytchPermissions = (Component) => {
-    const WithStytchPermissions = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError('useRBACPermissions', 'StytchB2BProvider'));
-        const client = useStytchB2BClient();
-        const { session } = useStytchMemberSession();
-        const [permissions, setPermissions] = useAsyncState({ loaded: false, value: null });
-        useEffect(() => {
-            client.rbac
-                .allPermissions()
-                .then((permissions) => setPermissions({ loaded: true, value: permissions }));
-        }, [client, session === null || session === void 0 ? void 0 : session.roles, setPermissions]);
-        if (!permissions.loaded) {
-            return null;
-        }
-        return React.createElement(Component, Object.assign({}, props, { stytchPermissions: permissions.value }));
-    };
-    WithStytchPermissions.displayName = `withStytchPermissions(${Component.displayName || Component.name || 'Component'})`;
-    return WithStytchPermissions;
-};
-/**
- * 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>
- * )
- */
-const StytchB2BProvider = ({ stytch, children }) => {
-    const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [{ member, session, organization }, setClientState] = useAsyncState({
-        member: initialMember,
-        session: initialMemberSession,
-        organization: initialOrganization,
-    });
-    useEffect(() => {
-        if (isStytchSSRProxy(stytch)) {
-            return;
-        }
-        setClientState({
-            member: Object.assign(Object.assign({}, stytch.self.getInfo()), { isInitialized: true }),
-            session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
-            organization: Object.assign(Object.assign({}, stytch.organization.getInfo()), { isInitialized: true }),
-        });
-        return stytch.onStateChange(() => {
-            setClientState((oldState) => {
-                const newState = {
-                    member: Object.assign(Object.assign({}, stytch.self.getInfo()), { isInitialized: true }),
-                    session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
-                    organization: Object.assign(Object.assign({}, stytch.organization.getInfo()), { isInitialized: true }),
-                };
-                return mergeWithStableProps(oldState, newState);
-            });
-        });
-    }, [setClientState, stytch]);
-    return (React.createElement(StytchContext.Provider, { value: ctx },
-        React.createElement(StytchOrganizationContext.Provider, { value: organization },
-            React.createElement(StytchMemberContext.Provider, { value: member },
-                React.createElement(StytchMemberSessionContext.Provider, { value: session }, children)))));
-};
+import { u as useIsMounted__INTERNAL, a as useStytchB2BClient, i as isUIClient } from '../StytchB2BContext-162fadb4.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-162fadb4.js';
+import React, { useRef, useLayoutEffect } from 'react';
+import { i as invariant } from '../async-b1e10055.js';
+import { a as noHeadlessClientError, n as noProviderError } from '../StytchSSRProxy-14916009.js';
 
 /**
  * The Stytch B2B UI component.
@@ -398,4 +64,4 @@ const StytchB2B = ({ styles, callbacks, config }) => {
     return React.createElement("div", { ref: containerEl });
 };
 
-export { StytchB2B, StytchB2BProvider, useStytchB2BClient, useStytchIsAuthorized, useStytchMember, useStytchMemberSession, useStytchOrganization, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchOrganization, withStytchPermissions };
+export { StytchB2B };

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

@@ -1,42 +1,5 @@
 import { StytchB2BHeadlessClient } from '@stytch/vanilla-js/b2b/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.
-\`\`\`
-const myComponent = () => {
-  const stytch = useStytch();
-  // This will error out on the server.
-  stytch.magicLinks.authenticate(...);
-  useEffect(() => {
-    // This will work well
-    stytch.magicLinks.authenticate(...);
-  }, []);
-}
-\`\`\`
-
-If you want to make API calls from server environments, please use the Stytch Node Library
-https://www.npmjs.com/package/stytch.
-`;
-
-const SSRStubKey = Symbol('__stytch_SSRStubKey');
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const createProxy = (path) => {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    const noop = () => { };
-    return new Proxy(noop, {
-        get(target, p) {
-            if (p === SSRStubKey) {
-                return true;
-            }
-            return createProxy(path + '.' + String(p));
-        },
-        apply() {
-            throw new Error(cannotInvokeMethodOnServerError(path));
-        },
-    });
-};
-const createStytchSSRProxy = () => createProxy('stytch');
+import { c as createStytchSSRProxy } from '../StytchSSRProxy-14916009.js';
 
 /**
  * Creates a Headless Stytch client object to call the stytch B2B APIs.

package/dist/b2b/index.headless.js

@@ -3,44 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var headless = require('@stytch/vanilla-js/b2b/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.
-\`\`\`
-const myComponent = () => {
-  const stytch = useStytch();
-  // This will error out on the server.
-  stytch.magicLinks.authenticate(...);
-  useEffect(() => {
-    // This will work well
-    stytch.magicLinks.authenticate(...);
-  }, []);
-}
-\`\`\`
-
-If you want to make API calls from server environments, please use the Stytch Node Library
-https://www.npmjs.com/package/stytch.
-`;
-
-const SSRStubKey = Symbol('__stytch_SSRStubKey');
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const createProxy = (path) => {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    const noop = () => { };
-    return new Proxy(noop, {
-        get(target, p) {
-            if (p === SSRStubKey) {
-                return true;
-            }
-            return createProxy(path + '.' + String(p));
-        },
-        apply() {
-            throw new Error(cannotInvokeMethodOnServerError(path));
-        },
-    });
-};
-const createStytchSSRProxy = () => createProxy('stytch');
+var StytchSSRProxy = require('../StytchSSRProxy-63bc6323.js');
 
 /**
  * Creates a Headless Stytch client object to call the stytch B2B APIs.
@@ -57,7 +20,7 @@ const createStytchSSRProxy = () => createProxy('stytch');
  */
 const createStytchB2BHeadlessClient = (...args) => {
     if (typeof window === 'undefined') {
-        return createStytchSSRProxy();
+        return StytchSSRProxy.createStytchSSRProxy();
     }
     return new headless.StytchB2BHeadlessClient(...args);
 };