@W-17458039 - Handle error states for social/passwordless login and reset password #2185

yunakim714 · 2025-01-06T19:20:20Z

Description

Before releasing social and passwordless login, we need to ensure that all error states are covered and presented in the UI.
The following spreadsheet details different error scenarios for social and passwordless login, and what error message is prompted after the error: Social/Passwordless Login Error States

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

Add error handling for the different possible scenarios detailed in the above spreadsheet

How to Test-Drive This PR

Changes are deployed to: https://wasatch-mrt-social-login-poc.mrt-storefront-staging.com/

Manually step through each scenario in the spreadsheet and verify that you can see the correct error message

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

packages/template-retail-react-app/app/constants.js

packages/template-retail-react-app/app/hooks/use-auth-modal.js

hajinsuha1 · 2025-01-07T19:19:29Z

@yunakim714 It seems like users aren't able to resubmit for passwordless login after they cause an error.

Steps to reproduce:

Open the auth modal/login page
Enter a non existent user's email like a@a
Click Continue Securely
Enter an existent user's email like [email protected]

Expected:

/passwordless/login API call is made and check email page is displayed

Actual:

/passwordless/login API call is not made and login page is still displayed

yunakim714 · 2025-01-07T19:31:52Z

@hajinsuha1 Resolved the bug! Let me know if you still see the issue. Thanks for pointing that out!

hajinsuha1 · 2025-01-09T15:45:20Z

packages/template-retail-react-app/app/hooks/use-auth-modal.js

+                if (res.status !== 200) {
+                    const errorData = await res.json()
+                    throw new Error(`${res.status} ${errorData.message}`)
+                }


Would we consider moving the logic to throw the error message into commerce-sdk-react?

We could... Is there a specific reason to move this to the sdk?

I guess it would be to simplify the code within the retail react app, if we give the responsibility of throwing the error to the sdk the retail react app doesn't have to worry about checking the status code and can just catch the error when it occurs.

it'll also reduce code duplication, for example for passwordless checkout we wouldn't need to duplicate this logic

+1 on moving it to the sdk

alexvuong · 2025-01-09T19:29:35Z

packages/template-retail-react-app/app/constants.js

+    /callback_uri doesn't match/i,
+    /error getting user info/i,
+    /passwordless permissions error/i,
+    /client secret is not provided/i,


Where do we based these messages on? I assume this is from API. What happens if the API adds/removes these messages?

Yes these messages are from the API. If the error message does not match any of these, the error will show the generic API_ERROR_MESSAGE, which is "Something went wrong! Please try again."

my main concern is to have to maintain this list of constant. In a case where they change a bit of wording and an error will become obsolete.

Looking at the spreadsheet of error states I wonder if instead of matching by error message regex we should base it on status code? It seems like it would be possible

alexvuong · 2025-01-09T20:13:06Z

packages/template-retail-react-app/app/components/social-login/index.jsx

@@ -76,7 +77,9 @@ const SocialLogin = ({form, idps}) => {
                redirectURI: redirectURI
            })
        } catch (error) {
-            const message = formatMessage(API_ERROR_MESSAGE)
+            const message = /redirect_uri doesn't match/.test(error.message)
+                ? formatMessage(FEATURE_UNAVAILABLE_ERROR_MESSAGE)


To think about this message a little bit, if I recall correctly, if we the social config is not set up correctly, the button to login using socialLogin would not show. This implies the feature should be available. Should we use a better error message? 🤔

why don't we use a generic error instead for simplicity?

When discussing with Nathan we decided that if the user has not configured this feature correctly, then we should show this "feature not available" error. Even if the config is not set up correctly, if the user has enabled social login in the config, the button using social login will show.

alexvuong · 2025-01-09T20:16:34Z

@yunakim714 Would it possible to provide some steps on how to reproduce these error from the sheet?

yunakim714 · 2025-01-10T15:32:48Z

@alexvuong @hajinsuha1 I added a Steps to Reproduce column in the spreadsheet so you guys can better test this feature!

hajinsuha1 · 2025-01-13T19:39:56Z

packages/template-retail-react-app/app/hooks/use-auth-modal.js

-                    type: 'manual',
-                    message: formatMessage(API_ERROR_MESSAGE)
-                })
+                const message = /error getting user info/i.test(error.message)


@yunakim714 should we also have this error display the CREATE_ACCOUNT_FIRST_ERROR_MESSAGE?

{ "status_code" : "404 NOT_FOUND", "message" : "User not found" }

Steps to reproduce:

enter an email of a user that doesn't exist like a@s

Click Continue Securely

Sorry now that I'm trying on your env https://wasatch-mrt-social-login-poc.mrt-storefront-staging.com/ (bvgn_stg) I see it does display the correct error msg while my env that uses zzrf-001 (https://wasatch-mrt-jinsu.mrt-storefront-staging.com/) doesn't.

It looks like bvgn_stg throws a 502 while zzrf_001 throws a 404. I wonder if this is an expected API change?

alexvuong · 2025-01-13T22:35:05Z

packages/template-retail-react-app/app/pages/reset-password/reset-password-landing.jsx

@@ -46,7 +46,8 @@ const ResetPasswordLanding = () => {
            await resetPassword({email, token, newPassword: values.password})
            navigate('/login')
        } catch (error) {
-            const message = /Unauthorized/i.test(error.message)
+            const errorData = await error.response?.json()
+            const message = /invalid token/i.test(errorData.message)


Nit/non-blocking: Should we move this to constant? 🤔

yunakim714 added 3 commits January 6, 2025 12:42

handle error states for reset password and social login

b7cfad0

add error handling for authorize passwordless

3857c96

add error handling of passwordless

60726cc

yunakim714 marked this pull request as ready for review January 7, 2025 15:54

yunakim714 requested a review from a team as a code owner January 7, 2025 15:54

yunakim714 requested a review from hajinsuha1 January 7, 2025 15:54

hajinsuha1 reviewed Jan 7, 2025

View reviewed changes

packages/template-retail-react-app/app/constants.js Outdated Show resolved Hide resolved

hajinsuha1 reviewed Jan 7, 2025

View reviewed changes

packages/template-retail-react-app/app/hooks/use-auth-modal.js Outdated Show resolved Hide resolved

add error handling for authorize idp

865765c

yunakim714 added 2 commits January 7, 2025 14:22

check error status for message

480a5f3

resolve double click bug

37f19c0

yunakim714 added 8 commits January 7, 2025 14:36

handle async login in useeffect correctly

dd8f3e9

check for invalid token error in passwordless login

4917ef3

handle invalid token error for reset password

2531c5c

fix profile tests

05eabf9

fix social login tests

56b3de5

fix login form tests

79116bb

fix passwordless component tests

812b92b

fix account tests

04e21fa

hajinsuha1 reviewed Jan 9, 2025

View reviewed changes

yunakim714 requested a review from alexvuong January 9, 2025 17:18

alexvuong reviewed Jan 9, 2025

View reviewed changes

yunakim714 added 3 commits January 10, 2025 12:06

update error message for passwordless login error

ee5e599

move error message to constants

b13835d

add error message translations

ba3d8f4

hajinsuha1 reviewed Jan 13, 2025

View reviewed changes

alexvuong reviewed Jan 13, 2025

View reviewed changes

yunakim714 added 4 commits January 14, 2025 13:09

check if reset password callback is an absolute url

8316458

throw error in sdk

d0344b6

lint

95bea67

lint

c555280

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@W-17458039 - Handle error states for social/passwordless login and reset password #2185

@W-17458039 - Handle error states for social/passwordless login and reset password #2185

yunakim714 commented Jan 6, 2025 •

edited

Loading

hajinsuha1 commented Jan 7, 2025

yunakim714 commented Jan 7, 2025

hajinsuha1 Jan 9, 2025 •

edited

Loading

yunakim714 Jan 10, 2025

hajinsuha1 Jan 10, 2025

alexvuong Jan 13, 2025

alexvuong Jan 9, 2025

yunakim714 Jan 10, 2025

alexvuong Jan 13, 2025

hajinsuha1 Jan 15, 2025

alexvuong Jan 9, 2025

alexvuong Jan 9, 2025

yunakim714 Jan 10, 2025

alexvuong commented Jan 9, 2025

yunakim714 commented Jan 10, 2025

hajinsuha1 Jan 13, 2025 •

edited

Loading

hajinsuha1 Jan 13, 2025 •

edited

Loading

alexvuong Jan 13, 2025 •

edited

Loading

@W-17458039 - Handle error states for social/passwordless login and reset password #2185

Are you sure you want to change the base?

@W-17458039 - Handle error states for social/passwordless login and reset password #2185

Conversation

yunakim714 commented Jan 6, 2025 • edited Loading

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

hajinsuha1 commented Jan 7, 2025

yunakim714 commented Jan 7, 2025

hajinsuha1 Jan 9, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexvuong commented Jan 9, 2025

yunakim714 commented Jan 10, 2025

hajinsuha1 Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

hajinsuha1 Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

alexvuong Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

yunakim714 commented Jan 6, 2025 •

edited

Loading

hajinsuha1 Jan 9, 2025 •

edited

Loading

hajinsuha1 Jan 13, 2025 •

edited

Loading

hajinsuha1 Jan 13, 2025 •

edited

Loading

alexvuong Jan 13, 2025 •

edited

Loading