diff --git a/packages/commerce-sdk-react/src/auth/index.ts b/packages/commerce-sdk-react/src/auth/index.ts index d4a2988289..928e49cc56 100644 --- a/packages/commerce-sdk-react/src/auth/index.ts +++ b/packages/commerce-sdk-react/src/auth/index.ts @@ -1049,6 +1049,16 @@ class Auth { }, this.isPrivate ) + // Perform an initial fetch request to check for potential API errors + const response = await fetch(url, { + method: 'GET', + redirect: 'manual' + }) + // Check if the response indicates an HTTP error (status codes 400 and above) + if (response.status >= 400) { + const errorData = await response.json() + throw new Error(errorData.message || 'API validation failed') + } if (onClient()) { window.location.assign(url) } else { @@ -1098,7 +1108,7 @@ class Auth { const usid = this.get('usid') const mode = callbackURI ? 'callback' : 'sms' - await helpers.authorizePasswordless( + const res = await helpers.authorizePasswordless( this.client, { clientSecret: this.clientSecret @@ -1110,6 +1120,11 @@ class Auth { mode } ) + if (res.status !== 200) { + const errorData = await res.json() + throw new Error(`${res.status} ${errorData.message}`) + } + return res } /** diff --git a/packages/template-retail-react-app/app/components/login/index.jsx b/packages/template-retail-react-app/app/components/login/index.jsx index 135eb678ec..bc548e135e 100644 --- a/packages/template-retail-react-app/app/components/login/index.jsx +++ b/packages/template-retail-react-app/app/components/login/index.jsx @@ -42,7 +42,7 @@ const LoginForm = ({ data-testid="sf-auth-modal-form" > {form.formState.errors?.global && ( - + {form.formState.errors.global.message} diff --git a/packages/template-retail-react-app/app/components/login/index.test.js b/packages/template-retail-react-app/app/components/login/index.test.js index 971398b11f..619bfc8fda 100644 --- a/packages/template-retail-react-app/app/components/login/index.test.js +++ b/packages/template-retail-react-app/app/components/login/index.test.js @@ -31,14 +31,23 @@ describe('LoginForm', () => { }) test('renders form errors when "Continue Securely" button is clicked', async () => { - const {user} = renderWithProviders() + const mockPasswordlessLoginClick = jest.fn() + const {user} = renderWithProviders( + + ) await user.click(screen.getByRole('button', {name: 'Continue Securely'})) expect(screen.getByText(/Please enter your email address./)).toBeInTheDocument() }) test('renders form errors when "Password" button is clicked', async () => { - const {user} = renderWithProviders() + const mockSetLoginType = jest.fn() + const {user} = renderWithProviders( + + ) await user.click(screen.getByRole('button', {name: 'Password'})) expect(screen.getByText(/Please enter your email address./)).toBeInTheDocument() diff --git a/packages/template-retail-react-app/app/components/passwordless-login/index.jsx b/packages/template-retail-react-app/app/components/passwordless-login/index.jsx index 503974752f..52b17f79b6 100644 --- a/packages/template-retail-react-app/app/components/passwordless-login/index.jsx +++ b/packages/template-retail-react-app/app/components/passwordless-login/index.jsx @@ -48,7 +48,10 @@ const PasswordlessLogin = ({ />