From 23617b58c22c48b1a76e5225bfd3746213bc36be Mon Sep 17 00:00:00 2001
From: DonOmalVindula <omalvindula@live.com>
Date: Sat, 5 Sep 2026 08:57:11 +0530
Subject: [PATCH 1/9] fix(react): stop forwarding form-state props to social
 login buttons

The sign-in, sign-up and recovery option factories spread the whole adapter props
(`formValues`, `formErrors`, `touchedFields`, `isFormValid`, `onInputChange`,
`inputClassName`, ...) onto the social buttons (Google, GitHub, Microsoft, Facebook,
LinkedIn, Ethereum), and the buttons forward their props to the DOM `<button>`.
React then warns "does not recognize the `formValues` prop on a DOM element" and
"Unknown event handler property `onInputChange`" whenever a flow includes a social
option.

Forward only what the buttons use (`isLoading` and the button class name). Adds a
regression test that renders a Google button through the sign-in and sign-up factories
and asserts no form-state attributes reach the DOM.
---
 .changeset/social-buttons-dom-props.md        |   5 +
 .../Recovery/v1/RecoveryOptionFactory.tsx     |  12 +-
 .../v1/options/SignInOptionFactory.test.tsx   | 221 ++++++++++++++++++
 .../SignIn/v1/options/SignInOptionFactory.tsx |  12 +-
 .../auth/SignUp/v1/SignUpOptionFactory.tsx    |  12 +-
 5 files changed, 244 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/social-buttons-dom-props.md
 create mode 100644 packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.test.tsx

diff --git a/.changeset/social-buttons-dom-props.md b/.changeset/social-buttons-dom-props.md
new file mode 100644
index 000000000..fc6bf842f
--- /dev/null
+++ b/.changeset/social-buttons-dom-props.md
@@ -0,0 +1,5 @@
+---
+'@asgardeo/react': patch
+---
+
+Social login buttons rendered by the embedded sign-in, sign-up and recovery flows no longer receive the internal form-state props (`formValues`, `formErrors`, `touchedFields`, `isFormValid`, `onInputChange`, `inputClassName`), which React reported as unknown attributes on the underlying `<button>` element.
diff --git a/packages/react/src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx b/packages/react/src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx
index 90e319ce1..fcc5d2c44 100644
--- a/packages/react/src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx
+++ b/packages/react/src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx
@@ -88,7 +88,7 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
       if (buttonVariant === 'SOCIAL') {
         if (buttonText.toLowerCase().includes('google')) {
           return (
-            <GoogleButton onClick={(): any => onSubmit(component, {})} {...rest}>
+            <GoogleButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
               {buttonText}
             </GoogleButton>
           );
@@ -96,7 +96,7 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('github')) {
           return (
-            <GitHubButton onClick={(): any => onSubmit(component, {})} {...rest}>
+            <GitHubButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
               {buttonText}
             </GitHubButton>
           );
@@ -104,7 +104,7 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('microsoft')) {
           return (
-            <MicrosoftButton onClick={(): any => onSubmit(component, {})} {...rest}>
+            <MicrosoftButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
               {buttonText}
             </MicrosoftButton>
           );
@@ -112,7 +112,7 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('facebook')) {
           return (
-            <FacebookButton onClick={(): any => onSubmit(component, {})} {...rest}>
+            <FacebookButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
               {buttonText}
             </FacebookButton>
           );
@@ -120,7 +120,7 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('linkedin')) {
           return (
-            <LinkedInButton onClick={(): any => onSubmit(component, {})} {...rest}>
+            <LinkedInButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
               {buttonText}
             </LinkedInButton>
           );
@@ -128,7 +128,7 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('ethereum')) {
           return (
-            <SignInWithEthereumButton onClick={(): any => onSubmit(component, {})} {...rest}>
+            <SignInWithEthereumButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
               {buttonText}
             </SignInWithEthereumButton>
           );
diff --git a/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.test.tsx b/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.test.tsx
new file mode 100644
index 000000000..fda239767
--- /dev/null
+++ b/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.test.tsx
@@ -0,0 +1,221 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* eslint-disable sort-keys, @typescript-eslint/typedef, @typescript-eslint/explicit-function-return-type, testing-library/no-container, testing-library/no-node-access */
+
+import {ApplicationNativeAuthenticationConstants} from '@asgardeo/browser';
+import {cleanup, render} from '@testing-library/react';
+import {afterEach, beforeEach, describe, expect, it, vi, Mock} from 'vitest';
+import {createSignInOptionFromAuthenticator} from './SignInOptionFactory';
+import {createSignUpComponent} from '../../../SignUp/v1/SignUpOptionFactory';
+
+// Mock theme data
+const mockColors = {
+  text: {primary: '#000', secondary: '#666'},
+  background: {surface: '#fff', disabled: '#eee', body: {main: '#fff'}},
+  border: '#ccc',
+  action: {
+    hover: '#f0f0f0',
+    active: '#e0e0e0',
+    selected: '#d0d0d0',
+    disabled: '#bbb',
+    disabledBackground: '#f5f5f5',
+    focus: '#0066cc',
+    hoverOpacity: 0.08,
+    selectedOpacity: 0.12,
+    disabledOpacity: 0.38,
+    focusOpacity: 0.12,
+    activatedOpacity: 0.12,
+  },
+  primary: {main: '#0066cc', contrastText: '#fff'},
+  secondary: {main: '#666', contrastText: '#fff'},
+  error: {main: '#d32f2f', contrastText: '#fff'},
+  success: {main: '#2e7d32', contrastText: '#fff'},
+  warning: {main: '#ed6c02', contrastText: '#fff'},
+  info: {main: '#0288d1', contrastText: '#fff'},
+};
+
+const mockTypography = {
+  fontFamily: 'Arial, sans-serif',
+  fontSizes: {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    md: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+  },
+  fontWeights: {normal: 400, medium: 500, semibold: 600, bold: 700},
+  lineHeights: {tight: 1.25, normal: 1.5, relaxed: 1.75},
+};
+
+const mockTypographyVars = {
+  fontFamily: 'Arial, sans-serif',
+  fontSizes: {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    md: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+  },
+  fontWeights: {normal: '400', medium: '500', semibold: '600', bold: '700'},
+  lineHeights: {tight: '1.25', normal: '1.5', relaxed: '1.75'},
+};
+
+const mockColorsVars = {
+  ...mockColors,
+  action: {
+    hover: '#f0f0f0',
+    active: '#e0e0e0',
+    selected: '#d0d0d0',
+    disabled: '#bbb',
+    disabledBackground: '#f5f5f5',
+    focus: '#0066cc',
+    hoverOpacity: '0.08',
+    selectedOpacity: '0.12',
+    disabledOpacity: '0.38',
+    focusOpacity: '0.12',
+    activatedOpacity: '0.12',
+  },
+};
+
+// Mock the dependencies
+vi.mock('../../../../../../contexts/Theme/useTheme', () => ({
+  default: () => ({
+    theme: {
+      // ThemeConfig properties (direct access)
+      colors: mockColors,
+      typography: mockTypography,
+      spacing: {unit: 8},
+      borderRadius: {small: '2px', medium: '4px', large: '8px'},
+      shadows: {
+        small: '0 1px 2px rgba(0,0,0,0.1)',
+        medium: '0 2px 4px rgba(0,0,0,0.1)',
+        large: '0 4px 8px rgba(0,0,0,0.1)',
+      },
+      cssVariables: {},
+      // ThemeVars (CSS variable references)
+      vars: {
+        colors: mockColorsVars,
+        spacing: {unit: '8px'},
+        borderRadius: {small: '2px', medium: '4px', large: '8px'},
+        shadows: {
+          small: '0 1px 2px rgba(0,0,0,0.1)',
+          medium: '0 2px 4px rgba(0,0,0,0.1)',
+          large: '0 4px 8px rgba(0,0,0,0.1)',
+        },
+        typography: mockTypographyVars,
+      },
+    },
+    colorScheme: 'light',
+    direction: (document.documentElement.getAttribute('dir') as 'ltr' | 'rtl') || 'ltr',
+  }),
+}));
+
+vi.mock('../../../../../../hooks/useTranslation', () => ({
+  default: () => ({
+    t: (key: string) => key,
+    currentLanguage: 'en',
+    setLanguage: vi.fn(),
+    availableLanguages: ['en'],
+  }),
+}));
+
+const googleAuthenticator: any = {
+  authenticator: 'Google',
+  authenticatorId: ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Google,
+  idp: 'Google',
+  metadata: {i18nKey: 'authenticator.google', promptType: 'REDIRECTION_PROMPT'},
+  requiredParams: [],
+};
+
+describe('createSignInOptionFromAuthenticator', () => {
+  let consoleError: Mock;
+
+  beforeEach(() => {
+    consoleError = vi.spyOn(console, 'error').mockImplementation(() => {}) as unknown as Mock;
+  });
+
+  afterEach(() => {
+    consoleError.mockRestore();
+    cleanup();
+  });
+
+  it('does not leak form-state props onto the social button DOM element', () => {
+    const {container} = render(
+      createSignInOptionFromAuthenticator(googleAuthenticator, {}, {}, false, vi.fn(), vi.fn(), {
+        buttonClassName: 'btn',
+        inputClassName: 'input',
+      }),
+    );
+
+    const button = container.querySelector('button');
+
+    expect(button).not.toBeNull();
+    expect(button?.getAttribute('formvalues')).toBeNull();
+    expect(button?.getAttribute('touchedfields')).toBeNull();
+    expect(button?.getAttribute('inputclassname')).toBeNull();
+
+    const domWarnings = consoleError.mock.calls
+      .map((call: unknown[]) => String(call[0]))
+      .filter((message: string) => /does not recognize|Unknown event handler/.test(message));
+
+    expect(domWarnings).toEqual([]);
+  });
+
+  it('does not leak form-state props onto a social button rendered by the sign-up factory', () => {
+    const googleSignUpButton: any = {
+      components: [],
+      config: {text: 'Continue with Google', type: 'button'},
+      id: 'button_google',
+      type: 'BUTTON',
+      variant: 'SOCIAL',
+    };
+
+    const {container} = render(
+      createSignUpComponent({
+        buttonClassName: 'btn',
+        component: googleSignUpButton,
+        formErrors: {},
+        formValues: {},
+        inputClassName: 'input',
+        isFormValid: true,
+        isLoading: false,
+        onInputChange: vi.fn(),
+        onSubmit: vi.fn(),
+        touchedFields: {},
+      }),
+    );
+
+    const button = container.querySelector('button');
+
+    expect(button).not.toBeNull();
+    for (const attr of ['formvalues', 'formerrors', 'touchedfields', 'isformvalid', 'inputclassname']) {
+      expect(button?.getAttribute(attr)).toBeNull();
+    }
+
+    const domWarnings = consoleError.mock.calls
+      .map((call: unknown[]) => String(call[0]))
+      .filter((message: string) => /does not recognize|Unknown event handler/.test(message));
+
+    expect(domWarnings).toEqual([]);
+  });
+});
diff --git a/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.tsx b/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.tsx
index 868586716..7f1bd84da 100644
--- a/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.tsx
+++ b/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.tsx
@@ -126,7 +126,7 @@ export const createSignInOption = ({
           className={buttonClassName}
           onClick={(): any => onSubmit(authenticator)}
           preferences={preferences}
-          {...rest}
+          isLoading={rest.isLoading}
         />
       );
 
@@ -136,7 +136,7 @@ export const createSignInOption = ({
           preferences={preferences}
           className={buttonClassName}
           onClick={(): any => onSubmit(authenticator)}
-          {...rest}
+          isLoading={rest.isLoading}
         />
       );
 
@@ -146,7 +146,7 @@ export const createSignInOption = ({
           preferences={preferences}
           className={buttonClassName}
           onClick={(): any => onSubmit(authenticator)}
-          {...rest}
+          isLoading={rest.isLoading}
         />
       );
 
@@ -156,7 +156,7 @@ export const createSignInOption = ({
           preferences={preferences}
           className={buttonClassName}
           onClick={(): any => onSubmit(authenticator)}
-          {...rest}
+          isLoading={rest.isLoading}
         />
       );
 
@@ -166,7 +166,7 @@ export const createSignInOption = ({
           preferences={preferences}
           className={buttonClassName}
           onClick={(): any => onSubmit(authenticator)}
-          {...rest}
+          isLoading={rest.isLoading}
         />
       );
 
@@ -176,7 +176,7 @@ export const createSignInOption = ({
           preferences={preferences}
           className={buttonClassName}
           onClick={(): any => onSubmit(authenticator)}
-          {...rest}
+          isLoading={rest.isLoading}
         />
       );
 
diff --git a/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx b/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
index d0342894e..791703e21 100644
--- a/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
+++ b/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
@@ -88,7 +88,7 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
       if (buttonVariant === 'SOCIAL') {
         if (buttonText.toLowerCase().includes('google')) {
           return (
-            <GoogleButton onClick={(): any => onSubmit(component, {})} {...rest}>
+            <GoogleButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
               {buttonText}
             </GoogleButton>
           );
@@ -96,7 +96,7 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('github')) {
           return (
-            <GitHubButton onClick={(): any => onSubmit(component, {})} {...rest}>
+            <GitHubButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
               {buttonText}
             </GitHubButton>
           );
@@ -104,7 +104,7 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('microsoft')) {
           return (
-            <MicrosoftButton onClick={(): any => onSubmit(component, {})} {...rest}>
+            <MicrosoftButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
               {buttonText}
             </MicrosoftButton>
           );
@@ -112,7 +112,7 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('facebook')) {
           return (
-            <FacebookButton onClick={(): any => onSubmit(component, {})} {...rest}>
+            <FacebookButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
               {buttonText}
             </FacebookButton>
           );
@@ -120,7 +120,7 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('linkedin')) {
           return (
-            <LinkedInButton onClick={(): any => onSubmit(component, {})} {...rest}>
+            <LinkedInButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
               {buttonText}
             </LinkedInButton>
           );
@@ -128,7 +128,7 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('ethereum')) {
           return (
-            <SignInWithEthereumButton onClick={(): any => onSubmit(component, {})} {...rest}>
+            <SignInWithEthereumButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
               {buttonText}
             </SignInWithEthereumButton>
           );

From 67b6352f2e2fb2cc6beb8046527b6844f09981c8 Mon Sep 17 00:00:00 2001
From: DonOmalVindula <omalvindula@live.com>
Date: Sat, 5 Sep 2026 09:00:10 +0530
Subject: [PATCH 2/9] fix(react): explain unregistered redirect URI errors
 during embedded sign-in

`afterSignInUrl` is sent to the identity server as the OAuth `redirect_uri`. Since the
provider prop is honoured (and relative values resolve against the app origin), the
resolved URL must be registered under the application's authorized redirect URLs. When
it is missing, the embedded sign-in only showed the raw
`invalid_callback - callback.not.match` description.

Add `resolveSignInErrorMessage`, which maps that rejection to a translated, actionable
message (`errors.signin.redirect.uri.mismatch`, added to all locales) naming the URL to
register, and use it at the sign-in form's error sites. Other errors still go through
`resolveFlowErrorMessage`. The Next.js README gains a "Redirect URLs" section covering
`afterSignInUrl`, social login callbacks and `afterSignOutUrl`.
---
 .changeset/redirect-uri-guidance.md           |  7 +++
 packages/i18n/src/models/i18n.ts              |  1 +
 packages/i18n/src/translations/en-US.ts       |  1 +
 packages/i18n/src/translations/fr-FR.ts       |  1 +
 packages/i18n/src/translations/hi-IN.ts       |  1 +
 packages/i18n/src/translations/ja-JP.ts       |  1 +
 packages/i18n/src/translations/pt-BR.ts       |  1 +
 packages/i18n/src/translations/pt-PT.ts       |  1 +
 packages/i18n/src/translations/si-LK.ts       |  1 +
 packages/i18n/src/translations/ta-IN.ts       |  1 +
 packages/i18n/src/translations/te-IN.ts       |  1 +
 packages/nextjs/README.md                     | 21 +++++++
 .../auth/SignIn/v1/BaseSignIn.tsx             |  8 +--
 .../utils/resolveSignInErrorMessage.test.ts   | 45 +++++++++++++++
 .../src/utils/resolveSignInErrorMessage.ts    | 56 +++++++++++++++++++
 15 files changed, 143 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/redirect-uri-guidance.md
 create mode 100644 packages/react/src/utils/resolveSignInErrorMessage.test.ts
 create mode 100644 packages/react/src/utils/resolveSignInErrorMessage.ts

diff --git a/.changeset/redirect-uri-guidance.md b/.changeset/redirect-uri-guidance.md
new file mode 100644
index 000000000..7c01a86d0
--- /dev/null
+++ b/.changeset/redirect-uri-guidance.md
@@ -0,0 +1,7 @@
+---
+'@asgardeo/react': patch
+'@asgardeo/i18n': patch
+'@asgardeo/nextjs': patch
+---
+
+When the identity server rejects the embedded sign-in because the redirect URI (`afterSignInUrl`) is not registered for the application, the sign-in form now shows a translated, actionable message naming the URL to register (`errors.signin.redirect.uri.mismatch`), instead of the raw `invalid_callback - callback.not.match` text. The Next.js README documents the redirect URL requirements.
diff --git a/packages/i18n/src/models/i18n.ts b/packages/i18n/src/models/i18n.ts
index 0de2d88d5..d38c62afd 100644
--- a/packages/i18n/src/models/i18n.ts
+++ b/packages/i18n/src/models/i18n.ts
@@ -168,6 +168,7 @@ export interface I18nTranslations {
 
   'errors.heading': string;
   'errors.signin.initialization': string;
+  'errors.signin.redirect.uri.mismatch': string;
   'errors.signin.flow.failure': string;
   'errors.signin.flow.completion.failure': string;
   'errors.signin.flow.passkeys.failure': string;
diff --git a/packages/i18n/src/translations/en-US.ts b/packages/i18n/src/translations/en-US.ts
index 9dfb4c204..f5ec89404 100644
--- a/packages/i18n/src/translations/en-US.ts
+++ b/packages/i18n/src/translations/en-US.ts
@@ -170,6 +170,7 @@ const translations: I18nTranslations = {
   'errors.heading': 'Error',
   'errors.signin.components.not.available': 'Sign-in form is not available at the moment. Please try again later.',
   'errors.signin.initialization': 'An error occurred while initializing. Please try again later.',
+  'errors.signin.redirect.uri.mismatch': 'The redirect URI "{url}" is not registered for this application. Add it to the application\'s authorized redirect URLs in the console, and to your social login provider if you use app-native social sign-in.',
   'errors.signin.flow.failure': 'An error occurred during the sign-in flow. Please try again later.',
   'errors.signin.flow.completion.failure':
     'An error occurred while completing the sign-in flow. Please try again later.',
diff --git a/packages/i18n/src/translations/fr-FR.ts b/packages/i18n/src/translations/fr-FR.ts
index 4710877c2..9fd131834 100644
--- a/packages/i18n/src/translations/fr-FR.ts
+++ b/packages/i18n/src/translations/fr-FR.ts
@@ -163,6 +163,7 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'Erreur',
   'errors.signin.initialization': "Une erreur est survenue lors de l'initialisation. Veuillez réessayer plus tard.",
+  'errors.signin.redirect.uri.mismatch': 'L\'URI de redirection "{url}" n\'est pas enregistrée pour cette application. Ajoutez-la aux URL de redirection autorisées de l\'application dans la console, ainsi qu\'à votre fournisseur de connexion sociale si vous utilisez la connexion sociale native.',
   'errors.signin.flow.failure': 'Une erreur est survenue lors du flux de connexion. Veuillez réessayer plus tard.',
   'errors.signin.flow.completion.failure':
     'Une erreur est survenue lors de la finalisation du flux de connexion. Veuillez réessayer plus tard.',
diff --git a/packages/i18n/src/translations/hi-IN.ts b/packages/i18n/src/translations/hi-IN.ts
index d46ec218a..3409219ee 100644
--- a/packages/i18n/src/translations/hi-IN.ts
+++ b/packages/i18n/src/translations/hi-IN.ts
@@ -161,6 +161,7 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'त्रुटि',
   'errors.signin.initialization': 'इनिशियलाइज़ेशन में त्रुटि हुई। कृपया बाद में पुनः प्रयास करें।',
+  'errors.signin.redirect.uri.mismatch': 'रीडायरेक्ट URI "{url}" इस एप्लिकेशन के लिए पंजीकृत नहीं है। इसे कंसोल में एप्लिकेशन के अधिकृत रीडायरेक्ट URL में जोड़ें, और यदि आप ऐप-नेटिव सोशल साइन-इन का उपयोग करते हैं तो अपने सोशल लॉगिन प्रदाता में भी जोड़ें।',
   'errors.signin.flow.failure': 'साइन-इन प्रक्रिया में त्रुटि। कृपया बाद में पुनः प्रयास करें।',
   'errors.signin.flow.completion.failure': 'साइन-इन प्रक्रिया पूरी करते समय त्रुटि। कृपया बाद में पुनः प्रयास करें।',
   'errors.signin.flow.passkeys.failure': 'पासकीज़ के साथ साइन-इन करते समय त्रुटि।',
diff --git a/packages/i18n/src/translations/ja-JP.ts b/packages/i18n/src/translations/ja-JP.ts
index 3738609fc..831d65f7e 100644
--- a/packages/i18n/src/translations/ja-JP.ts
+++ b/packages/i18n/src/translations/ja-JP.ts
@@ -161,6 +161,7 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'エラー',
   'errors.signin.initialization': '初期化中にエラーが発生しました。後でもう一度お試しください。',
+  'errors.signin.redirect.uri.mismatch': 'リダイレクト URI「{url}」はこのアプリケーションに登録されていません。コンソールでアプリケーションの承認済みリダイレクト URL に追加してください。アプリネイティブのソーシャルサインインを使用する場合は、ソーシャルログインプロバイダーにも追加してください。',
   'errors.signin.flow.failure': 'サインイン処理中にエラーが発生しました。後でもう一度お試しください。',
   'errors.signin.flow.completion.failure': 'サインイン処理の完了中にエラーが発生しました。後でもう一度お試しください。',
   'errors.signin.flow.passkeys.failure': 'パスキーでのサインイン中にエラーが発生しました。後でもう一度お試しください。',
diff --git a/packages/i18n/src/translations/pt-BR.ts b/packages/i18n/src/translations/pt-BR.ts
index 490333f47..20ef5cc11 100644
--- a/packages/i18n/src/translations/pt-BR.ts
+++ b/packages/i18n/src/translations/pt-BR.ts
@@ -161,6 +161,7 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'Erro',
   'errors.signin.initialization': 'Ocorreu um erro ao inicializar. Tente novamente mais tarde.',
+  'errors.signin.redirect.uri.mismatch': 'O URI de redirecionamento "{url}" não está registrado para este aplicativo. Adicione-o às URLs de redirecionamento autorizadas do aplicativo no console e, se usar login social nativo, também ao seu provedor de login social.',
   'errors.signin.flow.failure': 'Ocorreu um erro durante o login. Tente novamente mais tarde.',
   'errors.signin.flow.completion.failure': 'Ocorreu um erro ao completar o login. Tente novamente mais tarde.',
   'errors.signin.flow.passkeys.failure':
diff --git a/packages/i18n/src/translations/pt-PT.ts b/packages/i18n/src/translations/pt-PT.ts
index d604cd85b..4bd7c6f26 100644
--- a/packages/i18n/src/translations/pt-PT.ts
+++ b/packages/i18n/src/translations/pt-PT.ts
@@ -161,6 +161,7 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'Erro',
   'errors.signin.initialization': 'Ocorreu um erro ao inicializar. Tente novamente mais tarde.',
+  'errors.signin.redirect.uri.mismatch': 'O URI de redirecionamento "{url}" não está registado para esta aplicação. Adicione-o aos URLs de redirecionamento autorizados da aplicação na consola e, se utilizar início de sessão social nativo, também ao seu fornecedor de início de sessão social.',
   'errors.signin.flow.failure': 'Ocorreu um erro durante o início de sessão. Tente novamente mais tarde.',
   'errors.signin.flow.completion.failure':
     'Ocorreu um erro ao completar o início de sessão. Tente novamente mais tarde.',
diff --git a/packages/i18n/src/translations/si-LK.ts b/packages/i18n/src/translations/si-LK.ts
index 8de045c9a..a2f8acfd5 100644
--- a/packages/i18n/src/translations/si-LK.ts
+++ b/packages/i18n/src/translations/si-LK.ts
@@ -161,6 +161,7 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'දෝෂය',
   'errors.signin.initialization': 'ආරම්භ කිරීමේදී දෝෂයක් සිදු විය. කරුණාකර පසුව නැවත උත්සාහ කරන්න.',
+  'errors.signin.redirect.uri.mismatch': 'යළි-යොමු URI "{url}" මෙම යෙදුම සඳහා ලියාපදිංචි කර නොමැත. එය කොන්සෝලයේ යෙදුමේ අනුමත යළි-යොමු URL වලට එක් කරන්න, සහ ඔබ යෙදුම්-ස්වදේශීය සමාජ පිවිසුම භාවිතා කරන්නේ නම් ඔබගේ සමාජ පිවිසුම් සපයන්නාටද එක් කරන්න.',
   'errors.signin.flow.failure': 'ලොග් වීමේදී දෝෂයක් සිදු විය. කරුණාකර පසුව නැවත උත්සාහ කරන්න.',
   'errors.signin.flow.completion.failure':
     'ලොග් වීමේ ක්‍රියාවලිය සම්පූර්ණ කිරීමේදී දෝෂයක් සිදු විය. කරුණාකර පසුව නැවත උත්සාහ කරන්න.',
diff --git a/packages/i18n/src/translations/ta-IN.ts b/packages/i18n/src/translations/ta-IN.ts
index 4a76fbb91..c0c46a691 100644
--- a/packages/i18n/src/translations/ta-IN.ts
+++ b/packages/i18n/src/translations/ta-IN.ts
@@ -162,6 +162,7 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'பிழை',
   'errors.signin.initialization': 'தொடக்கத்தில் பிழை ஏற்பட்டது. பின்னர் மீண்டும் முயற்சிக்கவும்.',
+  'errors.signin.redirect.uri.mismatch': 'திருப்பிவிடும் URI "{url}" இந்த பயன்பாட்டிற்கு பதிவு செய்யப்படவில்லை. இதை கன்சோலில் பயன்பாட்டின் அங்கீகரிக்கப்பட்ட திருப்பிவிடும் URL களில் சேர்க்கவும்; பயன்பாட்டு-சொந்த சமூக உள்நுழைவைப் பயன்படுத்தினால் உங்கள் சமூக உள்நுழைவு வழங்குநரிலும் சேர்க்கவும்.',
   'errors.signin.flow.failure': 'உள்நுழைவு செயல்பாட்டின் போது பிழை ஏற்பட்டது. பின்னர் மீண்டும் முயற்சிக்கவும்.',
   'errors.signin.flow.completion.failure':
     'உள்நுழைவு செயல்பாட்டை முடிக்கும் போது பிழை ஏற்பட்டது. பின்னர் மீண்டும் முயற்சிக்கவும்.',
diff --git a/packages/i18n/src/translations/te-IN.ts b/packages/i18n/src/translations/te-IN.ts
index 0370b9993..0c5e6a684 100644
--- a/packages/i18n/src/translations/te-IN.ts
+++ b/packages/i18n/src/translations/te-IN.ts
@@ -162,6 +162,7 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'లోపం',
   'errors.signin.initialization': 'ప్రారంభించేటప్పుడు లోపం వచ్చింది. దయచేసి తరువాత మళ్లీ ప్రయత్నించండి.',
+  'errors.signin.redirect.uri.mismatch': 'రీడైరెక్ట్ URI "{url}" ఈ అప్లికేషన్ కోసం నమోదు కాలేదు. దీన్ని కన్సోల్‌లో అప్లికేషన్ యొక్క అధీకృత రీడైరెక్ట్ URLలకు జోడించండి; మీరు యాప్-నేటివ్ సోషల్ సైన్-ఇన్ ఉపయోగిస్తే మీ సోషల్ లాగిన్ ప్రొవైడర్‌కు కూడా జోడించండి.',
   'errors.signin.flow.failure': 'సైన్ ఇన్ ప్రక్రియలో లోపం వచ్చింది. దయచేసి తరువాత మళ్లీ ప్రయత్నించండి.',
   'errors.signin.flow.completion.failure': 'సైన్ ఇన్ పూర్తి చేయడంలో లోపం వచ్చింది. దయచేసి తరువాత మళ్లీ ప్రయత్నించండి.',
   'errors.signin.flow.passkeys.failure': 'పాస్‌కీలతో సైన్ ఇన్ చేస్తూ లోపం వచ్చింది. దయచేసి తరువాత మళ్లీ ప్రయత్నించండి.',
diff --git a/packages/nextjs/README.md b/packages/nextjs/README.md
index 90e2b135d..f9e21eae7 100644
--- a/packages/nextjs/README.md
+++ b/packages/nextjs/README.md
@@ -12,6 +12,27 @@
 
 Get started with Asgardeo in your Next.js application in minutes. Follow our [Next.js Quick Start Guide](https://wso2.com/asgardeo/docs/quick-starts/nextjs/) for step-by-step instructions on integrating authentication into your app.
 
+## Redirect URLs
+
+The SDK sends `afterSignInUrl` (`NEXT_PUBLIC_ASGARDEO_AFTER_SIGN_IN_URL`, or the `afterSignInUrl` prop of
+`<AsgardeoProvider>`) to the identity server as the OAuth `redirect_uri`. A relative value such as `/dashboard` is
+resolved against your app's origin. Register the resolved URL, for example `http://localhost:3000/dashboard` and its
+production equivalent, under the application's **Authorized redirect URLs** in the console; the bare origin is not
+enough. If it is missing, the embedded `<SignIn />` fails to initialise and the sign-in action logs the exact URL to
+register.
+
+Social login with app-native authentication needs two more redirect URIs on the social provider's OAuth client (for
+Google: the OAuth client's **Authorized redirect URIs**), because the identity server sends different callbacks for
+the two flows:
+
+- sign-in: the same resolved `afterSignInUrl`, e.g. `http://localhost:3000/dashboard`
+- sign-up (self registration): the identity server's registration callback,
+  `https://accounts.asgardeo.io/t/<organization>/accounts/register`
+
+A missing entry surfaces as Google's `Error 400: redirect_uri_mismatch`.
+
+`afterSignOutUrl` (default: the app origin) is sent as the post-logout redirect URI and must be registered as well.
+
 ## API Documentation
 
 For complete API documentation including all components, hooks, and customization options, see the [Next.js SDK Documentation](https://wso2.com/asgardeo/docs/sdks/nextjs/overview).
diff --git a/packages/react/src/components/presentation/auth/SignIn/v1/BaseSignIn.tsx b/packages/react/src/components/presentation/auth/SignIn/v1/BaseSignIn.tsx
index 231ddae50..00431eb5d 100644
--- a/packages/react/src/components/presentation/auth/SignIn/v1/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/auth/SignIn/v1/BaseSignIn.tsx
@@ -38,7 +38,7 @@ import useFlow from '../../../../../contexts/Flow/useFlow';
 import useTheme from '../../../../../contexts/Theme/useTheme';
 import {useForm, FormField} from '../../../../../hooks/useForm';
 import useTranslation from '../../../../../hooks/useTranslation';
-import resolveFlowErrorMessage from '../../../../../utils/resolveFlowErrorMessage';
+import resolveSignInErrorMessage from '../../../../../utils/resolveSignInErrorMessage';
 import AlertPrimitive, {AlertVariant} from '../../../../primitives/Alert/Alert';
 import CardPrimitive, {CardProps} from '../../../../primitives/Card/Card';
 import Divider from '../../../../primitives/Divider/Divider';
@@ -510,7 +510,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         }
       }
     } catch (err) {
-      const errorMessage: string = resolveFlowErrorMessage(err, t('errors.signin.flow.failure'));
+      const errorMessage: string = resolveSignInErrorMessage(err, {afterSignInUrl, fallback: t('errors.signin.flow.failure'), t});
       setError(errorMessage);
       onError?.(err as Error);
     } finally {
@@ -800,7 +800,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         }
       }
     } catch (err) {
-      const errorMessage: string = resolveFlowErrorMessage(err, 'Authenticator selection failed');
+      const errorMessage: string = resolveSignInErrorMessage(err, {afterSignInUrl, fallback: 'Authenticator selection failed', t});
       setError(errorMessage);
       onError?.(err as Error);
     } finally {
@@ -926,7 +926,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
           );
         }
       } catch (err) {
-        const errorMessage: string = resolveFlowErrorMessage(err, t('errors.signin.initialization'));
+        const errorMessage: string = resolveSignInErrorMessage(err, {afterSignInUrl, fallback: t('errors.signin.initialization'), t});
         setError(errorMessage);
         onError?.(err as Error);
       } finally {
diff --git a/packages/react/src/utils/resolveSignInErrorMessage.test.ts b/packages/react/src/utils/resolveSignInErrorMessage.test.ts
new file mode 100644
index 000000000..cbea9f30f
--- /dev/null
+++ b/packages/react/src/utils/resolveSignInErrorMessage.test.ts
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {describe, expect, it} from 'vitest';
+import resolveSignInErrorMessage from './resolveSignInErrorMessage';
+
+const t = (key: string, params?: Record<string, string | number>): string =>
+  key === 'errors.signin.redirect.uri.mismatch' ? `Register ${params?.['url']}` : key;
+
+describe('resolveSignInErrorMessage', () => {
+  it('maps an unregistered redirect URI rejection to the translated message with the URL', () => {
+    const error: Error = new Error(
+      '[AsgardeoAPIError] (code="initializeEmbeddedSignInFlow-ResponseError-001") (HTTP 400 - Bad Request)\nMessage: Authorization request failed: {"code":"ABA-60001","message":"Invalid authentication request.","description":"invalid_callback - callback.not.match"}',
+    );
+
+    expect(resolveSignInErrorMessage(error, {afterSignInUrl: 'http://localhost:3000/dashboard', fallback: 'x', t})).toBe(
+      'Register http://localhost:3000/dashboard',
+    );
+  });
+
+  it('passes other server errors through', () => {
+    const error: Error = new Error('Failed: {"code":"ABA-60007","description":"App native authentication is not enabled."}');
+
+    expect(resolveSignInErrorMessage(error, {fallback: 'x', t})).toBe('App native authentication is not enabled.');
+  });
+
+  it('uses the fallback when the error is empty', () => {
+    expect(resolveSignInErrorMessage(new Error(''), {fallback: 'Generic failure', t})).toBe('Generic failure');
+  });
+});
diff --git a/packages/react/src/utils/resolveSignInErrorMessage.ts b/packages/react/src/utils/resolveSignInErrorMessage.ts
new file mode 100644
index 000000000..81cdfc7a6
--- /dev/null
+++ b/packages/react/src/utils/resolveSignInErrorMessage.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import resolveFlowErrorMessage from './resolveFlowErrorMessage';
+
+/**
+ * Identity server rejections that have a dedicated, translated explanation.
+ * The identity server reports these under a generic code (e.g. `ABA-60001`), so they are matched on the description.
+ */
+const REDIRECT_URI_MISMATCH: RegExp = /invalid_callback|callback\.not\.match/i;
+
+export interface ResolveSignInErrorMessageOptions {
+  /** The URL the SDK sends as the OAuth `redirect_uri`; shown to the developer when it is not registered. */
+  afterSignInUrl?: string;
+  /** Message to use when the error carries nothing meaningful. */
+  fallback: string;
+  /** Translation function. */
+  t: (key: string, params?: Record<string, string | number>) => string;
+}
+
+/**
+ * Resolves the message to show for an error raised by the embedded sign-in flow.
+ * Known identity server rejections map to translated, actionable messages; anything else falls back to
+ * {@link resolveFlowErrorMessage}.
+ */
+const resolveSignInErrorMessage = (
+  error: unknown,
+  {afterSignInUrl, fallback, t}: ResolveSignInErrorMessageOptions,
+): string => {
+  const message: string = resolveFlowErrorMessage(error, '');
+
+  if (REDIRECT_URI_MISMATCH.test(message)) {
+    const url: string = afterSignInUrl || (typeof window !== 'undefined' ? window.location.origin : '');
+
+    return t('errors.signin.redirect.uri.mismatch', {url});
+  }
+
+  return message || fallback;
+};
+
+export default resolveSignInErrorMessage;

From 3b05de65e359d0e89c50c4212387db514258ab7c Mon Sep 17 00:00:00 2001
From: DonOmalVindula <omalvindula@live.com>
Date: Sat, 5 Sep 2026 09:07:27 +0530
Subject: [PATCH 3/9] fix(nextjs): surface why the automatic sign-in after
 registration was skipped

The automatic sign-in after an embedded registration falls back silently from the
browser's point of view: the only trace of a skipped or failed attempt is a warning in
the server log, so a developer sees the success message and then nothing.

`autoSignInAfterSignUp` now returns `{signedIn, reason}`, the sign-up action passes the
reason to the client as `autoSignInSkippedReason` (also set when the final registration
step carries no credentials, e.g. multi-step flows), and the client provider logs it to
the browser console when no session was created.
---
 .changeset/auto-signin-skip-reason.md         |  5 ++
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |  8 ++-
 .../nextjs/src/server/actions/signUpAction.ts | 26 ++++++--
 .../nextjs/src/utils/autoSignInAfterSignUp.ts | 59 ++++++++++---------
 4 files changed, 66 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/auto-signin-skip-reason.md

diff --git a/.changeset/auto-signin-skip-reason.md b/.changeset/auto-signin-skip-reason.md
new file mode 100644
index 000000000..b2fb3aa9c
--- /dev/null
+++ b/.changeset/auto-signin-skip-reason.md
@@ -0,0 +1,5 @@
+---
+'@asgardeo/nextjs': patch
+---
+
+When the automatic sign-in after an embedded registration cannot be performed (for example the redirect URI is not registered, app-native authentication is disabled, the login flow needs more than one step, or the registration is multi-step), the reason is now reported in the browser console as well as the server log, so it is visible where developers look first.
diff --git a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
index f4e97ecd2..e6640ca3d 100644
--- a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -258,7 +258,7 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
 
     // After the Embedded flow is successful, the URL to navigate next is sent as `afterSignUpUrl` in the response.
     if (result?.data?.afterSignUpUrl) {
-      const {afterSignUpUrl, signedIn, ...flowResponse}: any = result.data;
+      const {afterSignUpUrl, autoSignInSkippedReason, signedIn, ...flowResponse}: any = result.data;
 
       // A URL passed by the caller (e.g. the `afterSignUpUrl` prop of `<SignUp />`) wins over the configured one.
       router.push(options?.afterSignUpUrl || afterSignUpUrl);
@@ -266,6 +266,12 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
       if (signedIn) {
         // A session cookie was set during sign-up; re-render server components so the signed-in state is picked up.
         router.refresh();
+      } else if (autoSignInSkippedReason) {
+        // Make the fallback visible where developers look first, not only in the server log.
+        logger.warn(
+          `[AsgardeoClientProvider] The user was registered but not signed in automatically: ${autoSignInSkippedReason} ` +
+            'They will have to sign in manually.',
+        );
       }
 
       // Hand the completed flow back to the caller (e.g. `<SignUp />`) so it can finish its lifecycle
diff --git a/packages/nextjs/src/server/actions/signUpAction.ts b/packages/nextjs/src/server/actions/signUpAction.ts
index e8ef813c7..fc083acdd 100644
--- a/packages/nextjs/src/server/actions/signUpAction.ts
+++ b/packages/nextjs/src/server/actions/signUpAction.ts
@@ -20,7 +20,11 @@
 
 import {EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse, EmbeddedFlowStatus} from '@asgardeo/node';
 import AsgardeoNextClient from '../../AsgardeoNextClient';
-import autoSignInAfterSignUp, {extractSignUpCredentials, SignUpCredentials} from '../../utils/autoSignInAfterSignUp';
+import autoSignInAfterSignUp, {
+  AutoSignInResult,
+  extractSignUpCredentials,
+  SignUpCredentials,
+} from '../../utils/autoSignInAfterSignUp';
 
 /**
  * Server action for signing in a user.
@@ -38,7 +42,7 @@ const signUpAction = async (
         afterSignUpUrl?: string;
         signUpUrl?: string;
       }
-    | (EmbeddedFlowExecuteResponse & {afterSignUpUrl?: string; signedIn?: boolean});
+    | (EmbeddedFlowExecuteResponse & {afterSignUpUrl?: string; autoSignInSkippedReason?: string; signedIn?: boolean});
   error?: string;
   success: boolean;
 }> => {
@@ -65,11 +69,25 @@ const signUpAction = async (
       // When that is not possible (MFA, app-native auth disabled, multi-step registration), they are
       // sent to `afterSignUpUrl` without a session and can sign in manually.
       const credentials: SignUpCredentials | undefined = extractSignUpCredentials(payload.inputs);
-      const signedIn: boolean = credentials ? await autoSignInAfterSignUp(credentials) : false;
+      const autoSignIn: AutoSignInResult = credentials
+        ? await autoSignInAfterSignUp(credentials)
+        : {
+            reason:
+              'The final registration step did not include a username and password (e.g. a multi-step registration flow).',
+            signedIn: false,
+          };
 
       // Return the completed flow response along with the URL so that client components
       // (e.g. `<SignUp />`) can finish their own lifecycle instead of receiving nothing.
-      return {data: {...response, afterSignUpUrl: String(afterSignUpUrl), signedIn}, success: true};
+      return {
+        data: {
+          ...response,
+          afterSignUpUrl: String(afterSignUpUrl),
+          autoSignInSkippedReason: autoSignIn.reason,
+          signedIn: autoSignIn.signedIn,
+        },
+        success: true,
+      };
     }
 
     return {data: response as EmbeddedFlowExecuteResponse, success: true};
diff --git a/packages/nextjs/src/utils/autoSignInAfterSignUp.ts b/packages/nextjs/src/utils/autoSignInAfterSignUp.ts
index 38d7946b5..b131e059e 100644
--- a/packages/nextjs/src/utils/autoSignInAfterSignUp.ts
+++ b/packages/nextjs/src/utils/autoSignInAfterSignUp.ts
@@ -38,6 +38,14 @@ export interface SignUpCredentials {
   username: string;
 }
 
+/**
+ * Outcome of an automatic sign-in attempt. `reason` explains why it was skipped or failed.
+ */
+export interface AutoSignInResult {
+  reason?: string;
+  signedIn: boolean;
+}
+
 /**
  * Extracts the username and password from the inputs of a registration flow submission, if present.
  */
@@ -62,11 +70,12 @@ export const extractSignUpCredentials = (inputs?: Record<string, unknown>): Sign
  * submitted, through the app-native (embedded) sign-in flow. On success the session cookie is set exactly
  * as for a regular sign-in.
  *
- * Returns `false` (without throwing) whenever an automatic sign-in is not possible, for example when
- * app-native authentication is disabled for the application or the login flow needs more than a
- * username/password step. The caller should then fall back to sending the user to the sign-in page.
+ * Never throws: whenever an automatic sign-in is not possible, for example when app-native authentication
+ * is disabled for the application, the redirect URI is not registered, or the login flow needs more than a
+ * username/password step, the result carries `signedIn: false` and a `reason`. The caller should then fall
+ * back to sending the user to the sign-in page.
  */
-const autoSignInAfterSignUp = async ({username, password}: SignUpCredentials): Promise<boolean> => {
+const autoSignInAfterSignUp = async ({username, password}: SignUpCredentials): Promise<AutoSignInResult> => {
   try {
     const initiation: Awaited<ReturnType<typeof signInAction>> = await signInAction({
       flowId: '',
@@ -77,13 +86,11 @@ const autoSignInAfterSignUp = async ({username, password}: SignUpCredentials): P
       | undefined;
 
     if (!initiation.success || !flow || !('nextStep' in flow)) {
-      logger.warn(
-        `[autoSignInAfterSignUp] Could not start the sign-in flow after registration, the user has to sign in manually. ${
-          initiation.error ?? ''
-        }`,
-      );
+      const reason: string = `Could not start the sign-in flow after registration. ${initiation.error ?? ''}`.trim();
+
+      logger.warn(`[autoSignInAfterSignUp] ${reason} The user has to sign in manually.`);
 
-      return false;
+      return {reason, signedIn: false};
     }
 
     const basicAuthenticator: EmbeddedSignInFlowAuthenticator | undefined = flow.nextStep?.authenticators?.find(
@@ -94,11 +101,11 @@ const autoSignInAfterSignUp = async ({username, password}: SignUpCredentials): P
     );
 
     if (!basicAuthenticator) {
-      logger.warn(
-        '[autoSignInAfterSignUp] The first login step has no username/password authenticator, the user has to sign in manually.',
-      );
+      const reason: string = 'The first login step has no username/password authenticator.';
 
-      return false;
+      logger.warn(`[autoSignInAfterSignUp] ${reason} The user has to sign in manually.`);
+
+      return {reason, signedIn: false};
     }
 
     const link: {href: string; method: string} | undefined = flow.links?.[0];
@@ -111,24 +118,22 @@ const autoSignInAfterSignUp = async ({username, password}: SignUpCredentials): P
     );
 
     if (completion.success && completion.data && 'afterSignInUrl' in completion.data) {
-      return true;
+      return {signedIn: true};
     }
 
-    logger.warn(
-      `[autoSignInAfterSignUp] Sign-in did not complete in a single step (status: ${
-        (completion.data as {flowStatus?: string})?.flowStatus ?? 'unknown'
-      }), the user has to sign in manually. ${completion.error ?? ''}`,
-    );
+    const reason: string = `Sign-in did not complete in a single step (status: ${
+      (completion.data as {flowStatus?: string})?.flowStatus ?? 'unknown'
+    }). ${completion.error ?? ''}`.trim();
+
+    logger.warn(`[autoSignInAfterSignUp] ${reason} The user has to sign in manually.`);
 
-    return false;
+    return {reason, signedIn: false};
   } catch (error) {
-    logger.warn(
-      `[autoSignInAfterSignUp] Automatic sign-in failed, the user has to sign in manually: ${
-        error instanceof Error ? error.message : String(error)
-      }`,
-    );
+    const reason: string = `Automatic sign-in failed: ${error instanceof Error ? error.message : String(error)}`;
+
+    logger.warn(`[autoSignInAfterSignUp] ${reason} The user has to sign in manually.`);
 
-    return false;
+    return {reason, signedIn: false};
   }
 };
 

From 796d83136a09e486a42bdd8247bb3cbc0cb1db2b Mon Sep 17 00:00:00 2001
From: DonOmalVindula <omalvindula@live.com>
Date: Sat, 5 Sep 2026 09:12:24 +0530
Subject: [PATCH 4/9] fix(react,nextjs): render rich text in the sign-up form
 and forward SignUp props in Next.js

Two layout complaints about the embedded `<SignUp />`:

- Text between fields was missing and the submit button sat jammed against the last
  field. The v1 sign-up factory had no case for `RICH_TEXT` components, which the
  registration flow uses for things like the terms of service paragraph, so they were
  dropped. Add a `RichText` adapter (DOMPurify-sanitised, unresolved `{{template}}`
  placeholders stripped) and render it.
- The flow's own heading appeared under the card title. Hiding the card title with
  `showTitle={false}` is the intended way to handle a flow that brings its own heading,
  but the Next.js `<SignUp />` wrapper only forwarded five props and silently dropped the
  rest, including `showTitle`, `showSubtitle`, `showLogo`, `onComplete` and
  `onFlowChange`, even though its props type accepts them. Forward the remaining props
  to the base form.
---
 .changeset/signup-rich-text-and-props.md      |  7 ++
 .../components/presentation/SignUp/SignUp.tsx |  2 +
 .../src/components/adapters/FormContainer.tsx |  9 ++-
 .../src/components/adapters/RichText.tsx      | 72 +++++++++++++++++++
 .../auth/SignUp/v1/SignUpOptionFactory.tsx    |  5 ++
 5 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/signup-rich-text-and-props.md
 create mode 100644 packages/react/src/components/adapters/RichText.tsx

diff --git a/.changeset/signup-rich-text-and-props.md b/.changeset/signup-rich-text-and-props.md
new file mode 100644
index 000000000..59f94ebac
--- /dev/null
+++ b/.changeset/signup-rich-text-and-props.md
@@ -0,0 +1,7 @@
+---
+'@asgardeo/react': patch
+'@asgardeo/nextjs': patch
+---
+
+- React: the embedded `<SignUp />` now renders `RICH_TEXT` flow components (for example the terms of service text under the registration form), which were previously dropped, leaving the submit button jammed against the last field.
+- Next.js: `<SignUp />` forwards all remaining props to the underlying form (`showTitle`, `showSubtitle`, `showLogo`, `onComplete`, `onFlowChange`, class names, ...). Previously they were accepted by the type but silently ignored, so for instance `showTitle={false}` had no effect when a registration flow renders its own heading.
diff --git a/packages/nextjs/src/client/components/presentation/SignUp/SignUp.tsx b/packages/nextjs/src/client/components/presentation/SignUp/SignUp.tsx
index 3da81aef4..e3f4e4285 100644
--- a/packages/nextjs/src/client/components/presentation/SignUp/SignUp.tsx
+++ b/packages/nextjs/src/client/components/presentation/SignUp/SignUp.tsx
@@ -69,6 +69,7 @@ const SignUp: FC<SignUpProps> = ({
   variant = 'outlined',
   afterSignUpUrl,
   onError,
+  ...rest
 }: SignUpProps) => {
   const {signUp} = useAsgardeo();
 
@@ -118,6 +119,7 @@ const SignUp: FC<SignUpProps> = ({
       size={size}
       variant={variant}
       isInitialized={true}
+      {...rest}
     />
   );
 };
diff --git a/packages/react/src/components/adapters/FormContainer.tsx b/packages/react/src/components/adapters/FormContainer.tsx
index 83e068d4a..01238b46d 100644
--- a/packages/react/src/components/adapters/FormContainer.tsx
+++ b/packages/react/src/components/adapters/FormContainer.tsx
@@ -17,6 +17,7 @@
  */
 
 import {FC, FormEvent} from 'react';
+import useTheme from '../../contexts/Theme/useTheme';
 import {AdapterProps} from '../../models/adapters';
 // eslint-disable-next-line import/no-cycle
 import {createSignUpComponent} from '../presentation/auth/SignUp/v1/SignUpOptionFactory';
@@ -26,6 +27,7 @@ import {createSignUpComponent} from '../presentation/auth/SignUp/v1/SignUpOption
  */
 const FormContainer: FC<AdapterProps> = (props: AdapterProps) => {
   const {component} = props;
+  const {theme} = useTheme();
 
   // If the form has child components, render them wrapped in a form element
   if (component.components && component.components.length > 0) {
@@ -45,7 +47,12 @@ const FormContainer: FC<AdapterProps> = (props: AdapterProps) => {
     };
 
     return (
-      <form key={component.id} onSubmit={handleFormSubmit} style={{display: 'flex', flexDirection: 'column'}}>
+      <form
+        key={component.id}
+        onSubmit={handleFormSubmit}
+        // Same vertical rhythm as the sign-in form: fields, text and buttons are evenly spaced.
+        style={{display: 'flex', flexDirection: 'column', gap: `calc(${theme.vars.spacing.unit} * 2)`}}
+      >
         {component.components.map((childComponent: any, index: number) =>
           createSignUpComponent({
             ...props,
diff --git a/packages/react/src/components/adapters/RichText.tsx b/packages/react/src/components/adapters/RichText.tsx
new file mode 100644
index 000000000..758d42a21
--- /dev/null
+++ b/packages/react/src/components/adapters/RichText.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {resolveEmojiUrisInHtml} from '@asgardeo/browser';
+import {css} from '@emotion/css';
+import DOMPurify from 'dompurify';
+import {FC, ReactElement} from 'react';
+import {AdapterProps} from '../../models/adapters';
+
+const richTextClass: string = css`
+  overflow-wrap: anywhere;
+  & * {
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+  & .rich-text-align-left {
+    text-align: left;
+  }
+  & .rich-text-align-center {
+    text-align: center;
+  }
+  & .rich-text-align-right {
+    text-align: right;
+  }
+  & p {
+    margin: 0;
+  }
+`;
+
+/**
+ * Drops `{{template}}` placeholders that were not resolved (e.g. branding URLs when no branding
+ * metadata is available) so they never end up in the rendered markup as broken links.
+ */
+const stripUnresolvedTemplates = (html: string): string =>
+  html.replace(/href="\{\{[^"]*\}\}"/g, 'href="#"').replace(/\{\{[^}]*\}\}/g, '');
+
+/**
+ * Renders a `RICH_TEXT` flow component (e.g. terms of service under a registration form).
+ * The HTML comes from the identity server and is sanitized with DOMPurify before rendering.
+ */
+const RichText: FC<AdapterProps> = ({component}: AdapterProps): ReactElement | null => {
+  const text: string = (component.config?.['text'] as string) || '';
+
+  if (!text.trim()) {
+    return null;
+  }
+
+  return (
+    <div
+      className={richTextClass}
+      // Manually sanitized with `DOMPurify`. IMPORTANT: DO NOT REMOVE OR MODIFY THIS SANITIZATION STEP.
+      dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(resolveEmojiUrisInHtml(stripUnresolvedTemplates(text)))}}
+    />
+  );
+};
+
+export default RichText;
diff --git a/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx b/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
index 791703e21..872e5e483 100644
--- a/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
+++ b/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
@@ -33,6 +33,7 @@ import LinkedInButton from '../../../../adapters/LinkedInButton';
 import MicrosoftButton from '../../../../adapters/MicrosoftButton';
 import NumberInput from '../../../../adapters/NumberInput';
 import PasswordInput from '../../../../adapters/PasswordInput';
+import RichText from '../../../../adapters/RichText';
 import SelectInput from '../../../../adapters/SelectInput';
 import SignInWithEthereumButton from '../../../../adapters/SignInWithEthereumButton';
 import ButtonComponent from '../../../../adapters/SubmitButton';
@@ -152,6 +153,10 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
     case EmbeddedFlowComponentType.Image:
       return <ImageComponent component={component} onSubmit={onSubmit} {...rest} />;
 
+    // `RICH_TEXT` (e.g. terms of service under the form) is not part of the v1 enum but is sent by the server.
+    case 'RICH_TEXT':
+      return <RichText component={component} onSubmit={onSubmit} {...rest} />;
+
     default:
       return <div />;
   }

From 38e395b4182a194744734732f2ddff27993d5d98 Mon Sep 17 00:00:00 2001
From: DonOmalVindula <omalvindula@live.com>
Date: Sat, 5 Sep 2026 11:24:01 +0530
Subject: [PATCH 5/9] chore: consolidate changesets for the sign-in / sign-up
 follow-ups

---
 .changeset/auto-signin-skip-reason.md    |  5 -----
 .changeset/redirect-uri-guidance.md      |  7 -------
 .changeset/signin-signup-followups.md    | 13 +++++++++++++
 .changeset/signup-rich-text-and-props.md |  7 -------
 .changeset/social-buttons-dom-props.md   |  5 -----
 5 files changed, 13 insertions(+), 24 deletions(-)
 delete mode 100644 .changeset/auto-signin-skip-reason.md
 delete mode 100644 .changeset/redirect-uri-guidance.md
 create mode 100644 .changeset/signin-signup-followups.md
 delete mode 100644 .changeset/signup-rich-text-and-props.md
 delete mode 100644 .changeset/social-buttons-dom-props.md

diff --git a/.changeset/auto-signin-skip-reason.md b/.changeset/auto-signin-skip-reason.md
deleted file mode 100644
index b2fb3aa9c..000000000
--- a/.changeset/auto-signin-skip-reason.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@asgardeo/nextjs': patch
----
-
-When the automatic sign-in after an embedded registration cannot be performed (for example the redirect URI is not registered, app-native authentication is disabled, the login flow needs more than one step, or the registration is multi-step), the reason is now reported in the browser console as well as the server log, so it is visible where developers look first.
diff --git a/.changeset/redirect-uri-guidance.md b/.changeset/redirect-uri-guidance.md
deleted file mode 100644
index 7c01a86d0..000000000
--- a/.changeset/redirect-uri-guidance.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-'@asgardeo/react': patch
-'@asgardeo/i18n': patch
-'@asgardeo/nextjs': patch
----
-
-When the identity server rejects the embedded sign-in because the redirect URI (`afterSignInUrl`) is not registered for the application, the sign-in form now shows a translated, actionable message naming the URL to register (`errors.signin.redirect.uri.mismatch`), instead of the raw `invalid_callback - callback.not.match` text. The Next.js README documents the redirect URL requirements.
diff --git a/.changeset/signin-signup-followups.md b/.changeset/signin-signup-followups.md
new file mode 100644
index 000000000..f2102aa2f
--- /dev/null
+++ b/.changeset/signin-signup-followups.md
@@ -0,0 +1,13 @@
+---
+'@asgardeo/react': patch
+'@asgardeo/nextjs': patch
+'@asgardeo/i18n': patch
+---
+
+Fixes for the embedded `<SignIn />` and `<SignUp />` components:
+
+- Social login buttons in the sign-in, sign-up and recovery flows no longer receive internal form-state props (`formValues`, `formErrors`, `touchedFields`, `isFormValid`, `onInputChange`, `inputClassName`), which React reported as unknown attributes on the `<button>` element.
+- When the identity server rejects the embedded sign-in because the redirect URI (`afterSignInUrl`) is not registered for the application, the form shows a translated, actionable message naming the URL to register (`errors.signin.redirect.uri.mismatch`) instead of the raw `invalid_callback - callback.not.match` text. The Next.js README documents the redirect URL requirements.
+- When the automatic sign-in after an embedded registration cannot be performed, the reason is reported in the browser console as well as the server log.
+- `<SignUp />` renders `RICH_TEXT` flow components (for example the terms of service text), which were previously dropped, leaving the submit button jammed against the last field.
+- The Next.js `<SignUp />` forwards all remaining props to the underlying form (`showTitle`, `showSubtitle`, `showLogo`, `onComplete`, `onFlowChange`, class names, ...), so for instance `showTitle={false}` now works when a registration flow renders its own heading.
diff --git a/.changeset/signup-rich-text-and-props.md b/.changeset/signup-rich-text-and-props.md
deleted file mode 100644
index 59f94ebac..000000000
--- a/.changeset/signup-rich-text-and-props.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-'@asgardeo/react': patch
-'@asgardeo/nextjs': patch
----
-
-- React: the embedded `<SignUp />` now renders `RICH_TEXT` flow components (for example the terms of service text under the registration form), which were previously dropped, leaving the submit button jammed against the last field.
-- Next.js: `<SignUp />` forwards all remaining props to the underlying form (`showTitle`, `showSubtitle`, `showLogo`, `onComplete`, `onFlowChange`, class names, ...). Previously they were accepted by the type but silently ignored, so for instance `showTitle={false}` had no effect when a registration flow renders its own heading.
diff --git a/.changeset/social-buttons-dom-props.md b/.changeset/social-buttons-dom-props.md
deleted file mode 100644
index fc6bf842f..000000000
--- a/.changeset/social-buttons-dom-props.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@asgardeo/react': patch
----
-
-Social login buttons rendered by the embedded sign-in, sign-up and recovery flows no longer receive the internal form-state props (`formValues`, `formErrors`, `touchedFields`, `isFormValid`, `onInputChange`, `inputClassName`), which React reported as unknown attributes on the underlying `<button>` element.

From 6d956d3a18caa38fc6afc3655a11d46f32120aef Mon Sep 17 00:00:00 2001
From: DonOmalVindula <omalvindula@live.com>
Date: Sat, 5 Sep 2026 11:29:26 +0530
Subject: [PATCH 6/9] fix(react,nextjs): address review comments

- Resolve a relative afterSignInUrl against the current origin before showing
  it in the redirect URI mismatch message, so the guidance names the URL the
  server actually saw.
- Spread forwarded props before the wrapper-owned handlers in the Next.js
  SignUp so callers cannot override onInitialize, onSubmit or isInitialized.
---
 .../src/client/components/presentation/SignUp/SignUp.tsx  | 2 +-
 .../react/src/utils/resolveSignInErrorMessage.test.ts     | 8 ++++++++
 packages/react/src/utils/resolveSignInErrorMessage.ts     | 4 +++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/src/client/components/presentation/SignUp/SignUp.tsx b/packages/nextjs/src/client/components/presentation/SignUp/SignUp.tsx
index e3f4e4285..6b7c8095d 100644
--- a/packages/nextjs/src/client/components/presentation/SignUp/SignUp.tsx
+++ b/packages/nextjs/src/client/components/presentation/SignUp/SignUp.tsx
@@ -111,6 +111,7 @@ const SignUp: FC<SignUpProps> = ({
 
   return (
     <BaseSignUp
+      {...rest}
       afterSignUpUrl={afterSignUpUrl}
       onInitialize={handleInitialize}
       onSubmit={handleOnSubmit}
@@ -119,7 +120,6 @@ const SignUp: FC<SignUpProps> = ({
       size={size}
       variant={variant}
       isInitialized={true}
-      {...rest}
     />
   );
 };
diff --git a/packages/react/src/utils/resolveSignInErrorMessage.test.ts b/packages/react/src/utils/resolveSignInErrorMessage.test.ts
index cbea9f30f..4e78cda98 100644
--- a/packages/react/src/utils/resolveSignInErrorMessage.test.ts
+++ b/packages/react/src/utils/resolveSignInErrorMessage.test.ts
@@ -33,6 +33,14 @@ describe('resolveSignInErrorMessage', () => {
     );
   });
 
+  it('resolves a relative afterSignInUrl against the current origin', () => {
+    const error: Error = new Error('Failed: {"code":"ABA-60001","description":"invalid_callback - callback.not.match"}');
+
+    expect(resolveSignInErrorMessage(error, {afterSignInUrl: '/dashboard', fallback: 'x', t})).toBe(
+      `Register ${window.location.origin}/dashboard`,
+    );
+  });
+
   it('passes other server errors through', () => {
     const error: Error = new Error('Failed: {"code":"ABA-60007","description":"App native authentication is not enabled."}');
 
diff --git a/packages/react/src/utils/resolveSignInErrorMessage.ts b/packages/react/src/utils/resolveSignInErrorMessage.ts
index 81cdfc7a6..af9555bff 100644
--- a/packages/react/src/utils/resolveSignInErrorMessage.ts
+++ b/packages/react/src/utils/resolveSignInErrorMessage.ts
@@ -45,7 +45,9 @@ const resolveSignInErrorMessage = (
   const message: string = resolveFlowErrorMessage(error, '');
 
   if (REDIRECT_URI_MISMATCH.test(message)) {
-    const url: string = afterSignInUrl || (typeof window !== 'undefined' ? window.location.origin : '');
+    const origin: string = typeof window !== 'undefined' ? window.location.origin : '';
+    // `afterSignInUrl` may be relative (e.g. `/dashboard`); the redirect URI the server saw is origin-resolved.
+    const url: string = afterSignInUrl && origin ? new URL(afterSignInUrl, origin).href : afterSignInUrl || origin;
 
     return t('errors.signin.redirect.uri.mismatch', {url});
   }

From 5dedc81b26543221fa5a0e678e601a5d80f9b6ba Mon Sep 17 00:00:00 2001
From: DonOmalVindula <omalvindula@live.com>
Date: Sat, 5 Sep 2026 11:32:59 +0530
Subject: [PATCH 7/9] fix(react,nextjs): self-review follow-ups

- Never throw from resolveSignInErrorMessage when afterSignInUrl is malformed;
  fall back to the raw value.
- Keep passing preferences to the social buttons rendered by the sign-up and
  recovery factories so their i18n/theme preferences still apply.
- README: the redirect URI to register is shown by the <SignIn /> form, not
  logged by the sign-in action.
- Fix the copyright year on the new factory test.
---
 packages/nextjs/README.md                     |  3 +--
 .../Recovery/v1/RecoveryOptionFactory.tsx     | 12 +++++-----
 .../v1/options/SignInOptionFactory.test.tsx   |  2 +-
 .../auth/SignUp/v1/SignUpOptionFactory.tsx    | 12 +++++-----
 .../src/utils/resolveSignInErrorMessage.ts    | 24 +++++++++++++++----
 5 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/packages/nextjs/README.md b/packages/nextjs/README.md
index f9e21eae7..6249fb398 100644
--- a/packages/nextjs/README.md
+++ b/packages/nextjs/README.md
@@ -18,8 +18,7 @@ The SDK sends `afterSignInUrl` (`NEXT_PUBLIC_ASGARDEO_AFTER_SIGN_IN_URL`, or the
 `<AsgardeoProvider>`) to the identity server as the OAuth `redirect_uri`. A relative value such as `/dashboard` is
 resolved against your app's origin. Register the resolved URL, for example `http://localhost:3000/dashboard` and its
 production equivalent, under the application's **Authorized redirect URLs** in the console; the bare origin is not
-enough. If it is missing, the embedded `<SignIn />` fails to initialise and the sign-in action logs the exact URL to
-register.
+enough. If it is missing, the embedded `<SignIn />` fails to initialise and shows the exact URL to register.
 
 Social login with app-native authentication needs two more redirect URIs on the social provider's OAuth client (for
 Google: the OAuth client's **Authorized redirect URIs**), because the identity server sends different callbacks for
diff --git a/packages/react/src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx b/packages/react/src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx
index fcc5d2c44..94ccc31a7 100644
--- a/packages/react/src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx
+++ b/packages/react/src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx
@@ -88,7 +88,7 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
       if (buttonVariant === 'SOCIAL') {
         if (buttonText.toLowerCase().includes('google')) {
           return (
-            <GoogleButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
+            <GoogleButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
               {buttonText}
             </GoogleButton>
           );
@@ -96,7 +96,7 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('github')) {
           return (
-            <GitHubButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
+            <GitHubButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
               {buttonText}
             </GitHubButton>
           );
@@ -104,7 +104,7 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('microsoft')) {
           return (
-            <MicrosoftButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
+            <MicrosoftButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
               {buttonText}
             </MicrosoftButton>
           );
@@ -112,7 +112,7 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('facebook')) {
           return (
-            <FacebookButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
+            <FacebookButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
               {buttonText}
             </FacebookButton>
           );
@@ -120,7 +120,7 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('linkedin')) {
           return (
-            <LinkedInButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
+            <LinkedInButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
               {buttonText}
             </LinkedInButton>
           );
@@ -128,7 +128,7 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('ethereum')) {
           return (
-            <SignInWithEthereumButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
+            <SignInWithEthereumButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
               {buttonText}
             </SignInWithEthereumButton>
           );
diff --git a/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.test.tsx b/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.test.tsx
index fda239767..baa1228d3 100644
--- a/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.test.tsx
+++ b/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.test.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
diff --git a/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx b/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
index 872e5e483..bf80c53f3 100644
--- a/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
+++ b/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
@@ -89,7 +89,7 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
       if (buttonVariant === 'SOCIAL') {
         if (buttonText.toLowerCase().includes('google')) {
           return (
-            <GoogleButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
+            <GoogleButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
               {buttonText}
             </GoogleButton>
           );
@@ -97,7 +97,7 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('github')) {
           return (
-            <GitHubButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
+            <GitHubButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
               {buttonText}
             </GitHubButton>
           );
@@ -105,7 +105,7 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('microsoft')) {
           return (
-            <MicrosoftButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
+            <MicrosoftButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
               {buttonText}
             </MicrosoftButton>
           );
@@ -113,7 +113,7 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('facebook')) {
           return (
-            <FacebookButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
+            <FacebookButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
               {buttonText}
             </FacebookButton>
           );
@@ -121,7 +121,7 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('linkedin')) {
           return (
-            <LinkedInButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
+            <LinkedInButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
               {buttonText}
             </LinkedInButton>
           );
@@ -129,7 +129,7 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('ethereum')) {
           return (
-            <SignInWithEthereumButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName}>
+            <SignInWithEthereumButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
               {buttonText}
             </SignInWithEthereumButton>
           );
diff --git a/packages/react/src/utils/resolveSignInErrorMessage.ts b/packages/react/src/utils/resolveSignInErrorMessage.ts
index af9555bff..48afef653 100644
--- a/packages/react/src/utils/resolveSignInErrorMessage.ts
+++ b/packages/react/src/utils/resolveSignInErrorMessage.ts
@@ -33,6 +33,24 @@ export interface ResolveSignInErrorMessageOptions {
   t: (key: string, params?: Record<string, string | number>) => string;
 }
 
+/**
+ * Returns the URL the SDK sent as the OAuth `redirect_uri`. `afterSignInUrl` may be relative (e.g. `/dashboard`),
+ * in which case it is resolved against the current origin, exactly as the sign-in request does.
+ */
+const resolveRedirectUri = (afterSignInUrl?: string): string => {
+  const origin: string = typeof window !== 'undefined' ? window.location.origin : '';
+
+  if (!afterSignInUrl) {
+    return origin;
+  }
+
+  try {
+    return origin ? new URL(afterSignInUrl, origin).href : afterSignInUrl;
+  } catch {
+    return afterSignInUrl;
+  }
+};
+
 /**
  * Resolves the message to show for an error raised by the embedded sign-in flow.
  * Known identity server rejections map to translated, actionable messages; anything else falls back to
@@ -45,11 +63,7 @@ const resolveSignInErrorMessage = (
   const message: string = resolveFlowErrorMessage(error, '');
 
   if (REDIRECT_URI_MISMATCH.test(message)) {
-    const origin: string = typeof window !== 'undefined' ? window.location.origin : '';
-    // `afterSignInUrl` may be relative (e.g. `/dashboard`); the redirect URI the server saw is origin-resolved.
-    const url: string = afterSignInUrl && origin ? new URL(afterSignInUrl, origin).href : afterSignInUrl || origin;
-
-    return t('errors.signin.redirect.uri.mismatch', {url});
+    return t('errors.signin.redirect.uri.mismatch', {url: resolveRedirectUri(afterSignInUrl)});
   }
 
   return message || fallback;

From cc1d018a91a9aa10c091057b03f1fc222c7e640a Mon Sep 17 00:00:00 2001
From: DonOmalVindula <omalvindula@live.com>
Date: Sat, 5 Sep 2026 11:49:37 +0530
Subject: [PATCH 8/9] fix(react): keep the sign-up form usable after a
 server-side validation error

When the identity server returned the same registration step with a validation
error (e.g. a rejected password), the submit button stayed disabled and the
user could not resubmit:

- BaseSignUp registered its form fields under config.name || component.id,
  while the input adapters read and write values under config.identifier. The
  reset after the response validated the (now empty) fields under the id keys
  and recorded "required" errors that no input could ever clear, so isValid
  stayed false.
- useForm validated against the values of the previous render, so the error
  state always lagged one change behind and a change followed by a blur in the
  same event validated the old value.

Fix the field naming, validate against the current values (kept in a ref that
is updated synchronously), keep the entered values when the same step comes
back, and drop the client-side email/password format rules whose messages had
no translations; the server enforces those and its message is shown.
Regression test added; verified end to end against the reporter's app.
---
 .changeset/signin-signup-followups.md         |   1 +
 .../auth/SignUp/v1/BaseSignUp.test.tsx        | 205 ++++++++++++++++++
 .../auth/SignUp/v1/BaseSignUp.tsx             |  53 +++--
 packages/react/src/hooks/useForm.ts           |  26 ++-
 4 files changed, 261 insertions(+), 24 deletions(-)
 create mode 100644 packages/react/src/components/presentation/auth/SignUp/v1/BaseSignUp.test.tsx

diff --git a/.changeset/signin-signup-followups.md b/.changeset/signin-signup-followups.md
index f2102aa2f..fc2ff1386 100644
--- a/.changeset/signin-signup-followups.md
+++ b/.changeset/signin-signup-followups.md
@@ -11,3 +11,4 @@ Fixes for the embedded `<SignIn />` and `<SignUp />` components:
 - When the automatic sign-in after an embedded registration cannot be performed, the reason is reported in the browser console as well as the server log.
 - `<SignUp />` renders `RICH_TEXT` flow components (for example the terms of service text), which were previously dropped, leaving the submit button jammed against the last field.
 - The Next.js `<SignUp />` forwards all remaining props to the underlying form (`showTitle`, `showSubtitle`, `showLogo`, `onComplete`, `onFlowChange`, class names, ...), so for instance `showTitle={false}` now works when a registration flow renders its own heading.
+- After a server-side validation error (for example a rejected password), `<SignUp />` now keeps the values the user entered and the submit button stays enabled, so the user can correct the field and resubmit. Previously the form's validation errors were recorded under keys no input could clear, which left the button disabled permanently. Form validation also runs against the value being typed instead of the previous one.
diff --git a/packages/react/src/components/presentation/auth/SignUp/v1/BaseSignUp.test.tsx b/packages/react/src/components/presentation/auth/SignUp/v1/BaseSignUp.test.tsx
new file mode 100644
index 000000000..397f66009
--- /dev/null
+++ b/packages/react/src/components/presentation/auth/SignUp/v1/BaseSignUp.test.tsx
@@ -0,0 +1,205 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* eslint-disable sort-keys, @typescript-eslint/typedef, @typescript-eslint/explicit-function-return-type, testing-library/no-container, testing-library/no-node-access */
+
+import {act, cleanup, fireEvent, render, waitFor} from '@testing-library/react';
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import BaseSignUp from './BaseSignUp';
+
+const mockColors = {
+  text: {primary: '#000', secondary: '#666'},
+  background: {surface: '#fff', disabled: '#eee', body: {main: '#fff'}},
+  border: '#ccc',
+  action: {
+    hover: '#f0f0f0',
+    active: '#e0e0e0',
+    selected: '#d0d0d0',
+    disabled: '#bbb',
+    disabledBackground: '#f5f5f5',
+    focus: '#0066cc',
+    hoverOpacity: 0.08,
+    selectedOpacity: 0.12,
+    disabledOpacity: 0.38,
+    focusOpacity: 0.12,
+    activatedOpacity: 0.12,
+  },
+  primary: {main: '#0066cc', contrastText: '#fff'},
+  secondary: {main: '#666', contrastText: '#fff'},
+  error: {main: '#d32f2f', contrastText: '#fff'},
+  success: {main: '#2e7d32', contrastText: '#fff'},
+  warning: {main: '#ed6c02', contrastText: '#fff'},
+  info: {main: '#0288d1', contrastText: '#fff'},
+};
+
+const mockTypography = {
+  fontFamily: 'Arial, sans-serif',
+  fontSizes: {xs: '0.75rem', sm: '0.875rem', md: '1rem', lg: '1.125rem', xl: '1.25rem', '2xl': '1.5rem', '3xl': '1.875rem'},
+  fontWeights: {normal: 400, medium: 500, semibold: 600, bold: 700},
+  lineHeights: {tight: 1.25, normal: 1.5, relaxed: 1.75},
+};
+
+const mockTheme = {
+  colors: mockColors,
+  typography: mockTypography,
+  spacing: {unit: 8},
+  borderRadius: {small: '2px', medium: '4px', large: '8px'},
+  shadows: {small: '0 1px 2px rgba(0,0,0,0.1)', medium: '0 2px 4px rgba(0,0,0,0.1)', large: '0 4px 8px rgba(0,0,0,0.1)'},
+  cssVariables: {},
+  vars: {
+    colors: {
+      ...mockColors,
+      action: {...mockColors.action, hoverOpacity: '0.08', selectedOpacity: '0.12', disabledOpacity: '0.38', focusOpacity: '0.12', activatedOpacity: '0.12'},
+    },
+    spacing: {unit: '8px'},
+    borderRadius: {small: '2px', medium: '4px', large: '8px'},
+    shadows: {small: '0 1px 2px rgba(0,0,0,0.1)', medium: '0 2px 4px rgba(0,0,0,0.1)', large: '0 4px 8px rgba(0,0,0,0.1)'},
+    typography: {
+      ...mockTypography,
+      fontWeights: {normal: '400', medium: '500', semibold: '600', bold: '700'},
+      lineHeights: {tight: '1.25', normal: '1.5', relaxed: '1.75'},
+    },
+  },
+};
+
+vi.mock('../../../../../contexts/Theme/useTheme', () => ({
+  default: () => ({theme: mockTheme, colorScheme: 'light', direction: 'ltr'}),
+}));
+
+vi.mock('../../../../../hooks/useTranslation', () => ({
+  default: () => ({t: (key: string) => key, currentLanguage: 'en', setLanguage: vi.fn(), availableLanguages: ['en']}),
+}));
+
+vi.mock('../../../../../contexts/Asgardeo/useAsgardeo', () => ({
+  default: () => ({}),
+}));
+
+/**
+ * The registration step exactly as the identity server returns it: inputs are keyed by `identifier`,
+ * there is no `name` in the config.
+ */
+const registrationStep = (additionalData?: Record<string, unknown>): any => ({
+  flowId: 'flow-1',
+  flowStatus: 'INCOMPLETE',
+  flowType: 'REGISTRATION',
+  type: 'VIEW',
+  data: {
+    ...(additionalData ? {additionalData} : {}),
+    components: [
+      {
+        id: 'form_1',
+        type: 'FORM',
+        components: [
+          {
+            id: 'input_username',
+            type: 'INPUT',
+            variant: 'TEXT',
+            config: {identifier: 'http://wso2.org/claims/username', type: 'text', label: 'Username', required: true},
+          },
+          {
+            id: 'input_password',
+            type: 'INPUT',
+            variant: 'PASSWORD',
+            config: {identifier: 'password', type: 'password', label: 'Password', required: true},
+          },
+          {id: 'button_submit', type: 'BUTTON', variant: 'PRIMARY', config: {type: 'submit', text: 'Continue'}},
+        ],
+      },
+    ],
+  },
+});
+
+const SERVER_ERROR = 'Password does not meet the required format.';
+
+describe('BaseSignUp (v1) after a server-side validation error', () => {
+  afterEach(() => cleanup());
+
+  it('keeps the entered values and lets the user resubmit', async () => {
+    const onSubmit = vi
+      .fn()
+      .mockResolvedValueOnce(registrationStep({error: SERVER_ERROR}))
+      .mockResolvedValueOnce(registrationStep());
+
+    const {container} = render(
+      <BaseSignUp isInitialized onInitialize={vi.fn().mockResolvedValue(registrationStep())} onSubmit={onSubmit} />,
+    );
+
+    const submit = await waitFor(() => {
+      const button = container.querySelector('form button[type="submit"]') as HTMLButtonElement | null;
+      expect(button).not.toBeNull();
+      return button as HTMLButtonElement;
+    });
+    const username = container.querySelector('input[name="http://wso2.org/claims/username"]') as HTMLInputElement;
+    const password = container.querySelector('input[name="password"]') as HTMLInputElement;
+
+    expect(submit.disabled).toBe(false);
+
+    fireEvent.change(username, {target: {value: 'sdk-test@example.com'}});
+    fireEvent.change(password, {target: {value: 'weak'}});
+    await act(async () => {
+      fireEvent.click(submit);
+    });
+
+    // The server rejected the password: the message is shown, the values stay, and the form is still usable.
+    await waitFor(() => expect(container.textContent).toContain(SERVER_ERROR));
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit.mock.calls[0][0].inputs).toEqual({
+      'http://wso2.org/claims/username': 'sdk-test@example.com',
+      password: 'weak',
+    });
+    expect(username.value).toBe('sdk-test@example.com');
+    expect(password.value).toBe('weak');
+    expect(submit.disabled).toBe(false);
+
+    // Correct the password and resubmit.
+    fireEvent.change(password, {target: {value: 'Str0ng!Passw0rd'}});
+    expect(submit.disabled).toBe(false);
+    await act(async () => {
+      fireEvent.click(submit);
+    });
+
+    expect(onSubmit).toHaveBeenCalledTimes(2);
+    expect(onSubmit.mock.calls[1][0].inputs).toEqual({
+      'http://wso2.org/claims/username': 'sdk-test@example.com',
+      password: 'Str0ng!Passw0rd',
+    });
+  });
+
+  it('validates the value being typed, not the previous one', async () => {
+    const {container} = render(
+      <BaseSignUp isInitialized onInitialize={vi.fn().mockResolvedValue(registrationStep())} onSubmit={vi.fn()} />,
+    );
+
+    const username = await waitFor(() => {
+      const input = container.querySelector('input[name="http://wso2.org/claims/username"]') as HTMLInputElement | null;
+      expect(input).not.toBeNull();
+      return input as HTMLInputElement;
+    });
+    const submit = container.querySelector('form button[type="submit"]') as HTMLButtonElement;
+
+    // Emptying a required field must disable submit immediately, and filling it must re-enable it immediately.
+    fireEvent.change(username, {target: {value: 'a'}});
+    fireEvent.change(username, {target: {value: ''}});
+    expect(submit.disabled).toBe(true);
+    expect(container.textContent).toContain('validations.required.field.error');
+
+    fireEvent.change(username, {target: {value: 'sdk-test@example.com'}});
+    expect(submit.disabled).toBe(false);
+    expect(container.textContent).not.toContain('validations.required.field.error');
+  });
+});
diff --git a/packages/react/src/components/presentation/auth/SignUp/v1/BaseSignUp.tsx b/packages/react/src/components/presentation/auth/SignUp/v1/BaseSignUp.tsx
index c624d1e09..f2b2cd81a 100644
--- a/packages/react/src/components/presentation/auth/SignUp/v1/BaseSignUp.tsx
+++ b/packages/react/src/components/presentation/auth/SignUp/v1/BaseSignUp.tsx
@@ -311,20 +311,16 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
             const config: any = component.config || {};
             fields.push({
               initialValue: config.defaultValue || '',
-              name: config.name || component.id,
+              // Must match the key the input adapters read/write values under, otherwise validation
+              // errors are recorded for names no input can ever clear and the submit button locks up.
+              name: config.identifier || config.name || component.id,
               required: config.required || false,
+              // Format and policy rules (email syntax, password strength) are enforced by the identity
+              // server, which reports failures in `additionalData.error`; only presence is checked here.
               validator: (value: string) => {
                 if (config.required && (!value || value.trim() === '')) {
                   return t('validations.required.field.error');
                 }
-                // Add email validation if it's an email field
-                if (config.type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-                  return t('field.email.invalid');
-                }
-                // Add password strength validation if it's a password field
-                if (config.type === 'password' && value && value.length < 8) {
-                  return t('field.password.weak');
-                }
                 return null;
               },
             });
@@ -358,6 +354,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
     errors: formErrors,
     isValid: isFormValid,
     setValue: setFormValue,
+    setValues: setFormValues,
     setTouched: setFormTouched,
     validateForm,
     reset: resetForm,
@@ -376,14 +373,33 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
       });
 
       resetForm();
-
-      Object.keys(initialValues).forEach((key: any) => {
-        setFormValue(key, initialValues[key]);
-      });
+      // Populate defaults without running the on-change validation: a freshly rendered step must not
+      // start out with "required" errors that disable the submit button before the user has typed.
+      setFormValues(initialValues);
     },
-    [extractFormFields, resetForm, setFormValue],
+    [extractFormFields, resetForm, setFormValues],
   );
 
+  /**
+   * Whether two flow responses render the same set of input fields (e.g. the same step re-rendered
+   * with a validation error), in which case the values the user already entered are kept.
+   */
+  const rendersSameFields: (a: EmbeddedFlowExecuteResponse | null, b: EmbeddedFlowExecuteResponse) => boolean =
+    useCallback(
+      (a: EmbeddedFlowExecuteResponse | null, b: EmbeddedFlowExecuteResponse): boolean => {
+        const names: (response: EmbeddedFlowExecuteResponse | null) => string = (
+          response: EmbeddedFlowExecuteResponse | null,
+        ): string =>
+          extractFormFields(response?.data?.components || [])
+            .map((field: FormField) => field.name)
+            .sort()
+            .join('|');
+
+        return names(a) === names(b);
+      },
+      [extractFormFields],
+    );
+
   /**
    * Handle input value changes.
    */
@@ -626,8 +642,15 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
           return;
         }
 
+        // Keep what the user typed when the same step comes back (typically with a validation error),
+        // so they can correct a single field instead of filling in the whole form again.
+        const sameStep: boolean = rendersSameFields(currentFlow, response);
+
         setCurrentFlow(response);
-        setupFormFields(response);
+
+        if (!sameStep) {
+          setupFormFields(response);
+        }
 
         // Surface server-side validation failures (e.g. password policy) that arrive with an INCOMPLETE flow.
         const flowError: unknown = response.data?.additionalData?.['error'];
diff --git a/packages/react/src/hooks/useForm.ts b/packages/react/src/hooks/useForm.ts
index ce599ffc9..9b2862306 100644
--- a/packages/react/src/hooks/useForm.ts
+++ b/packages/react/src/hooks/useForm.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {useState, useCallback, FormEvent} from 'react';
+import {useState, useCallback, useRef, FormEvent} from 'react';
 
 /**
  * Generic form field configuration
@@ -141,7 +141,7 @@ export interface UseFormReturn<T extends Record<string, string>> {
   /**
    * Validate a single field
    */
-  validateField: (name: keyof T) => string | null;
+  validateField: (name: keyof T, value?: string) => string | null;
   /**
    * Validate all fields
    */
@@ -207,6 +207,9 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
 
   // Initialize form state
   const [values, setFormValues] = useState<T>({...initialValues} as T);
+  // Mirrors `values` synchronously so that validation triggered in the same event as a value change
+  // (e.g. `setValue` followed by `setTouched`) sees the new value rather than the previous render's state.
+  const valuesRef = useRef<T>({...initialValues} as T);
   const [touched, setFormTouched] = useState<Record<keyof T, boolean>>({} as Record<keyof T, boolean>);
   const [errors, setFormErrors] = useState<Record<keyof T, string>>({} as Record<keyof T, string>);
   const [isSubmitted, setIsSubmitted] = useState(false);
@@ -218,9 +221,11 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
   );
 
   // Validate a single field
-  const validateField: (name: keyof T) => string | null = useCallback(
-    (name: keyof T): string | null => {
-      const value: string = values[name] || '';
+  const validateField: (name: keyof T, valueOverride?: string) => string | null = useCallback(
+    (name: keyof T, valueOverride?: string): string | null => {
+      // `values` is the state of the render this callback was created in, so callers that are
+      // changing the field (e.g. `setValue`) pass the new value explicitly.
+      const value: string = (valueOverride !== undefined ? valueOverride : valuesRef.current[name]) || '';
       const fieldConfig: FormField | undefined = getFieldConfig(name);
 
       // Check required validation
@@ -236,7 +241,7 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
 
       return null;
     },
-    [values, getFieldConfig, requiredMessage],
+    [getFieldConfig, requiredMessage],
   );
 
   // Validate the entire form
@@ -253,7 +258,7 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
 
     // Run global validator if provided
     if (validator) {
-      const globalErrors: Record<string, string> = validator(values);
+      const globalErrors: Record<string, string> = validator(valuesRef.current);
       Object.keys(globalErrors).forEach((key: string) => {
         if (globalErrors[key]) {
           newErrors[key as keyof T] = globalErrors[key];
@@ -265,7 +270,7 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
       errors: newErrors,
       isValid: Object.keys(newErrors).length === 0,
     };
-  }, [fields, validateField, validator, values]);
+  }, [fields, validateField, validator]);
 
   // Check if form is currently valid
   const isValid: boolean = Object.keys(errors).length === 0;
@@ -273,6 +278,7 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
   // Set a single field value
   const setValue: (name: keyof T, value: string) => void = useCallback(
     (name: keyof T, value: string): void => {
+      valuesRef.current = {...valuesRef.current, [name]: value};
       setFormValues((prev: T) => ({
         ...prev,
         [name]: value,
@@ -280,7 +286,7 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
 
       // Validate on change if enabled
       if (validateOnChange) {
-        const error: string | null = validateField(name);
+        const error: string | null = validateField(name, value);
         setFormErrors((prev: Record<keyof T, string>) => {
           const newErrors: Record<keyof T, string> = {...prev};
           if (error) {
@@ -297,6 +303,7 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
 
   // Set multiple field values
   const setValues: (newValues: Partial<T>) => void = useCallback((newValues: Partial<T>): void => {
+    valuesRef.current = {...valuesRef.current, ...newValues};
     setFormValues((prev: T) => ({
       ...prev,
       ...newValues,
@@ -379,6 +386,7 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
 
   // Reset form to initial state
   const reset: () => void = useCallback((): void => {
+    valuesRef.current = {...initialValues} as T;
     setFormValues({...initialValues} as T);
     setFormTouched({} as Record<keyof T, boolean>);
     setFormErrors({} as Record<keyof T, string>);

From 58f2eb89b0859f01703c3d812f066ff497cb3743 Mon Sep 17 00:00:00 2001
From: DonOmalVindula <omalvindula@live.com>
Date: Sat, 5 Sep 2026 22:30:56 +0530
Subject: [PATCH 9/9] style: fix lint findings after rebasing onto the vendored
 tooling

Prettier formatting, a for-of loop in a test replaced with forEach, unnecessary
act() wrappers removed from the sign-up test, and an explicit type on the
values ref in useForm.
---
 packages/i18n/src/translations/en-US.ts       |  3 +-
 packages/i18n/src/translations/fr-FR.ts       |  3 +-
 packages/i18n/src/translations/hi-IN.ts       |  3 +-
 packages/i18n/src/translations/ja-JP.ts       |  3 +-
 packages/i18n/src/translations/pt-BR.ts       |  3 +-
 packages/i18n/src/translations/pt-PT.ts       |  3 +-
 packages/i18n/src/translations/si-LK.ts       |  3 +-
 packages/i18n/src/translations/ta-IN.ts       |  3 +-
 packages/i18n/src/translations/te-IN.ts       |  3 +-
 .../Recovery/v1/RecoveryOptionFactory.tsx     | 42 +++++++++++++++---
 .../auth/SignIn/v1/BaseSignIn.tsx             | 18 ++++++--
 .../v1/options/SignInOptionFactory.test.tsx   |  4 +-
 .../auth/SignUp/v1/BaseSignUp.test.tsx        | 43 +++++++++++++------
 .../auth/SignUp/v1/SignUpOptionFactory.tsx    | 42 +++++++++++++++---
 packages/react/src/hooks/useForm.ts           |  4 +-
 .../utils/resolveSignInErrorMessage.test.ts   | 14 +++---
 16 files changed, 149 insertions(+), 45 deletions(-)

diff --git a/packages/i18n/src/translations/en-US.ts b/packages/i18n/src/translations/en-US.ts
index f5ec89404..9017fc0e3 100644
--- a/packages/i18n/src/translations/en-US.ts
+++ b/packages/i18n/src/translations/en-US.ts
@@ -170,7 +170,8 @@ const translations: I18nTranslations = {
   'errors.heading': 'Error',
   'errors.signin.components.not.available': 'Sign-in form is not available at the moment. Please try again later.',
   'errors.signin.initialization': 'An error occurred while initializing. Please try again later.',
-  'errors.signin.redirect.uri.mismatch': 'The redirect URI "{url}" is not registered for this application. Add it to the application\'s authorized redirect URLs in the console, and to your social login provider if you use app-native social sign-in.',
+  'errors.signin.redirect.uri.mismatch':
+    'The redirect URI "{url}" is not registered for this application. Add it to the application\'s authorized redirect URLs in the console, and to your social login provider if you use app-native social sign-in.',
   'errors.signin.flow.failure': 'An error occurred during the sign-in flow. Please try again later.',
   'errors.signin.flow.completion.failure':
     'An error occurred while completing the sign-in flow. Please try again later.',
diff --git a/packages/i18n/src/translations/fr-FR.ts b/packages/i18n/src/translations/fr-FR.ts
index 9fd131834..64a682aba 100644
--- a/packages/i18n/src/translations/fr-FR.ts
+++ b/packages/i18n/src/translations/fr-FR.ts
@@ -163,7 +163,8 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'Erreur',
   'errors.signin.initialization': "Une erreur est survenue lors de l'initialisation. Veuillez réessayer plus tard.",
-  'errors.signin.redirect.uri.mismatch': 'L\'URI de redirection "{url}" n\'est pas enregistrée pour cette application. Ajoutez-la aux URL de redirection autorisées de l\'application dans la console, ainsi qu\'à votre fournisseur de connexion sociale si vous utilisez la connexion sociale native.',
+  'errors.signin.redirect.uri.mismatch':
+    "L'URI de redirection \"{url}\" n'est pas enregistrée pour cette application. Ajoutez-la aux URL de redirection autorisées de l'application dans la console, ainsi qu'à votre fournisseur de connexion sociale si vous utilisez la connexion sociale native.",
   'errors.signin.flow.failure': 'Une erreur est survenue lors du flux de connexion. Veuillez réessayer plus tard.',
   'errors.signin.flow.completion.failure':
     'Une erreur est survenue lors de la finalisation du flux de connexion. Veuillez réessayer plus tard.',
diff --git a/packages/i18n/src/translations/hi-IN.ts b/packages/i18n/src/translations/hi-IN.ts
index 3409219ee..fc9d81b39 100644
--- a/packages/i18n/src/translations/hi-IN.ts
+++ b/packages/i18n/src/translations/hi-IN.ts
@@ -161,7 +161,8 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'त्रुटि',
   'errors.signin.initialization': 'इनिशियलाइज़ेशन में त्रुटि हुई। कृपया बाद में पुनः प्रयास करें।',
-  'errors.signin.redirect.uri.mismatch': 'रीडायरेक्ट URI "{url}" इस एप्लिकेशन के लिए पंजीकृत नहीं है। इसे कंसोल में एप्लिकेशन के अधिकृत रीडायरेक्ट URL में जोड़ें, और यदि आप ऐप-नेटिव सोशल साइन-इन का उपयोग करते हैं तो अपने सोशल लॉगिन प्रदाता में भी जोड़ें।',
+  'errors.signin.redirect.uri.mismatch':
+    'रीडायरेक्ट URI "{url}" इस एप्लिकेशन के लिए पंजीकृत नहीं है। इसे कंसोल में एप्लिकेशन के अधिकृत रीडायरेक्ट URL में जोड़ें, और यदि आप ऐप-नेटिव सोशल साइन-इन का उपयोग करते हैं तो अपने सोशल लॉगिन प्रदाता में भी जोड़ें।',
   'errors.signin.flow.failure': 'साइन-इन प्रक्रिया में त्रुटि। कृपया बाद में पुनः प्रयास करें।',
   'errors.signin.flow.completion.failure': 'साइन-इन प्रक्रिया पूरी करते समय त्रुटि। कृपया बाद में पुनः प्रयास करें।',
   'errors.signin.flow.passkeys.failure': 'पासकीज़ के साथ साइन-इन करते समय त्रुटि।',
diff --git a/packages/i18n/src/translations/ja-JP.ts b/packages/i18n/src/translations/ja-JP.ts
index 831d65f7e..2e5b3212b 100644
--- a/packages/i18n/src/translations/ja-JP.ts
+++ b/packages/i18n/src/translations/ja-JP.ts
@@ -161,7 +161,8 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'エラー',
   'errors.signin.initialization': '初期化中にエラーが発生しました。後でもう一度お試しください。',
-  'errors.signin.redirect.uri.mismatch': 'リダイレクト URI「{url}」はこのアプリケーションに登録されていません。コンソールでアプリケーションの承認済みリダイレクト URL に追加してください。アプリネイティブのソーシャルサインインを使用する場合は、ソーシャルログインプロバイダーにも追加してください。',
+  'errors.signin.redirect.uri.mismatch':
+    'リダイレクト URI「{url}」はこのアプリケーションに登録されていません。コンソールでアプリケーションの承認済みリダイレクト URL に追加してください。アプリネイティブのソーシャルサインインを使用する場合は、ソーシャルログインプロバイダーにも追加してください。',
   'errors.signin.flow.failure': 'サインイン処理中にエラーが発生しました。後でもう一度お試しください。',
   'errors.signin.flow.completion.failure': 'サインイン処理の完了中にエラーが発生しました。後でもう一度お試しください。',
   'errors.signin.flow.passkeys.failure': 'パスキーでのサインイン中にエラーが発生しました。後でもう一度お試しください。',
diff --git a/packages/i18n/src/translations/pt-BR.ts b/packages/i18n/src/translations/pt-BR.ts
index 20ef5cc11..e9cc79315 100644
--- a/packages/i18n/src/translations/pt-BR.ts
+++ b/packages/i18n/src/translations/pt-BR.ts
@@ -161,7 +161,8 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'Erro',
   'errors.signin.initialization': 'Ocorreu um erro ao inicializar. Tente novamente mais tarde.',
-  'errors.signin.redirect.uri.mismatch': 'O URI de redirecionamento "{url}" não está registrado para este aplicativo. Adicione-o às URLs de redirecionamento autorizadas do aplicativo no console e, se usar login social nativo, também ao seu provedor de login social.',
+  'errors.signin.redirect.uri.mismatch':
+    'O URI de redirecionamento "{url}" não está registrado para este aplicativo. Adicione-o às URLs de redirecionamento autorizadas do aplicativo no console e, se usar login social nativo, também ao seu provedor de login social.',
   'errors.signin.flow.failure': 'Ocorreu um erro durante o login. Tente novamente mais tarde.',
   'errors.signin.flow.completion.failure': 'Ocorreu um erro ao completar o login. Tente novamente mais tarde.',
   'errors.signin.flow.passkeys.failure':
diff --git a/packages/i18n/src/translations/pt-PT.ts b/packages/i18n/src/translations/pt-PT.ts
index 4bd7c6f26..0b04af1bb 100644
--- a/packages/i18n/src/translations/pt-PT.ts
+++ b/packages/i18n/src/translations/pt-PT.ts
@@ -161,7 +161,8 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'Erro',
   'errors.signin.initialization': 'Ocorreu um erro ao inicializar. Tente novamente mais tarde.',
-  'errors.signin.redirect.uri.mismatch': 'O URI de redirecionamento "{url}" não está registado para esta aplicação. Adicione-o aos URLs de redirecionamento autorizados da aplicação na consola e, se utilizar início de sessão social nativo, também ao seu fornecedor de início de sessão social.',
+  'errors.signin.redirect.uri.mismatch':
+    'O URI de redirecionamento "{url}" não está registado para esta aplicação. Adicione-o aos URLs de redirecionamento autorizados da aplicação na consola e, se utilizar início de sessão social nativo, também ao seu fornecedor de início de sessão social.',
   'errors.signin.flow.failure': 'Ocorreu um erro durante o início de sessão. Tente novamente mais tarde.',
   'errors.signin.flow.completion.failure':
     'Ocorreu um erro ao completar o início de sessão. Tente novamente mais tarde.',
diff --git a/packages/i18n/src/translations/si-LK.ts b/packages/i18n/src/translations/si-LK.ts
index a2f8acfd5..18368d844 100644
--- a/packages/i18n/src/translations/si-LK.ts
+++ b/packages/i18n/src/translations/si-LK.ts
@@ -161,7 +161,8 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'දෝෂය',
   'errors.signin.initialization': 'ආරම්භ කිරීමේදී දෝෂයක් සිදු විය. කරුණාකර පසුව නැවත උත්සාහ කරන්න.',
-  'errors.signin.redirect.uri.mismatch': 'යළි-යොමු URI "{url}" මෙම යෙදුම සඳහා ලියාපදිංචි කර නොමැත. එය කොන්සෝලයේ යෙදුමේ අනුමත යළි-යොමු URL වලට එක් කරන්න, සහ ඔබ යෙදුම්-ස්වදේශීය සමාජ පිවිසුම භාවිතා කරන්නේ නම් ඔබගේ සමාජ පිවිසුම් සපයන්නාටද එක් කරන්න.',
+  'errors.signin.redirect.uri.mismatch':
+    'යළි-යොමු URI "{url}" මෙම යෙදුම සඳහා ලියාපදිංචි කර නොමැත. එය කොන්සෝලයේ යෙදුමේ අනුමත යළි-යොමු URL වලට එක් කරන්න, සහ ඔබ යෙදුම්-ස්වදේශීය සමාජ පිවිසුම භාවිතා කරන්නේ නම් ඔබගේ සමාජ පිවිසුම් සපයන්නාටද එක් කරන්න.',
   'errors.signin.flow.failure': 'ලොග් වීමේදී දෝෂයක් සිදු විය. කරුණාකර පසුව නැවත උත්සාහ කරන්න.',
   'errors.signin.flow.completion.failure':
     'ලොග් වීමේ ක්‍රියාවලිය සම්පූර්ණ කිරීමේදී දෝෂයක් සිදු විය. කරුණාකර පසුව නැවත උත්සාහ කරන්න.',
diff --git a/packages/i18n/src/translations/ta-IN.ts b/packages/i18n/src/translations/ta-IN.ts
index c0c46a691..ac574fbea 100644
--- a/packages/i18n/src/translations/ta-IN.ts
+++ b/packages/i18n/src/translations/ta-IN.ts
@@ -162,7 +162,8 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'பிழை',
   'errors.signin.initialization': 'தொடக்கத்தில் பிழை ஏற்பட்டது. பின்னர் மீண்டும் முயற்சிக்கவும்.',
-  'errors.signin.redirect.uri.mismatch': 'திருப்பிவிடும் URI "{url}" இந்த பயன்பாட்டிற்கு பதிவு செய்யப்படவில்லை. இதை கன்சோலில் பயன்பாட்டின் அங்கீகரிக்கப்பட்ட திருப்பிவிடும் URL களில் சேர்க்கவும்; பயன்பாட்டு-சொந்த சமூக உள்நுழைவைப் பயன்படுத்தினால் உங்கள் சமூக உள்நுழைவு வழங்குநரிலும் சேர்க்கவும்.',
+  'errors.signin.redirect.uri.mismatch':
+    'திருப்பிவிடும் URI "{url}" இந்த பயன்பாட்டிற்கு பதிவு செய்யப்படவில்லை. இதை கன்சோலில் பயன்பாட்டின் அங்கீகரிக்கப்பட்ட திருப்பிவிடும் URL களில் சேர்க்கவும்; பயன்பாட்டு-சொந்த சமூக உள்நுழைவைப் பயன்படுத்தினால் உங்கள் சமூக உள்நுழைவு வழங்குநரிலும் சேர்க்கவும்.',
   'errors.signin.flow.failure': 'உள்நுழைவு செயல்பாட்டின் போது பிழை ஏற்பட்டது. பின்னர் மீண்டும் முயற்சிக்கவும்.',
   'errors.signin.flow.completion.failure':
     'உள்நுழைவு செயல்பாட்டை முடிக்கும் போது பிழை ஏற்பட்டது. பின்னர் மீண்டும் முயற்சிக்கவும்.',
diff --git a/packages/i18n/src/translations/te-IN.ts b/packages/i18n/src/translations/te-IN.ts
index 0c5e6a684..eb311d519 100644
--- a/packages/i18n/src/translations/te-IN.ts
+++ b/packages/i18n/src/translations/te-IN.ts
@@ -162,7 +162,8 @@ const translations: I18nTranslations = {
 
   'errors.heading': 'లోపం',
   'errors.signin.initialization': 'ప్రారంభించేటప్పుడు లోపం వచ్చింది. దయచేసి తరువాత మళ్లీ ప్రయత్నించండి.',
-  'errors.signin.redirect.uri.mismatch': 'రీడైరెక్ట్ URI "{url}" ఈ అప్లికేషన్ కోసం నమోదు కాలేదు. దీన్ని కన్సోల్‌లో అప్లికేషన్ యొక్క అధీకృత రీడైరెక్ట్ URLలకు జోడించండి; మీరు యాప్-నేటివ్ సోషల్ సైన్-ఇన్ ఉపయోగిస్తే మీ సోషల్ లాగిన్ ప్రొవైడర్‌కు కూడా జోడించండి.',
+  'errors.signin.redirect.uri.mismatch':
+    'రీడైరెక్ట్ URI "{url}" ఈ అప్లికేషన్ కోసం నమోదు కాలేదు. దీన్ని కన్సోల్‌లో అప్లికేషన్ యొక్క అధీకృత రీడైరెక్ట్ URLలకు జోడించండి; మీరు యాప్-నేటివ్ సోషల్ సైన్-ఇన్ ఉపయోగిస్తే మీ సోషల్ లాగిన్ ప్రొవైడర్‌కు కూడా జోడించండి.',
   'errors.signin.flow.failure': 'సైన్ ఇన్ ప్రక్రియలో లోపం వచ్చింది. దయచేసి తరువాత మళ్లీ ప్రయత్నించండి.',
   'errors.signin.flow.completion.failure': 'సైన్ ఇన్ పూర్తి చేయడంలో లోపం వచ్చింది. దయచేసి తరువాత మళ్లీ ప్రయత్నించండి.',
   'errors.signin.flow.passkeys.failure': 'పాస్‌కీలతో సైన్ ఇన్ చేస్తూ లోపం వచ్చింది. దయచేసి తరువాత మళ్లీ ప్రయత్నించండి.',
diff --git a/packages/react/src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx b/packages/react/src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx
index 94ccc31a7..8982194df 100644
--- a/packages/react/src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx
+++ b/packages/react/src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx
@@ -88,7 +88,12 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
       if (buttonVariant === 'SOCIAL') {
         if (buttonText.toLowerCase().includes('google')) {
           return (
-            <GoogleButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
+            <GoogleButton
+              onClick={(): any => onSubmit(component, {})}
+              isLoading={rest.isLoading}
+              className={rest.buttonClassName}
+              preferences={rest.preferences}
+            >
               {buttonText}
             </GoogleButton>
           );
@@ -96,7 +101,12 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('github')) {
           return (
-            <GitHubButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
+            <GitHubButton
+              onClick={(): any => onSubmit(component, {})}
+              isLoading={rest.isLoading}
+              className={rest.buttonClassName}
+              preferences={rest.preferences}
+            >
               {buttonText}
             </GitHubButton>
           );
@@ -104,7 +114,12 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('microsoft')) {
           return (
-            <MicrosoftButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
+            <MicrosoftButton
+              onClick={(): any => onSubmit(component, {})}
+              isLoading={rest.isLoading}
+              className={rest.buttonClassName}
+              preferences={rest.preferences}
+            >
               {buttonText}
             </MicrosoftButton>
           );
@@ -112,7 +127,12 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('facebook')) {
           return (
-            <FacebookButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
+            <FacebookButton
+              onClick={(): any => onSubmit(component, {})}
+              isLoading={rest.isLoading}
+              className={rest.buttonClassName}
+              preferences={rest.preferences}
+            >
               {buttonText}
             </FacebookButton>
           );
@@ -120,7 +140,12 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('linkedin')) {
           return (
-            <LinkedInButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
+            <LinkedInButton
+              onClick={(): any => onSubmit(component, {})}
+              isLoading={rest.isLoading}
+              className={rest.buttonClassName}
+              preferences={rest.preferences}
+            >
               {buttonText}
             </LinkedInButton>
           );
@@ -128,7 +153,12 @@ const createRecoveryElement = ({component, onSubmit, ...rest}: AdapterProps): Re
 
         if (buttonText.toLowerCase().includes('ethereum')) {
           return (
-            <SignInWithEthereumButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
+            <SignInWithEthereumButton
+              onClick={(): any => onSubmit(component, {})}
+              isLoading={rest.isLoading}
+              className={rest.buttonClassName}
+              preferences={rest.preferences}
+            >
               {buttonText}
             </SignInWithEthereumButton>
           );
diff --git a/packages/react/src/components/presentation/auth/SignIn/v1/BaseSignIn.tsx b/packages/react/src/components/presentation/auth/SignIn/v1/BaseSignIn.tsx
index 00431eb5d..c364ff950 100644
--- a/packages/react/src/components/presentation/auth/SignIn/v1/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/auth/SignIn/v1/BaseSignIn.tsx
@@ -510,7 +510,11 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         }
       }
     } catch (err) {
-      const errorMessage: string = resolveSignInErrorMessage(err, {afterSignInUrl, fallback: t('errors.signin.flow.failure'), t});
+      const errorMessage: string = resolveSignInErrorMessage(err, {
+        afterSignInUrl,
+        fallback: t('errors.signin.flow.failure'),
+        t,
+      });
       setError(errorMessage);
       onError?.(err as Error);
     } finally {
@@ -800,7 +804,11 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         }
       }
     } catch (err) {
-      const errorMessage: string = resolveSignInErrorMessage(err, {afterSignInUrl, fallback: 'Authenticator selection failed', t});
+      const errorMessage: string = resolveSignInErrorMessage(err, {
+        afterSignInUrl,
+        fallback: 'Authenticator selection failed',
+        t,
+      });
       setError(errorMessage);
       onError?.(err as Error);
     } finally {
@@ -926,7 +934,11 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
           );
         }
       } catch (err) {
-        const errorMessage: string = resolveSignInErrorMessage(err, {afterSignInUrl, fallback: t('errors.signin.initialization'), t});
+        const errorMessage: string = resolveSignInErrorMessage(err, {
+          afterSignInUrl,
+          fallback: t('errors.signin.initialization'),
+          t,
+        });
         setError(errorMessage);
         onError?.(err as Error);
       } finally {
diff --git a/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.test.tsx b/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.test.tsx
index baa1228d3..bdf588188 100644
--- a/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.test.tsx
+++ b/packages/react/src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.test.tsx
@@ -208,9 +208,9 @@ describe('createSignInOptionFromAuthenticator', () => {
     const button = container.querySelector('button');
 
     expect(button).not.toBeNull();
-    for (const attr of ['formvalues', 'formerrors', 'touchedfields', 'isformvalid', 'inputclassname']) {
+    ['formvalues', 'formerrors', 'touchedfields', 'isformvalid', 'inputclassname'].forEach((attr: string) => {
       expect(button?.getAttribute(attr)).toBeNull();
-    }
+    });
 
     const domWarnings = consoleError.mock.calls
       .map((call: unknown[]) => String(call[0]))
diff --git a/packages/react/src/components/presentation/auth/SignUp/v1/BaseSignUp.test.tsx b/packages/react/src/components/presentation/auth/SignUp/v1/BaseSignUp.test.tsx
index 397f66009..5c37dd7e8 100644
--- a/packages/react/src/components/presentation/auth/SignUp/v1/BaseSignUp.test.tsx
+++ b/packages/react/src/components/presentation/auth/SignUp/v1/BaseSignUp.test.tsx
@@ -18,7 +18,7 @@
 
 /* eslint-disable sort-keys, @typescript-eslint/typedef, @typescript-eslint/explicit-function-return-type, testing-library/no-container, testing-library/no-node-access */
 
-import {act, cleanup, fireEvent, render, waitFor} from '@testing-library/react';
+import {cleanup, fireEvent, render, waitFor} from '@testing-library/react';
 import {afterEach, describe, expect, it, vi} from 'vitest';
 import BaseSignUp from './BaseSignUp';
 
@@ -49,7 +49,15 @@ const mockColors = {
 
 const mockTypography = {
   fontFamily: 'Arial, sans-serif',
-  fontSizes: {xs: '0.75rem', sm: '0.875rem', md: '1rem', lg: '1.125rem', xl: '1.25rem', '2xl': '1.5rem', '3xl': '1.875rem'},
+  fontSizes: {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    md: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+  },
   fontWeights: {normal: 400, medium: 500, semibold: 600, bold: 700},
   lineHeights: {tight: 1.25, normal: 1.5, relaxed: 1.75},
 };
@@ -59,16 +67,31 @@ const mockTheme = {
   typography: mockTypography,
   spacing: {unit: 8},
   borderRadius: {small: '2px', medium: '4px', large: '8px'},
-  shadows: {small: '0 1px 2px rgba(0,0,0,0.1)', medium: '0 2px 4px rgba(0,0,0,0.1)', large: '0 4px 8px rgba(0,0,0,0.1)'},
+  shadows: {
+    small: '0 1px 2px rgba(0,0,0,0.1)',
+    medium: '0 2px 4px rgba(0,0,0,0.1)',
+    large: '0 4px 8px rgba(0,0,0,0.1)',
+  },
   cssVariables: {},
   vars: {
     colors: {
       ...mockColors,
-      action: {...mockColors.action, hoverOpacity: '0.08', selectedOpacity: '0.12', disabledOpacity: '0.38', focusOpacity: '0.12', activatedOpacity: '0.12'},
+      action: {
+        ...mockColors.action,
+        hoverOpacity: '0.08',
+        selectedOpacity: '0.12',
+        disabledOpacity: '0.38',
+        focusOpacity: '0.12',
+        activatedOpacity: '0.12',
+      },
     },
     spacing: {unit: '8px'},
     borderRadius: {small: '2px', medium: '4px', large: '8px'},
-    shadows: {small: '0 1px 2px rgba(0,0,0,0.1)', medium: '0 2px 4px rgba(0,0,0,0.1)', large: '0 4px 8px rgba(0,0,0,0.1)'},
+    shadows: {
+      small: '0 1px 2px rgba(0,0,0,0.1)',
+      medium: '0 2px 4px rgba(0,0,0,0.1)',
+      large: '0 4px 8px rgba(0,0,0,0.1)',
+    },
     typography: {
       ...mockTypography,
       fontWeights: {normal: '400', medium: '500', semibold: '600', bold: '700'},
@@ -151,9 +174,7 @@ describe('BaseSignUp (v1) after a server-side validation error', () => {
 
     fireEvent.change(username, {target: {value: 'sdk-test@example.com'}});
     fireEvent.change(password, {target: {value: 'weak'}});
-    await act(async () => {
-      fireEvent.click(submit);
-    });
+    fireEvent.click(submit);
 
     // The server rejected the password: the message is shown, the values stay, and the form is still usable.
     await waitFor(() => expect(container.textContent).toContain(SERVER_ERROR));
@@ -169,11 +190,9 @@ describe('BaseSignUp (v1) after a server-side validation error', () => {
     // Correct the password and resubmit.
     fireEvent.change(password, {target: {value: 'Str0ng!Passw0rd'}});
     expect(submit.disabled).toBe(false);
-    await act(async () => {
-      fireEvent.click(submit);
-    });
+    fireEvent.click(submit);
 
-    expect(onSubmit).toHaveBeenCalledTimes(2);
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(2));
     expect(onSubmit.mock.calls[1][0].inputs).toEqual({
       'http://wso2.org/claims/username': 'sdk-test@example.com',
       password: 'Str0ng!Passw0rd',
diff --git a/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx b/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
index bf80c53f3..c802dd2eb 100644
--- a/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
+++ b/packages/react/src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
@@ -89,7 +89,12 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
       if (buttonVariant === 'SOCIAL') {
         if (buttonText.toLowerCase().includes('google')) {
           return (
-            <GoogleButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
+            <GoogleButton
+              onClick={(): any => onSubmit(component, {})}
+              isLoading={rest.isLoading}
+              className={rest.buttonClassName}
+              preferences={rest.preferences}
+            >
               {buttonText}
             </GoogleButton>
           );
@@ -97,7 +102,12 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('github')) {
           return (
-            <GitHubButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
+            <GitHubButton
+              onClick={(): any => onSubmit(component, {})}
+              isLoading={rest.isLoading}
+              className={rest.buttonClassName}
+              preferences={rest.preferences}
+            >
               {buttonText}
             </GitHubButton>
           );
@@ -105,7 +115,12 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('microsoft')) {
           return (
-            <MicrosoftButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
+            <MicrosoftButton
+              onClick={(): any => onSubmit(component, {})}
+              isLoading={rest.isLoading}
+              className={rest.buttonClassName}
+              preferences={rest.preferences}
+            >
               {buttonText}
             </MicrosoftButton>
           );
@@ -113,7 +128,12 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('facebook')) {
           return (
-            <FacebookButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
+            <FacebookButton
+              onClick={(): any => onSubmit(component, {})}
+              isLoading={rest.isLoading}
+              className={rest.buttonClassName}
+              preferences={rest.preferences}
+            >
               {buttonText}
             </FacebookButton>
           );
@@ -121,7 +141,12 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('linkedin')) {
           return (
-            <LinkedInButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
+            <LinkedInButton
+              onClick={(): any => onSubmit(component, {})}
+              isLoading={rest.isLoading}
+              className={rest.buttonClassName}
+              preferences={rest.preferences}
+            >
               {buttonText}
             </LinkedInButton>
           );
@@ -129,7 +154,12 @@ const createSignUpElement = ({component, onSubmit, ...rest}: AdapterProps): Reac
 
         if (buttonText.toLowerCase().includes('ethereum')) {
           return (
-            <SignInWithEthereumButton onClick={(): any => onSubmit(component, {})} isLoading={rest.isLoading} className={rest.buttonClassName} preferences={rest.preferences}>
+            <SignInWithEthereumButton
+              onClick={(): any => onSubmit(component, {})}
+              isLoading={rest.isLoading}
+              className={rest.buttonClassName}
+              preferences={rest.preferences}
+            >
               {buttonText}
             </SignInWithEthereumButton>
           );
diff --git a/packages/react/src/hooks/useForm.ts b/packages/react/src/hooks/useForm.ts
index 9b2862306..8628c88ba 100644
--- a/packages/react/src/hooks/useForm.ts
+++ b/packages/react/src/hooks/useForm.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {useState, useCallback, useRef, FormEvent} from 'react';
+import {useState, useCallback, useRef, FormEvent, MutableRefObject} from 'react';
 
 /**
  * Generic form field configuration
@@ -209,7 +209,7 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
   const [values, setFormValues] = useState<T>({...initialValues} as T);
   // Mirrors `values` synchronously so that validation triggered in the same event as a value change
   // (e.g. `setValue` followed by `setTouched`) sees the new value rather than the previous render's state.
-  const valuesRef = useRef<T>({...initialValues} as T);
+  const valuesRef: MutableRefObject<T> = useRef<T>({...initialValues} as T);
   const [touched, setFormTouched] = useState<Record<keyof T, boolean>>({} as Record<keyof T, boolean>);
   const [errors, setFormErrors] = useState<Record<keyof T, string>>({} as Record<keyof T, string>);
   const [isSubmitted, setIsSubmitted] = useState(false);
diff --git a/packages/react/src/utils/resolveSignInErrorMessage.test.ts b/packages/react/src/utils/resolveSignInErrorMessage.test.ts
index 4e78cda98..f0ab69650 100644
--- a/packages/react/src/utils/resolveSignInErrorMessage.test.ts
+++ b/packages/react/src/utils/resolveSignInErrorMessage.test.ts
@@ -28,13 +28,15 @@ describe('resolveSignInErrorMessage', () => {
       '[AsgardeoAPIError] (code="initializeEmbeddedSignInFlow-ResponseError-001") (HTTP 400 - Bad Request)\nMessage: Authorization request failed: {"code":"ABA-60001","message":"Invalid authentication request.","description":"invalid_callback - callback.not.match"}',
     );
 
-    expect(resolveSignInErrorMessage(error, {afterSignInUrl: 'http://localhost:3000/dashboard', fallback: 'x', t})).toBe(
-      'Register http://localhost:3000/dashboard',
-    );
+    expect(
+      resolveSignInErrorMessage(error, {afterSignInUrl: 'http://localhost:3000/dashboard', fallback: 'x', t}),
+    ).toBe('Register http://localhost:3000/dashboard');
   });
 
   it('resolves a relative afterSignInUrl against the current origin', () => {
-    const error: Error = new Error('Failed: {"code":"ABA-60001","description":"invalid_callback - callback.not.match"}');
+    const error: Error = new Error(
+      'Failed: {"code":"ABA-60001","description":"invalid_callback - callback.not.match"}',
+    );
 
     expect(resolveSignInErrorMessage(error, {afterSignInUrl: '/dashboard', fallback: 'x', t})).toBe(
       `Register ${window.location.origin}/dashboard`,
@@ -42,7 +44,9 @@ describe('resolveSignInErrorMessage', () => {
   });
 
   it('passes other server errors through', () => {
-    const error: Error = new Error('Failed: {"code":"ABA-60007","description":"App native authentication is not enabled."}');
+    const error: Error = new Error(
+      'Failed: {"code":"ABA-60007","description":"App native authentication is not enabled."}',
+    );
 
     expect(resolveSignInErrorMessage(error, {fallback: 'x', t})).toBe('App native authentication is not enabled.');
   });