@stytch/nextjs 16.0.1 → 17.0.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @stytch/nextjs
 
+## 17.0.1
+
+### Patch Changes
+
+- 50de202: Fix B2B headless entrypoint to import `@stytch/vanilla-js` rather than bundle it
+  - @stytch/vanilla-js@4.4.3
+
+## 17.0.0
+
+### Minor Changes
+
+- 223e30e: Add `useStytchOrganization` hook for B2B
+
+### Patch Changes
+
+- Updated dependencies [223e30e]
+  - @stytch/vanilla-js@4.2.0
+
 ## 16.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";
@@ -28,6 +28,15 @@ type SWRMemberSession = {
     fromCache: boolean;
     isInitialized: true;
 };
+type SWROrganization = {
+    organization: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    organization: Organization | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
 /**
  * Returns the active member.
  * The Stytch SDKs are used for client-side authentication and session management.
@@ -60,6 +69,20 @@ declare const useStytchMember: () => SWRMember;
  * }, [session, isInitialized]);
  */
 declare const useStytchMemberSession: () => SWRMemberSession;
+/**
+ * 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>);
+ */
+declare const useStytchOrganization: () => SWROrganization;
 type SWRIsAuthorized = {
     isAuthorized: boolean;
     fromCache: boolean;
@@ -101,6 +124,11 @@ declare const withStytchMemberSession: <T extends object>(Component: React.Compo
     stytchMemberSessionIsInitialized: boolean;
     stytchMemberSessionIsFromCache: boolean;
 }>) => React.ComponentType<T>;
+declare const withStytchOrganization: <T extends object>(Component: React.ComponentType<T & {
+    stytchOrganization: Organization | null;
+    stytchOrganizationIsInitialized: boolean;
+    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.
@@ -247,5 +275,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";
@@ -28,6 +28,15 @@ type SWRMemberSession = {
     fromCache: boolean;
     isInitialized: true;
 };
+type SWROrganization = {
+    organization: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    organization: Organization | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
 /**
  * Returns the active member.
  * The Stytch SDKs are used for client-side authentication and session management.
@@ -60,6 +69,20 @@ declare const useStytchMember: () => SWRMember;
  * }, [session, isInitialized]);
  */
 declare const useStytchMemberSession: () => SWRMemberSession;
+/**
+ * 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>);
+ */
+declare const useStytchOrganization: () => SWROrganization;
 type SWRIsAuthorized = {
     isAuthorized: boolean;
     fromCache: boolean;
@@ -101,6 +124,11 @@ declare const withStytchMemberSession: <T extends object>(Component: React.Compo
     stytchMemberSessionIsInitialized: boolean;
     stytchMemberSessionIsFromCache: boolean;
 }>) => React.ComponentType<T>;
+declare const withStytchOrganization: <T extends object>(Component: React.ComponentType<T & {
+    stytchOrganization: Organization | null;
+    stytchOrganizationIsInitialized: boolean;
+    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.
@@ -247,5 +275,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

@@ -44,9 +44,15 @@ const initialMemberSession = {
     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;
@@ -89,6 +95,23 @@ 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.
@@ -119,7 +142,7 @@ const useStytchIsAuthorized = (resourceId, action) => {
             fromCache: true,
             isAuthorized: client.rbac.isAuthorizedSync(resourceId, action),
         });
-    }, []);
+    }, [action, client, resourceId, setIsAuthorized]);
     useEffect(() => {
         if (isStytchSSRProxy(client)) {
             return;
@@ -127,7 +150,7 @@ const useStytchIsAuthorized = (resourceId, action) => {
         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]);
+    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action, setIsAuthorized]);
     return isAuthorized;
 };
 /**
@@ -170,6 +193,15 @@ const withStytchMemberSession = (Component) => {
     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.
@@ -201,7 +233,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;
         }
@@ -226,6 +258,7 @@ const StytchB2BProvider = ({ stytch, children }) => {
     const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
     const [member, setMember] = useAsyncState(initialMember);
     const [session, setMemberSession] = useAsyncState(initialMemberSession);
+    const [organization, setOrganization] = useAsyncState(initialOrganization);
     useEffect(() => {
         if (isStytchSSRProxy(stytch)) {
             return;
@@ -240,18 +273,36 @@ const StytchB2BProvider = ({ stytch, children }) => {
             fromCache: true,
             isInitialized: true,
         });
+        setOrganization({
+            organization: stytch.organization.getSync(),
+            fromCache: true,
+            isInitialized: true,
+        });
         const unsubscribeMember = stytch.self.onChange((member) => setMember({ member, fromCache: false, isInitialized: true }));
         const unsubscribeMemberSession = stytch.session.onChange((session) => setMemberSession({ session, fromCache: false, isInitialized: true }));
+        const unsubscribeOrganization = stytch.organization.onChange((organization) => setOrganization({ organization, fromCache: false, isInitialized: true }));
         return () => {
             unsubscribeMember();
             unsubscribeMemberSession();
+            unsubscribeOrganization();
+        };
+    }, [stytch, setMember, setMemberSession, setOrganization]);
+    const allValuesReady = !!member.member === !!session.session && !!session.session === !!organization.organization;
+    const finalValues = allValuesReady
+        ? {
+            member,
+            session,
+            organization,
+        }
+        : {
+            member: initialMember,
+            session: initialMemberSession,
+            organization: initialOrganization,
         };
-    }, [stytch, setMember, setMemberSession]);
-    const finalMemberSession = !!session.session === !!member.member ? session : initialMemberSession;
-    const finalMember = !!session.session === !!member.member ? member : initialMember;
     return (React.createElement(StytchContext.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)))));
 };
 
 /**
@@ -309,8 +360,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.headless.d.ts

@@ -12,5 +12,5 @@ import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
  * )
  * @returns A {@link StytchB2BHeadlessClient}
  */
-declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient;
+declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("@stytch/core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient;
 export { createStytchB2BHeadlessClient };

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

@@ -12,5 +12,5 @@ import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
  * )
  * @returns A {@link StytchB2BHeadlessClient}
  */
-declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient;
+declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("@stytch/core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient;
 export { createStytchB2BHeadlessClient };