@stytch/nextjs 16.0.1 → 17.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/b2b/index.d.ts +30 -2
  3. package/dist/b2b/index.esm.d.ts +30 -2
  4. package/dist/b2b/index.esm.js +57 -6
  5. package/dist/b2b/index.headless.esm.js +52 -25
  6. package/dist/b2b/index.headless.js +52 -25
  7. package/dist/b2b/index.js +58 -5
  8. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @stytch/nextjs
2
2
 
3
+ ## 17.0.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 223e30e: Add `useStytchOrganization` hook for B2B
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [223e30e]
12
+ - @stytch/vanilla-js@4.2.0
13
+
3
14
  ## 16.0.1
4
15
 
5
16
  ### Patch Changes
package/dist/b2b/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import React from "react";
3
3
  import { ReactNode } from "react";
4
- import { Member, MemberSession, StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
4
+ import { Member, MemberSession, Organization, StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
5
5
  import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
6
6
  import { PermissionsMap } from "@stytch/core/public";
7
7
  import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
@@ -28,6 +28,15 @@ type SWRMemberSession = {
28
28
  fromCache: boolean;
29
29
  isInitialized: true;
30
30
  };
31
+ type SWROrganization = {
32
+ organization: null;
33
+ fromCache: false;
34
+ isInitialized: false;
35
+ } | {
36
+ organization: Organization | null;
37
+ fromCache: boolean;
38
+ isInitialized: true;
39
+ };
31
40
  /**
32
41
  * Returns the active member.
33
42
  * The Stytch SDKs are used for client-side authentication and session management.
@@ -60,6 +69,20 @@ declare const useStytchMember: () => SWRMember;
60
69
  * }, [session, isInitialized]);
61
70
  */
62
71
  declare const useStytchMemberSession: () => SWRMemberSession;
72
+ /**
73
+ * Returns the active Stytch organization.
74
+ * The Stytch SDKs are used for client-side authentication and session management.
75
+ * Check the isInitialized property to determine if the SDK has completed initialization.
76
+ * Check the fromCache property to determine if the session data is from persistent storage.
77
+ * See Next's {@link https://nextjs.org/docs/authentication#authenticating-statically-generated-pages documentation} for more.
78
+ * @example
79
+ * const {organization, isInitialized, fromCache} = useStytchOrganization();
80
+ * if (!isInitialized) {
81
+ * return <p>Loading...</p>;
82
+ * }
83
+ * return (<p>Welcome to {organization.organization_name}</p>);
84
+ */
85
+ declare const useStytchOrganization: () => SWROrganization;
63
86
  type SWRIsAuthorized = {
64
87
  isAuthorized: boolean;
65
88
  fromCache: boolean;
@@ -101,6 +124,11 @@ declare const withStytchMemberSession: <T extends object>(Component: React.Compo
101
124
  stytchMemberSessionIsInitialized: boolean;
102
125
  stytchMemberSessionIsFromCache: boolean;
103
126
  }>) => React.ComponentType<T>;
127
+ declare const withStytchOrganization: <T extends object>(Component: React.ComponentType<T & {
128
+ stytchOrganization: Organization | null;
129
+ stytchOrganizationIsInitialized: boolean;
130
+ stytchOrganizationIsFromCache: boolean;
131
+ }>) => React.ComponentType<T>;
104
132
  /**
105
133
  * Wrap your component with this HOC in order to receive the permissions for the logged-in member.
106
134
  * Evaluates all permissions granted to the logged-in member.
@@ -247,5 +275,5 @@ interface StytchB2BProps {
247
275
  * @param props {@link StytchB2BProps}
248
276
  */
249
277
  declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
250
- export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchPermissions, StytchB2B };
278
+ export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions, StytchB2B };
251
279
  export type { StytchB2BProviderProps };
package/dist/b2b/index.esm.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import React from "react";
3
3
  import { ReactNode } from "react";
4
- import { Member, MemberSession, StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
4
+ import { Member, MemberSession, Organization, StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
5
5
  import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
6
6
  import { PermissionsMap } from "@stytch/core/public";
7
7
  import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
@@ -28,6 +28,15 @@ type SWRMemberSession = {
28
28
  fromCache: boolean;
29
29
  isInitialized: true;
30
30
  };
31
+ type SWROrganization = {
32
+ organization: null;
33
+ fromCache: false;
34
+ isInitialized: false;
35
+ } | {
36
+ organization: Organization | null;
37
+ fromCache: boolean;
38
+ isInitialized: true;
39
+ };
31
40
  /**
32
41
  * Returns the active member.
33
42
  * The Stytch SDKs are used for client-side authentication and session management.
@@ -60,6 +69,20 @@ declare const useStytchMember: () => SWRMember;
60
69
  * }, [session, isInitialized]);
61
70
  */
62
71
  declare const useStytchMemberSession: () => SWRMemberSession;
72
+ /**
73
+ * Returns the active Stytch organization.
74
+ * The Stytch SDKs are used for client-side authentication and session management.
75
+ * Check the isInitialized property to determine if the SDK has completed initialization.
76
+ * Check the fromCache property to determine if the session data is from persistent storage.
77
+ * See Next's {@link https://nextjs.org/docs/authentication#authenticating-statically-generated-pages documentation} for more.
78
+ * @example
79
+ * const {organization, isInitialized, fromCache} = useStytchOrganization();
80
+ * if (!isInitialized) {
81
+ * return <p>Loading...</p>;
82
+ * }
83
+ * return (<p>Welcome to {organization.organization_name}</p>);
84
+ */
85
+ declare const useStytchOrganization: () => SWROrganization;
63
86
  type SWRIsAuthorized = {
64
87
  isAuthorized: boolean;
65
88
  fromCache: boolean;
@@ -101,6 +124,11 @@ declare const withStytchMemberSession: <T extends object>(Component: React.Compo
101
124
  stytchMemberSessionIsInitialized: boolean;
102
125
  stytchMemberSessionIsFromCache: boolean;
103
126
  }>) => React.ComponentType<T>;
127
+ declare const withStytchOrganization: <T extends object>(Component: React.ComponentType<T & {
128
+ stytchOrganization: Organization | null;
129
+ stytchOrganizationIsInitialized: boolean;
130
+ stytchOrganizationIsFromCache: boolean;
131
+ }>) => React.ComponentType<T>;
104
132
  /**
105
133
  * Wrap your component with this HOC in order to receive the permissions for the logged-in member.
106
134
  * Evaluates all permissions granted to the logged-in member.
@@ -247,5 +275,5 @@ interface StytchB2BProps {
247
275
  * @param props {@link StytchB2BProps}
248
276
  */
249
277
  declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
250
- export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchPermissions, StytchB2B };
278
+ export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions, StytchB2B };
251
279
  export type { StytchB2BProviderProps };
package/dist/b2b/index.esm.js CHANGED
@@ -44,9 +44,15 @@ const initialMemberSession = {
44
44
  fromCache: false,
45
45
  isInitialized: false,
46
46
  };
47
+ const initialOrganization = {
48
+ organization: null,
49
+ fromCache: false,
50
+ isInitialized: false,
51
+ };
47
52
  const StytchContext = createContext({ isMounted: false });
48
53
  const StytchMemberContext = createContext(initialMember);
49
54
  const StytchMemberSessionContext = createContext(initialMemberSession);
55
+ const StytchOrganizationContext = createContext(initialOrganization);
50
56
  const useIsMounted__INTERNAL = () => useContext(StytchContext).isMounted;
51
57
  const isUIClient = (client) => {
52
58
  return client.mount !== undefined;
@@ -89,6 +95,23 @@ const useStytchMemberSession = () => {
89
95
  invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
90
96
  return useContext(StytchMemberSessionContext);
91
97
  };
98
+ /**
99
+ * Returns the active Stytch organization.
100
+ * The Stytch SDKs are used for client-side authentication and session management.
101
+ * Check the isInitialized property to determine if the SDK has completed initialization.
102
+ * Check the fromCache property to determine if the session data is from persistent storage.
103
+ * See Next's {@link https://nextjs.org/docs/authentication#authenticating-statically-generated-pages documentation} for more.
104
+ * @example
105
+ * const {organization, isInitialized, fromCache} = useStytchOrganization();
106
+ * if (!isInitialized) {
107
+ * return <p>Loading...</p>;
108
+ * }
109
+ * return (<p>Welcome to {organization.organization_name}</p>);
110
+ */
111
+ const useStytchOrganization = () => {
112
+ invariant(useIsMounted__INTERNAL(), noProviderError('useStytchOrganization', 'StytchB2BProvider'));
113
+ return useContext(StytchOrganizationContext);
114
+ };
92
115
  /**
93
116
  * Determines whether the logged-in member is allowed to perform the specified action on the specified resource.
94
117
  * Returns `true` if the member can perform the action, `false` otherwise.
@@ -170,6 +193,15 @@ const withStytchMemberSession = (Component) => {
170
193
  WithStytchSession.displayName = `withStytchMemberSession(${Component.displayName || Component.name || 'Component'})`;
171
194
  return WithStytchSession;
172
195
  };
196
+ const withStytchOrganization = (Component) => {
197
+ const WithStytchOrganization = (props) => {
198
+ invariant(useIsMounted__INTERNAL(), noProviderError('withStytchOrganization', 'StytchB2BProvider'));
199
+ const { organization, isInitialized, fromCache } = useStytchOrganization();
200
+ return (React.createElement(Component, Object.assign({}, props, { stytchOrganization: organization, stytchOrganizationIsInitialized: isInitialized, stytchOrganizationIsFromCache: fromCache })));
201
+ };
202
+ WithStytchOrganization.displayName = `withStytchOrganization(${Component.displayName || Component.name || 'Component'})`;
203
+ return WithStytchOrganization;
204
+ };
173
205
  /**
174
206
  * Wrap your component with this HOC in order to receive the permissions for the logged-in member.
175
207
  * Evaluates all permissions granted to the logged-in member.
@@ -226,6 +258,7 @@ const StytchB2BProvider = ({ stytch, children }) => {
226
258
  const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
227
259
  const [member, setMember] = useAsyncState(initialMember);
228
260
  const [session, setMemberSession] = useAsyncState(initialMemberSession);
261
+ const [organization, setOrganization] = useAsyncState(initialOrganization);
229
262
  useEffect(() => {
230
263
  if (isStytchSSRProxy(stytch)) {
231
264
  return;
@@ -240,18 +273,36 @@ const StytchB2BProvider = ({ stytch, children }) => {
240
273
  fromCache: true,
241
274
  isInitialized: true,
242
275
  });
276
+ setOrganization({
277
+ organization: stytch.organization.getSync(),
278
+ fromCache: true,
279
+ isInitialized: true,
280
+ });
243
281
  const unsubscribeMember = stytch.self.onChange((member) => setMember({ member, fromCache: false, isInitialized: true }));
244
282
  const unsubscribeMemberSession = stytch.session.onChange((session) => setMemberSession({ session, fromCache: false, isInitialized: true }));
283
+ const unsubscribeOrganization = stytch.organization.onChange((organization) => setOrganization({ organization, fromCache: false, isInitialized: true }));
245
284
  return () => {
246
285
  unsubscribeMember();
247
286
  unsubscribeMemberSession();
287
+ unsubscribeOrganization();
288
+ };
289
+ }, [stytch, setMember, setMemberSession, setOrganization]);
290
+ const allValuesReady = !!member.member === !!session.session && !!session.session === !!organization.organization;
291
+ const finalValues = allValuesReady
292
+ ? {
293
+ member,
294
+ session,
295
+ organization,
296
+ }
297
+ : {
298
+ member: initialMember,
299
+ session: initialMemberSession,
300
+ organization: initialOrganization,
248
301
  };
249
- }, [stytch, setMember, setMemberSession]);
250
- const finalMemberSession = !!session.session === !!member.member ? session : initialMemberSession;
251
- const finalMember = !!session.session === !!member.member ? member : initialMember;
252
302
  return (React.createElement(StytchContext.Provider, { value: ctx },
253
- React.createElement(StytchMemberContext.Provider, { value: finalMember },
254
- React.createElement(StytchMemberSessionContext.Provider, { value: finalMemberSession }, children))));
303
+ React.createElement(StytchOrganizationContext.Provider, { value: finalValues.organization },
304
+ React.createElement(StytchMemberContext.Provider, { value: finalValues.member },
305
+ React.createElement(StytchMemberSessionContext.Provider, { value: finalValues.session }, children)))));
255
306
  };
256
307
 
257
308
  /**
@@ -313,4 +364,4 @@ const StytchB2B = ({ styles, callbacks, config }) => {
313
364
  return React.createElement("div", { ref: containerEl });
314
365
  };
315
366
 
316
- export { StytchB2B, StytchB2BProvider, useStytchB2BClient, useStytchIsAuthorized, useStytchMember, useStytchMemberSession, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchPermissions };
367
+ export { StytchB2B, StytchB2BProvider, useStytchB2BClient, useStytchIsAuthorized, useStytchMember, useStytchMemberSession, useStytchOrganization, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchOrganization, withStytchPermissions };
package/dist/b2b/index.headless.esm.js CHANGED
@@ -1435,7 +1435,7 @@ var je, Fe = ["[Stytch]"], Ne = function Ne() {
1435
1435
  for (var e, t = arguments.length, r = new Array(t), n = 0; n < t; n++)
1436
1436
  r[n] = arguments[n];
1437
1437
  return (e = console).error.apply(e, Fe.concat(r));
1438
- }, Ue = "\nYou can find your public token at https://stytch.com/dashboard/api-keys.", ze = function ze(e) {
1438
+ }, ze = "\nYou can find your public token at https://stytch.com/dashboard/api-keys.", Ue = function Ue(e) {
1439
1439
  return e.includes("public-token-test");
1440
1440
  }, qe = function qe(e) {
1441
1441
  var t = {
@@ -1929,7 +1929,8 @@ var Ye = Promise.resolve({
1929
1929
  return n.member_session ? this._subscriptionService.updateStateAndTokens({
1930
1930
  state: {
1931
1931
  session: n.member_session,
1932
- member: n.member
1932
+ member: n.member,
1933
+ organization: n.organization
1933
1934
  },
1934
1935
  session_token: n.session_token,
1935
1936
  session_jwt: n.session_jwt,
@@ -2306,7 +2307,8 @@ var Ye = Promise.resolve({
2306
2307
  return s = t.sent, this._pkceManager.clearPKPair(), s.member_session ? this._subscriptionService.updateStateAndTokens({
2307
2308
  state: {
2308
2309
  session: s.member_session,
2309
- member: s.member
2310
+ member: s.member,
2311
+ organization: s.organization
2310
2312
  },
2311
2313
  session_token: s.session_token,
2312
2314
  session_jwt: s.session_jwt,
@@ -2332,7 +2334,7 @@ var Ye = Promise.resolve({
2332
2334
  for (;;)
2333
2335
  switch (e.prev = e.next) {
2334
2336
  case 0:
2335
- if (!ze(this._config.publicToken)) {
2337
+ if (!Ue(this._config.publicToken)) {
2336
2338
  e.next = 2;
2337
2339
  break;
2338
2340
  }
@@ -2437,13 +2439,20 @@ var Ye = Promise.resolve({
2437
2439
  method: "GET"
2438
2440
  });
2439
2441
  case 2:
2440
- return t = e.sent, e.abrupt("return", t.organization);
2441
- case 4:
2442
+ return t = e.sent, this._subscriptionService.updateOrganization(t.organization), e.abrupt("return", t.organization);
2443
+ case 5:
2442
2444
  case "end":
2443
2445
  return e.stop();
2444
2446
  }
2445
2447
  }, e, this);
2446
2448
  }));
2449
+ }, this.getSync = function () {
2450
+ return n._subscriptionService.getOrganization();
2451
+ }, this.onChange = function (e) {
2452
+ return n._subscriptionService.subscribeToState(function (t) {
2453
+ var r;
2454
+ return e(null !== (r = null == t ? void 0 : t.organization) && void 0 !== r ? r : null);
2455
+ });
2447
2456
  }, this.update = function (e) {
2448
2457
  return we(n, void 0, void 0, de().mark(function t() {
2449
2458
  var r;
@@ -2696,7 +2705,8 @@ var Ye = Promise.resolve({
2696
2705
  return s = t.sent, this._pkceManager.clearPKPair(), s.member_session ? this._subscriptionService.updateStateAndTokens({
2697
2706
  state: {
2698
2707
  session: s.member_session,
2699
- member: s.member
2708
+ member: s.member,
2709
+ organization: s.organization
2700
2710
  },
2701
2711
  session_token: s.session_token,
2702
2712
  session_jwt: s.session_jwt,
@@ -2731,7 +2741,7 @@ var Ye = Promise.resolve({
2731
2741
  }
2732
2742
  return e.abrupt("return", "https://".concat(r));
2733
2743
  case 6:
2734
- if (!ze(this._config.publicToken)) {
2744
+ if (!Ue(this._config.publicToken)) {
2735
2745
  e.next = 8;
2736
2746
  break;
2737
2747
  }
@@ -2875,7 +2885,8 @@ var Ye = Promise.resolve({
2875
2885
  return n = t.sent, this._subscriptionService.updateStateAndTokens({
2876
2886
  state: {
2877
2887
  session: n.member_session,
2878
- member: n.member
2888
+ member: n.member,
2889
+ organization: n.organization
2879
2890
  },
2880
2891
  session_token: n.session_token,
2881
2892
  session_jwt: n.session_jwt,
@@ -2906,7 +2917,8 @@ var Ye = Promise.resolve({
2906
2917
  return (r = t.sent).member_session ? this._subscriptionService.updateStateAndTokens({
2907
2918
  state: {
2908
2919
  session: r.member_session,
2909
- member: r.member
2920
+ member: r.member,
2921
+ organization: r.organization
2910
2922
  },
2911
2923
  session_token: r.session_token,
2912
2924
  session_jwt: r.session_jwt,
@@ -2992,7 +3004,8 @@ var Ye = Promise.resolve({
2992
3004
  return (n = t.sent).member_session ? this._subscriptionService.updateStateAndTokens({
2993
3005
  state: {
2994
3006
  session: n.member_session,
2995
- member: n.member
3007
+ member: n.member,
3008
+ organization: n.organization
2996
3009
  },
2997
3010
  session_token: n.session_token,
2998
3011
  session_jwt: n.session_jwt,
@@ -3038,7 +3051,8 @@ var Ye = Promise.resolve({
3038
3051
  return (n = t.sent).member_session ? this._subscriptionService.updateStateAndTokens({
3039
3052
  state: {
3040
3053
  session: n.member_session,
3041
- member: n.member
3054
+ member: n.member,
3055
+ organization: n.organization
3042
3056
  },
3043
3057
  session_token: n.session_token,
3044
3058
  session_jwt: n.session_jwt,
@@ -3122,7 +3136,8 @@ var tt = pe(function e(t, r) {
3122
3136
  return s = t.sent, this._subscriptionService.updateStateAndTokens({
3123
3137
  state: {
3124
3138
  session: s.member_session,
3125
- member: s.member
3139
+ member: s.member,
3140
+ organization: s.organization
3126
3141
  },
3127
3142
  session_token: s.session_token,
3128
3143
  session_jwt: s.session_jwt,
@@ -3203,7 +3218,8 @@ var tt = pe(function e(t, r) {
3203
3218
  return s = t.sent, this._subscriptionService.updateStateAndTokens({
3204
3219
  state: {
3205
3220
  session: s.member_session,
3206
- member: s.member
3221
+ member: s.member,
3222
+ organization: s.organization
3207
3223
  },
3208
3224
  session_token: s.session_token,
3209
3225
  session_jwt: s.session_jwt,
@@ -3646,7 +3662,8 @@ var kt = /*#__PURE__*/ function () {
3646
3662
  return _context6.abrupt("return", (o.member_session ? this._subscriptionService.updateStateAndTokens({
3647
3663
  state: {
3648
3664
  session: o.member_session,
3649
- member: o.member
3665
+ member: o.member,
3666
+ organization: o.organization
3650
3667
  },
3651
3668
  session_token: o.session_token,
3652
3669
  session_jwt: o.session_jwt,
@@ -3750,7 +3767,8 @@ var kt = /*#__PURE__*/ function () {
3750
3767
  return _context8.abrupt("return", (this._pkceManager.clearPKPair(), o.member_session ? this._subscriptionService.updateStateAndTokens({
3751
3768
  state: {
3752
3769
  session: o.member_session,
3753
- member: o.member
3770
+ member: o.member,
3771
+ organization: o.organization
3754
3772
  },
3755
3773
  session_token: o.session_token,
3756
3774
  session_jwt: o.session_jwt,
@@ -3805,7 +3823,8 @@ var kt = /*#__PURE__*/ function () {
3805
3823
  return _context9.abrupt("return", (n.member_session ? this._subscriptionService.updateStateAndTokens({
3806
3824
  state: {
3807
3825
  session: n.member_session,
3808
- member: n.member
3826
+ member: n.member,
3827
+ organization: n.organization
3809
3828
  },
3810
3829
  session_token: n.session_token,
3811
3830
  session_jwt: n.session_jwt,
@@ -3856,7 +3875,8 @@ var kt = /*#__PURE__*/ function () {
3856
3875
  return _context10.abrupt("return", (this._subscriptionService.updateStateAndTokens({
3857
3876
  state: {
3858
3877
  session: n.member_session,
3859
- member: n.member
3878
+ member: n.member,
3879
+ organization: n.organization
3860
3880
  },
3861
3881
  session_token: n.session_token,
3862
3882
  session_jwt: n.session_jwt,
@@ -4119,7 +4139,7 @@ var At = /*#__PURE__*/ function () {
4119
4139
  },
4120
4140
  sdk: {
4121
4141
  identifier: "Stytch.js Javascript SDK",
4122
- version: "4.1.1"
4142
+ version: "4.2.0"
4123
4143
  }
4124
4144
  });
4125
4145
  }
@@ -4729,6 +4749,13 @@ var Kt = /*#__PURE__*/ function (_Nt) {
4729
4749
  }, _this8.getMember = function () {
4730
4750
  var e, t;
4731
4751
  return null !== (t = null === (e = _this8.getState()) || void 0 === e ? void 0 : e.member) && void 0 !== t ? t : null;
4752
+ }, _this8.updateOrganization = function (e) {
4753
+ return _this8.updateState({
4754
+ organization: e
4755
+ });
4756
+ }, _this8.getOrganization = function () {
4757
+ var e, t;
4758
+ return null !== (t = null === (e = _this8.getState()) || void 0 === e ? void 0 : e.organization) && void 0 !== t ? t : null;
4732
4759
  }, _this8.getSession = function () {
4733
4760
  var e, t;
4734
4761
  return null !== (t = null === (e = _this8.getState()) || void 0 === e ? void 0 : e.session) && void 0 !== t ? t : null;
@@ -4737,15 +4764,15 @@ var Kt = /*#__PURE__*/ function (_Nt) {
4737
4764
  }
4738
4765
  return _createClass(Kt);
4739
4766
  }(Nt);
4740
- var Ut = Symbol["for"]("stytch__internal_b2b");
4741
- var zt = /*#__PURE__*/ _createClass(function zt(e, t) {
4767
+ var zt = Symbol["for"]("stytch__internal_b2b");
4768
+ var Ut = /*#__PURE__*/ _createClass(function Ut(e, t) {
4742
4769
  var _this9 = this;
4743
- _classCallCheck(this, zt);
4770
+ _classCallCheck(this, Ut);
4744
4771
  var r;
4745
4772
  !function (e) {
4746
4773
  if ("undefined" == typeof window)
4747
4774
  throw new Error("The ".concat(e, " is not compatible with server-side environments.\nIf using nextjs, use the create").concat(e, " method instead.\n```\n").concat("import { createStytchB2BHeadlessClient } from '@stytch/nextjs/b2b';\n \n const stytch = createStytchB2BHeadlessClient('public-token-...');\n ", "\n```\n"));
4748
- }("StytchB2BHeadlessClient"), "string" != typeof (r = e) ? Ne("Public token is malformed. Expected a string, got ".concat(le(r), ".").concat(Ue)) : "" === r ? Ne('Public token is malformed. Expected "public-token-...", got an empty string.'.concat(Ue)) : r.startsWith("public-token-") || Ne('Public token is malformed. Expected "public-token-...", got '.concat(r, ".").concat(Ue));
4775
+ }("StytchB2BHeadlessClient"), "string" != typeof (r = e) ? Ne("Public token is malformed. Expected a string, got ".concat(le(r), ".").concat(ze)) : "" === r ? Ne('Public token is malformed. Expected "public-token-...", got an empty string.'.concat(ze)) : r.startsWith("public-token-") || Ne('Public token is malformed. Expected "public-token-...", got '.concat(r, ".").concat(ze));
4749
4776
  var n = t, i = {
4750
4777
  cookieOptions: null == (o = n) ? void 0 : o.cookieOptions,
4751
4778
  endpoints: {
@@ -4786,7 +4813,7 @@ var zt = /*#__PURE__*/ _createClass(function zt(e, t) {
4786
4813
  }
4787
4814
  });
4788
4815
  (function (e, t) {
4789
- Object.assign(e, _defineProperty({}, Ut, t));
4816
+ Object.assign(e, _defineProperty({}, zt, t));
4790
4817
  })(this, {
4791
4818
  bootstrap: v,
4792
4819
  publicToken: e,
@@ -4851,7 +4878,7 @@ const createStytchB2BHeadlessClient = (...args) => {
4851
4878
  if (typeof window === 'undefined') {
4852
4879
  return createStytchSSRProxy();
4853
4880
  }
4854
- return new zt(...args);
4881
+ return new Ut(...args);
4855
4882
  };
4856
4883
 
4857
4884
  export { createStytchB2BHeadlessClient };
package/dist/b2b/index.headless.js CHANGED
@@ -1439,7 +1439,7 @@ var je, Fe = ["[Stytch]"], Ne = function Ne() {
1439
1439
  for (var e, t = arguments.length, r = new Array(t), n = 0; n < t; n++)
1440
1440
  r[n] = arguments[n];
1441
1441
  return (e = console).error.apply(e, Fe.concat(r));
1442
- }, Ue = "\nYou can find your public token at https://stytch.com/dashboard/api-keys.", ze = function ze(e) {
1442
+ }, ze = "\nYou can find your public token at https://stytch.com/dashboard/api-keys.", Ue = function Ue(e) {
1443
1443
  return e.includes("public-token-test");
1444
1444
  }, qe = function qe(e) {
1445
1445
  var t = {
@@ -1933,7 +1933,8 @@ var Ye = Promise.resolve({
1933
1933
  return n.member_session ? this._subscriptionService.updateStateAndTokens({
1934
1934
  state: {
1935
1935
  session: n.member_session,
1936
- member: n.member
1936
+ member: n.member,
1937
+ organization: n.organization
1937
1938
  },
1938
1939
  session_token: n.session_token,
1939
1940
  session_jwt: n.session_jwt,
@@ -2310,7 +2311,8 @@ var Ye = Promise.resolve({
2310
2311
  return s = t.sent, this._pkceManager.clearPKPair(), s.member_session ? this._subscriptionService.updateStateAndTokens({
2311
2312
  state: {
2312
2313
  session: s.member_session,
2313
- member: s.member
2314
+ member: s.member,
2315
+ organization: s.organization
2314
2316
  },
2315
2317
  session_token: s.session_token,
2316
2318
  session_jwt: s.session_jwt,
@@ -2336,7 +2338,7 @@ var Ye = Promise.resolve({
2336
2338
  for (;;)
2337
2339
  switch (e.prev = e.next) {
2338
2340
  case 0:
2339
- if (!ze(this._config.publicToken)) {
2341
+ if (!Ue(this._config.publicToken)) {
2340
2342
  e.next = 2;
2341
2343
  break;
2342
2344
  }
@@ -2441,13 +2443,20 @@ var Ye = Promise.resolve({
2441
2443
  method: "GET"
2442
2444
  });
2443
2445
  case 2:
2444
- return t = e.sent, e.abrupt("return", t.organization);
2445
- case 4:
2446
+ return t = e.sent, this._subscriptionService.updateOrganization(t.organization), e.abrupt("return", t.organization);
2447
+ case 5:
2446
2448
  case "end":
2447
2449
  return e.stop();
2448
2450
  }
2449
2451
  }, e, this);
2450
2452
  }));
2453
+ }, this.getSync = function () {
2454
+ return n._subscriptionService.getOrganization();
2455
+ }, this.onChange = function (e) {
2456
+ return n._subscriptionService.subscribeToState(function (t) {
2457
+ var r;
2458
+ return e(null !== (r = null == t ? void 0 : t.organization) && void 0 !== r ? r : null);
2459
+ });
2451
2460
  }, this.update = function (e) {
2452
2461
  return we(n, void 0, void 0, de().mark(function t() {
2453
2462
  var r;
@@ -2700,7 +2709,8 @@ var Ye = Promise.resolve({
2700
2709
  return s = t.sent, this._pkceManager.clearPKPair(), s.member_session ? this._subscriptionService.updateStateAndTokens({
2701
2710
  state: {
2702
2711
  session: s.member_session,
2703
- member: s.member
2712
+ member: s.member,
2713
+ organization: s.organization
2704
2714
  },
2705
2715
  session_token: s.session_token,
2706
2716
  session_jwt: s.session_jwt,
@@ -2735,7 +2745,7 @@ var Ye = Promise.resolve({
2735
2745
  }
2736
2746
  return e.abrupt("return", "https://".concat(r));
2737
2747
  case 6:
2738
- if (!ze(this._config.publicToken)) {
2748
+ if (!Ue(this._config.publicToken)) {
2739
2749
  e.next = 8;
2740
2750
  break;
2741
2751
  }
@@ -2879,7 +2889,8 @@ var Ye = Promise.resolve({
2879
2889
  return n = t.sent, this._subscriptionService.updateStateAndTokens({
2880
2890
  state: {
2881
2891
  session: n.member_session,
2882
- member: n.member
2892
+ member: n.member,
2893
+ organization: n.organization
2883
2894
  },
2884
2895
  session_token: n.session_token,
2885
2896
  session_jwt: n.session_jwt,
@@ -2910,7 +2921,8 @@ var Ye = Promise.resolve({
2910
2921
  return (r = t.sent).member_session ? this._subscriptionService.updateStateAndTokens({
2911
2922
  state: {
2912
2923
  session: r.member_session,
2913
- member: r.member
2924
+ member: r.member,
2925
+ organization: r.organization
2914
2926
  },
2915
2927
  session_token: r.session_token,
2916
2928
  session_jwt: r.session_jwt,
@@ -2996,7 +3008,8 @@ var Ye = Promise.resolve({
2996
3008
  return (n = t.sent).member_session ? this._subscriptionService.updateStateAndTokens({
2997
3009
  state: {
2998
3010
  session: n.member_session,
2999
- member: n.member
3011
+ member: n.member,
3012
+ organization: n.organization
3000
3013
  },
3001
3014
  session_token: n.session_token,
3002
3015
  session_jwt: n.session_jwt,
@@ -3042,7 +3055,8 @@ var Ye = Promise.resolve({
3042
3055
  return (n = t.sent).member_session ? this._subscriptionService.updateStateAndTokens({
3043
3056
  state: {
3044
3057
  session: n.member_session,
3045
- member: n.member
3058
+ member: n.member,
3059
+ organization: n.organization
3046
3060
  },
3047
3061
  session_token: n.session_token,
3048
3062
  session_jwt: n.session_jwt,
@@ -3126,7 +3140,8 @@ var tt = pe(function e(t, r) {
3126
3140
  return s = t.sent, this._subscriptionService.updateStateAndTokens({
3127
3141
  state: {
3128
3142
  session: s.member_session,
3129
- member: s.member
3143
+ member: s.member,
3144
+ organization: s.organization
3130
3145
  },
3131
3146
  session_token: s.session_token,
3132
3147
  session_jwt: s.session_jwt,
@@ -3207,7 +3222,8 @@ var tt = pe(function e(t, r) {
3207
3222
  return s = t.sent, this._subscriptionService.updateStateAndTokens({
3208
3223
  state: {
3209
3224
  session: s.member_session,
3210
- member: s.member
3225
+ member: s.member,
3226
+ organization: s.organization
3211
3227
  },
3212
3228
  session_token: s.session_token,
3213
3229
  session_jwt: s.session_jwt,
@@ -3650,7 +3666,8 @@ var kt = /*#__PURE__*/ function () {
3650
3666
  return _context6.abrupt("return", (o.member_session ? this._subscriptionService.updateStateAndTokens({
3651
3667
  state: {
3652
3668
  session: o.member_session,
3653
- member: o.member
3669
+ member: o.member,
3670
+ organization: o.organization
3654
3671
  },
3655
3672
  session_token: o.session_token,
3656
3673
  session_jwt: o.session_jwt,
@@ -3754,7 +3771,8 @@ var kt = /*#__PURE__*/ function () {
3754
3771
  return _context8.abrupt("return", (this._pkceManager.clearPKPair(), o.member_session ? this._subscriptionService.updateStateAndTokens({
3755
3772
  state: {
3756
3773
  session: o.member_session,
3757
- member: o.member
3774
+ member: o.member,
3775
+ organization: o.organization
3758
3776
  },
3759
3777
  session_token: o.session_token,
3760
3778
  session_jwt: o.session_jwt,
@@ -3809,7 +3827,8 @@ var kt = /*#__PURE__*/ function () {
3809
3827
  return _context9.abrupt("return", (n.member_session ? this._subscriptionService.updateStateAndTokens({
3810
3828
  state: {
3811
3829
  session: n.member_session,
3812
- member: n.member
3830
+ member: n.member,
3831
+ organization: n.organization
3813
3832
  },
3814
3833
  session_token: n.session_token,
3815
3834
  session_jwt: n.session_jwt,
@@ -3860,7 +3879,8 @@ var kt = /*#__PURE__*/ function () {
3860
3879
  return _context10.abrupt("return", (this._subscriptionService.updateStateAndTokens({
3861
3880
  state: {
3862
3881
  session: n.member_session,
3863
- member: n.member
3882
+ member: n.member,
3883
+ organization: n.organization
3864
3884
  },
3865
3885
  session_token: n.session_token,
3866
3886
  session_jwt: n.session_jwt,
@@ -4123,7 +4143,7 @@ var At = /*#__PURE__*/ function () {
4123
4143
  },
4124
4144
  sdk: {
4125
4145
  identifier: "Stytch.js Javascript SDK",
4126
- version: "4.1.1"
4146
+ version: "4.2.0"
4127
4147
  }
4128
4148
  });
4129
4149
  }
@@ -4733,6 +4753,13 @@ var Kt = /*#__PURE__*/ function (_Nt) {
4733
4753
  }, _this8.getMember = function () {
4734
4754
  var e, t;
4735
4755
  return null !== (t = null === (e = _this8.getState()) || void 0 === e ? void 0 : e.member) && void 0 !== t ? t : null;
4756
+ }, _this8.updateOrganization = function (e) {
4757
+ return _this8.updateState({
4758
+ organization: e
4759
+ });
4760
+ }, _this8.getOrganization = function () {
4761
+ var e, t;
4762
+ return null !== (t = null === (e = _this8.getState()) || void 0 === e ? void 0 : e.organization) && void 0 !== t ? t : null;
4736
4763
  }, _this8.getSession = function () {
4737
4764
  var e, t;
4738
4765
  return null !== (t = null === (e = _this8.getState()) || void 0 === e ? void 0 : e.session) && void 0 !== t ? t : null;
@@ -4741,15 +4768,15 @@ var Kt = /*#__PURE__*/ function (_Nt) {
4741
4768
  }
4742
4769
  return _createClass(Kt);
4743
4770
  }(Nt);
4744
- var Ut = Symbol["for"]("stytch__internal_b2b");
4745
- var zt = /*#__PURE__*/ _createClass(function zt(e, t) {
4771
+ var zt = Symbol["for"]("stytch__internal_b2b");
4772
+ var Ut = /*#__PURE__*/ _createClass(function Ut(e, t) {
4746
4773
  var _this9 = this;
4747
- _classCallCheck(this, zt);
4774
+ _classCallCheck(this, Ut);
4748
4775
  var r;
4749
4776
  !function (e) {
4750
4777
  if ("undefined" == typeof window)
4751
4778
  throw new Error("The ".concat(e, " is not compatible with server-side environments.\nIf using nextjs, use the create").concat(e, " method instead.\n```\n").concat("import { createStytchB2BHeadlessClient } from '@stytch/nextjs/b2b';\n \n const stytch = createStytchB2BHeadlessClient('public-token-...');\n ", "\n```\n"));
4752
- }("StytchB2BHeadlessClient"), "string" != typeof (r = e) ? Ne("Public token is malformed. Expected a string, got ".concat(le(r), ".").concat(Ue)) : "" === r ? Ne('Public token is malformed. Expected "public-token-...", got an empty string.'.concat(Ue)) : r.startsWith("public-token-") || Ne('Public token is malformed. Expected "public-token-...", got '.concat(r, ".").concat(Ue));
4779
+ }("StytchB2BHeadlessClient"), "string" != typeof (r = e) ? Ne("Public token is malformed. Expected a string, got ".concat(le(r), ".").concat(ze)) : "" === r ? Ne('Public token is malformed. Expected "public-token-...", got an empty string.'.concat(ze)) : r.startsWith("public-token-") || Ne('Public token is malformed. Expected "public-token-...", got '.concat(r, ".").concat(ze));
4753
4780
  var n = t, i = {
4754
4781
  cookieOptions: null == (o = n) ? void 0 : o.cookieOptions,
4755
4782
  endpoints: {
@@ -4790,7 +4817,7 @@ var zt = /*#__PURE__*/ _createClass(function zt(e, t) {
4790
4817
  }
4791
4818
  });
4792
4819
  (function (e, t) {
4793
- Object.assign(e, _defineProperty({}, Ut, t));
4820
+ Object.assign(e, _defineProperty({}, zt, t));
4794
4821
  })(this, {
4795
4822
  bootstrap: v,
4796
4823
  publicToken: e,
@@ -4855,7 +4882,7 @@ const createStytchB2BHeadlessClient = (...args) => {
4855
4882
  if (typeof window === 'undefined') {
4856
4883
  return createStytchSSRProxy();
4857
4884
  }
4858
- return new zt(...args);
4885
+ return new Ut(...args);
4859
4886
  };
4860
4887
 
4861
4888
  exports.createStytchB2BHeadlessClient = createStytchB2BHeadlessClient;
package/dist/b2b/index.js CHANGED
@@ -52,9 +52,15 @@ const initialMemberSession = {
52
52
  fromCache: false,
53
53
  isInitialized: false,
54
54
  };
55
+ const initialOrganization = {
56
+ organization: null,
57
+ fromCache: false,
58
+ isInitialized: false,
59
+ };
55
60
  const StytchContext = React.createContext({ isMounted: false });
56
61
  const StytchMemberContext = React.createContext(initialMember);
57
62
  const StytchMemberSessionContext = React.createContext(initialMemberSession);
63
+ const StytchOrganizationContext = React.createContext(initialOrganization);
58
64
  const useIsMounted__INTERNAL = () => React.useContext(StytchContext).isMounted;
59
65
  const isUIClient = (client) => {
60
66
  return client.mount !== undefined;
@@ -97,6 +103,23 @@ const useStytchMemberSession = () => {
97
103
  invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
98
104
  return React.useContext(StytchMemberSessionContext);
99
105
  };
106
+ /**
107
+ * Returns the active Stytch organization.
108
+ * The Stytch SDKs are used for client-side authentication and session management.
109
+ * Check the isInitialized property to determine if the SDK has completed initialization.
110
+ * Check the fromCache property to determine if the session data is from persistent storage.
111
+ * See Next's {@link https://nextjs.org/docs/authentication#authenticating-statically-generated-pages documentation} for more.
112
+ * @example
113
+ * const {organization, isInitialized, fromCache} = useStytchOrganization();
114
+ * if (!isInitialized) {
115
+ * return <p>Loading...</p>;
116
+ * }
117
+ * return (<p>Welcome to {organization.organization_name}</p>);
118
+ */
119
+ const useStytchOrganization = () => {
120
+ invariant(useIsMounted__INTERNAL(), noProviderError('useStytchOrganization', 'StytchB2BProvider'));
121
+ return React.useContext(StytchOrganizationContext);
122
+ };
100
123
  /**
101
124
  * Determines whether the logged-in member is allowed to perform the specified action on the specified resource.
102
125
  * Returns `true` if the member can perform the action, `false` otherwise.
@@ -178,6 +201,15 @@ const withStytchMemberSession = (Component) => {
178
201
  WithStytchSession.displayName = `withStytchMemberSession(${Component.displayName || Component.name || 'Component'})`;
179
202
  return WithStytchSession;
180
203
  };
204
+ const withStytchOrganization = (Component) => {
205
+ const WithStytchOrganization = (props) => {
206
+ invariant(useIsMounted__INTERNAL(), noProviderError('withStytchOrganization', 'StytchB2BProvider'));
207
+ const { organization, isInitialized, fromCache } = useStytchOrganization();
208
+ return (React__default['default'].createElement(Component, Object.assign({}, props, { stytchOrganization: organization, stytchOrganizationIsInitialized: isInitialized, stytchOrganizationIsFromCache: fromCache })));
209
+ };
210
+ WithStytchOrganization.displayName = `withStytchOrganization(${Component.displayName || Component.name || 'Component'})`;
211
+ return WithStytchOrganization;
212
+ };
181
213
  /**
182
214
  * Wrap your component with this HOC in order to receive the permissions for the logged-in member.
183
215
  * Evaluates all permissions granted to the logged-in member.
@@ -234,6 +266,7 @@ const StytchB2BProvider = ({ stytch, children }) => {
234
266
  const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
235
267
  const [member, setMember] = useAsyncState(initialMember);
236
268
  const [session, setMemberSession] = useAsyncState(initialMemberSession);
269
+ const [organization, setOrganization] = useAsyncState(initialOrganization);
237
270
  React.useEffect(() => {
238
271
  if (isStytchSSRProxy(stytch)) {
239
272
  return;
@@ -248,18 +281,36 @@ const StytchB2BProvider = ({ stytch, children }) => {
248
281
  fromCache: true,
249
282
  isInitialized: true,
250
283
  });
284
+ setOrganization({
285
+ organization: stytch.organization.getSync(),
286
+ fromCache: true,
287
+ isInitialized: true,
288
+ });
251
289
  const unsubscribeMember = stytch.self.onChange((member) => setMember({ member, fromCache: false, isInitialized: true }));
252
290
  const unsubscribeMemberSession = stytch.session.onChange((session) => setMemberSession({ session, fromCache: false, isInitialized: true }));
291
+ const unsubscribeOrganization = stytch.organization.onChange((organization) => setOrganization({ organization, fromCache: false, isInitialized: true }));
253
292
  return () => {
254
293
  unsubscribeMember();
255
294
  unsubscribeMemberSession();
295
+ unsubscribeOrganization();
296
+ };
297
+ }, [stytch, setMember, setMemberSession, setOrganization]);
298
+ const allValuesReady = !!member.member === !!session.session && !!session.session === !!organization.organization;
299
+ const finalValues = allValuesReady
300
+ ? {
301
+ member,
302
+ session,
303
+ organization,
304
+ }
305
+ : {
306
+ member: initialMember,
307
+ session: initialMemberSession,
308
+ organization: initialOrganization,
256
309
  };
257
- }, [stytch, setMember, setMemberSession]);
258
- const finalMemberSession = !!session.session === !!member.member ? session : initialMemberSession;
259
- const finalMember = !!session.session === !!member.member ? member : initialMember;
260
310
  return (React__default['default'].createElement(StytchContext.Provider, { value: ctx },
261
- React__default['default'].createElement(StytchMemberContext.Provider, { value: finalMember },
262
- React__default['default'].createElement(StytchMemberSessionContext.Provider, { value: finalMemberSession }, children))));
311
+ React__default['default'].createElement(StytchOrganizationContext.Provider, { value: finalValues.organization },
312
+ React__default['default'].createElement(StytchMemberContext.Provider, { value: finalValues.member },
313
+ React__default['default'].createElement(StytchMemberSessionContext.Provider, { value: finalValues.session }, children)))));
263
314
  };
264
315
 
265
316
  /**
@@ -327,7 +378,9 @@ exports.useStytchB2BClient = useStytchB2BClient;
327
378
  exports.useStytchIsAuthorized = useStytchIsAuthorized;
328
379
  exports.useStytchMember = useStytchMember;
329
380
  exports.useStytchMemberSession = useStytchMemberSession;
381
+ exports.useStytchOrganization = useStytchOrganization;
330
382
  exports.withStytchB2BClient = withStytchB2BClient;
331
383
  exports.withStytchMember = withStytchMember;
332
384
  exports.withStytchMemberSession = withStytchMemberSession;
385
+ exports.withStytchOrganization = withStytchOrganization;
333
386
  exports.withStytchPermissions = withStytchPermissions;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stytch/nextjs",
3
- "version": "16.0.1",
3
+ "version": "17.0.0",
4
4
  "description": "Stytch's official Next.js Library",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.esm.js",
@@ -22,7 +22,7 @@
22
22
  "author": "Stytch",
23
23
  "devDependencies": {
24
24
  "@babel/runtime": "7.18.6",
25
- "@stytch/vanilla-js": "4.1.1",
25
+ "@stytch/vanilla-js": "4.2.0",
26
26
  "@testing-library/react": "14.0.0",
27
27
  "eslint-config-custom": "0.0.1",
28
28
  "react-dom": ">= 17.0.2",
@@ -31,7 +31,7 @@
31
31
  "typescript": "4.7.4"
32
32
  },
33
33
  "peerDependencies": {
34
- "@stytch/vanilla-js": "^4.1.1",
34
+ "@stytch/vanilla-js": "^4.2.0",
35
35
  "react": ">= 17.0.2",
36
36
  "react-dom": ">= 17.0.2"
37
37
  },