aws-amplify / amplify-ui

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
https://ui.docs.amplify.aws
Apache License 2.0
910 stars 291 forks source link

Showing Passoword in the place of Email #5363

Open VivekS98 opened 4 months ago

VivekS98 commented 4 months ago

Before creating a new issue, please confirm:

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

NextJS

What browsers are you seeing the problem on?

Firefox

Which region are you seeing the problem in?

India (Banglore)

Please describe your bug.

After Signin, a verification step is shown, where instead of email or username it shows password which should never happen. If we are using username for Signup, then it should use another way to verify, but not show the passoword directly. Screenshot 2024-07-03 at 13-50-53 RadiXplore v3

What's the expected behaviour?

If the Auth happens via username, then in the verification step, it must ask for email or phone number for verification. Or there must be a way to disable the verification step.

Help us reproduce the bug!

Try signing up and signing in through the Amplify UI. After a successful singnin, it shows a verification step where it shows password instead of the email.

Code Snippet

import React from 'react';
import { Amplify } from 'aws-amplify';

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

Console log output

Screenshot 2024-07-03 at 13-50-53 RadiXplore v3

Additional information and screenshots

No response

esauerbo commented 4 months ago

@VivekS98 I wasn't able to reproduce this with @aws-amplify/ui-react@6.1.12 (latest). What version are you using? Can you also provide your amplify configuration (minus any sensitive information)?

esauerbo commented 3 months ago

@VivekS98 are you still experiencing this issue?

VivekS98 commented 3 months ago

@esauerbo yes. With the same configuration

esauerbo commented 3 months ago

Can you provide the information from my earlier comment? We haven't been able to reproduce this.

VivekS98 commented 3 months ago

Can you please mention which configuration exactly you need?

esauerbo commented 3 months ago

@VivekS98 whatever you're calling Amplify.configure with, which looks like aws-exports in your case. And can you tell us what version of @aws-amplify/ui-react are you using? Your package.json may also be helpful.

VivekS98 commented 3 months ago

Here is the aws-exports


const awsmobile: any = {
  aws_project_region: awsExports.APP_AWS_REGION,
  aws_cognito_identity_pool_id: awsExports.APP_IDENTITY_POOL_ID,
  aws_cognito_region: awsExports.APP_AWS_REGION,
  aws_user_pools_id: awsExports.APP_USER_POOL_ID,
  aws_user_pools_web_client_id: awsExports.APP_USER_POOL_WEB_CLIENT_ID,
};

export default awsmobile;

package.json

"@aws-amplify/ui-react": "^6.1.12",
"aws-amplify": "^6.3.8"
thaddmt commented 3 months ago

Is the string that's being returned censored? Like in the screenshot I have posted below?

Screenshot 2024-07-24 at 10 17 56 AM

I tried copying your aws-exports and your sample code and I was not able to reproduce returning a password from the sign up.

I also tried using the useAuthenticator hook to print out the unverifiedUserAttributes to print out the values, could you try doing that and let us know if password is being printed there? You can try using an app similar to my example posted below.

The following should wrap your application in an AuthenticatorProvider and will use the useAuthenticator hook so you can inspect the values as you go through the auth flow

function App() {
  const { unverifiedUserAttributes } = useAuthenticator((context) => [context.unverifiedUserAttributes]);
  console.log(JSON.stringify(unverifiedUserAttributes));
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

export default function ProviderWrappedApp() {
  return (
    <Authenticator.Provider>
      <App />
    </Authenticator.Provider>
  );
}
reesscot commented 2 months ago

Hi @VivekS98, are you still experiencing this issue?

VivekS98 commented 2 months ago

Yes

VivekS98 commented 2 months ago

What happened is this: I was sent an invite which I used to sign up and create a password. It's that created password which is showing up as email.

esauerbo commented 2 months ago

@VivekS98 can you please respond to @thaddmt's comment? https://github.com/aws-amplify/amplify-ui/issues/5363#issuecomment-2248550565 It would be helpful to know whether your password shows up in unverifiedUserAttributes.