@stytch/react 14.0.1 → 16.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @stytch/react
 
+## 16.0.0
+
+### Patch Changes
+
+- Updated dependencies [f604dcb]
+  - @stytch/vanilla-js@4.7.0
+
+## 15.0.0
+
+### Minor Changes
+
+- 223e30e: Add `useStytchOrganization` hook for B2B
+
+### Patch Changes
+
+- Updated dependencies [223e30e]
+  - @stytch/vanilla-js@4.2.0
+
 ## 14.0.1
 
 ### Patch Changes

package/dist/b2b/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { Member, MemberSession, StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
+import { Member, MemberSession, Organization, StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
 import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
 import { PermissionsMap } from "@stytch/core/public";
 import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
@@ -29,6 +29,16 @@ type SWRMemberSession = {
      */
     fromCache: boolean;
 };
+type SWROrganization = {
+    /**
+     * Either the active {@link Organization} object, or null if the user is not logged in.
+     */
+    organization: Organization | 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 Member.
  * Check the fromCache property to determine if the member data is from persistent storage.
@@ -50,6 +60,14 @@ declare const useStytchMember: () => SWRMember;
  * @returns A {@link SWRMemberSession}
  */
 declare const useStytchMemberSession: () => SWRMemberSession;
+/**
+ * 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}
+ */
+declare const useStytchOrganization: () => SWROrganization;
 type SWRIsAuthorized = {
     /**
      * Whether the logged-in member is allowed to perform the specified action on the specified resource.
@@ -94,6 +112,10 @@ declare const withStytchMemberSession: <T extends object>(Component: React.Compo
     stytchMemberSession: MemberSession | null;
     stytchMemberSessionIsFromCache: boolean;
 }>) => React.ComponentType<T>;
+declare const withStytchOrganization: <T extends object>(Component: React.ComponentType<T & {
+    stytchOrganization: Organization | null;
+    stytchOrganizationIsFromCache: boolean;
+}>) => React.ComponentType<T>;
 /**
  * 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.
@@ -241,5 +263,5 @@ interface StytchB2BProps {
  * @param props {@link StytchB2BProps}
  */
 declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchPermissions, StytchB2B };
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions, StytchB2B };
 export type { StytchB2BProviderProps };

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { Member, MemberSession, StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
+import { Member, MemberSession, Organization, StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
 import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
 import { PermissionsMap } from "@stytch/core/public";
 import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
@@ -29,6 +29,16 @@ type SWRMemberSession = {
      */
     fromCache: boolean;
 };
+type SWROrganization = {
+    /**
+     * Either the active {@link Organization} object, or null if the user is not logged in.
+     */
+    organization: Organization | 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 Member.
  * Check the fromCache property to determine if the member data is from persistent storage.
@@ -50,6 +60,14 @@ declare const useStytchMember: () => SWRMember;
  * @returns A {@link SWRMemberSession}
  */
 declare const useStytchMemberSession: () => SWRMemberSession;
+/**
+ * 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}
+ */
+declare const useStytchOrganization: () => SWROrganization;
 type SWRIsAuthorized = {
     /**
      * Whether the logged-in member is allowed to perform the specified action on the specified resource.
@@ -94,6 +112,10 @@ declare const withStytchMemberSession: <T extends object>(Component: React.Compo
     stytchMemberSession: MemberSession | null;
     stytchMemberSessionIsFromCache: boolean;
 }>) => React.ComponentType<T>;
+declare const withStytchOrganization: <T extends object>(Component: React.ComponentType<T & {
+    stytchOrganization: Organization | null;
+    stytchOrganizationIsFromCache: boolean;
+}>) => React.ComponentType<T>;
 /**
  * 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.
@@ -241,5 +263,5 @@ interface StytchB2BProps {
  * @param props {@link StytchB2BProps}
  */
 declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchPermissions, StytchB2B };
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions, StytchB2B };
 export type { StytchB2BProviderProps };

package/dist/b2b/index.esm.js

@@ -41,9 +41,14 @@ const initialMemberSession = {
     session: null,
     fromCache: false,
 };
+const initialOrganization = {
+    organization: null,
+    fromCache: false,
+};
 const StytchB2BContext = createContext({ isMounted: false });
 const StytchMemberContext = createContext(initialMember);
 const StytchMemberSessionContext = createContext(initialMemberSession);
+const StytchOrganizationContext = createContext(initialOrganization);
 const useIsMounted__INTERNAL = () => useContext(StytchB2BContext).isMounted;
 const isUIClient = (client) => {
     return client.mount !== undefined;
@@ -75,6 +80,17 @@ const useStytchMemberSession = () => {
     invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
     return 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(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.
@@ -100,7 +116,7 @@ const useStytchIsAuthorized = (resourceId, action) => {
             fromCache: false,
             isAuthorized,
         }));
-    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action]);
+    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action, setIsAuthorized]);
     return isAuthorized;
 };
 /**
@@ -143,6 +159,15 @@ const withStytchMemberSession = (Component) => {
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
 };
+const withStytchOrganization = (Component) => {
+    const WithStytchOrganization = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchOrganization', 'StytchB2BProvider'));
+        const { organization, fromCache } = useStytchOrganization();
+        return React.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.
@@ -174,7 +199,7 @@ const withStytchPermissions = (Component) => {
             client.rbac
                 .allPermissions()
                 .then((permissions) => setPermissions({ loaded: true, value: permissions }));
-        }, [client, session === null || session === void 0 ? void 0 : session.roles]);
+        }, [client, session === null || session === void 0 ? void 0 : session.roles, setPermissions]);
         if (!permissions.loaded) {
             return null;
         }
@@ -208,6 +233,10 @@ const StytchB2BProvider = ({ stytch, children }) => {
         session: stytch.session.getSync(),
         fromCache: true,
     });
+    const [organization, setOrganization] = useAsyncState({
+        organization: stytch.organization.getSync(),
+        fromCache: true,
+    });
     useEffect(() => {
         const unsubscribeMember = stytch.self.onChange((member) => setMember({
             member,
@@ -217,17 +246,25 @@ const StytchB2BProvider = ({ stytch, children }) => {
             session,
             fromCache: false,
         }));
+        const unsubscribeOrganization = stytch.organization.onChange((organization) => setOrganization({
+            organization,
+            fromCache: false,
+        }));
         return () => {
             unsubscribeMember();
             unsubscribeSession();
+            unsubscribeOrganization();
         };
-    }, [stytch, setMember, setMemberSession]);
+    }, [stytch, setMember, setMemberSession, setOrganization]);
     // TODO (SDK-813): Remove this when we have a single top-level onChange handler
-    const finalMemberSession = !!session.session === !!member.member ? session : initialMemberSession;
-    const finalMember = !!session.session === !!member.member ? member : initialMember;
+    const allValuesReady = !!member.member === !!session.session && !!session.session === !!organization.organization;
+    const finalValues = allValuesReady
+        ? { member, session, organization }
+        : { member: initialMember, session: initialMemberSession, organization: initialOrganization };
     return (React.createElement(StytchB2BContext.Provider, { value: ctx },
-        React.createElement(StytchMemberContext.Provider, { value: finalMember },
-            React.createElement(StytchMemberSessionContext.Provider, { value: finalMemberSession }, children))));
+        React.createElement(StytchOrganizationContext.Provider, { value: finalValues.organization },
+            React.createElement(StytchMemberContext.Provider, { value: finalValues.member },
+                React.createElement(StytchMemberSessionContext.Provider, { value: finalValues.session }, children)))));
 };
 
 /**
@@ -285,8 +322,9 @@ const StytchB2B = ({ styles, 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, StytchB2BProvider, useStytchB2BClient, useStytchIsAuthorized, useStytchMember, useStytchMemberSession, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchPermissions };
+export { StytchB2B, StytchB2BProvider, useStytchB2BClient, useStytchIsAuthorized, useStytchMember, useStytchMemberSession, useStytchOrganization, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchOrganization, withStytchPermissions };

package/dist/b2b/index.js

@@ -49,9 +49,14 @@ 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;
@@ -83,6 +88,17 @@ const useStytchMemberSession = () => {
     invariant(useIsMounted__INTERNAL(), 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(useIsMounted__INTERNAL(), 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.
@@ -108,7 +124,7 @@ const useStytchIsAuthorized = (resourceId, action) => {
             fromCache: false,
             isAuthorized,
         }));
-    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action]);
+    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action, setIsAuthorized]);
     return isAuthorized;
 };
 /**
@@ -151,6 +167,15 @@ const withStytchMemberSession = (Component) => {
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
 };
+const withStytchOrganization = (Component) => {
+    const WithStytchOrganization = (props) => {
+        invariant(useIsMounted__INTERNAL(), 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.
@@ -182,7 +207,7 @@ const withStytchPermissions = (Component) => {
             client.rbac
                 .allPermissions()
                 .then((permissions) => setPermissions({ loaded: true, value: permissions }));
-        }, [client, session === null || session === void 0 ? void 0 : session.roles]);
+        }, [client, session === null || session === void 0 ? void 0 : session.roles, setPermissions]);
         if (!permissions.loaded) {
             return null;
         }
@@ -216,6 +241,10 @@ const StytchB2BProvider = ({ stytch, children }) => {
         session: stytch.session.getSync(),
         fromCache: true,
     });
+    const [organization, setOrganization] = useAsyncState({
+        organization: stytch.organization.getSync(),
+        fromCache: true,
+    });
     React.useEffect(() => {
         const unsubscribeMember = stytch.self.onChange((member) => setMember({
             member,
@@ -225,17 +254,25 @@ const StytchB2BProvider = ({ stytch, children }) => {
             session,
             fromCache: false,
         }));
+        const unsubscribeOrganization = stytch.organization.onChange((organization) => setOrganization({
+            organization,
+            fromCache: false,
+        }));
         return () => {
             unsubscribeMember();
             unsubscribeSession();
+            unsubscribeOrganization();
         };
-    }, [stytch, setMember, setMemberSession]);
+    }, [stytch, setMember, setMemberSession, setOrganization]);
     // TODO (SDK-813): Remove this when we have a single top-level onChange handler
-    const finalMemberSession = !!session.session === !!member.member ? session : initialMemberSession;
-    const finalMember = !!session.session === !!member.member ? member : initialMember;
+    const allValuesReady = !!member.member === !!session.session && !!session.session === !!organization.organization;
+    const finalValues = allValuesReady
+        ? { member, session, organization }
+        : { member: initialMember, session: initialMemberSession, organization: initialOrganization };
     return (React__default['default'].createElement(StytchB2BContext.Provider, { value: ctx },
-        React__default['default'].createElement(StytchMemberContext.Provider, { value: finalMember },
-            React__default['default'].createElement(StytchMemberSessionContext.Provider, { value: finalMemberSession }, children))));
+        React__default['default'].createElement(StytchOrganizationContext.Provider, { value: finalValues.organization },
+            React__default['default'].createElement(StytchMemberContext.Provider, { value: finalValues.member },
+                React__default['default'].createElement(StytchMemberSessionContext.Provider, { value: finalValues.session }, children)))));
 };
 
 /**
@@ -293,6 +330,7 @@ const StytchB2B = ({ styles, 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 });
 };
@@ -303,7 +341,9 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/react",
-  "version": "14.0.1",
+  "version": "16.0.0",
   "description": "Stytch's official React Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -33,15 +33,17 @@
   ],
   "devDependencies": {
     "@babel/runtime": "7.18.6",
-    "@stytch/vanilla-js": "4.1.1",
+    "@stytch/vanilla-js": "4.7.0",
     "@testing-library/react": "14.0.0",
     "eslint-config-custom": "0.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-test-renderer": "18.0.0",
     "rollup": "2.56.3",
-    "typescript": "4.7.4"
+    "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@stytch/vanilla-js": "^4.1.1",
+    "@stytch/vanilla-js": "^4.7.0",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   }