gmail.com users don't receive reset password emails from withAuthenticator HOC amplify v6 gen1

[olivert1969]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Create React App

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

ca-central-1

Please describe your bug.

gmail.com users don't receive reset password emails from withAuthenticator HOC amplify v6 gen1
but other domain users, e.g. hotmail.com users do receive reset password emails from the same environment

What's the expected behaviour?

user receives reset password email with confirmation code

Help us reproduce the bug!

click Reset Password in withAuthenticator HOC

Code Snippet

// Put your code below this line.

Console log output

no visible error messages

Additional information and screenshots

[calebpollman]

Hi @olivert1969! Have not been able to reproduce locally, can you provide your (redacted) amplify config? In the meantime moving this to the Amplify JS repo as the issue does not appear related to the Authenticator UI component

[cwomack]

Hey, @olivert1969 👋. Can you share your package.json so we can see the versions/dependencies you're currently using? And if this is a Gen 1 app using the v6 API's, can you share the frontend code associated with the Auth API's/withAuthenticator component? Thanks!

[olivert1969]

Thanks Chris! package.json attached frontend code associated with Auth APIs/withAuthenticator: index.jsx import React from "react"; import { Amplify } from "aws-amplify"; import { CookieStorage } from "aws-amplify/utils"; import { cognitoUserPoolsTokenProvider } from "aws-amplify/auth/cognito"; import { render } from "react-dom"; import { BrowserRouter as Router } from "react-router-dom"; import amplifyconfig from "./amplifyconfiguration.json"; import AppWithAuth from "./AppWithAuth"; import * as serviceWorker from "./serviceWorker"; const updatedAwsConfig = {   ...amplifyconfig, }; Amplify.configure(updatedAwsConfig); cognitoUserPoolsTokenProvider.setKeyValueStorage(new CookieStorage()); render(   <Router>     <AppWithAuth />   </Router>,   document.getElementById("root") ); serviceWorker.unregister(); AppWithAuth.jsx import React from "react"; import {   Authenticator,   withAuthenticator,   useTheme,   View,   Image,   Text,   Heading,   useAuthenticator,   Button,   CheckboxField,   SelectField,   TextField, } from ***@***.***/ui-react"; import ***@***.***/ui-react/styles.css"; import { ChakraProvider, ColorModeScript } from ***@***.***/react"; import { Provider } from "react-redux"; import App from "./App"; import store from "./store"; import { QueryClient, QueryClientProvider } from "react-query"; import { ReactQueryDevtools } from "react-query/devtools"; import { UserProvider } from "./UserContext"; const queryClient = new QueryClient(); const components = {   Header() {     const { tokens } = useTheme();     return (       <View textAlign="center" padding={tokens.space.large}>         <Image           alt="AR logo"           src="https://futurepacspubfiles.s3.ca-central-1.amazonaws.com/ARLogoIcon.png"         />       </View>     );   },   Footer() {     const { tokens } = useTheme();     return (       <View textAlign="center" padding={tokens.space.large}>         <Text color={tokens.colors.neutral[80]}>           &copy; All Rights Reserved         </Text>       </View>     );   },   SignIn: {     Footer() {       const { toForgotPassword } = useAuthenticator();       return (         <View textAlign="center">           <Button             fontWeight="normal"             onClick={toForgotPassword}             size="small"             variation="link"           >             Reset Password           </Button>         </View>       );     },   },   SignUp: {     FormFields() {       const { validationErrors } = useAuthenticator();       return (         <>           {/* Re-use default `Authenticator.SignUp.FormFields` */}           <Authenticator.SignUp.FormFields />           <SelectField             name="custom:role"             label="Role"             placeholder="Please select a role"           >             <option value="cardiologist">Cardiologist</option>             <option value="sonographer">Sonographer</option>             <option value="learner">Learner</option>             <option value="educator">Educator</option>             <option value="patient">Patient</option>           </SelectField>           <TextField             name="custom:clinicName"             label="Organization"             placeholder="Please enter the organization name"           />           {/* Append & require Terms & Conditions field to sign up  */}           <CheckboxField             //            errorMessage={validationErrors.acknowledgement as string}             hasError={!!validationErrors.acknowledgement}             name="acknowledgement"             value="yes"             label="I agree with the Terms & Conditions"           />         </>       );     },   },   ConfirmSignUp: {     Header() {       const { tokens } = useTheme();       return (         <Heading           padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}           level={3}         >           Email ***@***.*** For Confirmation         </Heading>       );     },   },   SetupTOTP: {     Header() {       const { tokens } = useTheme();       return (         <Heading           padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}           level={3}         >           Enter Information:         </Heading>       );     },     Footer() {       return <Text>Footer Information</Text>;     },   },   ConfirmSignIn: {     Header() {       const { tokens } = useTheme();       return (         <Heading           padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}           level={3}         >           Enter Information:         </Heading>       );     },     Footer() {       return <Text>Footer Information</Text>;     },   },   ResetPassword: {     Header() {       const { tokens } = useTheme();       return (         <Heading           padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}           level={3}         >           Reset Password:         </Heading>       );     },     Footer() {       return <Text></Text>;     },   },   ConfirmResetPassword: {     Header() {       const { tokens } = useTheme();       return (         <Heading           padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}           level={3}         >           Reset Password:         </Heading>       );     },     Footer() {       return <Text></Text>;     },   },   LoadingIndicator: () => <div>Loading...</div>, }; const services = {   async validateCustomSignUp(formData) {     if (!formData.acknowledgement) {       return {         acknowledgement: "You must agree to the Terms & Conditions",       };     }   }, }; const formFields = {   signIn: {     username: {       placeholder: "Enter your email",     },   },   signUp: {     password: {       label: "Password:",       placeholder: "Enter your Password:",     },     confirm_password: {       label: "Confirm Password:",     },   },   forceNewPassword: {     password: {       placeholder: "Enter your Password:",     },   },   resetPassword: {     username: {       placeholder: "Enter your email:",     },   },   confirmResetPassword: {     confirmation_code: {       placeholder: "Enter your Confirmation Code:",       isRequired: false,     },     confirm_password: {       placeholder: "Enter your Password Please:",     },   },   setupTOTP: {     QR: {       totpIssuer: "test issuer",       totpUsername: "amplify_qr_test_user",     },     confirmation_code: {       placeholder: "Enter your Confirmation Code:",       isRequired: false,     },   },   confirmSignIn: {     confirmation_code: {       placeholder: "Enter your Confirmation Code:",       isRequired: false,     },   },   confirmSignUp: {     confirmation_code: {       placeholder:         ***@***.*** will email you confirmation of your registration.",       isRequired: false,     },   }, }; const AppWithAuth = withAuthenticator(   ({ user, signOut }) => (     <ChakraProvider>       <ColorModeScript initialColorMode="light" />       <UserProvider key={user?.username} user={user}>         <Provider store={store}>           <QueryClientProvider client={queryClient}>             <App signOut={signOut} />             <ReactQueryDevtools initialIsOpen={false} />           </QueryClientProvider>         </Provider>       </UserProvider>     </ChakraProvider>   ),   {     components,     services,     formFields,     loginMechanisms: ["email"],     variation: "default",     signUpAttributes: ["custom:role", "custom:clinicName"],   } ); export default AppWithAuth;

…

---- On Fri, 20 Dec 2024 14:29:50 -0500 Chris Womack ***@***.***> wrote --- Hey, https://github.com/olivert1969 👋. Can you share your package.json so we can see the versions/dependencies you're currently using? And if this is a Gen 1 app using the v6 API's, can you share the frontend code associated with the Auth API's/withAuthenticator component? Thanks! — Reply to this email directly, #14093 (comment), or https://github.com/notifications/unsubscribe-auth/AJH7T5O2VXAOMKAAHKUXUMT2GRV25AVCNFSM6AAAAABT53FHPGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNJXGYYDGNZUGY. You are receiving this because you were mentioned.

[jjarvisp]

Hey @olivert1969, thanks for providing your front end code. We'll look through this and see if anything jumps out. It doesn't look like your package.json or amplify_outputs.json file came through, would you mind trying to reattach?

In the meantime, could you also provide some details in how your Cognito email sender is set up? For example, are you using SES? If so, has your sending domain been fully verified and do you see any bounces in the SES dashboard or in the logs themselves? We also haven't been able to replicate so we're trying to narrow down where in the delivery process this could be getting blocked.

[olivert1969]

package.json {   "name": "client",   "version": "0.1.0",   "private": true,   "homepage": "/",   "dependencies": {     ***@***.***/ui-react": "^6.7.0",     ***@***.***/ui-react-storage": "^3.4.0",     ***@***.***/icons": "1.0.13",     ***@***.***/react": "1.8.9",     ***@***.***/react": "^11.11.0",     ***@***.***/styled": "^11.11.0",     ***@***.***/visually-hidden": "^0.18.0",     ***@***.***/renderer": "3.1.10",     ***@***.***/toolkit": "^2.4.0",     "aws-amplify": "^6.9.0",     "date-fns": "^2.30.0",     "detect-node-es": "^1.1.0",     "formik": "^2.4.1",     "framer-motion": "6.5.1",     "highlight.js": "10.7.3",     "hsl-to-rgb-for-reals": "^1.1.1",     "immer": "^7.0.7",     "is-binary-path": "^2.1.0",     "is-retina": "^1.0.3",     "lodash": "^4.17.21",     "md5": "^2.3.0",     "ncu": "^0.2.1",     "pluralize": "^8.0.0",     "query-string": "^8.1.0",     "react": "^16.13.1",     "react-beforeunload": "^2.5.3",     "react-contexify": "^6.0.0",     "react-copy-to-clipboard": "^5.1.0",     "react-datepicker": "^4.12.0",     "react-dom": "^16.13.1",     "react-gravatar": "^2.6.3",     "react-icons": "^4.9.0",     "react-infinite-scroller": "^1.2.6",     "react-query": "^3.39.3",     "react-redux": "^7.2.1",     "react-router-dom": "^5.2.0",     "react-scroll": "^1.8.9",     "readdirp": "^3.6.0",     "remove-accents": "^0.4.4",     "reselect": "^4.1.8",     "yup": "^0.29.3"   },   "scripts": {     "start": "react-scripts start",     "build": "react-scripts build",     "test": "react-scripts test",     "eject": "react-scripts eject"   },   "eslintConfig": {     "extends": "react-app"   },   "browserslist": {     "production": [       ">0.2%",       "not dead",       "not op_mini all"     ],     "development": [       "last 1 chrome version",       "last 1 firefox version",       "last 1 safari version"     ]   },   "husky": {     "hooks": {       "pre-commit": "pretty-quick --staged"     }   },   "devDependencies": {     ***@***.***/why-did-you-render": "^7.0.1",     "husky": "^4.3.8",     "prettier": "^2.8.8",     "pretty-quick": "^3.1.3",     "react-scripts": "5.0.1",     "react-test-renderer": "^16.13.1",     "reactotron-react-js": "^3.3.8",     "reactotron-redux": "^3.1.3"   } } no amplify_outputs.json file using Cognito via AWS Cognito console for sending email not SES

…

---- On Fri, 20 Dec 2024 16:41:56 -0500 James Jarvis ***@***.***> wrote --- Hey https://github.com/olivert1969, thanks for providing your front end code. We'll look through this and see if anything jumps out. It doesn't look like your package.json or amplify_outputs.json file came through, would you mind trying to reattach? In the meantime, could you also provide some details in how your Cognito email sender is set up? For example, are you using SES? If so, has your sending domain been fully verified and do you see any bounces in the SES dashboard or in the logs themselves? We also haven't been able to replicate so we're trying to narrow down where in the delivery process this is getting blocked. — Reply to this email directly, #14093 (comment), or https://github.com/notifications/unsubscribe-auth/AJH7T5MTAPD6GIUP5EXJUOL2GSFKJAVCNFSM6AAAAABT53FHPGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNJXG42TENRYGI. You are receiving this because you were mentioned.

[cwomack]

@olivert1969, I'm still not able to reproduce this issue and I'm wondering if this is related to some filtering being done on the Gmail side. Can you double check the spam folders to see if the password reset emails are being filtered out by Google for some reason? The domain they come from may be flagged or picked up by the filtering (depending on how aggressive it's currently set).

If it wasn't working for any domains/providers, then we'd expect to see other errors or logs for this. But the fact that some are and some aren't sounds like it could be something configured specifically with the provider at this point.