@stytch/react 17.0.0 → 18.1.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.
- package/CHANGELOG.md +19 -0
- package/README.md +1 -1
- package/b2b/adminPortal/package.json +6 -0
- package/dist/StytchB2BContext-8acafb28.d.ts +165 -0
- package/dist/StytchB2BContext-8acafb28.js +217 -0
- package/dist/StytchB2BContext-ce9e254c.d.ts +165 -0
- package/dist/StytchB2BContext-ce9e254c.js +235 -0
- package/dist/adminPortal/index.d.ts +34 -0
- package/dist/adminPortal/index.esm.d.ts +34 -0
- package/dist/adminPortal/index.esm.js +9518 -0
- package/dist/adminPortal/index.js +9526 -0
- package/dist/b2b/index.d.ts +3 -162
- package/dist/b2b/index.esm.d.ts +3 -162
- package/dist/b2b/index.esm.js +5 -299
- package/dist/b2b/index.js +17 -312
- package/dist/createDeepEqual-5555f2e1.d.ts +5 -0
- package/dist/index-b14d4efe.d.ts +2 -0
- package/dist/index.esm.js +2 -85
- package/dist/index.js +17 -100
- package/dist/invariant-568a7633.d.ts +27 -0
- package/dist/invariant-568a7633.js +88 -0
- package/dist/invariant-ae5a5bce.d.ts +27 -0
- package/dist/invariant-ae5a5bce.js +97 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @stytch/react
|
|
2
2
|
|
|
3
|
+
## 18.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- a99f21b8: Add `AdminPortalSSO` component to `@stytch/react/b2b/adminPortal`
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [0f448e7e]
|
|
12
|
+
- Updated dependencies [a99f21b8]
|
|
13
|
+
- @stytch/vanilla-js@4.13.0
|
|
14
|
+
|
|
15
|
+
## 18.0.0
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies [cbab0c30]
|
|
20
|
+
- @stytch/vanilla-js@4.12.0
|
|
21
|
+
|
|
3
22
|
## 17.0.0
|
|
4
23
|
|
|
5
24
|
### Major Changes
|
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@ With `npm`
|
|
|
9
9
|
|
|
10
10
|
## Documentation
|
|
11
11
|
|
|
12
|
-
For full documentation please refer to Stytch's javascript SDK documentation at https://stytch.com/docs/sdks.
|
|
12
|
+
For full documentation please refer to Stytch's javascript SDK documentation at https://stytch.com/docs/sdks/javascript-sdk.
|
|
13
13
|
|
|
14
14
|
## Example Usage
|
|
15
15
|
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
|
+
import { Member, MemberSession, Organization, StytchB2BUIClient } from '@stytch/vanilla-js/b2b';
|
|
5
|
+
import { StytchB2BHeadlessClient } from '@stytch/vanilla-js/b2b/headless';
|
|
6
|
+
import { PermissionsMap } from '@stytch/core/public';
|
|
7
|
+
/**
|
|
8
|
+
* The Stytch Client object passed in to <StytchProvider /> in your application root.
|
|
9
|
+
*/
|
|
10
|
+
type StytchB2BClient = StytchB2BHeadlessClient | StytchB2BUIClient;
|
|
11
|
+
type SWRMember = {
|
|
12
|
+
/**
|
|
13
|
+
* Either the active {@link Member} object, or null if the member is not logged in.
|
|
14
|
+
*/
|
|
15
|
+
member: Member | null;
|
|
16
|
+
/**
|
|
17
|
+
* If true, indicates that the value returned is from the application cache and a state refresh is in progress.
|
|
18
|
+
*/
|
|
19
|
+
fromCache: boolean;
|
|
20
|
+
};
|
|
21
|
+
type SWRMemberSession = {
|
|
22
|
+
/**
|
|
23
|
+
* Either the active {@link MemberSession} object, or null if the member is not logged in.
|
|
24
|
+
*/
|
|
25
|
+
session: MemberSession | null;
|
|
26
|
+
/**
|
|
27
|
+
* If true, indicates that the value returned is from the application cache and a state refresh is in progress.
|
|
28
|
+
*/
|
|
29
|
+
fromCache: boolean;
|
|
30
|
+
};
|
|
31
|
+
type SWROrganization = {
|
|
32
|
+
/**
|
|
33
|
+
* Either the active {@link Organization} object, or null if the member is not logged in.
|
|
34
|
+
*/
|
|
35
|
+
organization: Organization | null;
|
|
36
|
+
/**
|
|
37
|
+
* If true, indicates that the value returned is from the application cache and a state refresh is in progress.
|
|
38
|
+
*/
|
|
39
|
+
fromCache: boolean;
|
|
40
|
+
};
|
|
41
|
+
declare const useIsMounted__INTERNAL: () => boolean;
|
|
42
|
+
declare const isUIClient: (client: StytchB2BClient) => client is StytchB2BUIClient;
|
|
43
|
+
/**
|
|
44
|
+
* Returns the active Member.
|
|
45
|
+
* Check the fromCache property to determine if the member data is from persistent storage.
|
|
46
|
+
* @example
|
|
47
|
+
* const {member} = useStytchMember();
|
|
48
|
+
* return (<h1>Welcome, {member.name}</h1>);
|
|
49
|
+
* @returns A {@link SWRUser}
|
|
50
|
+
*/
|
|
51
|
+
declare const useStytchMember: () => SWRMember;
|
|
52
|
+
/**
|
|
53
|
+
* Returns the active member's Stytch member session.
|
|
54
|
+
* @example
|
|
55
|
+
* const { session } = useStytchMemberSession();
|
|
56
|
+
* useEffect(() => {
|
|
57
|
+
* if (!session) {
|
|
58
|
+
* router.replace('/login')
|
|
59
|
+
* }
|
|
60
|
+
* }, [session]);
|
|
61
|
+
* @returns A {@link SWRMemberSession}
|
|
62
|
+
*/
|
|
63
|
+
declare const useStytchMemberSession: () => SWRMemberSession;
|
|
64
|
+
/**
|
|
65
|
+
* Returns the active Stytch organization.
|
|
66
|
+
* @example
|
|
67
|
+
* const { organization } = useStytchOrganization();
|
|
68
|
+
* return organization ? <p>Welcome to {organization.organization_name}</p> : <p>Log in to continue!</p>;
|
|
69
|
+
* @returns A {@link SWROrganization}
|
|
70
|
+
*/
|
|
71
|
+
declare const useStytchOrganization: () => SWROrganization;
|
|
72
|
+
type SWRIsAuthorized = {
|
|
73
|
+
/**
|
|
74
|
+
* Whether the logged-in member is allowed to perform the specified action on the specified resource.
|
|
75
|
+
*/
|
|
76
|
+
isAuthorized: boolean;
|
|
77
|
+
/**
|
|
78
|
+
* If true, indicates that the value returned is from the application cache and a state refresh is in progress.
|
|
79
|
+
*/
|
|
80
|
+
fromCache: boolean;
|
|
81
|
+
};
|
|
82
|
+
/**
|
|
83
|
+
* Determines whether the logged-in member is allowed to perform the specified action on the specified resource.
|
|
84
|
+
* Returns `true` if the member can perform the action, `false` otherwise.
|
|
85
|
+
*
|
|
86
|
+
* If the member is not logged in, this method will always return false.
|
|
87
|
+
* If the resource or action provided are not valid for the configured RBAC policy, this method will return false.
|
|
88
|
+
*
|
|
89
|
+
* Remember - authorization checks for sensitive actions should always occur on the backend as well.
|
|
90
|
+
* @example
|
|
91
|
+
* const isAuthorized = useStytchIsAuthorized<Permissions>('documents', 'edit');
|
|
92
|
+
* return <button disabled={!isAuthorized}>Edit</button>
|
|
93
|
+
*/
|
|
94
|
+
declare const useStytchIsAuthorized: (resourceId: string, action: string) => SWRIsAuthorized;
|
|
95
|
+
/**
|
|
96
|
+
* Returns the Stytch B2B client stored in the Stytch context.
|
|
97
|
+
*
|
|
98
|
+
* @example
|
|
99
|
+
* const stytch = useStytchB2BClient();
|
|
100
|
+
* useEffect(() => {
|
|
101
|
+
* stytch.magicLinks.authenticate('...')
|
|
102
|
+
* }, [stytch]);
|
|
103
|
+
*/
|
|
104
|
+
declare const useStytchB2BClient: () => StytchB2BHeadlessClient;
|
|
105
|
+
declare const withStytchB2BClient: <T extends object>(Component: React.ComponentType<T & {
|
|
106
|
+
stytch: StytchB2BHeadlessClient;
|
|
107
|
+
}>) => React.ComponentType<T>;
|
|
108
|
+
declare const withStytchMember: <T extends object>(Component: React.ComponentType<T & {
|
|
109
|
+
stytchMember: Member | null;
|
|
110
|
+
stytchMemberIsFromCache: boolean;
|
|
111
|
+
}>) => React.ComponentType<T>;
|
|
112
|
+
declare const withStytchMemberSession: <T extends object>(Component: React.ComponentType<T & {
|
|
113
|
+
stytchMemberSession: MemberSession | null;
|
|
114
|
+
stytchMemberSessionIsFromCache: boolean;
|
|
115
|
+
}>) => React.ComponentType<T>;
|
|
116
|
+
declare const withStytchOrganization: <T extends object>(Component: React.ComponentType<T & {
|
|
117
|
+
stytchOrganization: Organization | null;
|
|
118
|
+
stytchOrganizationIsFromCache: boolean;
|
|
119
|
+
}>) => React.ComponentType<T>;
|
|
120
|
+
/**
|
|
121
|
+
* Wrap your component with this HOC in order to receive the permissions for the logged-in member.
|
|
122
|
+
* Evaluates all permissions granted to the logged-in member.
|
|
123
|
+
* Returns a Record<RoleId, Record<Action, boolean>> response indicating the member's permissions.
|
|
124
|
+
* Each boolean will be `true` if the member can perform the action, `false` otherwise.
|
|
125
|
+
*
|
|
126
|
+
* If the member is not logged in, all values will be false.
|
|
127
|
+
*
|
|
128
|
+
* Remember - authorization checks for sensitive actions should always occur on the backend as well.
|
|
129
|
+
* @example
|
|
130
|
+
* type Permissions = {
|
|
131
|
+
* document: 'create' | 'read' | 'write
|
|
132
|
+
* image: 'create' | 'read'
|
|
133
|
+
* }
|
|
134
|
+
*
|
|
135
|
+
* const MyComponent = (props) => {
|
|
136
|
+
* const canEditDocuments = props.stytchPermissions.document.edit;
|
|
137
|
+
* const canReadImages = props.stytchPermissions.image.read;
|
|
138
|
+
* }
|
|
139
|
+
* return withStytchPermissions<Permissions>(MyComponent)
|
|
140
|
+
*/
|
|
141
|
+
declare const withStytchPermissions: <Permissions_1 extends Record<string, string>, T extends object>(Component: React.ComponentType<T & {
|
|
142
|
+
stytchPermissions: PermissionsMap<Permissions_1>;
|
|
143
|
+
}>) => React.ComponentType<T>;
|
|
144
|
+
type StytchB2BProviderProps = {
|
|
145
|
+
/**
|
|
146
|
+
* A Stytch client instance {@link StytchB2BHeadlessClient}
|
|
147
|
+
*/
|
|
148
|
+
stytch: StytchB2BClient;
|
|
149
|
+
children?: ReactNode;
|
|
150
|
+
};
|
|
151
|
+
/**
|
|
152
|
+
* The Stytch Context Provider.
|
|
153
|
+
* Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
|
|
154
|
+
* @example
|
|
155
|
+
* const stytch = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
|
|
156
|
+
*
|
|
157
|
+
* ReactDOM.render(
|
|
158
|
+
* <StytchB2BProvider stytch={stytch}>
|
|
159
|
+
* <App />
|
|
160
|
+
* </StytchProvider>,
|
|
161
|
+
* document.getElementById('root'),
|
|
162
|
+
* )
|
|
163
|
+
*/
|
|
164
|
+
declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps) => JSX.Element;
|
|
165
|
+
export { useIsMounted__INTERNAL, isUIClient, useStytchMember, useStytchMemberSession, useStytchOrganization, useStytchIsAuthorized, useStytchB2BClient, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchOrganization, withStytchPermissions, StytchB2BProviderProps, StytchB2BProvider };
|
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
import React, { createContext, useContext, useEffect, useMemo } from 'react';
|
|
2
|
+
import { i as invariant, u as useAsyncState, m as mergeWithStableProps, n as noProviderError, B as B2BProviderMustBeUniqueError, a as noSSRError } from './invariant-568a7633.js';
|
|
3
|
+
|
|
4
|
+
const initialMember = {
|
|
5
|
+
member: null,
|
|
6
|
+
fromCache: false,
|
|
7
|
+
};
|
|
8
|
+
const initialMemberSession = {
|
|
9
|
+
session: null,
|
|
10
|
+
fromCache: false,
|
|
11
|
+
};
|
|
12
|
+
const initialOrganization = {
|
|
13
|
+
organization: null,
|
|
14
|
+
fromCache: false,
|
|
15
|
+
};
|
|
16
|
+
const StytchB2BContext = createContext({ isMounted: false });
|
|
17
|
+
const StytchMemberContext = createContext(initialMember);
|
|
18
|
+
const StytchMemberSessionContext = createContext(initialMemberSession);
|
|
19
|
+
const StytchOrganizationContext = createContext(initialOrganization);
|
|
20
|
+
const useIsMounted__INTERNAL = () => useContext(StytchB2BContext).isMounted;
|
|
21
|
+
const isUIClient = (client) => {
|
|
22
|
+
return client.mount !== undefined;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Returns the active Member.
|
|
26
|
+
* Check the fromCache property to determine if the member data is from persistent storage.
|
|
27
|
+
* @example
|
|
28
|
+
* const {member} = useStytchMember();
|
|
29
|
+
* return (<h1>Welcome, {member.name}</h1>);
|
|
30
|
+
* @returns A {@link SWRUser}
|
|
31
|
+
*/
|
|
32
|
+
const useStytchMember = () => {
|
|
33
|
+
invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMember', 'StytchB2BProvider'));
|
|
34
|
+
return useContext(StytchMemberContext);
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* Returns the active member's Stytch member session.
|
|
38
|
+
* @example
|
|
39
|
+
* const { session } = useStytchMemberSession();
|
|
40
|
+
* useEffect(() => {
|
|
41
|
+
* if (!session) {
|
|
42
|
+
* router.replace('/login')
|
|
43
|
+
* }
|
|
44
|
+
* }, [session]);
|
|
45
|
+
* @returns A {@link SWRMemberSession}
|
|
46
|
+
*/
|
|
47
|
+
const useStytchMemberSession = () => {
|
|
48
|
+
invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
|
|
49
|
+
return useContext(StytchMemberSessionContext);
|
|
50
|
+
};
|
|
51
|
+
/**
|
|
52
|
+
* Returns the active Stytch organization.
|
|
53
|
+
* @example
|
|
54
|
+
* const { organization } = useStytchOrganization();
|
|
55
|
+
* return organization ? <p>Welcome to {organization.organization_name}</p> : <p>Log in to continue!</p>;
|
|
56
|
+
* @returns A {@link SWROrganization}
|
|
57
|
+
*/
|
|
58
|
+
const useStytchOrganization = () => {
|
|
59
|
+
invariant(useIsMounted__INTERNAL(), noProviderError('useStytchOrganization', 'StytchB2BProvider'));
|
|
60
|
+
return useContext(StytchOrganizationContext);
|
|
61
|
+
};
|
|
62
|
+
/**
|
|
63
|
+
* Determines whether the logged-in member is allowed to perform the specified action on the specified resource.
|
|
64
|
+
* Returns `true` if the member can perform the action, `false` otherwise.
|
|
65
|
+
*
|
|
66
|
+
* If the member is not logged in, this method will always return false.
|
|
67
|
+
* If the resource or action provided are not valid for the configured RBAC policy, this method will return false.
|
|
68
|
+
*
|
|
69
|
+
* Remember - authorization checks for sensitive actions should always occur on the backend as well.
|
|
70
|
+
* @example
|
|
71
|
+
* const isAuthorized = useStytchIsAuthorized<Permissions>('documents', 'edit');
|
|
72
|
+
* return <button disabled={!isAuthorized}>Edit</button>
|
|
73
|
+
*/
|
|
74
|
+
const useStytchIsAuthorized = (resourceId, action) => {
|
|
75
|
+
invariant(useIsMounted__INTERNAL(), noProviderError('useStytchIsAuthorized', 'StytchB2BProvider'));
|
|
76
|
+
const client = useStytchB2BClient();
|
|
77
|
+
const { session } = useStytchMemberSession();
|
|
78
|
+
const [isAuthorized, setIsAuthorized] = useAsyncState({
|
|
79
|
+
fromCache: true,
|
|
80
|
+
isAuthorized: client.rbac.isAuthorizedSync(resourceId, action),
|
|
81
|
+
});
|
|
82
|
+
useEffect(() => {
|
|
83
|
+
client.rbac.isAuthorized(resourceId, action).then((isAuthorized) => setIsAuthorized({
|
|
84
|
+
fromCache: false,
|
|
85
|
+
isAuthorized,
|
|
86
|
+
}));
|
|
87
|
+
}, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action, setIsAuthorized]);
|
|
88
|
+
return isAuthorized;
|
|
89
|
+
};
|
|
90
|
+
/**
|
|
91
|
+
* Returns the Stytch B2B client stored in the Stytch context.
|
|
92
|
+
*
|
|
93
|
+
* @example
|
|
94
|
+
* const stytch = useStytchB2BClient();
|
|
95
|
+
* useEffect(() => {
|
|
96
|
+
* stytch.magicLinks.authenticate('...')
|
|
97
|
+
* }, [stytch]);
|
|
98
|
+
*/
|
|
99
|
+
const useStytchB2BClient = () => {
|
|
100
|
+
const ctx = useContext(StytchB2BContext);
|
|
101
|
+
invariant(ctx.isMounted, noProviderError('useStytchB2BClient', 'StytchB2BProvider'));
|
|
102
|
+
return ctx.client;
|
|
103
|
+
};
|
|
104
|
+
const withStytchB2BClient = (Component) => {
|
|
105
|
+
const WithStytch = (props) => {
|
|
106
|
+
invariant(useIsMounted__INTERNAL(), noProviderError('withStytchB2BClient', 'StytchB2BProvider'));
|
|
107
|
+
return React.createElement(Component, Object.assign({}, props, { stytch: useStytchB2BClient() }));
|
|
108
|
+
};
|
|
109
|
+
WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
|
|
110
|
+
return WithStytch;
|
|
111
|
+
};
|
|
112
|
+
const withStytchMember = (Component) => {
|
|
113
|
+
const WithStytchUser = (props) => {
|
|
114
|
+
invariant(useIsMounted__INTERNAL(), noProviderError('withStytchMember', 'StytchB2BProvider'));
|
|
115
|
+
const { member, fromCache } = useStytchMember();
|
|
116
|
+
return React.createElement(Component, Object.assign({}, props, { stytchMember: member, stytchMemberIsFromCache: fromCache }));
|
|
117
|
+
};
|
|
118
|
+
WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
|
|
119
|
+
return WithStytchUser;
|
|
120
|
+
};
|
|
121
|
+
const withStytchMemberSession = (Component) => {
|
|
122
|
+
const WithStytchSession = (props) => {
|
|
123
|
+
invariant(useIsMounted__INTERNAL(), noProviderError('withStytchMemberSession', 'StytchB2BProvider'));
|
|
124
|
+
const { session, fromCache } = useStytchMemberSession();
|
|
125
|
+
return React.createElement(Component, Object.assign({}, props, { stytchMemberSession: session, stytchMemberSessionIsFromCache: fromCache }));
|
|
126
|
+
};
|
|
127
|
+
WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
|
|
128
|
+
return WithStytchSession;
|
|
129
|
+
};
|
|
130
|
+
const withStytchOrganization = (Component) => {
|
|
131
|
+
const WithStytchOrganization = (props) => {
|
|
132
|
+
invariant(useIsMounted__INTERNAL(), noProviderError('withStytchOrganization', 'StytchB2BProvider'));
|
|
133
|
+
const { organization, fromCache } = useStytchOrganization();
|
|
134
|
+
return React.createElement(Component, Object.assign({}, props, { stytchOrganization: organization, stytchOrganizationIsFromCache: fromCache }));
|
|
135
|
+
};
|
|
136
|
+
WithStytchOrganization.displayName = `withStytchOrganization(${Component.displayName || Component.name || 'Component'})`;
|
|
137
|
+
return WithStytchOrganization;
|
|
138
|
+
};
|
|
139
|
+
/**
|
|
140
|
+
* Wrap your component with this HOC in order to receive the permissions for the logged-in member.
|
|
141
|
+
* Evaluates all permissions granted to the logged-in member.
|
|
142
|
+
* Returns a Record<RoleId, Record<Action, boolean>> response indicating the member's permissions.
|
|
143
|
+
* Each boolean will be `true` if the member can perform the action, `false` otherwise.
|
|
144
|
+
*
|
|
145
|
+
* If the member is not logged in, all values will be false.
|
|
146
|
+
*
|
|
147
|
+
* Remember - authorization checks for sensitive actions should always occur on the backend as well.
|
|
148
|
+
* @example
|
|
149
|
+
* type Permissions = {
|
|
150
|
+
* document: 'create' | 'read' | 'write
|
|
151
|
+
* image: 'create' | 'read'
|
|
152
|
+
* }
|
|
153
|
+
*
|
|
154
|
+
* const MyComponent = (props) => {
|
|
155
|
+
* const canEditDocuments = props.stytchPermissions.document.edit;
|
|
156
|
+
* const canReadImages = props.stytchPermissions.image.read;
|
|
157
|
+
* }
|
|
158
|
+
* return withStytchPermissions<Permissions>(MyComponent)
|
|
159
|
+
*/
|
|
160
|
+
const withStytchPermissions = (Component) => {
|
|
161
|
+
const WithStytchPermissions = (props) => {
|
|
162
|
+
invariant(useIsMounted__INTERNAL(), noProviderError('useRBACPermissions', 'StytchB2BProvider'));
|
|
163
|
+
const client = useStytchB2BClient();
|
|
164
|
+
const { session } = useStytchMemberSession();
|
|
165
|
+
const [permissions, setPermissions] = useAsyncState({ loaded: false, value: null });
|
|
166
|
+
useEffect(() => {
|
|
167
|
+
client.rbac
|
|
168
|
+
.allPermissions()
|
|
169
|
+
.then((permissions) => setPermissions({ loaded: true, value: permissions }));
|
|
170
|
+
}, [client, session === null || session === void 0 ? void 0 : session.roles, setPermissions]);
|
|
171
|
+
if (!permissions.loaded) {
|
|
172
|
+
return null;
|
|
173
|
+
}
|
|
174
|
+
return React.createElement(Component, Object.assign({}, props, { stytchPermissions: permissions.value }));
|
|
175
|
+
};
|
|
176
|
+
WithStytchPermissions.displayName = `withStytchPermissions(${Component.displayName || Component.name || 'Component'})`;
|
|
177
|
+
return WithStytchPermissions;
|
|
178
|
+
};
|
|
179
|
+
/**
|
|
180
|
+
* The Stytch Context Provider.
|
|
181
|
+
* Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
|
|
182
|
+
* @example
|
|
183
|
+
* const stytch = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
|
|
184
|
+
*
|
|
185
|
+
* ReactDOM.render(
|
|
186
|
+
* <StytchB2BProvider stytch={stytch}>
|
|
187
|
+
* <App />
|
|
188
|
+
* </StytchProvider>,
|
|
189
|
+
* document.getElementById('root'),
|
|
190
|
+
* )
|
|
191
|
+
*/
|
|
192
|
+
const StytchB2BProvider = ({ stytch, children }) => {
|
|
193
|
+
invariant(!useIsMounted__INTERNAL(), B2BProviderMustBeUniqueError);
|
|
194
|
+
invariant(typeof window !== 'undefined', noSSRError);
|
|
195
|
+
const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
|
|
196
|
+
const [{ member, session, organization }, setClientState] = useAsyncState({
|
|
197
|
+
session: stytch.session.getInfo(),
|
|
198
|
+
member: stytch.self.getInfo(),
|
|
199
|
+
organization: stytch.organization.getInfo(),
|
|
200
|
+
});
|
|
201
|
+
useEffect(() => stytch.onStateChange(() => {
|
|
202
|
+
setClientState((oldState) => {
|
|
203
|
+
const newState = {
|
|
204
|
+
session: stytch.session.getInfo(),
|
|
205
|
+
member: stytch.self.getInfo(),
|
|
206
|
+
organization: stytch.organization.getInfo(),
|
|
207
|
+
};
|
|
208
|
+
return mergeWithStableProps(oldState, newState);
|
|
209
|
+
});
|
|
210
|
+
}), [setClientState, stytch]);
|
|
211
|
+
return (React.createElement(StytchB2BContext.Provider, { value: ctx },
|
|
212
|
+
React.createElement(StytchOrganizationContext.Provider, { value: organization },
|
|
213
|
+
React.createElement(StytchMemberContext.Provider, { value: member },
|
|
214
|
+
React.createElement(StytchMemberSessionContext.Provider, { value: session }, children)))));
|
|
215
|
+
};
|
|
216
|
+
|
|
217
|
+
export { StytchB2BProvider as S, useStytchB2BClient as a, useStytchMemberSession as b, useStytchMember as c, useStytchIsAuthorized as d, useStytchOrganization as e, withStytchMemberSession as f, withStytchMember as g, withStytchOrganization as h, isUIClient as i, withStytchPermissions as j, useIsMounted__INTERNAL as u, withStytchB2BClient as w };
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
|
+
import { Member, MemberSession, Organization, StytchB2BUIClient } from '@stytch/vanilla-js/b2b';
|
|
5
|
+
import { StytchB2BHeadlessClient } from '@stytch/vanilla-js/b2b/headless';
|
|
6
|
+
import { PermissionsMap } from '@stytch/core/public';
|
|
7
|
+
/**
|
|
8
|
+
* The Stytch Client object passed in to <StytchProvider /> in your application root.
|
|
9
|
+
*/
|
|
10
|
+
type StytchB2BClient = StytchB2BHeadlessClient | StytchB2BUIClient;
|
|
11
|
+
type SWRMember = {
|
|
12
|
+
/**
|
|
13
|
+
* Either the active {@link Member} object, or null if the member is not logged in.
|
|
14
|
+
*/
|
|
15
|
+
member: Member | null;
|
|
16
|
+
/**
|
|
17
|
+
* If true, indicates that the value returned is from the application cache and a state refresh is in progress.
|
|
18
|
+
*/
|
|
19
|
+
fromCache: boolean;
|
|
20
|
+
};
|
|
21
|
+
type SWRMemberSession = {
|
|
22
|
+
/**
|
|
23
|
+
* Either the active {@link MemberSession} object, or null if the member is not logged in.
|
|
24
|
+
*/
|
|
25
|
+
session: MemberSession | null;
|
|
26
|
+
/**
|
|
27
|
+
* If true, indicates that the value returned is from the application cache and a state refresh is in progress.
|
|
28
|
+
*/
|
|
29
|
+
fromCache: boolean;
|
|
30
|
+
};
|
|
31
|
+
type SWROrganization = {
|
|
32
|
+
/**
|
|
33
|
+
* Either the active {@link Organization} object, or null if the member is not logged in.
|
|
34
|
+
*/
|
|
35
|
+
organization: Organization | null;
|
|
36
|
+
/**
|
|
37
|
+
* If true, indicates that the value returned is from the application cache and a state refresh is in progress.
|
|
38
|
+
*/
|
|
39
|
+
fromCache: boolean;
|
|
40
|
+
};
|
|
41
|
+
declare const useIsMounted__INTERNAL: () => boolean;
|
|
42
|
+
declare const isUIClient: (client: StytchB2BClient) => client is StytchB2BUIClient;
|
|
43
|
+
/**
|
|
44
|
+
* Returns the active Member.
|
|
45
|
+
* Check the fromCache property to determine if the member data is from persistent storage.
|
|
46
|
+
* @example
|
|
47
|
+
* const {member} = useStytchMember();
|
|
48
|
+
* return (<h1>Welcome, {member.name}</h1>);
|
|
49
|
+
* @returns A {@link SWRUser}
|
|
50
|
+
*/
|
|
51
|
+
declare const useStytchMember: () => SWRMember;
|
|
52
|
+
/**
|
|
53
|
+
* Returns the active member's Stytch member session.
|
|
54
|
+
* @example
|
|
55
|
+
* const { session } = useStytchMemberSession();
|
|
56
|
+
* useEffect(() => {
|
|
57
|
+
* if (!session) {
|
|
58
|
+
* router.replace('/login')
|
|
59
|
+
* }
|
|
60
|
+
* }, [session]);
|
|
61
|
+
* @returns A {@link SWRMemberSession}
|
|
62
|
+
*/
|
|
63
|
+
declare const useStytchMemberSession: () => SWRMemberSession;
|
|
64
|
+
/**
|
|
65
|
+
* Returns the active Stytch organization.
|
|
66
|
+
* @example
|
|
67
|
+
* const { organization } = useStytchOrganization();
|
|
68
|
+
* return organization ? <p>Welcome to {organization.organization_name}</p> : <p>Log in to continue!</p>;
|
|
69
|
+
* @returns A {@link SWROrganization}
|
|
70
|
+
*/
|
|
71
|
+
declare const useStytchOrganization: () => SWROrganization;
|
|
72
|
+
type SWRIsAuthorized = {
|
|
73
|
+
/**
|
|
74
|
+
* Whether the logged-in member is allowed to perform the specified action on the specified resource.
|
|
75
|
+
*/
|
|
76
|
+
isAuthorized: boolean;
|
|
77
|
+
/**
|
|
78
|
+
* If true, indicates that the value returned is from the application cache and a state refresh is in progress.
|
|
79
|
+
*/
|
|
80
|
+
fromCache: boolean;
|
|
81
|
+
};
|
|
82
|
+
/**
|
|
83
|
+
* Determines whether the logged-in member is allowed to perform the specified action on the specified resource.
|
|
84
|
+
* Returns `true` if the member can perform the action, `false` otherwise.
|
|
85
|
+
*
|
|
86
|
+
* If the member is not logged in, this method will always return false.
|
|
87
|
+
* If the resource or action provided are not valid for the configured RBAC policy, this method will return false.
|
|
88
|
+
*
|
|
89
|
+
* Remember - authorization checks for sensitive actions should always occur on the backend as well.
|
|
90
|
+
* @example
|
|
91
|
+
* const isAuthorized = useStytchIsAuthorized<Permissions>('documents', 'edit');
|
|
92
|
+
* return <button disabled={!isAuthorized}>Edit</button>
|
|
93
|
+
*/
|
|
94
|
+
declare const useStytchIsAuthorized: (resourceId: string, action: string) => SWRIsAuthorized;
|
|
95
|
+
/**
|
|
96
|
+
* Returns the Stytch B2B client stored in the Stytch context.
|
|
97
|
+
*
|
|
98
|
+
* @example
|
|
99
|
+
* const stytch = useStytchB2BClient();
|
|
100
|
+
* useEffect(() => {
|
|
101
|
+
* stytch.magicLinks.authenticate('...')
|
|
102
|
+
* }, [stytch]);
|
|
103
|
+
*/
|
|
104
|
+
declare const useStytchB2BClient: () => StytchB2BHeadlessClient;
|
|
105
|
+
declare const withStytchB2BClient: <T extends object>(Component: React.ComponentType<T & {
|
|
106
|
+
stytch: StytchB2BHeadlessClient;
|
|
107
|
+
}>) => React.ComponentType<T>;
|
|
108
|
+
declare const withStytchMember: <T extends object>(Component: React.ComponentType<T & {
|
|
109
|
+
stytchMember: Member | null;
|
|
110
|
+
stytchMemberIsFromCache: boolean;
|
|
111
|
+
}>) => React.ComponentType<T>;
|
|
112
|
+
declare const withStytchMemberSession: <T extends object>(Component: React.ComponentType<T & {
|
|
113
|
+
stytchMemberSession: MemberSession | null;
|
|
114
|
+
stytchMemberSessionIsFromCache: boolean;
|
|
115
|
+
}>) => React.ComponentType<T>;
|
|
116
|
+
declare const withStytchOrganization: <T extends object>(Component: React.ComponentType<T & {
|
|
117
|
+
stytchOrganization: Organization | null;
|
|
118
|
+
stytchOrganizationIsFromCache: boolean;
|
|
119
|
+
}>) => React.ComponentType<T>;
|
|
120
|
+
/**
|
|
121
|
+
* Wrap your component with this HOC in order to receive the permissions for the logged-in member.
|
|
122
|
+
* Evaluates all permissions granted to the logged-in member.
|
|
123
|
+
* Returns a Record<RoleId, Record<Action, boolean>> response indicating the member's permissions.
|
|
124
|
+
* Each boolean will be `true` if the member can perform the action, `false` otherwise.
|
|
125
|
+
*
|
|
126
|
+
* If the member is not logged in, all values will be false.
|
|
127
|
+
*
|
|
128
|
+
* Remember - authorization checks for sensitive actions should always occur on the backend as well.
|
|
129
|
+
* @example
|
|
130
|
+
* type Permissions = {
|
|
131
|
+
* document: 'create' | 'read' | 'write
|
|
132
|
+
* image: 'create' | 'read'
|
|
133
|
+
* }
|
|
134
|
+
*
|
|
135
|
+
* const MyComponent = (props) => {
|
|
136
|
+
* const canEditDocuments = props.stytchPermissions.document.edit;
|
|
137
|
+
* const canReadImages = props.stytchPermissions.image.read;
|
|
138
|
+
* }
|
|
139
|
+
* return withStytchPermissions<Permissions>(MyComponent)
|
|
140
|
+
*/
|
|
141
|
+
declare const withStytchPermissions: <Permissions_1 extends Record<string, string>, T extends object>(Component: React.ComponentType<T & {
|
|
142
|
+
stytchPermissions: PermissionsMap<Permissions_1>;
|
|
143
|
+
}>) => React.ComponentType<T>;
|
|
144
|
+
type StytchB2BProviderProps = {
|
|
145
|
+
/**
|
|
146
|
+
* A Stytch client instance {@link StytchB2BHeadlessClient}
|
|
147
|
+
*/
|
|
148
|
+
stytch: StytchB2BClient;
|
|
149
|
+
children?: ReactNode;
|
|
150
|
+
};
|
|
151
|
+
/**
|
|
152
|
+
* The Stytch Context Provider.
|
|
153
|
+
* Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
|
|
154
|
+
* @example
|
|
155
|
+
* const stytch = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
|
|
156
|
+
*
|
|
157
|
+
* ReactDOM.render(
|
|
158
|
+
* <StytchB2BProvider stytch={stytch}>
|
|
159
|
+
* <App />
|
|
160
|
+
* </StytchProvider>,
|
|
161
|
+
* document.getElementById('root'),
|
|
162
|
+
* )
|
|
163
|
+
*/
|
|
164
|
+
declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps) => JSX.Element;
|
|
165
|
+
export { useIsMounted__INTERNAL, isUIClient, useStytchMember, useStytchMemberSession, useStytchOrganization, useStytchIsAuthorized, useStytchB2BClient, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchOrganization, withStytchPermissions, StytchB2BProviderProps, StytchB2BProvider };
|