@stytch/nextjs 13.0.0 → 15.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @stytch/nextjs
 
+## 15.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
+
+## 14.0.0
+
+### Patch Changes
+
+- Updated dependencies [ec1962c]
+  - @stytch/vanilla-js@3.2.0
+
 ## 13.0.0
 
 ### Minor Changes

package/dist/b2b/index.d.ts

@@ -1,3 +1,251 @@
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, } from './StytchB2BContext';
-export { StytchB2B } from './Stytch';
-export type { StytchB2BProviderProps } from './StytchB2BContext';
+/// <reference types="react" />
+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 `_app.js`.
+ * Either a StytchUIClient or StytchHeadlessClient.
+ */
+type StytchB2BClient = StytchB2BHeadlessClient | StytchB2BUIClient;
+type SWRMember = {
+    member: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    member: Member | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
+type SWRMemberSession = {
+    session: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    session: MemberSession | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
+/**
+ * Returns the active member.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the session data is from persistent storage.
+ * See Next's {@link https://nextjs.org/docs/authentication#authenticating-statically-generated-pages documentation} for more.
+ * @example
+ * const {member, isInitialized, fromCache} = useStytchMember();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<h1>Welcome, {member.name}</h1>);
+ */
+declare const useStytchMember: () => SWRMember;
+/**
+ * Returns the member's active Stytch member session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the session data is from persistent storage.
+ * See Next's {@link https://nextjs.org/docs/authentication#authenticating-statically-generated-pages documentation} for more.
+ * @example
+ * const {session, isInitialized, fromCache} = useStytchMemberSession();
+ * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session, isInitialized]);
+ */
+declare const useStytchMemberSession: () => SWRMemberSession;
+type SWRIsAuthorized = {
+    isAuthorized: boolean;
+    fromCache: boolean;
+    isInitialized: 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 client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytch();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+declare const useStytchB2BClient: () => StytchB2BHeadlessClient;
+declare const withStytchB2BClient: <T extends object>(Component: React.ComponentType<T & {
+    stytch: StytchB2BHeadlessClient;
+}>) => React.ComponentType<T>;
+declare const withStytchMember: <T extends object>(Component: React.ComponentType<T & {
+    stytchMember: Member | null;
+    stytchMemberIsInitialized: boolean;
+    stytchMemberIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+declare const withStytchMemberSession: <T extends object>(Component: React.ComponentType<T & {
+    stytchMemberSession: MemberSession | null;
+    stytchMemberSessionIsInitialized: boolean;
+    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>;
+interface StytchB2BProviderProps {
+    /**
+     * A Stytch client instance, created using either {@link createStytchHeadlessClient} or {@link createStytchUIClient}
+     */
+    stytch: StytchB2BClient;
+    children?: ReactNode;
+}
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in `_app.js` in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = createStytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ */
+declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps) => JSX.Element;
+interface StytchB2BProps {
+    /**
+     * An optional {@link StyleConfig} to customize the look and feel of the screen.
+     *
+     * @example
+     * {
+     *    fontFamily: 'Arial, Helvetica, sans-serif',
+     *    width: '360px',
+     *    primaryColor: '#19303D',
+     * }
+     */
+    styles?: StyleConfig;
+    /**
+     * An optional {@link Callbacks} object.
+     *
+     * @example
+     * {
+     *   onError: ({message}) => {
+     *      console.error('Stytch error', message)
+     *   }
+     * }
+     *
+     * @example
+     * {
+     *   onEvent: ({type, data}) => {
+     *     if(type === StytchEventType.B2BMagicLinkAuthenticate) {
+     *       console.log('Logged in with', data);
+     *     }
+     *   }
+     * }
+     */
+    callbacks?: Callbacks;
+    /**
+     * A {@link StytchB2BUIConfig} object. Add products and product-specific config to this object to change the login methods shown.
+     *
+     *
+     * @example
+     * {
+     *   products: ['emailMagicLinks'],
+     *   authFlowType: "Discovery",
+     *   emailMagicLinksOptions: {
+     *     discoveryRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   sessionOptions: {
+     *     sessionDurationMinutes: 60,
+     *   },
+     * }
+     *
+     * @example
+     * {
+     *   products: ['emailMagicLinks', 'sso'],
+     *   authFlowType: "Organization",
+     *   emailMagicLinksOptions: {
+     *     loginRedirectURL: 'https://example.com/authenticate',
+     *     signupRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   ssoOptions: {
+     *     loginRedirectURL: 'https://example.com/authenticate',
+     *     signupRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   sessionOptions: {
+     *     sessionDurationMinutes: 60,
+     *   },
+     * }
+     */
+    config: StytchB2BUIConfig;
+}
+/**
+ * The Stytch B2B UI component.
+ * This component can only be used with a {@link StytchB2BUIClient} client constructor
+ * passed into the {@link StytchB2BProvider}
+ *
+ * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * <StytchB2B
+ *   config={{
+ *     authFlowType: "Organization",
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     ssoOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     sessionOptions: {
+ *       sessionDurationMinutes: 60,
+ *     }
+ *   }}
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * @param props {@link StytchB2BProps}
+ */
+declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchPermissions, StytchB2B };
+export 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 `_app.js`.
@@ -59,6 +60,24 @@ declare const useStytchMember: () => SWRMember;
  * }, [session, isInitialized]);
  */
 declare const useStytchMemberSession: () => SWRMemberSession;
+type SWRIsAuthorized = {
+    isAuthorized: boolean;
+    fromCache: boolean;
+    isInitialized: 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 client stored in the Stytch context.
  *
@@ -68,9 +87,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;
@@ -82,6 +101,30 @@ declare const withStytchMemberSession: <T extends object>(Component: React.Compo
     stytchMemberSessionIsInitialized: boolean;
     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>;
 interface StytchB2BProviderProps {
     /**
      * A Stytch client instance, created using either {@link createStytchHeadlessClient} or {@link createStytchUIClient}
@@ -204,5 +247,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

@@ -89,6 +89,47 @@ 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({
+        isInitialized: false,
+        fromCache: false,
+        isAuthorized: false,
+    });
+    useEffect(() => {
+        if (isStytchSSRProxy(client)) {
+            return;
+        }
+        setIsAuthorized({
+            isInitialized: true,
+            fromCache: true,
+            isAuthorized: client.rbac.isAuthorizedSync(resourceId, action),
+        });
+    }, []);
+    useEffect(() => {
+        if (isStytchSSRProxy(client)) {
+            return;
+        }
+        client.rbac.isAuthorized(resourceId, action).then((isAuthorized) => {
+            setIsAuthorized({ isAuthorized, fromCache: false, isInitialized: true });
+        });
+    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action]);
+    return isAuthorized;
+};
 /**
  * Returns the Stytch client stored in the Stytch context.
  *
@@ -129,6 +170,46 @@ const withStytchMemberSession = (Component) => {
     WithStytchSession.displayName = `withStytchMemberSession(${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 `_app.js` in order to use Stytch everywhere in your app.
@@ -150,7 +231,7 @@ const StytchB2BProvider = ({ stytch, children }) => {
             return;
         }
         setMember({
-            member: stytch.member.getSync(),
+            member: stytch.self.getSync(),
             fromCache: true,
             isInitialized: true,
         });
@@ -159,7 +240,7 @@ const StytchB2BProvider = ({ stytch, children }) => {
             fromCache: true,
             isInitialized: true,
         });
-        const unsubscribeMember = stytch.member.onChange((member) => setMember({ member, fromCache: false, isInitialized: true }));
+        const unsubscribeMember = stytch.self.onChange((member) => setMember({ member, fromCache: false, isInitialized: true }));
         const unsubscribeMemberSession = stytch.session.onChange((session) => setMemberSession({ session, fromCache: false, isInitialized: true }));
         return () => {
             unsubscribeMember();
@@ -232,4 +313,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.headless.d.ts

@@ -1 +1,16 @@
-export * from './createStytchB2BHeadlessClient';
+import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
+/**
+ * Creates a Headless Stytch client object to call the stytch B2B APIs.
+ * The Stytch client is not available serverside.
+ * @example
+ * const stytch = createStytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ * @returns A {@link StytchB2BHeadlessClient}
+ */
+declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient;
+export { createStytchB2BHeadlessClient };