@stytch/react 0.0.0-next-20240815193523

package/CHANGELOG.md

@@ -0,0 +1,348 @@
+# @stytch/react
+
+## 0.0.0-next-20240815193523
+
+### Patch Changes
+
+- Updated dependencies [c23db6cd]
+  - @stytch/vanilla-js@0.0.0-next-20240815193523
+
+## 18.3.3
+
+### Patch Changes
+
+- 6d06cce0: Load Admin Portal components from vanilla-js directly
+
+## 18.3.2
+
+### Patch Changes
+
+- 7d2c2878: Fix admin portal component props
+
+## 18.3.1
+
+### Patch Changes
+
+- 089c986a: Guard references to localStorage and sessionStorage
+
+## 18.3.0
+
+### Minor Changes
+
+- 3183b459: Add `AdminPortalMemberManagement` component to `@stytch/react/b2b/adminPortal`
+
+## 18.2.0
+
+### Minor Changes
+
+- 1ade8d93: Add `AdminPortalOrgSettings` component to `@stytch/react/b2b/adminPortal`
+
+## 18.1.0
+
+### Minor Changes
+
+- a99f21b8: Add `AdminPortalSSO` component to `@stytch/react/b2b/adminPortal`
+
+### Patch Changes
+
+- Updated dependencies [0f448e7e]
+- Updated dependencies [a99f21b8]
+  - @stytch/vanilla-js@4.13.0
+
+## 18.0.0
+
+### Patch Changes
+
+- Updated dependencies [cbab0c30]
+  - @stytch/vanilla-js@4.12.0
+
+## 17.0.0
+
+### Major Changes
+
+- a0fbe9f: Update minimum peer dependency on `@stytch/vanilla-js` to `^4.9.0`
+
+### Patch Changes
+
+- Updated dependencies [a0fbe9f]
+- Updated dependencies [a0fbe9f]
+  - @stytch/vanilla-js@4.9.0
+
+## 16.0.0
+
+### Patch Changes
+
+- Updated dependencies [f604dcb]
+  - @stytch/vanilla-js@4.7.0
+
+## 15.0.0
+
+### Minor Changes
+
+- 223e30e: Add `useStytchOrganization` hook for B2B
+
+### Patch Changes
+
+- Updated dependencies [223e30e]
+  - @stytch/vanilla-js@4.2.0
+
+## 14.0.1
+
+### Patch Changes
+
+- e6832cb: Fix an issue where `fromCache` would not update to `false` after cached data was refreshed
+- Updated dependencies [e6832cb]
+  - @stytch/vanilla-js@4.1.1
+
+## 14.0.0
+
+### Patch Changes
+
+- Updated dependencies [2379b29]
+  - @stytch/vanilla-js@4.1.0
+
+## 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 [b34293a]
+- Updated dependencies [c3c108b]
+- Updated dependencies [6890694]
+  - @stytch/vanilla-js@4.0.0
+
+## 12.0.0
+
+### Patch Changes
+
+- Updated dependencies [ec1962c]
+  - @stytch/vanilla-js@3.2.0
+
+## 11.0.0
+
+### Minor Changes
+
+- 8cff174: B2C Passkeys Headless Support & UI components
+
+### Patch Changes
+
+- Updated dependencies [8cff174]
+  - @stytch/vanilla-js@3.1.0
+
+## 10.0.0
+
+### Patch Changes
+
+- Updated dependencies [5dd9d24]
+  - @stytch/vanilla-js@3.0.0
+
+## 9.0.0
+
+### Patch Changes
+
+- 47eb388: Add Device Fingerprinting to the React Native SDK
+- Updated dependencies [47eb388]
+- Updated dependencies [d008ef5]
+- Updated dependencies [47eb388]
+- Updated dependencies [7c1940e]
+  - @stytch/vanilla-js@2.2.0
+
+## 8.0.0
+
+### Patch Changes
+
+- Updated dependencies [67d42f0]
+  - @stytch/vanilla-js@2.1.0
+
+## 7.0.2
+
+### Patch Changes
+
+- 1b1ea1b: updateStateAndTokens call in resetBySession and resetExistingPassword
+- Updated dependencies [1b1ea1b]
+- Updated dependencies [47cd46c]
+  - @stytch/vanilla-js@2.0.3
+
+## 7.0.1
+
+### Patch Changes
+
+- 0a18c34: Add docs for new verified fields on Member objects, and fix some docs links
+- Updated dependencies [9fd5d96]
+- Updated dependencies [0a18c34]
+  - @stytch/vanilla-js@2.0.1
+
+## 7.0.0
+
+### Major Changes
+
+- a4083c7: Breaking Changes: The intermediate session token (IST) will no longer be accepted as an argument for the discovery list organizations, intermediate sessions exchange, and create organization via discovery endpoints. The IST will be passed in automatically. ISTs are stored as browser cookies or persisted on device when they are generated after calls to discovery authenticate endpoints, such as email magic link discovery authenticate, or primary authenticate endpoints in the case where MFA is required, such as email magic link authenticate or SSO authenticate.
+
+  New Features: Our B2B product now supports multi-factor authentication (MFA) with one-time passcodes (OTPs) via SMS. MFA policies can be set on the Organization level or on the Member level. See the Stytch docs for more information.
+
+### Patch Changes
+
+- Updated dependencies [a4083c7]
+  - @stytch/vanilla-js@2.0.0
+
+## 6.0.0
+
+### Patch Changes
+
+- Updated dependencies [e7302d7]
+  - @stytch/vanilla-js@1.1.0
+
+## 5.0.0
+
+### Patch Changes
+
+- Updated dependencies [f9c36c9]
+  - @stytch/vanilla-js@1.0.0
+
+## 4.0.0
+
+### Minor Changes
+
+- c8e2d0b: B2B Passwords UI components
+
+### Patch Changes
+
+- Updated dependencies [c8e2d0b]
+  - @stytch/vanilla-js@0.14.0
+
+## 3.0.0
+
+### Minor Changes
+
+- 15dbe7d: Releasing UI components for our B2B SDKs.
+
+### Patch Changes
+
+- Updated dependencies [15dbe7d]
+  - @stytch/vanilla-js@0.13.0
+
+## 2.0.0
+
+### Patch Changes
+
+- 6a27584: Make organization name and slug optional for discovery organization create
+- Updated dependencies [dde1f2a]
+- Updated dependencies [6a27584]
+  - @stytch/vanilla-js@0.12.0
+
+## 1.0.2
+
+### Patch Changes
+
+- 79ca7ba: Add locale argument to B2B email magic link methods
+- Updated dependencies [79ca7ba]
+  - @stytch/vanilla-js@0.11.3
+
+## 1.0.1
+
+### Patch Changes
+
+- c924765: Include the b2b directory in package.json for the B2B SDK entrypoint
+- Updated dependencies [c924765]
+  - @stytch/vanilla-js@0.11.2
+
+## 1.0.0
+
+### Minor Changes
+
+- c0e42bc: Add B2B Discovery headless client and session exchange method
+
+### Patch Changes
+
+- Updated dependencies [c0e42bc]
+  - @stytch/vanilla-js@0.11.0
+
+## 0.10.3
+
+### Patch Changes
+
+- 1652706: Fix session/user persisting after logging out
+- Updated dependencies [1652706]
+  - @stytch/vanilla-js@0.10.7
+
+## 0.10.2
+
+### Patch Changes
+
+- ca5a31d: SDK-877 Fix session/user persisting after logging out
+- Updated dependencies [ca5a31d]
+  - @stytch/vanilla-js@0.10.6
+
+## 0.10.1
+
+### Patch Changes
+
+- f1810c4: Add React Native OAuth callback, PKCE fix
+- Updated dependencies [f1810c4]
+  - @stytch/vanilla-js@0.10.2
+
+## 0.10.0
+
+### Minor Changes
+
+- Launching B2B SDKs
+
+### Patch Changes
+
+- Updated dependencies
+  - @stytch/vanilla-js@0.10.0
+
+## 0.9.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @stytch/vanilla-js@0.9.0
+
+## 0.6.0
+
+### Minor Changes
+
+- Add support for template ID parameters to Magic link Login or create and Send methods, Email OTP Login or create and Send methods, and Reset Password Start
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies [ac0cf89]
+  - @stytch/vanilla-js@0.6.0
+
+## 0.5.0
+
+### Patch Changes
+
+- 422c698: Add type definitions for User Metadata fields
+- Updated dependencies [422c698]
+- Updated dependencies
+  - @stytch/vanilla-js@0.5.0
+
+## 0.4.6
+
+### Patch Changes
+
+- Add support for custom email domains in magic link confirmation screen
+- Updated dependencies
+  - @stytch/vanilla-js@0.4.6
+
+## 0.4.5
+
+### Patch Changes
+
+- Reset Password component doc fixes
+
+## 0.4.4
+
+### Patch Changes
+
+- Send methods in the SDK
+- Updated dependencies
+  - @stytch/vanilla-js@0.4.4

package/LICENSE

@@ -0,0 +1,17 @@
+MIT License
+Copyright (c) 2021 stytchauth
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,157 @@
+# @stytch/react
+
+Stytch's React Library
+
+## Install
+
+With `npm`
+`npm install @stytch/react @stytch/vanilla-js --save`
+
+## Documentation
+
+For full documentation please refer to Stytch's javascript SDK documentation at https://stytch.com/docs/sdks/javascript-sdk.
+
+## Example Usage
+
+```javascript
+import { StytchProvider } from '@stytch/react';
+import { StytchUIClient } from '@stytch/vanilla-js';
+
+const stytch = new StytchUIClient('public-token-<find yours in the stytch dashboard>');
+
+// Wrap your App in the StytchProvider
+ReactDOM.render(
+  <StytchProvider stytch={stytch}>
+    <App />
+  </StytchProvider>,
+  document.getElementById('root'),
+);
+
+// Now use Stytch in your components
+const App = () => {
+  const stytchProps = {
+    config: {
+      products: ['emailMagicLinks'],
+      emailMagicLinksOptions: {
+        loginRedirectURL: 'https://example.com/authenticate',
+        loginExpirationMinutes: 30,
+        signupRedirectURL: 'https://example.com/authenticate',
+        signupExpirationMinutes: 30,
+        createUserAsPending: true,
+      },
+    },
+    styles: {
+      container: { width: '321px' },
+      colors: { primary: '#0577CA' },
+      fontFamily: '"Helvetica New", Helvetica, sans-serif',
+    },
+    callbacks: {
+      onEvent: (message) => console.log(message),
+      onSuccess: (message) => console.log(message),
+      onError: (message) => console.log(message),
+    },
+  };
+
+  return (
+    <div id="login">
+      <StytchLogin
+        config={stytchProps.loginOrSignupView}
+        styles={stytchProps.styles}
+        callbacks={stytchProps.callbacks}
+      />
+    </div>
+  );
+};
+```
+
+## Typescript Support
+
+There are built in typescript definitions in the npm package.
+
+## Migrating from @stytch/stytch-react
+
+If you are migrating from [@stytch/stytch-react](https://www.npmjs.com/package/@stytch/stytch-react), follow the steps below:
+
+### Step 1: Install the new libraries
+
+- The core SDK is now bundled in its own module - [@stytch/vanilla-js](https://www.npmjs.com/package/@stytch/vanilla-js)
+- We now have a library specifically for React bindings - [@stytch/react](https://www.npmjs.com/package/@stytch/react)
+
+```shell
+# NPM
+npm install @stytch/vanilla-js @stytch/react
+# Yarn
+yarn add @stytch/vanilla-js @stytch/react
+```
+
+### Step 2: Remove the old SDK
+
+- Remove the `@styth/stytch-react` package
+- If you are explicitly loading the `stytch.js` script in the document header, remove it. It isn't needed anymore.
+
+```shell
+# NPM
+npm rm @stytch/stytch-react
+# Yarn
+yarn remove @stytch/stytch-react
+```
+
+### Step 3: Initialize the client in your Application Root
+
+- Determine if you need the Headless or UI client. If you plan to use the `<StytchLogin />` component in your application then you should use the the UI client. Otherwise use the Headless client to minimize application bundle size.
+- To create the Stytch Headless client, use `StytchHeadlessClient` from `@stytch/vanilla-js/headless`
+- To create the Stytch UI client, use `StytchUIClient` from `@stytch/vanilla-js`
+- Pass it into `<StytchProvider />` component from `@stytch/react`
+
+```jsx
+import React from 'react';
+import { StytchProvider } from '@stytch/react';
+import { StytchHeadlessClient } from '@stytch/vanilla-js/headless';
+// Or alternately
+// import { StytchUIClient } from '@stytch/vanilla-js';
+
+const stytch = new StytchHeadlessClient(process.env.REACT_APP_STYTCH_PUBLIC_TOKEN);
+
+function WrappedApp() {
+  return (
+    <StytchProvider stytch={stytch}>
+      <App />
+    </StytchProvider>
+  );
+}
+
+export default WrappedApp;
+```
+
+### Step 4: Update calls to `useStytchUser` , `useStytchSession`, and `useStytchLazy`
+
+- `useStytchUser` and `useStytchSession` hooks now return envelope objects - `{ user, isCached }` and `{ session, isCached }` respectively.
+  - On first render the SDK will read user/session out of persistent storage, and serve them with `isCached: true` - at this point you’re reading the stale-while-revalidating value
+  - The SDK will make network requests to pull the most up-to-date user and session objects, and serve them with `isCached: false`
+- `useStytchLazy` is no longer required - you may always call `useStytch` now
+
+```jsx
+import React, { useEffect } from 'react';
+import { useStytchUser } from '@stytch/react';
+
+export default function Profile() {
+  const router = useRouter();
+  const { user, isCached } = useStytchUser();
+
+  return (
+    <Layout>
+      <h1>Your {isCached ? 'Cached' : null} Profile</h1>
+      <pre>{JSON.stringify(user, null, 2)}</pre>
+    </Layout>
+  );
+}
+```
+
+### Step 5: UI Naming Changes
+
+We've made a number of small changes to our naming conventions to make the API cleaner and easier to understand.
+
+- The `<Stytch />` login component is now called `<StytchLogin />`
+- The `OAuthProvidersTypes` enum is now called `OAuthProviders`
+- The `SDKProductTypes` enum is now called `Products`
+- There are some additional changes to the `styles` config documented [here](https://stytch.com/docs/sdks/javascript-sdk#resources_migration-guide_v-zero-five)

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/b2b/package.json

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

package/dist/StytchB2BContext-8acafb28.d.ts

@@ -0,0 +1,165 @@
+/// <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 application root.
+ */
+type StytchB2BClient = StytchB2BHeadlessClient | StytchB2BUIClient;
+type SWRMember = {
+    /**
+     * Either the active {@link Member} object, or null if the member is not logged in.
+     */
+    member: Member | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+type SWRMemberSession = {
+    /**
+     * Either the active {@link MemberSession} object, or null if the member is not logged in.
+     */
+    session: MemberSession | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+type SWROrganization = {
+    /**
+     * Either the active {@link Organization} object, or null if the member is not logged in.
+     */
+    organization: Organization | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+declare const useIsMounted__INTERNAL: () => boolean;
+declare const isUIClient: (client: StytchB2BClient) => client is StytchB2BUIClient;
+/**
+ * Returns the active Member.
+ * Check the fromCache property to determine if the member data is from persistent storage.
+ * @example
+ * const {member} = useStytchMember();
+ * return (<h1>Welcome, {member.name}</h1>);
+ * @returns A {@link SWRUser}
+ */
+declare const useStytchMember: () => SWRMember;
+/**
+ * Returns the active member's Stytch member session.
+ * @example
+ * const { session } = useStytchMemberSession();
+ * useEffect(() => {
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session]);
+ * @returns A {@link SWRMemberSession}
+ */
+declare const useStytchMemberSession: () => SWRMemberSession;
+/**
+ * Returns the active Stytch organization.
+ * @example
+ * const { organization } = useStytchOrganization();
+ * return organization ? <p>Welcome to {organization.organization_name}</p> : <p>Log in to continue!</p>;
+ * @returns A {@link SWROrganization}
+ */
+declare const useStytchOrganization: () => SWROrganization;
+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.
+ *
+ * @example
+ * const stytch = useStytchB2BClient();
+ * 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;
+    stytchMemberIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+declare const withStytchMemberSession: <T extends object>(Component: React.ComponentType<T & {
+    stytchMemberSession: MemberSession | null;
+    stytchMemberSessionIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+declare const withStytchOrganization: <T extends object>(Component: React.ComponentType<T & {
+    stytchOrganization: Organization | null;
+    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>;
+type StytchB2BProviderProps = {
+    /**
+     * A Stytch client instance {@link StytchB2BHeadlessClient}
+     */
+    stytch: StytchB2BClient;
+    children?: ReactNode;
+};
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
+declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps) => JSX.Element;
+export { useIsMounted__INTERNAL, isUIClient, useStytchMember, useStytchMemberSession, useStytchOrganization, useStytchIsAuthorized, useStytchB2BClient, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchOrganization, withStytchPermissions, StytchB2BProviderProps, StytchB2BProvider };