Description

Previously the landingPath and redirectUri set in the config was not being used for creating the routes for passwordless login, reset password, and social login. Instead a constant was being used which meant if the values were changed in the config, the actual routes would not be created.

This PR resolves this by ensuring the paths set in the configuration are actually used to generate the routes.

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

• update routes.jsx such that Passwordless Login landingPath, Reset Password landingPath, and Social Login redirectUri value in config are used
• update login/index.jsx to
  • use passwordless landingPath from config instead of a hard coded constant
  • match when path ends with landingPath
• update reset-password/index.jsx to use
  • reset password landingPath from config instead of a hard coded constant
  • match when path ends with landingPath

How to Test-Drive This PR

Disabling the feature does not add routes

1. Revert this commit to setup template-retail-react-app with a private client, custom landingPath and redirectUri, and social and passwordless login disabled.

   git revert 9a045f0028e8c15425285a61efc87d45f7122620
   

2. Start the app

   cd packages/template-retail-react-app
   # Set a custom redirectUri for social login
   export SOCIAL_LOGIN_REDIRECT_URI=/custom-social-callback
   # Set a callback URI for passwordless login/reset password so we can test the e2e flow
   export PASSWORDLESS_LOGIN_CALLBACK_URI=https://webhook.site/6ec2f206-8068-45f4-bb00-3fbb6414efa2
   export RESET_PASSWORD_CALLBACK_URI=https://webhook.site/6ec2f206-8068-45f4-bb00-3fbb6414efa2
   export PWA_KIT_SLAS_CLIENT_SECRET=C_rjTquYZdkRFKtWRnU5RO6UC05nHHcSiZBUUPiO9v8
   npm start
   

3. Verify http://localhost:3000/custom-social-callback displays "The page you're looking for can't be found." This means the route wasn't generated since the social login feature is disabled.
4. Verify http://localhost:3000/custom-passwordless-login-landing displays "The page you're looking for can't be found." This means the route wasn't generated since the passwordless login feature is disabled.

Enabling the feature and setting custom paths generates the correct routes

1. For below steps you can test locally or using the deployed app here: https://wasatch-mrt-feature-private.mrt-storefront-staging.com/
2. Update default.js to enable passwordless and social login

           login: {
               passwordless: {
                   enabled: true,
                   callbackURI:
                       process.env.PASSWORDLESS_LOGIN_CALLBACK_URI || '/passwordless-login-callback',
                   landingPath: '/custom-passwordless-login-landing'
               },
               social: {
                   enabled: true,
                   idps: ['google', 'apple'],
                   redirectURI: process.env.SOCIAL_LOGIN_REDIRECT_URI || '/social-callback'
               },
               resetPassword: {
                   callbackURI: process.env.RESET_PASSWORD_CALLBACK_URI || '/reset-password-callback',
                   landingPath: '/custom-reset-password-landing'
               }
           },
   

3. Restart the app
4. Verify social login works and redirects user to /custom-social-callback when redirected back to the storefront
   https://github.com/user-attachments/assets/268c83bd-9d85-48b0-9c50-a6f005bbcb9d
5. Verify passwordless login works with the /custom-passwordless-login-landing path
   1. From the login page or modal, enter your email and click Continue Securely
   2. In a new tab, open https://webhook.site/#!/view/6ec2f206-8068-45f4-bb00-3fbb6414efa2 and get the token from the most recent request.
   3. Navigate to http://localhost:3000/custom-passwordless-login-landing?token=99434438 (replace the token)
   4. Verify you are logged in successfully
6. Verify resert password works with custom landingPath
   1. From the login page or modal, enter your email and click Password
   2. Click the Forgot Password? link
   3. Click the Reset Password button
   4. In a new tab, open https://webhook.site/#!/view/6ec2f206-8068-45f4-bb00-3fbb6414efa2 and get the token from the most recent request.
   5. Navigate to http://localhost:3000/custom-reset-password-landing?token=97880601 (replace the token)
   6. Set a new password. Note this request will fail as there is a bug that will be addressed in W-20662318

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)