@stytch/react 12.0.0 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @stytch/react
 
+## 13.0.0
+
+### Minor Changes
+
+- 6890694: Mark stytch.member as deprecated in favor of stytch.self
+  Adds RBAC functionality
+
+### Patch Changes
+
+- Updated dependencies [9ee61b3]
+- Updated dependencies [c3c108b]
+- Updated dependencies [6890694]
+  - @stytch/vanilla-js@3.3.0
+
 ## 12.0.0
 
 ### Patch Changes

package/dist/b2b/index.d.ts

@@ -3,6 +3,7 @@ import React from "react";
 import { ReactNode } from "react";
 import { Member, MemberSession, 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";
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your application root.
@@ -49,6 +50,29 @@ declare const useStytchMember: () => SWRMember;
  * @returns A {@link SWRMemberSession}
  */
 declare const useStytchMemberSession: () => SWRMemberSession;
+type SWRIsAuthorized = {
+    /**
+     * Whether the logged-in member is allowed to perform the specified action on the specified resource.
+     */
+    isAuthorized: boolean;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+/**
+ * Determines whether the logged-in member is allowed to perform the specified action on the specified resource.
+ * Returns `true` if the member can perform the action, `false` otherwise.
+ *
+ * If the member is not logged in, this method will always return false.
+ * If the resource or action provided are not valid for the configured RBAC policy, this method will return false.
+ *
+ * Remember - authorization checks for sensitive actions should always occur on the backend as well.
+ * @example
+ * const isAuthorized = useStytchIsAuthorized<Permissions>('documents', 'edit');
+ * return <button disabled={!isAuthorized}>Edit</button>
+ */
+declare const useStytchIsAuthorized: (resourceId: string, action: string) => SWRIsAuthorized;
 /**
  * Returns the Stytch B2B client stored in the Stytch context.
  *
@@ -58,9 +82,9 @@ declare const useStytchMemberSession: () => SWRMemberSession;
  *   stytch.magicLinks.authenticate('...')
  * }, [stytch]);
  */
-declare const useStytchB2BClient: () => StytchB2BClient;
+declare const useStytchB2BClient: () => StytchB2BHeadlessClient;
 declare const withStytchB2BClient: <T extends object>(Component: React.ComponentType<T & {
-    stytch: StytchB2BClient;
+    stytch: StytchB2BHeadlessClient;
 }>) => React.ComponentType<T>;
 declare const withStytchMember: <T extends object>(Component: React.ComponentType<T & {
     stytchMember: Member | null;
@@ -70,6 +94,30 @@ declare const withStytchMemberSession: <T extends object>(Component: React.Compo
     stytchMemberSession: MemberSession | null;
     stytchMemberSessionIsFromCache: 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.
+ * Returns a Record<RoleId, Record<Action, boolean>> response indicating the member's permissions.
+ * Each boolean will be `true` if the member can perform the action, `false` otherwise.
+ *
+ * If the member is not logged in, all values will be false.
+ *
+ * Remember - authorization checks for sensitive actions should always occur on the backend as well.
+ * @example
+ * type Permissions = {
+ *   document: 'create' | 'read' | 'write
+ *   image: 'create' | 'read'
+ * }
+ *
+ * const MyComponent = (props) => {
+ *   const canEditDocuments = props.stytchPermissions.document.edit;
+ *   const canReadImages = props.stytchPermissions.image.read;
+ * }
+ * return withStytchPermissions<Permissions>(MyComponent)
+ */
+declare const withStytchPermissions: <Permissions_1 extends Record<string, string>, T extends object>(Component: React.ComponentType<T & {
+    stytchPermissions: PermissionsMap<Permissions_1>;
+}>) => React.ComponentType<T>;
 type StytchB2BProviderProps = {
     /**
      * A Stytch client instance {@link StytchB2BHeadlessClient}
@@ -193,5 +241,5 @@ interface StytchB2BProps {
  * @param props {@link StytchB2BProps}
  */
 declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, StytchB2B };
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchPermissions, StytchB2B };
 export type { StytchB2BProviderProps };

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

@@ -3,6 +3,7 @@ import React from "react";
 import { ReactNode } from "react";
 import { Member, MemberSession, 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";
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your application root.
@@ -49,6 +50,29 @@ declare const useStytchMember: () => SWRMember;
  * @returns A {@link SWRMemberSession}
  */
 declare const useStytchMemberSession: () => SWRMemberSession;
+type SWRIsAuthorized = {
+    /**
+     * Whether the logged-in member is allowed to perform the specified action on the specified resource.
+     */
+    isAuthorized: boolean;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+/**
+ * Determines whether the logged-in member is allowed to perform the specified action on the specified resource.
+ * Returns `true` if the member can perform the action, `false` otherwise.
+ *
+ * If the member is not logged in, this method will always return false.
+ * If the resource or action provided are not valid for the configured RBAC policy, this method will return false.
+ *
+ * Remember - authorization checks for sensitive actions should always occur on the backend as well.
+ * @example
+ * const isAuthorized = useStytchIsAuthorized<Permissions>('documents', 'edit');
+ * return <button disabled={!isAuthorized}>Edit</button>
+ */
+declare const useStytchIsAuthorized: (resourceId: string, action: string) => SWRIsAuthorized;
 /**
  * Returns the Stytch B2B client stored in the Stytch context.
  *
@@ -58,9 +82,9 @@ declare const useStytchMemberSession: () => SWRMemberSession;
  *   stytch.magicLinks.authenticate('...')
  * }, [stytch]);
  */
-declare const useStytchB2BClient: () => StytchB2BClient;
+declare const useStytchB2BClient: () => StytchB2BHeadlessClient;
 declare const withStytchB2BClient: <T extends object>(Component: React.ComponentType<T & {
-    stytch: StytchB2BClient;
+    stytch: StytchB2BHeadlessClient;
 }>) => React.ComponentType<T>;
 declare const withStytchMember: <T extends object>(Component: React.ComponentType<T & {
     stytchMember: Member | null;
@@ -70,6 +94,30 @@ declare const withStytchMemberSession: <T extends object>(Component: React.Compo
     stytchMemberSession: MemberSession | null;
     stytchMemberSessionIsFromCache: 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.
+ * Returns a Record<RoleId, Record<Action, boolean>> response indicating the member's permissions.
+ * Each boolean will be `true` if the member can perform the action, `false` otherwise.
+ *
+ * If the member is not logged in, all values will be false.
+ *
+ * Remember - authorization checks for sensitive actions should always occur on the backend as well.
+ * @example
+ * type Permissions = {
+ *   document: 'create' | 'read' | 'write
+ *   image: 'create' | 'read'
+ * }
+ *
+ * const MyComponent = (props) => {
+ *   const canEditDocuments = props.stytchPermissions.document.edit;
+ *   const canReadImages = props.stytchPermissions.image.read;
+ * }
+ * return withStytchPermissions<Permissions>(MyComponent)
+ */
+declare const withStytchPermissions: <Permissions_1 extends Record<string, string>, T extends object>(Component: React.ComponentType<T & {
+    stytchPermissions: PermissionsMap<Permissions_1>;
+}>) => React.ComponentType<T>;
 type StytchB2BProviderProps = {
     /**
      * A Stytch client instance {@link StytchB2BHeadlessClient}
@@ -193,5 +241,5 @@ interface StytchB2BProps {
  * @param props {@link StytchB2BProps}
  */
 declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, StytchB2B };
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchPermissions, StytchB2B };
 export type { StytchB2BProviderProps };

package/dist/b2b/index.esm.js

@@ -75,6 +75,34 @@ const useStytchMemberSession = () => {
     invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
     return useContext(StytchMemberSessionContext);
 };
+/**
+ * Determines whether the logged-in member is allowed to perform the specified action on the specified resource.
+ * Returns `true` if the member can perform the action, `false` otherwise.
+ *
+ * If the member is not logged in, this method will always return false.
+ * If the resource or action provided are not valid for the configured RBAC policy, this method will return false.
+ *
+ * Remember - authorization checks for sensitive actions should always occur on the backend as well.
+ * @example
+ * const isAuthorized = useStytchIsAuthorized<Permissions>('documents', 'edit');
+ * return <button disabled={!isAuthorized}>Edit</button>
+ */
+const useStytchIsAuthorized = (resourceId, action) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchIsAuthorized', 'StytchB2BProvider'));
+    const client = useStytchB2BClient();
+    const { session } = useStytchMemberSession();
+    const [isAuthorized, setIsAuthorized] = useAsyncState({
+        fromCache: true,
+        isAuthorized: client.rbac.isAuthorizedSync(resourceId, action),
+    });
+    useEffect(() => {
+        client.rbac.isAuthorized(resourceId, action).then((isAuthorized) => setIsAuthorized({
+            fromCache: false,
+            isAuthorized,
+        }));
+    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action]);
+    return isAuthorized;
+};
 /**
  * Returns the Stytch B2B client stored in the Stytch context.
  *
@@ -115,6 +143,46 @@ const withStytchMemberSession = (Component) => {
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
 };
+/**
+ * Wrap your component with this HOC in order to receive the permissions for the logged-in member.
+ * Evaluates all permissions granted to the logged-in member.
+ * Returns a Record<RoleId, Record<Action, boolean>> response indicating the member's permissions.
+ * Each boolean will be `true` if the member can perform the action, `false` otherwise.
+ *
+ * If the member is not logged in, all values will be false.
+ *
+ * Remember - authorization checks for sensitive actions should always occur on the backend as well.
+ * @example
+ * type Permissions = {
+ *   document: 'create' | 'read' | 'write
+ *   image: 'create' | 'read'
+ * }
+ *
+ * const MyComponent = (props) => {
+ *   const canEditDocuments = props.stytchPermissions.document.edit;
+ *   const canReadImages = props.stytchPermissions.image.read;
+ * }
+ * return withStytchPermissions<Permissions>(MyComponent)
+ */
+const withStytchPermissions = (Component) => {
+    const WithStytchPermissions = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('useRBACPermissions', 'StytchB2BProvider'));
+        const client = useStytchB2BClient();
+        const { session } = useStytchMemberSession();
+        const [permissions, setPermissions] = useAsyncState({ loaded: false, value: null });
+        useEffect(() => {
+            client.rbac
+                .allPermissions()
+                .then((permissions) => setPermissions({ loaded: true, value: permissions }));
+        }, [client, session === null || session === void 0 ? void 0 : session.roles]);
+        if (!permissions.loaded) {
+            return null;
+        }
+        return React.createElement(Component, Object.assign({}, props, { stytchPermissions: permissions.value }));
+    };
+    WithStytchPermissions.displayName = `withStytchPermissions(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchPermissions;
+};
 /**
  * The Stytch Context Provider.
  * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
@@ -133,7 +201,7 @@ const StytchB2BProvider = ({ stytch, children }) => {
     invariant(typeof window !== 'undefined', noSSRError);
     const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
     const [member, setMember] = useAsyncState({
-        member: stytch.member.getSync(),
+        member: stytch.self.getSync(),
         fromCache: true,
     });
     const [session, setMemberSession] = useAsyncState({
@@ -141,7 +209,7 @@ const StytchB2BProvider = ({ stytch, children }) => {
         fromCache: true,
     });
     useEffect(() => {
-        const unsubscribeMember = stytch.member.onChange((member) => setMember({
+        const unsubscribeMember = stytch.self.onChange((member) => setMember({
             member,
             fromCache: false,
         }));
@@ -221,4 +289,4 @@ const StytchB2B = ({ styles, callbacks, config }) => {
     return React.createElement("div", { ref: containerEl });
 };
 
-export { StytchB2B, StytchB2BProvider, useStytchB2BClient, useStytchMember, useStytchMemberSession, withStytchB2BClient, withStytchMember, withStytchMemberSession };
+export { StytchB2B, StytchB2BProvider, useStytchB2BClient, useStytchIsAuthorized, useStytchMember, useStytchMemberSession, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchPermissions };

package/dist/b2b/index.js

@@ -83,6 +83,34 @@ const useStytchMemberSession = () => {
     invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
     return React.useContext(StytchMemberSessionContext);
 };
+/**
+ * Determines whether the logged-in member is allowed to perform the specified action on the specified resource.
+ * Returns `true` if the member can perform the action, `false` otherwise.
+ *
+ * If the member is not logged in, this method will always return false.
+ * If the resource or action provided are not valid for the configured RBAC policy, this method will return false.
+ *
+ * Remember - authorization checks for sensitive actions should always occur on the backend as well.
+ * @example
+ * const isAuthorized = useStytchIsAuthorized<Permissions>('documents', 'edit');
+ * return <button disabled={!isAuthorized}>Edit</button>
+ */
+const useStytchIsAuthorized = (resourceId, action) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchIsAuthorized', 'StytchB2BProvider'));
+    const client = useStytchB2BClient();
+    const { session } = useStytchMemberSession();
+    const [isAuthorized, setIsAuthorized] = useAsyncState({
+        fromCache: true,
+        isAuthorized: client.rbac.isAuthorizedSync(resourceId, action),
+    });
+    React.useEffect(() => {
+        client.rbac.isAuthorized(resourceId, action).then((isAuthorized) => setIsAuthorized({
+            fromCache: false,
+            isAuthorized,
+        }));
+    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action]);
+    return isAuthorized;
+};
 /**
  * Returns the Stytch B2B client stored in the Stytch context.
  *
@@ -123,6 +151,46 @@ const withStytchMemberSession = (Component) => {
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
 };
+/**
+ * Wrap your component with this HOC in order to receive the permissions for the logged-in member.
+ * Evaluates all permissions granted to the logged-in member.
+ * Returns a Record<RoleId, Record<Action, boolean>> response indicating the member's permissions.
+ * Each boolean will be `true` if the member can perform the action, `false` otherwise.
+ *
+ * If the member is not logged in, all values will be false.
+ *
+ * Remember - authorization checks for sensitive actions should always occur on the backend as well.
+ * @example
+ * type Permissions = {
+ *   document: 'create' | 'read' | 'write
+ *   image: 'create' | 'read'
+ * }
+ *
+ * const MyComponent = (props) => {
+ *   const canEditDocuments = props.stytchPermissions.document.edit;
+ *   const canReadImages = props.stytchPermissions.image.read;
+ * }
+ * return withStytchPermissions<Permissions>(MyComponent)
+ */
+const withStytchPermissions = (Component) => {
+    const WithStytchPermissions = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('useRBACPermissions', 'StytchB2BProvider'));
+        const client = useStytchB2BClient();
+        const { session } = useStytchMemberSession();
+        const [permissions, setPermissions] = useAsyncState({ loaded: false, value: null });
+        React.useEffect(() => {
+            client.rbac
+                .allPermissions()
+                .then((permissions) => setPermissions({ loaded: true, value: permissions }));
+        }, [client, session === null || session === void 0 ? void 0 : session.roles]);
+        if (!permissions.loaded) {
+            return null;
+        }
+        return React__default['default'].createElement(Component, Object.assign({}, props, { stytchPermissions: permissions.value }));
+    };
+    WithStytchPermissions.displayName = `withStytchPermissions(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchPermissions;
+};
 /**
  * The Stytch Context Provider.
  * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
@@ -141,7 +209,7 @@ const StytchB2BProvider = ({ stytch, children }) => {
     invariant(typeof window !== 'undefined', noSSRError);
     const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
     const [member, setMember] = useAsyncState({
-        member: stytch.member.getSync(),
+        member: stytch.self.getSync(),
         fromCache: true,
     });
     const [session, setMemberSession] = useAsyncState({
@@ -149,7 +217,7 @@ const StytchB2BProvider = ({ stytch, children }) => {
         fromCache: true,
     });
     React.useEffect(() => {
-        const unsubscribeMember = stytch.member.onChange((member) => setMember({
+        const unsubscribeMember = stytch.self.onChange((member) => setMember({
             member,
             fromCache: false,
         }));
@@ -232,8 +300,10 @@ const StytchB2B = ({ styles, callbacks, config }) => {
 exports.StytchB2B = StytchB2B;
 exports.StytchB2BProvider = StytchB2BProvider;
 exports.useStytchB2BClient = useStytchB2BClient;
+exports.useStytchIsAuthorized = useStytchIsAuthorized;
 exports.useStytchMember = useStytchMember;
 exports.useStytchMemberSession = useStytchMemberSession;
 exports.withStytchB2BClient = withStytchB2BClient;
 exports.withStytchMember = withStytchMember;
 exports.withStytchMemberSession = withStytchMemberSession;
+exports.withStytchPermissions = withStytchPermissions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/react",
-  "version": "12.0.0",
+  "version": "13.0.0",
   "description": "Stytch's official React Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -33,7 +33,7 @@
   ],
   "devDependencies": {
     "@babel/runtime": "7.18.6",
-    "@stytch/vanilla-js": "3.2.0",
+    "@stytch/vanilla-js": "3.3.0",
     "@testing-library/react": "14.0.0",
     "eslint-config-custom": "0.0.1",
     "react-test-renderer": "18.0.0",
@@ -41,7 +41,7 @@
     "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "@stytch/vanilla-js": "^3.2.0",
+    "@stytch/vanilla-js": "^3.3.0",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   }