create getTokenBasedAuthErrorMessage util and use it for authorizePasswordlessLogin and getPasswordResetToken errors

Author: hajinsuha1

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

@@ -105,11 +105,6 @@ export const FEATURE_UNAVAILABLE_ERROR_MESSAGE = defineMessage({
     defaultMessage: 'This feature is not currently available.',
     id: 'global.error.feature_unavailable'
 })
-export const TOO_MANY_REQUESTS_ERROR_MESSAGE = defineMessage({
-    defaultMessage:
-        'Too many requests. For your security, please wait 10 minutes before trying again.',
-    id: 'global.error.too_many_requests'
-})
 
 export const HOME_HREF = '/'
 
@@ -256,17 +251,6 @@ export const LOGIN_TYPES = {
     SOCIAL: 'social'
 }
 
-// Error messages that indicate the passwordless feature is unavailable
-export const AUTH_FEATURE_UNAVAILABLE_ERRORS = [
-    /no callback_uri is registered/i,
-    /callback_uri doesn't match/i,
-    /passwordless permissions error/i,
-    /client secret is not provided/i,
-    /monthly quota/i
-]
-
-export const TOO_MANY_REQUESTS_ERROR = /too many .* requests/i
-
 export const INVALID_TOKEN_ERROR = /invalid token/i
 
 /**

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

@@ -31,13 +31,8 @@ import ResetPasswordForm from '@salesforce/retail-react-app/app/components/reset
 import RegisterForm from '@salesforce/retail-react-app/app/components/register'
 import PasswordlessEmailConfirmation from '@salesforce/retail-react-app/app/components/email-confirmation/index'
 import {noop} from '@salesforce/retail-react-app/app/utils/utils'
-import {
-    API_ERROR_MESSAGE,
-    FEATURE_UNAVAILABLE_ERROR_MESSAGE,
-    AUTH_FEATURE_UNAVAILABLE_ERRORS,
-    TOO_MANY_REQUESTS_ERROR,
-    TOO_MANY_REQUESTS_ERROR_MESSAGE
-} from '@salesforce/retail-react-app/app/constants'
+import {getTokenBasedAuthErrorMessage} from '@salesforce/retail-react-app/app/utils/auth-utils'
+import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
 import {usePrevious} from '@salesforce/retail-react-app/app/hooks/use-previous'
 import {usePasswordReset} from '@salesforce/retail-react-app/app/hooks/use-password-reset'
@@ -110,9 +105,7 @@ export const AuthModal = ({
             })
             setCurrentView(EMAIL_VIEW)
         } catch (error) {
-            const message = AUTH_FEATURE_UNAVAILABLE_ERRORS.some((msg) => msg.test(error.message))
-                ? formatMessage(FEATURE_UNAVAILABLE_ERROR_MESSAGE)
-                : formatMessage(API_ERROR_MESSAGE)
+            const message = formatMessage(getTokenBasedAuthErrorMessage(error.message))
             form.setError('global', {type: 'manual', message})
         }
     }
@@ -187,13 +180,7 @@ export const AuthModal = ({
                 try {
                     await getPasswordResetToken(data.email)
                 } catch (e) {
-                    const message = AUTH_FEATURE_UNAVAILABLE_ERRORS.some((msg) =>
-                        msg.test(e.message)
-                    )
-                        ? formatMessage(FEATURE_UNAVAILABLE_ERROR_MESSAGE)
-                        : TOO_MANY_REQUESTS_ERROR.test(e.message)
-                        ? formatMessage(TOO_MANY_REQUESTS_ERROR_MESSAGE)
-                        : formatMessage(API_ERROR_MESSAGE)
+                    const message = formatMessage(getTokenBasedAuthErrorMessage(e.message))
                     form.setError('global', {type: 'manual', message})
                 }
             },

packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx

@@ -45,11 +45,7 @@ import {useAppOrigin} from '@salesforce/retail-react-app/app/hooks/use-app-origi
 import {AuthHelpers, useAuthHelper, useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 import {buildAbsoluteUrl} from '@salesforce/retail-react-app/app/utils/url'
-import {
-    API_ERROR_MESSAGE,
-    FEATURE_UNAVAILABLE_ERROR_MESSAGE,
-    PASSWORDLESS_ERROR_MESSAGES
-} from '@salesforce/retail-react-app/app/constants'
+import {getTokenBasedAuthErrorMessage} from '@salesforce/retail-react-app/app/utils/auth-utils'
 
 const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, idps = []}) => {
     const {formatMessage} = useIntl()
@@ -94,9 +90,7 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
             setAuthModalView(EMAIL_VIEW)
             authModal.onOpen()
         } catch (error) {
-            const message = PASSWORDLESS_ERROR_MESSAGES.some((msg) => msg.test(error.message))
-                ? formatMessage(FEATURE_UNAVAILABLE_ERROR_MESSAGE)
-                : formatMessage(API_ERROR_MESSAGE)
+            const message = formatMessage(getTokenBasedAuthErrorMessage(error.message))
             setError(message)
         }
     }

packages/template-retail-react-app/app/pages/login/index.jsx

@@ -29,12 +29,11 @@ import PasswordlessEmailConfirmation from '@salesforce/retail-react-app/app/comp
 import {
     API_ERROR_MESSAGE,
     INVALID_TOKEN_ERROR,
-    INVALID_TOKEN_ERROR_MESSAGE,
-    FEATURE_UNAVAILABLE_ERROR_MESSAGE,
-    PASSWORDLESS_ERROR_MESSAGES
+    INVALID_TOKEN_ERROR_MESSAGE
 } from '@salesforce/retail-react-app/app/constants'
 import {usePrevious} from '@salesforce/retail-react-app/app/hooks/use-previous'
 import {isServer, noop} from '@salesforce/retail-react-app/app/utils/utils'
+import {getTokenBasedAuthErrorMessage} from '@salesforce/retail-react-app/app/utils/auth-utils'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 
 const LOGIN_ERROR_MESSAGE = defineMessage({
@@ -113,9 +112,7 @@ const Login = ({initialView = LOGIN_VIEW}) => {
             setPasswordlessLoginEmail(email)
             setCurrentView(EMAIL_VIEW)
         } catch (error) {
-            const message = PASSWORDLESS_ERROR_MESSAGES.some((msg) => msg.test(error.message))
-                ? formatMessage(FEATURE_UNAVAILABLE_ERROR_MESSAGE)
-                : formatMessage(API_ERROR_MESSAGE)
+            const message = formatMessage(getTokenBasedAuthErrorMessage(error.message))
             form.setError('global', {type: 'manual', message})
         }
     }

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

@@ -19,13 +19,7 @@ import useDataCloud from '@salesforce/retail-react-app/app/hooks/use-datacloud'
 import {useLocation} from 'react-router-dom'
 import {useRouteMatch} from 'react-router'
 import {usePasswordReset} from '@salesforce/retail-react-app/app/hooks/use-password-reset'
-import {
-    API_ERROR_MESSAGE,
-    FEATURE_UNAVAILABLE_ERROR_MESSAGE,
-    AUTH_FEATURE_UNAVAILABLE_ERRORS,
-    TOO_MANY_REQUESTS_ERROR,
-    TOO_MANY_REQUESTS_ERROR_MESSAGE
-} from '@salesforce/retail-react-app/app/constants'
+import {getTokenBasedAuthErrorMessage} from '@salesforce/retail-react-app/app/utils/auth-utils'
 
 const ResetPassword = () => {
     const {formatMessage} = useIntl()
@@ -41,11 +35,7 @@ const ResetPassword = () => {
         try {
             await getPasswordResetToken(email)
         } catch (e) {
-            const message = AUTH_FEATURE_UNAVAILABLE_ERRORS.some((msg) => msg.test(e.message))
-                ? formatMessage(FEATURE_UNAVAILABLE_ERROR_MESSAGE)
-                : TOO_MANY_REQUESTS_ERROR.test(e.message)
-                ? formatMessage(TOO_MANY_REQUESTS_ERROR_MESSAGE)
-                : formatMessage(API_ERROR_MESSAGE)
+            const message = formatMessage(getTokenBasedAuthErrorMessage(e.message))
             form.setError('global', {type: 'manual', message})
         }
     }

packages/template-retail-react-app/app/utils/auth-utils.js

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import {defineMessage} from 'react-intl'
+import {
+    API_ERROR_MESSAGE,
+    FEATURE_UNAVAILABLE_ERROR_MESSAGE
+} from '@salesforce/retail-react-app/app/constants'
+
+// Error patterns for token-based auth features (passwordless login, password reset)
+const TOKEN_BASED_AUTH_FEATURE_UNAVAILABLE_ERRORS = [
+    /no callback_uri is registered/i,
+    /callback_uri doesn't match/i,
+    /passwordless permissions error/i,
+    /client secret is not provided/i,
+    /monthly quota/i
+]
+
+const TOO_MANY_REQUESTS_ERROR = /too many .* requests/i
+
+const TOO_MANY_REQUESTS_ERROR_MESSAGE = defineMessage({
+    defaultMessage:
+        'Too many requests. For your security, please wait 10 minutes before trying again.',
+    id: 'global.error.too_many_requests'
+})
+
+/**
+ * Maps an error message to the appropriate user-friendly error message descriptor
+ * for token-based authentication features that send tokens via email (passwordless login, password reset).
+ * Checks for auth feature unavailable errors and too many requests errors.
+ *
+ * @param {string} errorMessage - The error message from the API
+ * @returns {Object} - The message descriptor object (from defineMessage) that can be passed to formatMessage
+ */
+export const getTokenBasedAuthErrorMessage = (errorMessage) => {
+    if (TOKEN_BASED_AUTH_FEATURE_UNAVAILABLE_ERRORS.some((msg) => msg.test(errorMessage))) {
+        return FEATURE_UNAVAILABLE_ERROR_MESSAGE
+    }
+    if (TOO_MANY_REQUESTS_ERROR.test(errorMessage)) {
+        return TOO_MANY_REQUESTS_ERROR_MESSAGE
+    }
+    return API_ERROR_MESSAGE
+}