@stytch/react 10.0.0 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @stytch/react
 
+## 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

package/dist/index.d.ts

@@ -141,6 +141,7 @@ interface StytchResetPasswordProps extends StytchProps {
  * @param callbacks - An optional {@link Callbacks} object
  */
 declare const StytchPasswordReset: ({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps) => React.JSX.Element;
+declare const StytchPasskeyRegistration: ({ config, styles, callbacks }: StytchProps) => React.JSX.Element;
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your application root.
  * Either a StytchUIClient or StytchHeadlessClient.
@@ -229,5 +230,5 @@ type StytchProviderProps = {
  * )
  */
 declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
-export { StytchLogin, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+export { StytchLogin, StytchPasswordReset, StytchPasskeyRegistration, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
 export type { StytchProviderProps };

package/dist/index.esm.d.ts

@@ -141,6 +141,7 @@ interface StytchResetPasswordProps extends StytchProps {
  * @param callbacks - An optional {@link Callbacks} object
  */
 declare const StytchPasswordReset: ({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps) => React.JSX.Element;
+declare const StytchPasskeyRegistration: ({ config, styles, callbacks }: StytchProps) => React.JSX.Element;
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your application root.
  * Either a StytchUIClient or StytchHeadlessClient.
@@ -229,5 +230,5 @@ type StytchProviderProps = {
  * )
  */
 declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
-export { StytchLogin, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+export { StytchLogin, StytchPasswordReset, StytchPasskeyRegistration, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
 export type { StytchProviderProps };

package/dist/index.esm.js

@@ -209,7 +209,7 @@ const StytchLogin = ({ config, styles, callbacks }) => {
             containerEl.current.id = `stytch-magic-link-${randId}`;
         }
         stytchClient.mountLogin({
-            config,
+            config: config,
             callbacks,
             elementId: `#${containerEl.current.id}`,
             styles,
@@ -270,7 +270,7 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken })
         }
         if (passwordResetToken) {
             stytchClient.mountResetPassword({
-                config,
+                config: config,
                 callbacks,
                 elementId: `#${containerEl.current.id}`,
                 styles,
@@ -280,5 +280,62 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken })
     }, [stytchClient, config, styles, callbacks, passwordResetToken]);
     return React.createElement("div", { ref: containerEl });
 };
+const StytchPasskeyRegistration = ({ config, styles, callbacks }) => {
+    /**
+     * The Stytch Passkey Registration component.
+     * This component can only be used with a {@link StytchUIClient} client constructor
+     * passed into the {@link StytchProvider}
+     *
+     * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+     *
+     *
+     * @example
+     * const styles = {
+     *     container: {
+     *       backgroundColor: '#e11e1e',
+     *     },
+     *     colors: {
+     *       primary: '#ff00f7',
+     *       secondary: '#5C727D',
+     *     },
+     *    }
+     *
+     * <StytchPasskeyRegistration
+     *   config={{
+     *      products: ['passkey'],
+     *    }}
+     *   styles={styles}
+     *   callbacks={{
+     *     onEvent: (event) => console.log(event)
+     *   }}
+     * />
+     * @param config - A {@link StytchLoginConfig} object
+     * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+     * @param callbacks - An optional {@link Callbacks} object
+     */
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchPasskeyRegistration />'));
+    const stytchClient = useStytch();
+    const user = useStytchUser();
+    const containerEl = useRef(null);
+    useLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-reset-passkey-${randId}`;
+        }
+        stytchClient.mountPasskeyRegistration({
+            config,
+            callbacks,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [stytchClient, config, styles, callbacks, user]);
+    return React.createElement("div", { ref: containerEl });
+};
 
-export { StytchLogin, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+export { StytchLogin, StytchPasskeyRegistration, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };

package/dist/index.js

@@ -217,7 +217,7 @@ const StytchLogin = ({ config, styles, callbacks }) => {
             containerEl.current.id = `stytch-magic-link-${randId}`;
         }
         stytchClient.mountLogin({
-            config,
+            config: config,
             callbacks,
             elementId: `#${containerEl.current.id}`,
             styles,
@@ -278,7 +278,7 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken })
         }
         if (passwordResetToken) {
             stytchClient.mountResetPassword({
-                config,
+                config: config,
                 callbacks,
                 elementId: `#${containerEl.current.id}`,
                 styles,
@@ -288,8 +288,66 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken })
     }, [stytchClient, config, styles, callbacks, passwordResetToken]);
     return React__default['default'].createElement("div", { ref: containerEl });
 };
+const StytchPasskeyRegistration = ({ config, styles, callbacks }) => {
+    /**
+     * The Stytch Passkey Registration component.
+     * This component can only be used with a {@link StytchUIClient} client constructor
+     * passed into the {@link StytchProvider}
+     *
+     * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+     *
+     *
+     * @example
+     * const styles = {
+     *     container: {
+     *       backgroundColor: '#e11e1e',
+     *     },
+     *     colors: {
+     *       primary: '#ff00f7',
+     *       secondary: '#5C727D',
+     *     },
+     *    }
+     *
+     * <StytchPasskeyRegistration
+     *   config={{
+     *      products: ['passkey'],
+     *    }}
+     *   styles={styles}
+     *   callbacks={{
+     *     onEvent: (event) => console.log(event)
+     *   }}
+     * />
+     * @param config - A {@link StytchLoginConfig} object
+     * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+     * @param callbacks - An optional {@link Callbacks} object
+     */
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchPasskeyRegistration />'));
+    const stytchClient = useStytch();
+    const user = useStytchUser();
+    const containerEl = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-reset-passkey-${randId}`;
+        }
+        stytchClient.mountPasskeyRegistration({
+            config,
+            callbacks,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [stytchClient, config, styles, callbacks, user]);
+    return React__default['default'].createElement("div", { ref: containerEl });
+};
 
 exports.StytchLogin = StytchLogin;
+exports.StytchPasskeyRegistration = StytchPasskeyRegistration;
 exports.StytchPasswordReset = StytchPasswordReset;
 exports.StytchProvider = StytchProvider;
 exports.useStytch = useStytch;

package/package.json

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