@stytch/nextjs 19.0.0 → 20.1.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @stytch/nextjs
 
+## 20.1.0
+
+### Minor Changes
+
+- a99f21b8: Add `AdminPortalSSO` component to `@stytch/nextjs/b2b/adminPortal`
+
+### Patch Changes
+
+- Updated dependencies [0f448e7e]
+- Updated dependencies [a99f21b8]
+  - @stytch/vanilla-js@4.13.0
+
+## 20.0.0
+
+### Patch Changes
+
+- Updated dependencies [cbab0c30]
+  - @stytch/vanilla-js@4.12.0
+
 ## 19.0.0
 
 ### Major Changes

package/README.md

@@ -25,7 +25,7 @@ import { createStytchB2BUIClient } from '@stytch/nextjs/b2b/ui';
 import { createStytchB2BHeadlessClient } from '@stytch/nextjs/b2b/headless';
 ```
 
-For full documentation please refer to Stytch's javascript SDK documentation on https://stytch.com/docs/sdks.
+For full documentation please refer to Stytch's javascript SDK documentation on https://stytch.com/docs/sdks/javascript-sdk.
 
 ## Example Usage
 

package/b2b/adminPortal/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../../dist/adminPortal/index.js",
+  "module": "../../dist/adminPortal/index.esm.js",
+  "types": "../../dist/adminPortal/index.d.ts"
+}

package/dist/StytchB2BContext-162fadb4.d.ts

@@ -0,0 +1,177 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { Member, MemberSession, Organization, StytchB2BUIClient } from '@stytch/vanilla-js/b2b';
+import { StytchB2BHeadlessClient } from '@stytch/vanilla-js/b2b/headless';
+import { PermissionsMap } from '@stytch/core/public';
+/**
+ * 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;
+};
+type SWROrganization = {
+    organization: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    organization: Organization | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
+declare const useIsMounted__INTERNAL: () => boolean;
+declare const isUIClient: (client: StytchB2BClient) => client is StytchB2BUIClient;
+/**
+ * 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;
+/**
+ * Returns the active Stytch organization.
+ * 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 {organization, isInitialized, fromCache} = useStytchOrganization();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<p>Welcome to {organization.organization_name}</p>);
+ */
+declare const useStytchOrganization: () => SWROrganization;
+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>;
+declare const withStytchOrganization: <T extends object>(Component: React.ComponentType<T & {
+    stytchOrganization: Organization | null;
+    stytchOrganizationIsInitialized: boolean;
+    stytchOrganizationIsFromCache: 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;
+export { useIsMounted__INTERNAL, isUIClient, useStytchMember, useStytchMemberSession, useStytchOrganization, useStytchIsAuthorized, useStytchB2BClient, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchOrganization, withStytchPermissions, StytchB2BProviderProps, StytchB2BProvider };

package/dist/StytchB2BContext-162fadb4.js

@@ -0,0 +1,258 @@
+import React, { createContext, useContext, useEffect, useMemo } from 'react';
+import { i as isStytchSSRProxy, n as noProviderError } from './StytchSSRProxy-14916009.js';
+import { i as invariant, u as useAsyncState, m as mergeWithStableProps } from './async-b1e10055.js';
+
+const initialMember = {
+    member: null,
+    fromCache: false,
+    isInitialized: false,
+};
+const initialMemberSession = {
+    session: null,
+    fromCache: false,
+    isInitialized: false,
+};
+const initialOrganization = {
+    organization: null,
+    fromCache: false,
+    isInitialized: false,
+};
+const StytchContext = createContext({ isMounted: false });
+const StytchMemberContext = createContext(initialMember);
+const StytchMemberSessionContext = createContext(initialMemberSession);
+const StytchOrganizationContext = createContext(initialOrganization);
+const useIsMounted__INTERNAL = () => useContext(StytchContext).isMounted;
+const isUIClient = (client) => {
+    return client.mount !== undefined;
+};
+/**
+ * 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>);
+ */
+const useStytchMember = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMember', 'StytchB2BProvider'));
+    return useContext(StytchMemberContext);
+};
+/**
+ * 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]);
+ */
+const useStytchMemberSession = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
+    return useContext(StytchMemberSessionContext);
+};
+/**
+ * Returns the active Stytch organization.
+ * 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 {organization, isInitialized, fromCache} = useStytchOrganization();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<p>Welcome to {organization.organization_name}</p>);
+ */
+const useStytchOrganization = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchOrganization', 'StytchB2BProvider'));
+    return useContext(StytchOrganizationContext);
+};
+/**
+ * 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),
+        });
+    }, [action, client, resourceId, setIsAuthorized]);
+    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, setIsAuthorized]);
+    return isAuthorized;
+};
+/**
+ * Returns the Stytch client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytch();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+const useStytchB2BClient = () => {
+    const ctx = useContext(StytchContext);
+    invariant(ctx.isMounted, noProviderError('useStytchB2BClient', 'StytchB2BProvider'));
+    return ctx.client;
+};
+const withStytchB2BClient = (Component) => {
+    const WithStytch = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchB2BClient', 'StytchB2BProvider'));
+        return React.createElement(Component, Object.assign({}, props, { stytch: useStytchB2BClient() }));
+    };
+    WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytch;
+};
+const withStytchMember = (Component) => {
+    const WithStytchUser = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchMember', 'StytchB2BProvider'));
+        const { member, isInitialized, fromCache } = useStytchMember();
+        return (React.createElement(Component, Object.assign({}, props, { stytchMember: member, stytchMemberIsInitialized: isInitialized, stytchMemberIsFromCache: fromCache })));
+    };
+    WithStytchUser.displayName = `withStytchMember(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchUser;
+};
+const withStytchMemberSession = (Component) => {
+    const WithStytchSession = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchMemberSession', 'StytchB2BProvider'));
+        const { session, isInitialized, fromCache } = useStytchMemberSession();
+        return (React.createElement(Component, Object.assign({}, props, { stytchMemberSession: session, stytchMemberSessionIsInitialized: isInitialized, stytchMemberSessionIsFromCache: fromCache })));
+    };
+    WithStytchSession.displayName = `withStytchMemberSession(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchSession;
+};
+const withStytchOrganization = (Component) => {
+    const WithStytchOrganization = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchOrganization', 'StytchB2BProvider'));
+        const { organization, isInitialized, fromCache } = useStytchOrganization();
+        return (React.createElement(Component, Object.assign({}, props, { stytchOrganization: organization, stytchOrganizationIsInitialized: isInitialized, stytchOrganizationIsFromCache: fromCache })));
+    };
+    WithStytchOrganization.displayName = `withStytchOrganization(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchOrganization;
+};
+/**
+ * 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, 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 `_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>
+ * )
+ */
+const StytchB2BProvider = ({ stytch, children }) => {
+    const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
+    const [{ member, session, organization }, setClientState] = useAsyncState({
+        member: initialMember,
+        session: initialMemberSession,
+        organization: initialOrganization,
+    });
+    useEffect(() => {
+        if (isStytchSSRProxy(stytch)) {
+            return;
+        }
+        setClientState({
+            member: Object.assign(Object.assign({}, stytch.self.getInfo()), { isInitialized: true }),
+            session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
+            organization: Object.assign(Object.assign({}, stytch.organization.getInfo()), { isInitialized: true }),
+        });
+        return stytch.onStateChange(() => {
+            setClientState((oldState) => {
+                const newState = {
+                    member: Object.assign(Object.assign({}, stytch.self.getInfo()), { isInitialized: true }),
+                    session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
+                    organization: Object.assign(Object.assign({}, stytch.organization.getInfo()), { isInitialized: true }),
+                };
+                return mergeWithStableProps(oldState, newState);
+            });
+        });
+    }, [setClientState, stytch]);
+    return (React.createElement(StytchContext.Provider, { value: ctx },
+        React.createElement(StytchOrganizationContext.Provider, { value: organization },
+            React.createElement(StytchMemberContext.Provider, { value: member },
+                React.createElement(StytchMemberSessionContext.Provider, { value: session }, children)))));
+};
+
+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 };

package/dist/StytchB2BContext-82437b10.d.ts

@@ -0,0 +1,177 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { Member, MemberSession, Organization, StytchB2BUIClient } from '@stytch/vanilla-js/b2b';
+import { StytchB2BHeadlessClient } from '@stytch/vanilla-js/b2b/headless';
+import { PermissionsMap } from '@stytch/core/public';
+/**
+ * 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;
+};
+type SWROrganization = {
+    organization: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    organization: Organization | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
+declare const useIsMounted__INTERNAL: () => boolean;
+declare const isUIClient: (client: StytchB2BClient) => client is StytchB2BUIClient;
+/**
+ * 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;
+/**
+ * Returns the active Stytch organization.
+ * 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 {organization, isInitialized, fromCache} = useStytchOrganization();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<p>Welcome to {organization.organization_name}</p>);
+ */
+declare const useStytchOrganization: () => SWROrganization;
+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>;
+declare const withStytchOrganization: <T extends object>(Component: React.ComponentType<T & {
+    stytchOrganization: Organization | null;
+    stytchOrganizationIsInitialized: boolean;
+    stytchOrganizationIsFromCache: 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;
+export { useIsMounted__INTERNAL, isUIClient, useStytchMember, useStytchMemberSession, useStytchOrganization, useStytchIsAuthorized, useStytchB2BClient, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchOrganization, withStytchPermissions, StytchB2BProviderProps, StytchB2BProvider };