@stytch/nextjs 22.0.0-next.3 → 22.0.0-next.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stytch/nextjs
 
+## 22.0.0-next.4
+
+### Patch Changes
+
+- Beta bug fixes, add buttonId option
+
 ## 22.0.0-next.3
 
 ### Patch Changes

package/dist/cjs/b2b/index.cjs

@@ -2,7 +2,7 @@
 'use strict';
 
 var b2b_index_headless = require('./index.headless.cjs');
-var withSsrSafe = require('../withSsrSafe-CHYee2bI.js');
+var withSsrSafe = require('../withSsrSafe-BnuHXoz0.js');
 var React = require('react');
 var passwordManagerDisableAutofillProps = require('../passwordManagerDisableAutofillProps-1cQ-Le25.js');
 var StytchSSRProxy = require('../StytchSSRProxy-Bz6LNYdq.js');
@@ -2690,7 +2690,9 @@ const OAuthB2BButton = ({ providerType, loginRedirectUrl, signupRedirectUrl, dis
     const { i18n: $__i18n, _: $__ } = passwordManagerDisableAutofillProps.useLingui();
     const stytchClient = withSsrSafe.useStytch();
     const [state] = withSsrSafe.useGlobalReducer();
-    const iconRegistry = withSsrSafe.usePresentation().iconRegistry;
+    const presentation = withSsrSafe.usePresentation();
+    const iconRegistry = presentation.iconRegistry;
+    const id = withSsrSafe.getButtonId(`sso-${providerType}`, presentation.options);
     const provider = providerInfo[providerType];
     let label = providerType;
     let icon = null;
@@ -2722,7 +2724,8 @@ const OAuthB2BButton = ({ providerType, loginRedirectUrl, signupRedirectUrl, dis
     return /*#__PURE__*/ React__namespace.default.createElement(withSsrSafe.Button, {
         onClick: onButtonClick,
         variant: "outline",
-        icon: icon
+        icon: icon,
+        id: id
     }, label);
 };
 
@@ -3565,8 +3568,9 @@ const SSOButton = ({ connection, onStart })=>{
     const { i18n: $__i18n, _: $__ } = passwordManagerDisableAutofillProps.useLingui();
     const stytchClient = withSsrSafe.useStytch();
     const { ssoOptions } = withSsrSafe.useConfig();
-    const { iconRegistry } = withSsrSafe.usePresentation();
+    const { iconRegistry, options } = withSsrSafe.usePresentation();
     const { connection_id, display_name, identity_provider } = connection;
+    const id = withSsrSafe.getButtonId(`sso-${display_name}`, options);
     const onButtonClick = ()=>stytchClient.sso.start({
             connection_id,
             signup_redirect_url: ssoOptions?.signupRedirectURL,
@@ -3579,7 +3583,8 @@ const SSOButton = ({ connection, onStart })=>{
     return /*#__PURE__*/ React__namespace.default.createElement(withSsrSafe.Button, {
         variant: "outline",
         onClick: onButtonClick,
-        icon: /*#__PURE__*/ React__namespace.default.createElement(Icon, null)
+        icon: /*#__PURE__*/ React__namespace.default.createElement(Icon, null),
+        id: id
     }, $__i18n._({
         id: "provider.continueWith",
         message: "Continue with {display_name}",
@@ -3595,7 +3600,7 @@ const SSOButton = ({ connection, onStart })=>{
 function extractConnectionId(method) {
     return method?.startsWith('sso:') ? method.slice(4) : undefined;
 }
-function getButtonId(button) {
+function getButtonKey(button) {
     if (button.type === 'oauth') {
         return button.provider.type;
     } else if (button.type === 'sso') {
@@ -4714,6 +4719,7 @@ const SsoAndOAuthButtons = ({ buttons })=>{
     const { i18n: $__i18n, _: $__ } = passwordManagerDisableAutofillProps.useLingui();
     const [state, dispatch] = withSsrSafe.useGlobalReducer();
     const { oauthProviderSettings = [] } = useEffectiveAuthConfig();
+    const presentation = withSsrSafe.usePresentation();
     const [lastUsedMethod, setLastUsedMethod] = useLastUsedAuthMethod();
     const config = withSsrSafe.useConfig();
     const { loginRedirectURL, signupRedirectURL, discoveryRedirectURL, customScopes, providerParams } = config.oauthOptions ?? {};
@@ -4741,7 +4747,7 @@ const SsoAndOAuthButtons = ({ buttons })=>{
         return null;
     }
     // Reorder providers based on last used
-    const [reorderedButtons, foundLastUsedOAuth] = withSsrSafe.arrayUtils.moveToFront(authButtons, (button)=>getButtonId(button) === lastUsedMethod);
+    const [reorderedButtons, foundLastUsedOAuth] = withSsrSafe.arrayUtils.moveToFront(authButtons, (button)=>getButtonKey(button) === lastUsedMethod);
     // Helper function to create OAuth button component
     const createOAuthButton = (oauthProvider)=>{
         const providerProps = {
@@ -4780,6 +4786,7 @@ const SsoAndOAuthButtons = ({ buttons })=>{
                     return /*#__PURE__*/ React__namespace.default.createElement(withSsrSafe.Button, {
                         key: "sso-discovery",
                         variant: "outline",
+                        id: withSsrSafe.getButtonId('sso-discovery', presentation.options),
                         onClick: ()=>{
                             dispatch({
                                 type: 'transition',
@@ -4796,7 +4803,7 @@ const SsoAndOAuthButtons = ({ buttons })=>{
             }
         })();
         return foundLastUsedOAuth && index === 0 ? /*#__PURE__*/ React__namespace.default.createElement(withSsrSafe.LastUsed, {
-            key: getButtonId(button)
+            key: getButtonKey(button)
         }, buttonComponent) : buttonComponent;
     }));
 };