Feature: Passwordless Login and Password Reset supports use of email mode#3525
Feature: Passwordless Login and Password Reset supports use of email mode#3525hajinsuha1 merged 26 commits intodevelopfrom
email mode#3525Conversation
* Add passwordless login mode configuration with email as default * Update authorizePasswordless to require mode parameter and add locale support * Remove commented out passwordless callbackURI configuration * Remove passwordlessCallbackURI variable and simplify callbackURI condition in authorizePasswordlessLogin * Remove conditional callbackURI spread and add mode parameter to checkout passwordless login * Add buildCallbackURL utility function and conditionally spread callbackURI in passwordless login * Rename buildCallbackURL to buildAbsoluteUrl and make passwordlessLoginCallbackURI optional * update unit tests in template-retail-react-app and fix passwordless mode in login page * make authorizePasswordless backward compatible and add unit tests for commerce-sdk-react * Make passwordlessLoginCallbackURI non-optional with empty string default * update changelog * Use endsWith() to match passwordless login landing path and add test for localized paths
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
… via pwa-kit-create-app (#3526)
Signed-off-by: Jinsu Ha <91205717+hajinsuha1@users.noreply.github.com>
* 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. * Update password reset to use email mode by default. The mode can now be configured via default.js
…ly" to "Continue" (#3556) * update passwordless and password reset e2e tests to veirfy mode email is used * Update EXTRA_FEATURES_E2E_RETAIL_APP_HOME to support environment variable configuration * Update mobile e2e tests to verify 'email' mode for passwordless login and password reset requests * update "continue securely" to "continue"
email mode
Signed-off-by: Jinsu Ha <91205717+hajinsuha1@users.noreply.github.com>
e1dcdfd to
3d27d0b
Compare
email modeemail mode
…asswordless and reset password (#3574) * Enhance error handling for password reset functionality and add new error message for "too many requests" errors * display errors in Email Confirmation page * added new auth-utils.js that contains utility methods for mapping passwordless and reset password API error messages to user-friendly error messages * added mapping of the following API error messages: "no callback_uri is registered for client" -> "This feature is not currently available", "Too many login requests were made. Please try again later." -> Too many requests. For your security, please wait 10 ** minutes before trying again., "Monthly quota for passwordless login mode email has been exceeded" -> "This feature is not currently available" * changelog updates and translations
Signed-off-by: Jinsu Ha <91205717+hajinsuha1@users.noreply.github.com>
…less and password reset
…erceCloud/pwa-kit into feature/email-otp
| const result = await auth.resetPassword(input) | ||
| expect(result).toBe(mockResponse) | ||
| expect(resetPasswordSpy).toHaveBeenCalled() | ||
| const callArgs = resetPasswordSpy.mock.calls[0][0] as any |
There was a problem hiding this comment.
Can we reduce the any explicit assignment?
| const usid = this.get('usid') | ||
| // Default to 'callback' mode for backward compatibility as older versions of the template-retail-react-app | ||
| // do not pass the mode parameter. Newer versions should explicitly pass the mode. | ||
| const mode = parameters.mode || 'callback' |
There was a problem hiding this comment.
The upcoming release is gonna be breaking change version. If you want to change the default, now is the time
There was a problem hiding this comment.
Make sure you document this behavior somewhere to make it clear
There was a problem hiding this comment.
will make sure it's documented in the dev docs
|
|
||
| - Update `authorizePasswordless` to pass locale and simplify mode selection to respect user's explicit mode choice while still defaulting to callback mode for backward compatibility [#3492](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3492) | ||
| - Update `getPasswordResetToken` to pass locale, callback_uri and idp_name only when they are defined [#3547](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3547) | ||
| - Update `resetPassword` to default hint to `cross_device` and pass code_verifier only when it is defined [#3547](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3547) |
There was a problem hiding this comment.
Let's bundle these up into one feature PR (this one since this feature branch has all the code changes). customers do not need to know about non-feature branches.
| await user.click(screen.getByText(/Continue/i)) | ||
|
|
||
| expect( | ||
| mockAuthHelperFunctions[AuthHelpers.AuthorizePasswordless].mutateAsync |
There was a problem hiding this comment.
Can we mock this at the api level with msw?
| test.each([ | ||
| ['no callback_uri is registered for client', 'This feature is not currently available.'], | ||
| [ | ||
| 'Too many password reset requests were made. Please try again later.', |
There was a problem hiding this comment.
Nit: while doing this is okay since we want to test if the error is being rendered properly when occurring, but realistically, we may want to trigger 6 times on resent link click, and on the 6th time is when error is mocked and returned.
| [AuthHelpers.AuthorizePasswordless]: {mutateAsync: jest.fn()} | ||
| } | ||
|
|
||
| jest.mock('@salesforce/commerce-sdk-react', () => { |
There was a problem hiding this comment.
for consistency, can we mock the data at api level to avoid doing this since we are currently using mws for various calls in this test file? Besides, this is a page component, it would be better to mock data at api-level
|
|
||
| // Verify that authorizePasswordless is called with correct parameters | ||
| await waitFor(() => { | ||
| expect( |
There was a problem hiding this comment.
Can we mock this call at api-level?
Co-authored-by: Alex Vuong <alex.vuong@salesforce.com> Signed-off-by: Jinsu Ha <91205717+hajinsuha1@users.noreply.github.com>
- mock at api level for tests - update changelog
…erceCloud/pwa-kit into feature/email-otp
|
Hey Jinsu - I'm testing email mode on https://wasatch-mrt-feature-private.mrt-storefront-staging.com/ , and when I click Continue, I get the email sent successfully but I see the wrong login link. Wanted to double check on this |
| }, | ||
| parameters: { | ||
| ...(callbackURI && {callbackURI: callbackURI}), | ||
| ...(callbackURI && {callbackURI}), |
There was a problem hiding this comment.
Should we omit this if mode === email ?
| channel_id: parameters.channel_id || slasClient.clientConfig.parameters.siteId, | ||
| client_id: parameters.client_id || slasClient.clientConfig.parameters.clientId, | ||
| callback_uri: parameters.callback_uri, | ||
| ...(parameters.callback_uri && {callback_uri: parameters.callback_uri}), |
There was a problem hiding this comment.
Same here? If mode === email, do not set this ? Or is this ignored if mode === email ?
packages/template-retail-react-app/app/utils/auth-utils.test.js
Outdated
Show resolved
Hide resolved
Signed-off-by: Jinsu Ha <91205717+hajinsuha1@users.noreply.github.com>
Co-authored-by: Yuna Kim <84923642+yunakim714@users.noreply.github.com> Signed-off-by: Jinsu Ha <91205717+hajinsuha1@users.noreply.github.com>




Description
This feature allows the mode for passwordless login and password reset to be configured in default.js.
It also changes the default
modeused intemplate-retail-react-appfromcallbacktoemail.This branch contains the following PRs:
emailmode #3547After this PR is merged, to ensure the changes to the E2E tests pass the following PR that updates the
extra-features-e2e-branchwill need to be mergedextra-features-e2e-branchfor E2E tests #3557Types of Changes
Changes
template-retail-react-app
extra-featurese2e testscommerce-sdk-react
getPasswordResetTokenandauthorizePasswordlessto default locale to the one in CommerceApiProvider and pass callback_uri and idp_name only when they are definedgetPasswordResetTokento return a raw response and throw an error with the error message if the status code is not 200pwa-kit-create-app
default.jsand/_app-config/index.jsxtemplate to use email mode by default for passwordless login and password reset.How to Test-Drive This PR
Email mode
Changes have been deployed to https://wasatch-mrt-feature-private.mrt-storefront-staging.com/
template-retail-react-appwith a private client and start the app. By default, default.js is configured to use email mode for passwordless and resetPasswordPasswordless Login
Continuebutton to trigger passwordless login (verify the locale that is sent isen-US)en-USinstead ofen-GB)en-US)Password Reset
Passwordbutton, clickingForgot Password, then clicking theReset Passwordbutton (verify the locale that is sent isen-US)en-USinstead ofen-GBin the/password/resetrequest)en-US)Callback mode
Changes have been deployed to https://wasatch-mrt-passwordless-poc.mrt-storefront-staging.com/
Update
passwordlessindefault.jstoUpdate
resetPasswordindefault.jstoRestart the server
Passwordless Login
Continuebutton to trigger passwordless login. (verify the locale that is sent isen-US)en-USinstead ofen-GB)Password Reset
Passwordbutton, clickingForgot Password, then clicking theReset Passwordbuttonen-USinstead ofen-GB)Backwards compatibility (mode field missing)
The previous version of
template-retail-react-appdoes not contain amodefield for passwordless and resetPassword in default.js. Let's make sure our changes incommerce-sdk-reactare backwards compatible by making sure that when mode is missing andcallbackURIis set in default.js, callback mode is used.passwordlessindefault.jstoresetPasswordindefault.jstoPasswordless Login
Continuebutton to trigger passwordless loginen-USinstead ofen-GB)Password Reset
Passwordbutton, clickingForgot Password, then clicking theReset Passwordbuttonen-USinstead ofen-GB)Error Handling
These error messages align with the messages reviewed by UX: https://salesforce.quip.com/97bPANYv5D2U
Too many requests error
Continuebutton. Then clickResend Linkbutton 6 times in 10 minutes.Too many requests. For your security, please wait 10 minutes before trying again.error is displayedContinuebutton.Too many requests. For your security, please wait 10 minutes before trying again.error is displayedPasswordbutton, clickForgot Passwordlink. ClickReset Passwordand repeat this 3 more times to trigger the too many requests errorToo many requests. For your security, please wait 10 minutes before trying again.error is displayedno callback_uri is registered for clienterrorContinuebutton.This feature is not currently available.error is displayedPasswordbutton, clickForgot Passwordlink. ClickReset Password.This feature is not currently available.error is displayedpwa-kit-create-app
The Retail app with demo Commerce Cloud instancedefault.js,app.login.passwordless.modeandapp.login.resetPassword.modeis set toemailandcallbackURIis commented out/_app-config/index.jsxtheabsoluteUrlutility is useddefault.jsapp.login.passwordless.enabledtotruepasswordless: { // Enables or disables passwordless login for the site. Defaults to: false enabled: true,commerceAPIto use an instance of SLAS that has email otp enabledcommerceAPI: { proxyPath: `/mobify/proxy/api`, parameters: { clientId: 'CLIENT_ID' organizationId: 'f_ecom_zzrf_001', shortCode: 'staging-001', siteId: 'RefArchGlobal' } },ssrParametersto use the ecom instance with email OTP enabledoverrides/app/ssr.jsuseSLASPrivateClienttotrueapplySLASPrivateClientToEndpointspropertyoverrides/app/components/_app-config/index.jsxaddenablePWAKitPrivateClient={true}to the fields ofCommerceApiProviderE2E Tests
Verify password reset callback request on mobile when extra login features are not enabled. This tests fails as it runs against https://scaffold-pwa-e2e-pwa-kit-private.mobify-storefront.com/ which does not have the email otp changes yetChecklists
General
Accessibility Compliance
You must check off all items in one of the follow two lists:
or...
Localization