@W-20342599 Password Reset uses email mode

[hajinsuha1]

Description

Added a new mode to the password reset configuration that allows merchants to configure the mode they want to use for all oauth/password/reset calls:

Now it will set the password reset mode to the following

# Email mode
resetPassword: {
   mode: 'email',
   landingPath: '/reset-password-landing'
},

# Callback mode
resetPassword: {
   mode: 'callback',
   callbackURI: 'https://webhook.site/e6f88064-36bc-4605-8128-a94810bd4318',
   landingPath: '/reset-password-landing'
},

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

commerce-sdk-react

• Update getPasswordResetToken to default locale to the one in CommerceApiProvider and pass callback_uri and idp_name only when they are defined
• Update resetPassword to default hint to cross_device and pass code_verifier only when it is defined
  pwa-kit-create-app
• Update default.js and /_app-config/index.jsx template to use email mode by default for passwordless login and password reset.
  template-retail-react-app
• Update password reset to use email mode by default. The mode can now be configured via default.js

How to Test-Drive This PR

Email mode

This tests when default.js is configured to the following:

resetPassword: {
   mode: 'email',
   landingPath: '/reset-password-landing'
}

1. Configure and start the template-retail-react-app

   # Checkout this branch
   git checkout W-20342599-password-reset-uses-slas-email-mode
   
   # Revert this commit to setup `template-retail-react-app` with private client and updates the default.js commerceApi configuraton
   git revert 1bf6452787cbc591b1494398fdcf993f0a6eca1f
   
   # Build commerce-sdk-react locally by building the entire app
   npm ci
   
   # Set the private client secret via env vars and start the `template-retail-react-app`
   export PWA_KIT_SLAS_CLIENT_SECRET=SECRET
   cd packages/template-retail-react-app
   npm start
   

2. Once the app has started, open the developer console, start the reset password flow by opening the /login page, entering your email, clicking the Password button, clicking Forgot Password, then clicking theReset Password button
3. Verify an email was sent to you with the magic link (the magic link will not work as there is a bug that will be addressed in W-20662318)
4. Repeat steps 2-3 for the http://localhost:3000/us/login page (verify the locale that is sent is en-US instead of en-GB in the /password/reset request)
5. Repeat steps 2-3 for the login from the checkout page

Callback mode

1. Update default.js to

               resetPassword: {
                   mode: 'callback',
                   callbackURI: 'https://webhook.site/893aef41-13a0-41e9-8c86-95de1594ad0b',
                   landingPath: '/reset-password-landing'
               }
   

2. Restart the server

   npm start
   

3. Once the app has started, open the developer console, start the reset password flow by opening the /login page, entering your email, clicking the Password button, clicking Forgot Password, then clicking theReset Password button
4. Verify SLAS sent a POST request to the webhook callback uri: https://webhook.site/893aef41-13a0-41e9-8c86-95de1594ad0b
5. Repeat steps 3-4 for the http://localhost:3000/us/login page
6. Repeat steps 3-4 for the login from the checkout page

Backwards Compatibilty with template-retail-react-app

The current template-retail-react-app does not specify a mode and only specifies a callbackURI. Let's make sure our changes in commerce-sdk-react are backwards compatible!
This ensures when mode is missing but callbackURI is set in default.js, callback mode is used

1. Update default.js to

           resetPassword: {
               callbackURI: 'https://webhook.site/893aef41-13a0-41e9-8c86-95de1594ad0b',
               landingPath: '/reset-password-landing'
           }
   

2. Restart the server

   npm start
   

3. Once the app has started, open the developer console, start the reset password flow by opening the /login page, entering your email, clicking the Password button, clicking Forgot Password, then clicking theReset Password button
4. Verify SLAS sent a POST request to the webhook callback uri: https://webhook.site/893aef41-13a0-41e9-8c86-95de1594ad0b

pwa-kit-create-app

1. Verify projects generated using pwa-kit-create-app have default mode set to email for resetPassword

# Generate the project and verify config/default.js has resetPassword.mode set to email
node packages/pwa-kit-create-app/scripts/create-mobify-app.js --outputDir ./retail-react-app-demo-4 --preset retail-react-app-demo

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)

[cc-prodsec]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[jeremy-jung1]

LGTM