@stytch/react 17.0.0 → 18.1.0

package/dist/StytchB2BContext-ce9e254c.js

@@ -0,0 +1,235 @@
+'use strict';
+
+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);
+
+const initialMember = {
+    member: null,
+    fromCache: false,
+};
+const initialMemberSession = {
+    session: null,
+    fromCache: false,
+};
+const initialOrganization = {
+    organization: null,
+    fromCache: false,
+};
+const StytchB2BContext = React.createContext({ isMounted: false });
+const StytchMemberContext = React.createContext(initialMember);
+const StytchMemberSessionContext = React.createContext(initialMemberSession);
+const StytchOrganizationContext = React.createContext(initialOrganization);
+const useIsMounted__INTERNAL = () => React.useContext(StytchB2BContext).isMounted;
+const isUIClient = (client) => {
+    return client.mount !== undefined;
+};
+/**
+ * Returns the active Member.
+ * Check the fromCache property to determine if the member data is from persistent storage.
+ * @example
+ * const {member} = useStytchMember();
+ * return (<h1>Welcome, {member.name}</h1>);
+ * @returns A {@link SWRUser}
+ */
+const useStytchMember = () => {
+    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchMember', 'StytchB2BProvider'));
+    return React.useContext(StytchMemberContext);
+};
+/**
+ * Returns the active member's Stytch member session.
+ * @example
+ * const { session } = useStytchMemberSession();
+ * useEffect(() => {
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session]);
+ * @returns A {@link SWRMemberSession}
+ */
+const useStytchMemberSession = () => {
+    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
+    return React.useContext(StytchMemberSessionContext);
+};
+/**
+ * Returns the active Stytch organization.
+ * @example
+ * const { organization } = useStytchOrganization();
+ * return organization ? <p>Welcome to {organization.organization_name}</p> : <p>Log in to continue!</p>;
+ * @returns A {@link SWROrganization}
+ */
+const useStytchOrganization = () => {
+    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchOrganization', 'StytchB2BProvider'));
+    return React.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.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchIsAuthorized', 'StytchB2BProvider'));
+    const client = useStytchB2BClient();
+    const { session } = useStytchMemberSession();
+    const [isAuthorized, setIsAuthorized] = invariant.useAsyncState({
+        fromCache: true,
+        isAuthorized: client.rbac.isAuthorizedSync(resourceId, action),
+    });
+    React.useEffect(() => {
+        client.rbac.isAuthorized(resourceId, action).then((isAuthorized) => setIsAuthorized({
+            fromCache: false,
+            isAuthorized,
+        }));
+    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action, setIsAuthorized]);
+    return isAuthorized;
+};
+/**
+ * Returns the Stytch B2B client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytchB2BClient();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+const useStytchB2BClient = () => {
+    const ctx = React.useContext(StytchB2BContext);
+    invariant.invariant(ctx.isMounted, invariant.noProviderError('useStytchB2BClient', 'StytchB2BProvider'));
+    return ctx.client;
+};
+const withStytchB2BClient = (Component) => {
+    const WithStytch = (props) => {
+        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytchB2BClient', 'StytchB2BProvider'));
+        return React__default['default'].createElement(Component, Object.assign({}, props, { stytch: useStytchB2BClient() }));
+    };
+    WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytch;
+};
+const withStytchMember = (Component) => {
+    const WithStytchUser = (props) => {
+        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytchMember', 'StytchB2BProvider'));
+        const { member, fromCache } = useStytchMember();
+        return React__default['default'].createElement(Component, Object.assign({}, props, { stytchMember: member, stytchMemberIsFromCache: fromCache }));
+    };
+    WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchUser;
+};
+const withStytchMemberSession = (Component) => {
+    const WithStytchSession = (props) => {
+        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytchMemberSession', 'StytchB2BProvider'));
+        const { session, fromCache } = useStytchMemberSession();
+        return React__default['default'].createElement(Component, Object.assign({}, props, { stytchMemberSession: session, stytchMemberSessionIsFromCache: fromCache }));
+    };
+    WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchSession;
+};
+const withStytchOrganization = (Component) => {
+    const WithStytchOrganization = (props) => {
+        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytchOrganization', 'StytchB2BProvider'));
+        const { organization, fromCache } = useStytchOrganization();
+        return React__default['default'].createElement(Component, Object.assign({}, props, { stytchOrganization: organization, 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.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useRBACPermissions', 'StytchB2BProvider'));
+        const client = useStytchB2BClient();
+        const { session } = useStytchMemberSession();
+        const [permissions, setPermissions] = invariant.useAsyncState({ loaded: false, value: null });
+        React.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__default['default'].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 the root file in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
+const StytchB2BProvider = ({ stytch, children }) => {
+    invariant.invariant(!useIsMounted__INTERNAL(), invariant.B2BProviderMustBeUniqueError);
+    invariant.invariant(typeof window !== 'undefined', invariant.noSSRError);
+    const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
+    const [{ member, session, organization }, setClientState] = invariant.useAsyncState({
+        session: stytch.session.getInfo(),
+        member: stytch.self.getInfo(),
+        organization: stytch.organization.getInfo(),
+    });
+    React.useEffect(() => stytch.onStateChange(() => {
+        setClientState((oldState) => {
+            const newState = {
+                session: stytch.session.getInfo(),
+                member: stytch.self.getInfo(),
+                organization: stytch.organization.getInfo(),
+            };
+            return invariant.mergeWithStableProps(oldState, newState);
+        });
+    }), [setClientState, stytch]);
+    return (React__default['default'].createElement(StytchB2BContext.Provider, { value: ctx },
+        React__default['default'].createElement(StytchOrganizationContext.Provider, { value: organization },
+            React__default['default'].createElement(StytchMemberContext.Provider, { value: member },
+                React__default['default'].createElement(StytchMemberSessionContext.Provider, { value: session }, children)))));
+};
+
+exports.StytchB2BProvider = StytchB2BProvider;
+exports.isUIClient = isUIClient;
+exports.useIsMounted__INTERNAL = useIsMounted__INTERNAL;
+exports.useStytchB2BClient = useStytchB2BClient;
+exports.useStytchIsAuthorized = useStytchIsAuthorized;
+exports.useStytchMember = useStytchMember;
+exports.useStytchMemberSession = useStytchMemberSession;
+exports.useStytchOrganization = useStytchOrganization;
+exports.withStytchB2BClient = withStytchB2BClient;
+exports.withStytchMember = withStytchMember;
+exports.withStytchMemberSession = withStytchMemberSession;
+exports.withStytchOrganization = withStytchOrganization;
+exports.withStytchPermissions = withStytchPermissions;

package/dist/adminPortal/index.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { AdminPortalStyleConfig } from "@stytch/vanilla-js/b2b/adminPortal";
+import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
+import { PartialDeep } from "type-fest";
+interface AdminPortalComponentProps {
+    /**
+     * The Stytch B2B client to use.
+     */
+    client: StytchB2BHeadlessClient;
+    /**
+     * An HTML element or query selector string for the element that should contain the UI.
+     * @example '#container'
+     */
+    element: string | HTMLElement;
+    /**
+     * An {@link AdminPortalStyleConfig} object containing custom styling info.
+     */
+    styles?: PartialDeep<AdminPortalStyleConfig>;
+}
+interface InjectedOptions {
+    client: StytchB2BHeadlessClient;
+    element: HTMLElement;
+}
+type ExcludeInjectedOptions<T> = Omit<T, keyof InjectedOptions>;
+type AdminPortalSSOProps = AdminPortalComponentProps;
+/**
+ * The Admin Portal SSO UI component.
+ * This component must be rendered within a {@link StytchB2BProvider}.
+ *
+ * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ */
+declare const AdminPortalSSO: (props: ExcludeInjectedOptions<AdminPortalComponentProps>) => JSX.Element;
+export { AdminPortalSSO };
+export type { AdminPortalSSOProps };

package/dist/adminPortal/index.esm.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { AdminPortalStyleConfig } from "@stytch/vanilla-js/b2b/adminPortal";
+import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
+import { PartialDeep } from "type-fest";
+interface AdminPortalComponentProps {
+    /**
+     * The Stytch B2B client to use.
+     */
+    client: StytchB2BHeadlessClient;
+    /**
+     * An HTML element or query selector string for the element that should contain the UI.
+     * @example '#container'
+     */
+    element: string | HTMLElement;
+    /**
+     * An {@link AdminPortalStyleConfig} object containing custom styling info.
+     */
+    styles?: PartialDeep<AdminPortalStyleConfig>;
+}
+interface InjectedOptions {
+    client: StytchB2BHeadlessClient;
+    element: HTMLElement;
+}
+type ExcludeInjectedOptions<T> = Omit<T, keyof InjectedOptions>;
+type AdminPortalSSOProps = AdminPortalComponentProps;
+/**
+ * The Admin Portal SSO UI component.
+ * This component must be rendered within a {@link StytchB2BProvider}.
+ *
+ * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ */
+declare const AdminPortalSSO: (props: ExcludeInjectedOptions<AdminPortalComponentProps>) => JSX.Element;
+export { AdminPortalSSO };
+export type { AdminPortalSSOProps };