@stytch/nextjs 21.6.1 → 21.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stytch/nextjs
 
+## 21.7.0
+
+### Minor Changes
+
+- 14f8002: Add in Hook and HOC for accessing user roles
+
 ## 21.6.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { Session, StytchProjectConfigurationInput, StytchUIClient, User, Callbacks, StringsOptions, StytchLoginConfig, StyleConfig } from "@stytch/vanilla-js";
-import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+import { Session, StytchProjectConfigurationInput, StytchUIClient, User, Callbacks, StringsOptions, StytchLoginConfig, StyleConfig, IDPConsentScreenManifest } from "@stytch/vanilla-js";
+import { PermissionsMap, StytchHeadlessClient } from "@stytch/vanilla-js/headless";
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your application root.
  * Either a StytchUIClient or StytchHeadlessClient.
@@ -119,6 +119,72 @@ declare const withStytchSession: <T extends object, TAssumeHydrated extends bool
     stytchSessionIsInitialized: boolean;
     stytchSessionIsFromCache: boolean;
 }>) => React.ComponentType<T>;
+type SWRIsAuthorizedUninitialized = {
+    /**
+     * Whether the logged-in user is allowed to perform the specified action on the specified resource.
+     */
+    isAuthorized: false;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: false;
+    /**
+     * If true, indicates that the SDK has completed initialization.
+     */
+    isInitialized: false;
+};
+type SWRIsAuthorizedInitialized = {
+    /**
+     * Whether the logged-in user 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;
+    /**
+     * If true, indicates that the SDK has completed initialization.
+     */
+    isInitialized: boolean;
+};
+type SWRIsAuthorized<TAlwaysInitialized extends boolean> = TAlwaysInitialized extends true ? SWRIsAuthorizedInitialized : SWRIsAuthorizedInitialized | SWRIsAuthorizedUninitialized;
+/**
+ * Determines whether the logged-in user is allowed to perform the specified action on the specified resource.
+ * Returns `true` if the user can perform the action, `false` otherwise.
+ *
+ * If the user 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: <TAssumeHydrated extends boolean = false>(resourceId: string, action: string) => SWRIsAuthorized<TAssumeHydrated>;
+/**
+ * Wrap your component with this HOC in order to receive the permissions for the logged-in user.
+ * Evaluates all permissions granted to the logged-in user.
+ * Returns a Record<RoleId, Record<Action, boolean>> response indicating the user's permissions.
+ * Each boolean will be `true` if the user can perform the action, `false` otherwise.
+ *
+ * If the user 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 StytchProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
      * A Stytch client instance, created using either {@link createStytchHeadlessClient} or {@link createStytchUIClient}
@@ -253,7 +319,16 @@ interface StytchResetPasswordProps<TProjectConfiguration extends StytchProjectCo
      */
     passwordResetToken: string;
 }
-type IdentityProviderProps = Omit<StytchProps, "config">;
+type IDPConsentScreenManifestGenerator = (input: {
+    scopes: string[];
+    clientName: string;
+}) => IDPConsentScreenManifest;
+type IdentityProviderProps = Omit<StytchProps, "config"> & {
+    /**
+     * Optional {@link IDPConsentScreenManifestGenerator} to customize the consent screen.
+     */
+    getIDPConsentManifest?: IDPConsentScreenManifestGenerator;
+};
 /**
  * The Stytch Reset Password component.
  * This component can only be used with a Stytch UI Client
@@ -338,6 +413,6 @@ declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<
  *   }}
  * />
  */
-declare const IdentityProvider: ({ styles, callbacks, strings }: IdentityProviderProps) => React.JSX.Element;
-export { IdentityProvider, StytchLogin, StytchPasskeyRegistration, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+declare const IdentityProvider: ({ styles, callbacks, strings, getIDPConsentManifest }: IdentityProviderProps) => React.JSX.Element;
+export { IdentityProvider, StytchLogin, StytchPasskeyRegistration, StytchPasswordReset, StytchProvider, useStytch, useStytchIsAuthorized, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser, withStytchPermissions };
 export type { StytchProviderProps, IdentityProviderProps, StytchProps, StytchResetPasswordProps };

package/dist/index.esm.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { Session, StytchProjectConfigurationInput, StytchUIClient, User, Callbacks, StringsOptions, StytchLoginConfig, StyleConfig } from "@stytch/vanilla-js";
-import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+import { Session, StytchProjectConfigurationInput, StytchUIClient, User, Callbacks, StringsOptions, StytchLoginConfig, StyleConfig, IDPConsentScreenManifest } from "@stytch/vanilla-js";
+import { PermissionsMap, StytchHeadlessClient } from "@stytch/vanilla-js/headless";
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your application root.
  * Either a StytchUIClient or StytchHeadlessClient.
@@ -119,6 +119,72 @@ declare const withStytchSession: <T extends object, TAssumeHydrated extends bool
     stytchSessionIsInitialized: boolean;
     stytchSessionIsFromCache: boolean;
 }>) => React.ComponentType<T>;
+type SWRIsAuthorizedUninitialized = {
+    /**
+     * Whether the logged-in user is allowed to perform the specified action on the specified resource.
+     */
+    isAuthorized: false;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: false;
+    /**
+     * If true, indicates that the SDK has completed initialization.
+     */
+    isInitialized: false;
+};
+type SWRIsAuthorizedInitialized = {
+    /**
+     * Whether the logged-in user 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;
+    /**
+     * If true, indicates that the SDK has completed initialization.
+     */
+    isInitialized: boolean;
+};
+type SWRIsAuthorized<TAlwaysInitialized extends boolean> = TAlwaysInitialized extends true ? SWRIsAuthorizedInitialized : SWRIsAuthorizedInitialized | SWRIsAuthorizedUninitialized;
+/**
+ * Determines whether the logged-in user is allowed to perform the specified action on the specified resource.
+ * Returns `true` if the user can perform the action, `false` otherwise.
+ *
+ * If the user 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: <TAssumeHydrated extends boolean = false>(resourceId: string, action: string) => SWRIsAuthorized<TAssumeHydrated>;
+/**
+ * Wrap your component with this HOC in order to receive the permissions for the logged-in user.
+ * Evaluates all permissions granted to the logged-in user.
+ * Returns a Record<RoleId, Record<Action, boolean>> response indicating the user's permissions.
+ * Each boolean will be `true` if the user can perform the action, `false` otherwise.
+ *
+ * If the user 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 StytchProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
      * A Stytch client instance, created using either {@link createStytchHeadlessClient} or {@link createStytchUIClient}
@@ -253,7 +319,16 @@ interface StytchResetPasswordProps<TProjectConfiguration extends StytchProjectCo
      */
     passwordResetToken: string;
 }
-type IdentityProviderProps = Omit<StytchProps, "config">;
+type IDPConsentScreenManifestGenerator = (input: {
+    scopes: string[];
+    clientName: string;
+}) => IDPConsentScreenManifest;
+type IdentityProviderProps = Omit<StytchProps, "config"> & {
+    /**
+     * Optional {@link IDPConsentScreenManifestGenerator} to customize the consent screen.
+     */
+    getIDPConsentManifest?: IDPConsentScreenManifestGenerator;
+};
 /**
  * The Stytch Reset Password component.
  * This component can only be used with a Stytch UI Client
@@ -338,6 +413,6 @@ declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<
  *   }}
  * />
  */
-declare const IdentityProvider: ({ styles, callbacks, strings }: IdentityProviderProps) => React.JSX.Element;
-export { IdentityProvider, StytchLogin, StytchPasskeyRegistration, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+declare const IdentityProvider: ({ styles, callbacks, strings, getIDPConsentManifest }: IdentityProviderProps) => React.JSX.Element;
+export { IdentityProvider, StytchLogin, StytchPasskeyRegistration, StytchPasswordReset, StytchProvider, useStytch, useStytchIsAuthorized, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser, withStytchPermissions };
 export type { StytchProviderProps, IdentityProviderProps, StytchProps, StytchResetPasswordProps };

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo, useCallback, useRef, useEffect } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useCallback, useRef } from 'react';
 import { i as invariant, u as useAsyncState, m as mergeWithStableProps, a as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-681e2138.js';
 import { i as isStytchSSRProxy, n as noProviderError, p as providerMustBeUniqueError, a as noHeadlessClientError } from './StytchSSRProxy-34c789b5.js';
 
@@ -95,6 +95,87 @@ const withStytchSession = (Component) => {
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
 };
+/**
+ * Determines whether the logged-in user is allowed to perform the specified action on the specified resource.
+ * Returns `true` if the user can perform the action, `false` otherwise.
+ *
+ * If the user 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', 'StytchProvider'));
+    const client = useStytch();
+    const { user } = useStytchUser();
+    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),
+        });
+    }, [action, client, resourceId, setIsAuthorized]);
+    useEffect(() => {
+        if (isStytchSSRProxy(client)) {
+            return;
+        }
+        client.rbac.isAuthorized(resourceId, action).then((isAuthorized) => {
+            setIsAuthorized({ isAuthorized, fromCache: false, isInitialized: true });
+        });
+    }, [client, user === null || user === void 0 ? void 0 : user.roles, resourceId, action, setIsAuthorized]);
+    return isAuthorized;
+};
+/**
+ * Wrap your component with this HOC in order to receive the permissions for the logged-in user.
+ * Evaluates all permissions granted to the logged-in user.
+ * Returns a Record<RoleId, Record<Action, boolean>> response indicating the user's permissions.
+ * Each boolean will be `true` if the user can perform the action, `false` otherwise.
+ *
+ * If the user 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', 'StytchProvider'));
+        const client = useStytch();
+        const { user } = useStytchUser();
+        const [permissions, setPermissions] = useAsyncState({ loaded: false, value: null });
+        useEffect(() => {
+            client.rbac.allPermissions().then((permissions) => {
+                setPermissions({ loaded: true, value: permissions });
+            });
+        }, [client, user === null || user === void 0 ? void 0 : user.roles, setPermissions]);
+        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 order to use Stytch everywhere in your app.
@@ -334,7 +415,7 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, strings, }) => {
  *   }}
  * />
  */
-const IdentityProvider = ({ styles, callbacks, strings }) => {
+const IdentityProvider = ({ styles, callbacks, strings, getIDPConsentManifest }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<IdentityProvider />'));
     const stytchClient = useStytch();
     const user = useStytchUser();
@@ -355,9 +436,10 @@ const IdentityProvider = ({ styles, callbacks, strings }) => {
             elementId: `#${containerEl.current.id}`,
             styles,
             strings,
+            getIDPConsentManifest,
         });
-    }, [stytchClient, styles, callbacks, user, strings]);
+    }, [stytchClient, styles, callbacks, user, strings, getIDPConsentManifest]);
     return React.createElement("div", { ref: containerEl });
 };
 
-export { IdentityProvider, StytchLogin, StytchPasskeyRegistration, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+export { IdentityProvider, StytchLogin, StytchPasskeyRegistration, StytchPasswordReset, StytchProvider, useStytch, useStytchIsAuthorized, useStytchSession, useStytchUser, withStytch, withStytchPermissions, withStytchSession, withStytchUser };

package/dist/index.js

@@ -103,6 +103,87 @@ const withStytchSession = (Component) => {
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
 };
+/**
+ * Determines whether the logged-in user is allowed to perform the specified action on the specified resource.
+ * Returns `true` if the user can perform the action, `false` otherwise.
+ *
+ * If the user 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) => {
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchIsAuthorized', 'StytchProvider'));
+    const client = useStytch();
+    const { user } = useStytchUser();
+    const [isAuthorized, setIsAuthorized] = useIsomorphicLayoutEffect.useAsyncState({
+        isInitialized: false,
+        fromCache: false,
+        isAuthorized: false,
+    });
+    React.useEffect(() => {
+        if (StytchSSRProxy.isStytchSSRProxy(client)) {
+            return;
+        }
+        setIsAuthorized({
+            isInitialized: true,
+            fromCache: true,
+            isAuthorized: client.rbac.isAuthorizedSync(resourceId, action),
+        });
+    }, [action, client, resourceId, setIsAuthorized]);
+    React.useEffect(() => {
+        if (StytchSSRProxy.isStytchSSRProxy(client)) {
+            return;
+        }
+        client.rbac.isAuthorized(resourceId, action).then((isAuthorized) => {
+            setIsAuthorized({ isAuthorized, fromCache: false, isInitialized: true });
+        });
+    }, [client, user === null || user === void 0 ? void 0 : user.roles, resourceId, action, setIsAuthorized]);
+    return isAuthorized;
+};
+/**
+ * Wrap your component with this HOC in order to receive the permissions for the logged-in user.
+ * Evaluates all permissions granted to the logged-in user.
+ * Returns a Record<RoleId, Record<Action, boolean>> response indicating the user's permissions.
+ * Each boolean will be `true` if the user can perform the action, `false` otherwise.
+ *
+ * If the user 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) => {
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useRBACPermissions', 'StytchProvider'));
+        const client = useStytch();
+        const { user } = useStytchUser();
+        const [permissions, setPermissions] = useIsomorphicLayoutEffect.useAsyncState({ loaded: false, value: null });
+        React.useEffect(() => {
+            client.rbac.allPermissions().then((permissions) => {
+                setPermissions({ loaded: true, value: permissions });
+            });
+        }, [client, user === null || user === void 0 ? void 0 : user.roles, setPermissions]);
+        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 order to use Stytch everywhere in your app.
@@ -342,7 +423,7 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, strings, }) => {
  *   }}
  * />
  */
-const IdentityProvider = ({ styles, callbacks, strings }) => {
+const IdentityProvider = ({ styles, callbacks, strings, getIDPConsentManifest }) => {
     useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<IdentityProvider />'));
     const stytchClient = useStytch();
     const user = useStytchUser();
@@ -363,8 +444,9 @@ const IdentityProvider = ({ styles, callbacks, strings }) => {
             elementId: `#${containerEl.current.id}`,
             styles,
             strings,
+            getIDPConsentManifest,
         });
-    }, [stytchClient, styles, callbacks, user, strings]);
+    }, [stytchClient, styles, callbacks, user, strings, getIDPConsentManifest]);
     return React__default["default"].createElement("div", { ref: containerEl });
 };
 
@@ -374,8 +456,10 @@ exports.StytchPasskeyRegistration = StytchPasskeyRegistration;
 exports.StytchPasswordReset = StytchPasswordReset;
 exports.StytchProvider = StytchProvider;
 exports.useStytch = useStytch;
+exports.useStytchIsAuthorized = useStytchIsAuthorized;
 exports.useStytchSession = useStytchSession;
 exports.useStytchUser = useStytchUser;
 exports.withStytch = withStytch;
+exports.withStytchPermissions = withStytchPermissions;
 exports.withStytchSession = withStytchSession;
 exports.withStytchUser = withStytchUser;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/nextjs",
-  "version": "21.6.1",
+  "version": "21.7.0",
   "description": "Stytch's official Next.js Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -24,7 +24,7 @@
     "@babel/runtime": "7.27.1",
     "@stytch/internal-tsconfigs": "0.0.0",
     "@stytch/js-utils": "0.0.1",
-    "@stytch/vanilla-js": "5.25.2",
+    "@stytch/vanilla-js": "5.29.0",
     "@testing-library/react": "14.0.0",
     "@types/jest": "29.5.14",
     "eslint-config-custom": "0.0.1",