aws-amplify / amplify-ui Goto Github PK

Page: /ui/storage/s3-image-picker/q/framework/angular

Feedback:

I have gotten the S3 Image Picker to work and when I click the button, it uploads to my S3 bucket, but then it just sits there. How do I know when the upload has completed and can direct back to another page? I noticed the S3 album has a handleOnLoad, is there something similar for the image picker?

** Which Category is your question related to? **
Auth

** What AWS Services are you utilizing? **
Cognito

** Provide additional details e.g. code snippets **

$ amplify --version
4.17.2

I have a cognito user pool with only google as an Identity provider. When I addd <amplify-authenticator></amplify-authenticator> to my angular component, it renders a username/password form.

Can amplify-authenticator show a "Login with google" button? or maybe render the hosted-UI? Or should I be looking to implement that myself?

Is your feature request related to a problem? Please describe.
The withAuthenticator signUp from doesn't have the possibility of adding a "confirm password" field so that the user needs to type it twice, thus preventing creating an account with a wrong, hence unknown password.

Describe the solution you'd like
Allow me to configure/add a "confirm password" input in withAuthenticator SignUp form.

Category

Auth

Amplify CLI Version

4.20.0

This is a Vuejs app.

My PreSignup handler ends with the following:

  if (!allowed) {
    callback("My error message", null);
  } else {
    callback(null, event);
  }

When I run: mock function myPreSignup

Output is:

myPreSignup failed with the following error:
{ '0': 'M',
  '1': 'y',
  '2': ' ',
  '3': 'e',
  '4': 'r',
  '5': 'r',
  '6': 'o',
  '7': 'r',
  '8': ' ',
  '9': 'm',
  '10': 'e',
  '11': 's',
  '12': 's',
  '13': 'a',
  '14': 'g',
  '15': 'e' }

However in the browser the following is displayed in the amplify-toast:

myPreSignup failed with the following error: My error message

How do I remove or change (or preferably translate using i18) the text: "myPreSignup failed with the following error:" ?

I have also tried something like this in my handler:

  if (!allowed) {
    callback({error: 'My error message'}, null);
  } else {
    callback(null, event);
  }

When I try mocking I get this output:

myPreSignup failed with the following error:
{ error: 'My error message' }

Then the coresponding message in the browser amplify-toast is something like:

myPreSignup failed with the following error: [object, object]

Which is not very usefull

What is the correct way of dealing with this ?
Is it perhaps possible to overide the signUp() function ?
And shouldn't the mocking output error text look more like the toast output ? (Now it's confusing)

Note: If your question is regarding the AWS Amplify Console service, please log it in the
official AWS Amplify Console forum

** Which Category is your question related to? **
Auth
** What AWS Services are you utilizing? **
amplify-authenticator-ionic

• Provide additional details e.g. code snippets **

Hello,

I am using the amplify-authenticator to provide a ui to cognito as you can see belo:

<amplify-authenticator-ionic [signUpConfig]="signUpConfig">

I have set up the config options as shown below:

signUpConfig = {
header: 'Register',
signUpFields: [
{label: 'First Name', name: 'name', required: true, displayOrder: 1},
{label: 'Last Name', name: 'family_name', required: true, displayOrder: 2},
{label: 'Birthday', name: 'birthdate', required: true, displayOrder: 3},
{label: 'Zipcode', name: 'locale', required: true, displayOrder: 4},
{label: 'Email', name: 'email', required: true, displayOrder: 5},
{label: 'Password', name: 'password', required: true, displayOrder: 6, type: 'password'},
{label: 'Confirm Password', name: 'password2', required: true, displayOrder: 7, type: 'password'},
],
hiddenDefaults: ['username', 'phone_number', 'password', 'email']
};

The component ui shows up as expected. However, I am unable to determine how to provide the following:

1. Add an ionic date picker for the birthdate
2. validate the password and password2 fields
3. create a hidden field for the username field which is also the email value.

Any help that you can provide would be deeply appreciated.

Describe the bug
Country Code input is forced to be a Picker UI control.

To Reproduce
Steps to reproduce the behavior:

1. Implement a simple <Authenticator> component on the application
2. Compile and run the app
3. Go to the Sign Up section of the form
4. Observe the awkwardly rendered input element for setting a country code.
5. Repeat running the app on the other mobile platform and you should see it is also behaving the same (iOS & Android)

<Authenticator>
  <SignIn />
  <SignUp />
  <ForgotPassword />
  <ConfirmSignUp />
</Authenticator>

Expected behavior
Would be ideal if the entire phone number is a numeric input textfield, resulting in a less disruptive UX.

Screenshots

Smartphone (please complete the following information):

• Device: iPhone 8 / Google Pixel 2
• OS: iOS 11.4 / Android OS 8.0.0

Additional context
React Native: 0.57.4
aws-amplify: 1.1.19
aws-amplify-react-native: 2.1.7

Scenario: User signs up with aws-amplify-react and enters the Confirm Sign Up view, where they are expected to enter the confirmation code from an email.

While in this view, let's say the user is simultaneously confirmed by an alternative method, such as link-based confirmation (which opens in another browser window).

In this situation the user will get stuck in the sign-up flow with this error:

User cannot be confirm. Current status is CONFIRMED

If they try to resend the code, they get another error:

User is already confirmed.

My proposal is that aws-amplify-react understands that the user has already been confirmed by an alternative method and moves them forward in the sign-up flow, instead of keeping asking for confirmation which cannot happen.

Is your feature request related to a problem? Please describe.
Yes, in that I cannot reference the PhotoPicker input element by getting the element by id and using the element to trigger upload by means of a separate submit button.

Describe the solution you'd like
The PhotoPicker object should support additional attributes and pass them through to the create of the input object in Picker.js

Describe alternatives you've considered
None

Is your feature request related to a problem? Please describe.
Need to have user agree to application's/site's user's Terms and Conditions displayed alongside the AmplifySignUp form prior to allowing the user to submit the sign-up/registration form.

Describe the solution you'd like
Using React/JavaScript, I can set a props or other method to enable the Amplify form's submit button.

Describe alternatives you've considered
Workaround: I control the React/Javascript --- so upon user's event of checking the "I Agree..." checkbox on the React page, I can switch between rendering a static png image of the sign-up minus the submit button versus rendering the actual form with the submit button.

Additional context
Should be fairly obvious as many sites require user acceptance of the site's terms and conditions. By not having an obvious workaround to submit the form without the box being checked, it is more difficult for the user to argue that they did not agree should any legal concerns arise.

Is your feature request related to a problem? Please describe.
Similar to how HideSignUp works with SignIn I would like to be able to hide the Have an account? Sign In link on the Sign up form.

Describe the solution you'd like
See problem description above. Add a HideSignIn property to AmplifySignUp. Alternatively provide us with the ability to specify the link URL for Sign in and Sign Up.

Describe alternatives you've considered
I have to create my own sign up and sign in forms for use with Cognito without this option. I do not want users to click on this link for Sign In because I have special Sign Up requirements and I want them to use my customized form.

Additional context
See this link for an example of what I am requesting. aws-amplify/amplify-js#6098

Do you want to request a feature or report a bug?
Feature

What is the current behavior?
Can't theme or modify layout for the amplify UI components with Ionic 4 because they're inside the Shadow DOM so CSS selectors don't apply. Similarly, there are hardcoded strings and string builders (e.g., from greeting.component.core.ts there is:

 this.greeting = this.signedIn
      ? "Hello " + authState.user.username
      : "";

as well as "Sign in " and "sign out" etc - these strings should be replaceable.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than AWS Amplify.

What is the expected behavior?
Not sure, I'm new to this: possibly best to expose the fixed strings and such using slots, and define a slew of CSS4 variables for styling?

Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions?

"aws-amplify": "^1.0.3",
"aws-amplify-angular": "^1.0.1",
"@ionic/angular": "4.0.0-alpha.11",

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

Is your feature request related to a problem? Please describe.
I am currently unable to change the styling for buttons in the authenticator.

Describe the solution you'd like
Ideally, these attributes would be exposed in a similar manner to the typography changes.
I'd like the able to change at least the border radius and background color in all 3 states. Normal, Hover, and Clicked.

Describe alternatives you've considered
I have tried manually overriding these styles in many ways with no success. I found the following ticket which led me to request this change : aws-amplify/amplify-js#5936

Describe the bug
After federated sign in, the verify contact information screen displays "[email protected]" as the email address for verification

To Reproduce
Steps to reproduce the behavior:

1. Go to https://master.dw8p5s05jola3.amplifyapp.com/
2. Sign in using an external IdP (Google for example)
3. You will see an "Account recovery requires verified contact information" screen (screenshot below)

Expected behavior
This screen did not previously show up after federated sign in, so I am not sure the exact expected behavior. I found this issue aws-amplify/amplify-js#6481 and this PR aws-amplify/amplify-js#6508, so looks like this is verification screen is intended. However I think either "Email" or the users actual email address should show up as the option to select.

Code Snippet
Full code is here for those who have access

  <AmplifyAuthenticator usernameAlias="email" style={{ textAlign: 'center' }}>
            <AmplifyForgotPassword
              usernameAlias="email"
              slot="forgot-password"
              formFields={[
                {
                  type: "email",
                  required: true,
                },
              ]}></AmplifyForgotPassword>
            <AmplifySignIn
              usernameAlias="email"
              slot="sign-in"
              formFields={[
                {
                  type: "email",
                  required: true,
                },
                {
                  type: "password",
                  required: true,
                }
              ]}></AmplifySignIn>
            <AmplifySignUp
              usernameAlias="email"
              slot="sign-up"
              formFields={[
                {
                  type: "email",
                  required: true,
                },
                {
                  type: "password",
                  required: true,
                },
                {
                  type: "phone_number",
                  required: false,
                },
                {
                  type: "locale",
                  value: this.state.lang,
                  inputProps: {
                    type: 'hidden',
                  }
                }
              ]}></AmplifySignUp>
            <div>
              {I18n.get("WAIT_REDIRECTION")}
              <AmplifySignOut />
            </div>
          </AmplifyAuthenticator>

Screenshots

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 59.58 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.18.0 - /usr/local/bin/node
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Firefox: 68.8.0
    Safari: 13.1.2
  npmPackages:
    @aws-amplify/ui-react: ^0.2.15 => 0.2.15 
    @testing-library/jest-dom: ^5.11.4 => 5.11.4 
    @testing-library/react: ^10.4.9 => 10.4.9 
    @testing-library/user-event: ^12.1.3 => 12.1.3 
    aws-amplify: ^3.0.24 => 3.0.24 
    axios: ^0.20.0 => 0.20.0 
    jwt-decode: ^2.2.0 => 2.2.0 
    react: ^16.13.1 => 16.13.1 
    react-app-rewired: ^2.1.6 => 2.1.6 
    react-dom: ^16.13.1 => 16.13.1 
    react-router-dom: ^5.2.0 => 5.2.0 
    react-scripts: 3.4.3 => 3.4.3 
  npmGlobalPackages:
    @aws-amplify/cli: 4.28.1
    ask-cli: 2.13.0
    nodemon: 2.0.4
    npm: 6.14.8
    serve: 11.3.2
    serverless: 1.73.1

Is your feature request related to a problem? Please describe.
I noticed there is a way to add subtitles to the SignIn and SignUp screens using header-subtitle slot. But which is missing in the AmplifyTotpSetup component. Is there a way to include subtitle with the current version, according to docs I can't find any.

Describe the solution you'd like

I would like the solution similar to the existing screens which looks like,

Describe alternatives you've considered

Additional context

Is there any way to add a select option dropdown in amplify-authenticator>amplify-sign-up component

Is your feature request related to a problem? Please describe.
if you have content with a specific authorization rule, for example, only a specific group can view the content. you cannot use the withAuthentication component to block access.
for example it should help with this issue

Describe the solution you'd like
I suggest to add another property for the Authorizer with a predicate function that will get the logged in user and return whether he is authorized. and add another slot for the unauthorized view to the Authenticator.
the withAuthentication won't let you see the component when the Authorizer is in that state

Additional context
I am not sure if we actually need this feature, so will love to here from you.. if we decide that it is worth implementing I will gladly create a PR for this

Is your feature request related to a problem? Please describe.
I'm always frustrated when i want to add a simple custom field (role with select or radio button) to sign up field with HOSTED REACT UI.

Describe the solution you'd like
easy to add any custom field type to sign up or sign in form

Describe alternatives you've considered
i try to extend AmplifySignout in my custom_signup.jsx, but i got this error

class CustomSignUp extends AmplifySignUp 

TypeError: Class extends value #<Object> is not a constructor or null

Additional context
Add any other context, an idea of the implementation or screenshots about the feature request here.

<AmplifyAuthenticator>
          <CustomSignUp />
          <AmplifySignUp
            slot="sign-up"
            usernameAlias="email"
            formFields={[
              // { type: "username" },
              { type: "email" },
              { type: "password" },
              {
                type: "custom:role",
                label: "Custom Role Label",
                key: "custom:role",
                placeholder: "custom Phone placeholder",
                required: false,
              }
            ]}
          />
        </AmplifyAuthenticator>

it's easy to add custom field to Sign Up Form, but that field can only be input, but what if i want a select or a radio button group ? it seems it can't be customized,

Is your feature request related to a problem? Please describe.
No sample UI framework for getting a jumpstart of javascript + Appsync

Describe the solution you'd like
Need material-ui bootstrap for react, appsync, graphql similar to https://material-ui.com/getting-started/example-projects/

Describe alternatives you've considered
DIY.

Additional context
An example similar to React+MaterialUI+Firebase
Need material-ui bootstrap for react, appsync, graphql similar to https://material-ui.com/getting-started/example-projects/

Page: /start/q/integration/js

Feedback:

Would be great if svelte UI components could be added.

With the authenticator component, if I use the pre SignUp trigger to autoconfirm user, I am still able to see the confirmation code prompt, though I do not receive any verification email.
When I enter a garbage value it gives me an error message as follows:

User cannot be confirmed. Current status is CONFIRMED

I tried searching in git issues, though not able to find anything there on this behavior.
Closest was this:
aws-amplify/amplify-js#2588

below is a simple lambda trigger I am testing with:

import json

def lambda_handler(event, context):
    event['response']['autoConfirmUser'] = True
    return event

I am able to see that the user comes out as CONFIRMED, though not able to understand how to remove the confirmation prompt.

Sample screenshot of the behavior here:
https://ibb.co/F06GQTJ

Steps:

1. click on forgot password.
2. Enter inavild email and verify.
   I see this toast message on the top of the page.
   "Username/client id combination not found."
3. Now give valid email and verify.

I'm still able to see the above toast message.
Expected behaviour: Error toast message must be cleared when API call is successful for the second time.

Describe the bug
When using React Native, the sign up link remains visible on the login screen despite removing the SignUp component.

To Reproduce
Steps to reproduce the behavior:
See code snippet below.

Expected behavior
I expect the sign up link to be removed if no SingUp component is present. Alternatively I expect a prop to control the visibility of the sign up link.

Code Snippet
The following code will still show a sign up link below the sign in form:

export default (props) => (
    <Authenticator
      hideDefault={true}
      usernameAttributes="email" 
    >
      <SignIn/>
      <Greetings/>
    </Authenticator>
)

  System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 516.81 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    Yarn: 1.21.1 - ~/.nvm/versions/node/v12.13.0/bin/yarn
    npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 77.0.1
    Safari: 13.1
  npmPackages:
    @apollo/react-hooks: ^3.1.3 => 3.1.3
    @babel/core: ^7.0.0 => 7.8.4
    @expo/samples: ~36.0.0 => 36.0.0
    @expo/vector-icons: ^10.0.6 => 10.0.6
    @react-native-community/datetimepicker: 2.1.0 => 2.1.0
    @react-native-community/netinfo: ^5.9.6 => 5.9.6
    @react-navigation/native: ^5.0.0 => 5.0.0
    @react-navigation/web: ~1.0.0-alpha.9 => 1.0.0-alpha.9
    apollo-boost: ^0.4.7 => 0.4.7
    apollo-cache-inmemory: ^1.6.5 => 1.6.5
    apollo-client: ^2.6.8 => 2.6.8
    apollo-link: ^1.2.13 => 1.2.13
    apollo-link-context: ^1.0.19 => 1.0.19
    apollo-link-http: ^1.5.16 => 1.5.16
    apollo-link-ws: ^1.0.19 => 1.0.19
    apollo-utilities: ^1.3.3 => 1.3.3
    aws-amplify: ^3.0.23 => 3.0.23
    aws-amplify-react-native: ^4.2.4 => 4.2.4
    babel-preset-expo: ~8.0.0 => 8.0.0
    deepmerge: ^4.2.2 => 4.2.2
    expo: ~36.0.0 => 36.0.2
    expo-asset: ~8.0.0 => 8.0.0
    expo-constants: ~8.0.0 => 8.0.0
    expo-document-picker: ~8.0.0 => 8.0.0
    expo-file-system: ^8.0.0 => 8.0.0
    expo-font: ~8.0.0 => 8.0.0
    expo-image-manipulator: ~8.0.0 => 8.0.0
    expo-image-picker: ~8.0.1 => 8.0.2
    expo-location: ~8.0.0 => 8.0.0
    expo-media-library: ~8.0.0 => 8.0.0
    expo-web-browser: ~8.0.0 => 8.0.0
    formik: ^2.1.4 => 2.1.4
    graphql: ^14.6.0 => 14.6.0
    jest-expo: ~36.0.1 => 36.0.1
    md5: ^2.2.1 => 2.2.1
    moment: ^2.24.0 => 2.24.0
    react: ~16.9.0 => 16.9.0
    react-dom: ~16.9.0 => 16.9.0
    react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4
    react-native-cameraroll: ^1.0.0-alpha2 => 1.0.0-alpha2
    react-native-dialog: ^5.6.0 => 5.6.0
    react-native-elements: ^1.2.7 => 1.2.7
    react-native-gesture-handler: ~1.5.0 => 1.5.6
    react-native-image-slider-box: ^1.0.12 => 1.0.12
    react-native-maps: 0.26.1 => 0.26.1
    react-native-material-textfield: shamilovtim/react-native-material-textfield => 0.16.1
    react-native-mime-types: ^2.2.1 => 2.2.1
    react-native-modal-datetime-picker: ^8.5.1 => 8.5.1
    react-native-picker-select: ^6.4.0 => 6.4.0
    react-native-reanimated: ~1.4.0 => 1.4.0
    react-native-screens: 2.0.0-alpha.12 => 2.0.0-alpha.12
    react-native-svg: 9.13.3 => 9.13.3
    react-native-swipe-list-view: ^2.4.0 => 2.4.0
    react-native-web: ~0.11.7 => 0.11.7
    react-navigation: ~4.0.10 => 4.0.10
    react-navigation-drawer: ^2.4.4 => 2.4.4
    react-navigation-stack: ~1.10.3 => 1.10.3
    react-navigation-tabs: ~2.6.2 => 2.6.2
    react-number-format: ^4.3.1 => 4.3.1
    subscriptions-transport-ws: ^0.9.16 => 0.9.16
  npmGlobalPackages:
    @aws-amplify/cli: 4.27.1
    @primecms/cli: 0.3.4-beta.1
    @sanity/cli: 0.142.2
    @vue/cli: 4.0.5
    apollo: 2.22.0
    better-react-hubspot-forms: 1.0.0
    expo-cli: 3.21.10
    gatsby-cli: 2.12.77
    graphql-faker: 2.0.0-rc.15
    gulp: 4.0.2
    hasura-cli: 1.2.2
    loadtest: 5.0.1
    netlify-cli: 2.59.0
    npm: 6.12.0
    prisma: 1.30.1
    prisma2: 2.0.0-preview019
    react-devtools: 3.6.3
    strapi: 3.0.0-beta.15
    svgo: 1.3.2
    typescript: 3.6.2
    yarn: 1.21.1

Smartphone (please complete the following information):

• Device: iPhone SE 2nd gen
• OS: iOS 13.6

It seems like the React library had a fix for this applied but it never made it into the React Native Library.

I'd like to use the Interactions Capability of Amplify with a Lex backend. I have it running but was wondering if the ChatBot UI supports HTML content and if so, what is the best way of achieving this ?

Do you want to request a feature or report a bug?

• feature

What is the current behavior?

• using Authenticator HOC with federated sign in with Facebook does not provide correct token to access API gateway that uses Cognito User Pool for Authorizer
• federated sign in with Facebook loads the Facebook SDK, but does not document how to use it in app, to implement facebook analytics for example.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than AWS Amplify.

What is the expected behavior?

• expected behavior is closer to that of the Cognito Hosted UI where federated users are synced to a user pool

Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions?

• aws-amplify 1.0.4
• aws-amplify-react 1.0.4

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

Hi, I'm using the Authenticator HOC with email and its working fine in my react app, but I would like to add Facebook sign on. I am using Apollo Client to access a graphql API via Api Gateway. The API Gateway uses a Cognito User Pool for Authorization so for each request to the graphql endpoint I pass a header with a JWT like so:

const authLink = setContext(
  request =>
    new Promise((resolve, reject) => {
      Auth.currentSession().then(session => {
        const token = session.idToken.jwtToken;
        resolve({
          headers: { Authorization: token }
        });
      });
    })
);

I have tried adding federated sign in for Facebook by adding the federated prop to the Authenticator component per the docs:

const federated = {
 facebook_app_id: process.env.REACT_APP_FACEBOOK_APP_ID
};

then in the root component:

render() {
    return (
      <ApolloProvider client={client}>
        <Authenticator
          hide={[Greetings]}
          theme={AuthTheme}
          federated={federated}
        >
          <App />
        </Authenticator>
      </ApolloProvider>
    );
  }

This works to let the user sign in with facebook, but the calls to the API Gateway do not work. From what I understand this is because the federated identities use the identity pool to gain access, not the user pool. Since this sign up process does not sync with Cognito User Pool the user that authenticates with Facebook is not allowed access to API Gateway.

I have read through the documentation for setting up withOauth, but I am still unsure of what to do with the code once it is received from the Hosted UI service. Do I need to integrate this with the Amplify library somehow?

So this leads me to the feature request: Would it be possible to integrate the Hosted UI approach more cleanly with the Authenticator HOC?

Additionally, I would like to track user metrics to Facebook Analytics. I can see in the withFacebook HOC, we are loading the Facebook browser SDK and adding FB to the global window object. I couldn't find any documentation about working with the Facebook SDK via the Amplify components and I dont want to load the SDK twice by adding the library myself.

So this leads me to my second feature: Would it be possible to call the FB analytics throughout my app?

Thanks

Is your feature request related to a problem? Please describe.
A pattern used for Authenticator (withAuthenticator) React component is hardly extensible.
Prev feature request
Describe the solution you'd like
Use Provider pattern to track authentication state.

Describe alternatives you've considered
Here is very basic implementation

import React, { useEffect, useState } from 'react'
import createReactContext from 'create-react-context'
import { Hub, Auth } from 'aws-amplify'
const { Consumer: AuthConsumer, Provider } = createReactContext()

const AUTHENTICATOR_AUTHSTATE = 'amplify-authenticator-authState'

const AuthProvider = props => {
	const [auth, setAuth] = useState({})
	useEffect(() => {
		Auth.currentAuthenticatedUser()
			.then(user => {
				console.log('Current user: ', user)
				localStorage.setItem(AUTHENTICATOR_AUTHSTATE, 'signedIn')
				setAuth({ state: 'signIn', user })
			})
			.catch(err => localStorage.getItem(AUTHENTICATOR_AUTHSTATE))
			.then(cachedAuthState => cachedAuthState === 'signedIn' && Auth.signOut())
	}, [])
	useEffect(() => {
		Hub.listen('auth', ({ payload }) => {
			const { event, data } = payload
			if (event === 'signOut') {
				setAuth({ state: event, user: null })
				localStorage.deleteItem(AUTHENTICATOR_AUTHSTATE)
				return
			}
			localStorage.setItem(AUTHENTICATOR_AUTHSTATE, 'signedIn')
			setAuth({ state: event, user: data })
		})
	}, [])
	return <Provider value={auth}>{props.children}</Provider>
}

export { AuthConsumer, AuthProvider }

Wrap app in AuthProvider

<AuthProvider>
    <App />
</AuthProvider>

Use auth context where you need it

<AuthConsumer>
  {auth=>
    auth.user
    ? (
        <Button
            onClick={_ => Auth.signOut()/*...*/}
           children='Log Out'
        />
    ) : (
        <Button
            onClick={_ => Auth.signIn(/*...*/)/*...*/}
           children='Log Out'
        />
    )
  }
</AuthConsumer>

Additional context
Let me know you not mind to add this. I could implement it quite easily.

Is there a way to directly routeLink to the "Create new password" form of the <amplify-authenticator>

At the moment I have a button [Reset password] on the profile.html page and want to jump to the login page with the Create new password" form of the <amplify-authenticator> open without having to click an extra link.

Is your feature request related to a problem? Please describe.

WITHOUT customizing ui,

for hosted ui for @aws-amplify/ui-react, How to put a sign in btn/link and sign up link/btn on the navbar, when user click sign up, show sign up component, when user click sign in link, show sign in component.

ui-react hosted ui should provide an easy way to cover this kind of use case .

Describe the solution you'd like
programmatic way to trigger to show vary components/pages based on auth state.

Describe alternatives you've considered

tried

export default function CustomSignUp() {
  return (
      <AmplifyAuthenticator>
         <AmplifySignUp></AmplifySignUp>
      <AmplifyAuthenticator>
  )
}

in react-router and navlink to show this component, but it does not works.

Additional context
looked up sources code and samples, it seems you can only show it or hide it..

Is your feature request related to a problem? Please describe.

Error message are not translated when i18n lang changes when using UI from @aws-amplify/ui-react.
Plus there is no reliable list to know what possible message has to be translated.

There is an old list in packages/aws-amplify-react/src/AmplifyI18n.tsx but it was for the legacy aws-amplify-react package.
The list is incomplete (Eric said):

The problem is that those languages have ~41 translated strings, while the new UI components have ~65, many new & others being different from what existed before.

Additionally errors from Cognito should have a way to be translated.
Example:
1 validation error detected: Value at 'password' failed to satisfy constraint: Member must have length greater than or equal to 6

This type of message is complicated to translate.

Describe the solution you'd like

I like to have the full list of Translation string somewhere. (like amplify-ui-compomnents/src/common/Translation.tsx).

Having translation ready (like it was the case on aws-amplify-react on AmplifyI18n.tsx) will be ideal.
And documenting the supported languages will be great.

Having error messages from Cognito reliably translated. Not directly displayed to user. Why not asking Cognito to return an error code and use that fro English and non English translation with string controlled on Amplify side

Describe alternatives you've considered

Painfully looking in the code and testing. Then adding translations.
So far I added:

export const strings = {
    fr: {
        "1 validation error detected: Value at 'password' failed to satisfy constraint: Member must have length greater than or equal to 6": "Le mot de passe doit faire au moins 6 caractères.",
        "Username cannot be empty": "Le nom d'utilisateur doit être renseigné",
        "User does not exist." : "L'utilisateur n'existe pas.",
        "An account with the given email already exists.": "Un compte avec cette adresse couriel existe déjà.",
        "User is disabled.": "L'utilisateur est désectivé.",
        "Access Token has been revoked": "Le jeton d'accès a été révoqué"
    }
}

Is your feature request related to a problem? Please describe.

WRITE:

When using UI components (in React), I need to customize some aspect of the UI further than basic changes.
For example I use the secondary-footer-content web component slot of Sign-In component to create a custom Forgot password link.
But to override it with a link I build myself I need to have a way to change the authState without having access to this of the UI component:

<AmplifySignIn slot="sign-in">
                <span slot="secondary-footer-content">
                  <amplify-button
                    variant="anchor"
                    onClick={() => this.updateAuthState(AuthState.ForgotPassword)}
                  >
                    {"Forgot your password?"}
                  </amplify-button>
                </span>
</AmplifySignIn>

note: this here is my app this not the AmplifySignIn this, therefore I cannot write the same code than in https://github.com/aws-amplify/amplify-js/blob/main/packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.tsx and especially I cannot do this.handleAuthStateChange(AuthState.ForgotPassword)

READ:

Today to read the current AuthState I have to listen onAuthUIStateChange and persist the information of the authState myself (in my app state for example). It would have been easier to have access to the authstate directly.

Describe the solution you'd like

I like to have a simple way to invoke a AuthState change from outside. I found a workaround (see alternative) but this is not ideal.
Ideally I like to have dispatchAuthStateChangeEvent exported and usable from outside, as well as constants (in particular UI_AUTH_CHANNEL and AUTH_STATE_CHANGE_EVENT)

For the read, not sure what can be done? A static variable exposed? I tried using React Ref to access the information but it does not work.

Describe alternatives you've considered
I use the following workaround (which is inelegant and not safe):

import { Hub } from '@aws-amplify/core';

class App extends React.Component {

updateAuthState(nextAuthState){
    Hub.dispatch('UI Auth', {
      event: 'AuthStateChange',   <--- here is the trick I hardcoded the CHANNEL values
      message: nextAuthState
    });
  }

render() {
    return (
       <AmplifyAuthenticator usernameAlias="email" style={{ textAlign: 'center' }} initialAuthState={AuthState.SignIn}>
           <AmplifySignIn usernameAlias="email" slot="sign-in">
              <span slot="secondary-footer-content">
                  <amplify-button
                    variant="anchor"
                    onClick={() => this.updateAuthState(AuthState.ForgotPassword)}
                  >
                    {"Forgot your password?"}
                  </amplify-button>
                </span>
              </AmplifySignIn>

Hardcoding constants is risky and inelegant.

Hello,

In the process of allowing my users to create accounts for themselves (using withAuthenticator) I'd like it to be an extra field in which the user needs to retype it's password, hence being sure he didn't misstyped it. Almost all websites that allow you to register yourself have this requirement/option. Is there a way to activate it in withAuthenticator configuration? I read the docs and didn't found anything like it.

Thanks.

Hello,

I'm trying to make a login page that slides to/from signIn and signUp (similar to this one: https://diprella.com/sign-in). For that, html/css wise, I need all the html for signIn and signUp to be on the same page; yet given that Authenticator expects single components and he does all the wiring, I don't think that I can use it. So 3 questions:

1. Am I missing something and someone has an idea of how to do this without ditching Authenticator?
2. I know that I could do signIn and signUp manually by calling: Auth.signIn and Auth.signUp yet, it would be amazing if I could do those 2 by hand and leverage Authenticator for the rest of the states (VerifyContact, ResetPassword, ForgotPassword, etc). Is there a way of doing this?
3. Are there any templates/code samples of someone who wrote all this Auth flow manually so that I could have a rough guide of all I need to do and all the states that I need to cover?

Thanks so much and Merry Christmas BTW.

Is your feature request related to a problem? Please describe.
An accepted way of login is to present social login options even on sign-up forms (not just in sign-in), to encourage users to use the social logins.

Describe the solution you'd like
Allow federated property on sign-up slots.

Describe the bug
I am using an Authenticator Component in aws-amplify-react-native but cannot disable the SignUp component using the usual methods. It shows up every time.

To Reproduce
Steps to reproduce the behavior:

class AuthScreen extends React.Component {
  render() {
    return (
      <View style={Style.container}>
        <View style={Style.logoContainer}>
          <Image style={Style.logo} source={Images.logo} resizeMode={'contain'} />
        </View>
        <Authenticator hide={[Greetings, SignUp]} theme={rprTheme} />
      </View>
    )
  }
}

Expected behavior
Expecting to have the SignUp component hidden.

Screenshots
It just shows up as you would expect the standard component to show up with all of the usual components.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Is your feature request related to a problem? Please describe.
Components are not re-rendering on I18n.setLanguage. Components are rendering initial language strings correctly but they do not re-render on language change.

Relates to aws-amplify/amplify-js#6346 aws-amplify/amplify-js#6115 #6962

Describe the solution you'd like
Components should re-render on I18n.setLanguage

Suggestion from @ericclemmons aws-amplify/amplify-js#6346 (comment) :

If I18n.setLanguage fired a Hub event, we could re-render the component 🤔
https://github.com/aws-amplify/amplify-js/blob/377acd0507e6d4be34bf36ea9c0694fa98ac04b1/packages/core/src/I18n/I18n.ts#L64-L66

Describe alternatives you've considered

1. Force re-render using key attribute

   <AmplifySignIn key={lang} />

   Force re-creating the components will result in a screen flicker and loss of component state
2. Specifying all texts in props

   <AmplifySignIn 
     headerText={I18n.get(Translations.XXXXX)}
     formFields={[
       {
         type: "email",
         label: I18n.get(Translations.XXXXX),
         placeholder: I18n.get(Translations.USERNAME_PLACEHOLDER),
         required: true,
       },
       {
         type: "password",
         label: I18n.get(Translations.XXXXX),
         placeholder: I18n.get(Translations.PASSWORD_PLACEHOLDER),
         required: true,
       }
     ]}>
   </AmplifySignIn>

   Doable but a big hassle : D

Additional context
This is happening in @aws-amplify/ui-react.
Need to check if other ui-components e.g. angular, vue, etc exhibit the same behavior.

Is your feature request related to a problem? Please describe.
I need my S3Image with ALT attribute.

Describe the solution you'd like
accept all IMG related props

Describe the bug
After filling out the create account page of the Amplify Authenticator UI Component and then changing the translation, the fields remain filled out on the UI but are not detected when clicking the create account button.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://d2zxvlukxu4lhp.cloudfront.net/
2. Click on Create Account
3. Fill out email address, password and phone number
4. Click top button to switch language to french
5. Click Creer Compte (Create account in french)

I would like to point out that this problem is not specific to using a translation.
It can also be reproduced by doing the following

1. Go to https://d2zxvlukxu4lhp.cloudfront.net/
2. Click on Create Account
3. Fill out email address, password and phone number
4. Don't click on create account but instead click sign in to go back to the sign in page
5. From the sign in page click create account again
6. Now on the create account page the information you entered before will still be there. Click create account

Expected behavior
An account will be created with the information that has been filled out and is present on the UI.

Code Snippet

          <AmplifyAuthenticator usernameAlias="email" style={{ textAlign: 'center' }}>
            <AmplifyForgotPassword
              usernameAlias="email"
              slot="forgot-password"
              formFields={[
                {
                  type: "email",
                  required: true,
                },
              ]}></AmplifyForgotPassword>
            <AmplifySignIn
              usernameAlias="email"
              slot="sign-in"
              formFields={[
                {
                  type: "email",
                  required: true,
                },
                {
                  type: "password",
                  required: true,
                }
              ]}></AmplifySignIn>
            <AmplifySignUp
              usernameAlias="email"
              slot="sign-up"
              formFields={[
                {
                  type: "email",
                  required: true,
                },
                {
                  type: "password",
                  required: true,
                },
                {
                  type: "phone_number",
                  required: false,
                },
                {
                  type: "locale",
                  value: this.state.lang,
                  inputProps: {
                    type: 'hidden',
                  }
                }
              ]}></AmplifySignUp>
            <div>
              {I18n.get("WAIT_REDIRECTION")}
              <AmplifySignOut />
            </div>
          </AmplifyAuthenticator>

Screenshots

Is your feature request related to a problem? Please describe.

UI components don't allow for passing in arguments to the Auth.signIn and Auth.signOut calls:

• https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js#sign-up
• https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js#sign-in
• https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js#global-sign-out

Describe the solution you'd like

Investigate declarative solutions, similar to aws-amplify/amplify-js#5443 & aws-amplify/amplify-js#4185:

<amplify-sign-out global />

Describe alternatives you've considered

Calling Auth.signOut({ global: true }), but it's not declarative.

Additional context

If aws-amplify/amplify-js#4185 is merged, then @aws-amplify/ui-angular lacks parity.

Describe the bug
the S3Image component ignores cache control headers

To Reproduce

• add <S3Image imgKey={keyToProtectedAndCacheControledResource}/>
• open the network tab in your browser of choice
• see the image load from s3
• see that the image has cache control headers
• reload
• see the image load from s3 using a different uri(query string changed)

Expected behavior
loading of the image from the same uri every time

Is your feature request related to a problem? Please describe.
After entering the temporary password, a user is prompted to enter a new, permanent password. However, there is no way for the user to view what they're typing or confirm the password by typing it twice.

Describe the solution you'd like
Follow typical new password workflow:

• allow user the ability to toggle viewing actual text
• require user to type in password twice

Describe alternatives you've considered

• Instruct the user to reset the password if they can't login

Additional context

Describe the bug
Some labels in react Auth views are not translated in Spanish and Chinese. As I need to display Amplify auth views in Spanish, I have to add my own vocabularies after getting someone to translate them for me.

Code Snippet
The cause is that Amplify18n.d.ts under aws-amplify-react/lib-esm is missing quite a lot of translations for Spanish and Chinese comparing to Italian and German. French is also incomplete, but not missing that much.

Here are the vocabulary counts out of the box in Amplify18n.d.ts
zh: 28
it: 45
es: 28
fr: 42
de: 45

Describe the bug
The "toast" component used for displaying authentication error messages, such as "Username cannot be empty", lacks sufficient markup to achieve an accessible experience for assistive device users, such as screen readers. Additionally, there is no built-in way to create a custom error message component to create a more accessible experience. For projects that are required to be Section 508 or ADA compliant, which is most websites, this is a big deal and prevents developers from using the Amplify UI components.

To Reproduce
Some tips for doing an accessibility review are available here. (I assume/hope AWS has accessibility experts to help reproduce and address this further).

Expected behavior

The exact solution varies, but in general:

• Move the focus to the first form control that has the error or move the focus to the common error message. Ensure a screen reader is alerted to this new content.
• Add inline error messages to form fields
• Associate the inline errors with form fields by using the aria-describedby attribute

WCAG 2.0 specifies the following guidelines for accessible form validation and error identification:

• SC 3.3.1 Error identification
• SC 3.3.3 Error suggestions

Is your feature request related to a problem? Please describe.
Right now there's no easy way to include a custom footer within the UI components that could be used to support legal text (privacy policy, terms, etc.)

Describe the solution you'd like
Add an additional slot to sign up and sign in that can be customized to include legal text.

Describe alternatives you've considered
Right now I've placed it below the authentication box, but it feels/looks disconnected. The existing footer slots all replace necessary content/features because the components themselves use them.

Describe the bug
ui-react is not setting the public path “on the fly,” which is necessary for CDN usage.
The creation of this issue is possible thanks to @joeldenning from single-spa that analyzed a problem on my single-spa project.

To Reproduce

1. create a single-spa "root config" project
2. create a single-spa "application" project
3. add amplify libraries to root config project imports
4. add amplify libraries to the application project and use them as externals in webpack
5. try to use AmplifyAuthenticator in the application ui

Expected behavior
I expect @aws-amplify/ui-react to load correctly using a CDN

Description
aws-amplify/ui-react is trying to load this file: https://unpkg.com/browse/@aws-amplify/[email protected]/dist/5.js
webpack code splits and webpack dynamic import to do so, Webpack code splits are implemented with a thing called “webpack jsonp”. The URL to download the code splits is calculated by using the “wepack public path” as the prefix for the URL, however, ui-react is not setting the public path “on the fly,” which is necessary for CDN usage.

Ideally ui-react would set the public path to be the URL from which it was loaded via CDN (or it wouldn’t use webpack code splits at all) but it' not doing that

Screenshots

Additional context
https://single-spa.js.org/
https://webpack.js.org/guides/public-path/#on-the-fly

Is your feature request related to a problem? Please describe.
Currently when using the amplify-authenticator Vue component, the inner content will be hidden, but still be evaluated. This can lead to API requests failing, but also weird behaviors with lifecycle methods like created because the component has been created, even if it hasn't been shown yet.

Describe the solution you'd like
It would be nice if the default slot actually wasn't rendered until the user was authenticated.

Describe alternatives you've considered

I've written this in my default Nuxt layout to accomplish what I want:

<template>
    <amplify-authenticator>
        <amplify-sign-in slot="sign-in" username-alias="email"></amplify-sign-in>

        <nuxt v-if="signedIn" />
        <amplify-sign-out></amplify-sign-out>
    </amplify-authenticator>
</template>

<script>
import { Auth, Hub } from 'aws-amplify'

export default {
    data() {
        return {
            signedIn: null,
        }
    },
    watch: {
        signedIn() {
            if (!this.signedIn) {
                this.$router.push('/')
            }
        },
    },
    created() {
        const component = this
        Hub.listen('auth', async ({ payload }) => {
            switch (payload.event) {
                case 'signIn':
                    component.signedIn = true
                    break
                case 'signOut':
                case 'signIn_failure':
                    component.signedIn = false
                    break
                case 'configured':
                    try {
                        await Auth.currentAuthenticatedUser()
                        this.signedIn = true
                    } catch (e) {
                        this.signedIn = false
                    }
            }
        })
    },
}
</script>

Is your feature request related to a problem? Please describe.
The current sign up components don't support showing federated buttons (I think that's the right terminology?) like Google Login, etc. I optimize the component state between sign up vs sign in depending on a localStorage value I manually set that determines whether that browser has ever allowed someone to login before. However the sign up page doesn't show the federated buttons.

Describe the solution you'd like
Allow the same federated buttons on the sign in page on the sign up page.

Describe alternatives you've considered
Just show "Sign In" page first all the time. But this would mean every new potential customer has to click "Sign Up"--an unnecessary step that'll reduce conversion.

** Which Category is your question related to? **
API
** What AWS Services are you utilizing? **
Appsync, Cognito
** Provide additional details e.g. code snippets **
I am defining a model with multi-auth for public read (Cognito_identity_pool and IAM). Cognito_identity_pool is set as the default authorization

type Album @model
@auth(rules:[
  { allow: owner },
  { allow: public, provider: iam, operations: [read] }
])
{
  id: ID!
  name: String!
}

I want to use the amplify-connect component to execute my query.
This work fine when the user is authenticated, but for unAuth users, this fails. Normal, since I can't pass authMode to the component.

Using directly this.$Amplify.API.graphql({query, variables, authMode: 'AWS_IAM'}) works.

My questions: how can I use amplify-connect with authMode?

• My first thought, was to try to do a PR and add authMode as a new props
• Is there another way that is recommended, like setting a parameter?
• I tried to call $Amplify.API.configure({ 'aws_appsync_authenticationType': 'AWS_IAM' }) before creating the query when no user is loggued in. This works, but seems very dirty.

Thanks,
Daniel

Describe the bug
After upgrading to

{
    "aws-amplify": "^2.2.2",
    "aws-amplify-vue": "^1.1.2",
}

My multiple-subscriptions stopped working with error: Duplicated operation

I'm using a subscription technique described here: https://github.com/aws-amplify/amplify-js/issues/2713

To Reproduce
Use amplify connect in a template:

  <amplify-connect :query="listVideosQuery"
       :subscription="onCreateOrDeleteVideoSubscription"
  >
   ...
</amplify-connect>

add this computed property:

    onCreateOrDeleteVideoSubscription () {
      const onCreateOrDeleteVideo = `subscription onCreateOrDeleteVideo {
        onCreateVideo {
          id
          title
        }
        onDeleteVideo {
          id
        }        
      }
      `
      return this.$Amplify.graphqlOperation( onCreateOrDeleteVideo )
    }

When inspecting the browser console, this error is showing:

[WARN] 41:26.549 Connect 
{…}
error: {…}
errors: (1) […]
0: Object { message: "Connection failed: {\"errors\":[{\"errorType\":\"DuplicatedOperationError\",\"message\":\"Duplicated operation with id 981f33b3-
....

In schema.graphql:

type Video @model @searchable
  @key(fields: ["id"])
  @key(fields: ["type","title"], name: "byTitle", queryField: "listVideoByTitle")
  @key(fields: ["type", "slug"], name: "bySlug", queryField: "listVideoBySlug")
  {
  id: ID!
  awsId: ID!
  title: String!
  slug: String!
  createdAt: AWSDateTime
  posterTime: Float!
  published: Boolean!
  fileName: String!
  category: Category @connection(name: "CategoryVideos", sortField: "title")
  chapters: [Chapter] @connection(name: "VideoChapters", sortField: "start", limit: 30)
  type: String!
}

If I remove either onCreateVideo or onDeleteVideo leaving only a single subscription, the warning goes away.

Expected behavior
The code should work just as before the upgrade

Screenshots
If applicable, add screenshots to help explain your problem.

  System:
    OS: macOS 10.15.2
    CPU: (12) x64 Intel(R) Core(TM) i7-7800X CPU @ 3.50GHz
    Memory: 761.35 MB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.17.0 - ~/.nvm/versions/node/v10.17.0/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v10.17.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 72.0.2
    Safari: 13.0.4
  npmPackages:
    @mdi/font: ^4.8.95 => 4.8.95 
    @vue/cli-plugin-babel: ^4.1.2 => 4.1.2 
    @vue/cli-plugin-eslint: ^4.1.2 => 4.1.2 
    @vue/cli-plugin-pwa: ^4.1.2 => 4.1.2 
    @vue/cli-plugin-router: ^4.1.2 => 4.1.2 
    @vue/cli-plugin-vuex: ^4.1.2 => 4.1.2 
    @vue/cli-service: ^4.1.2 => 4.1.2 
    @vue/eslint-config-standard: ^4.0.0 => 4.0.0 
    aws-amplify: ^2.2.2 => 2.2.2 
    aws-amplify-vue: ^1.1.2 => 1.1.2 
    babel-eslint: ^10.0.3 => 10.0.3 
    core-js: ^3.6.4 => 3.6.4 
    eslint: ^5.16.0 => 5.16.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 
    node-timecodes: ^2.5.0 => 2.5.0 
    register-service-worker: ^1.6.2 => 1.6.2 
    sass: ^1.25.0 => 1.25.0 
    sass-loader: ^8.0.2 => 8.0.2 
    stylus-loader: ^3.0.2 => 3.0.2 
    uuid: ^3.4.0 => 3.4.0 
    vue: ^2.6.11 => 2.6.11 
    vue-cli-plugin-vuetify: ^2.0.3 => 2.0.3 
    vue-router: ^3.1.5 => 3.1.5 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vuetify: ^2.2.8 => 2.2.8 
    vuetify-loader: ^1.3.0 => 1.4.3 
    vuex: ^3.0.1 => 3.1.2 
  npmGlobalPackages:
    @aws-amplify/cli: 4.12.0
    npm: 6.11.3
    yarn: 1.19.1

Describe the bug
Browsers don't recognize the input elements as Auth related.

-> No "password suggestion" on during account creation
-> No autofill during sign in
-> No prompt "save password?" during sign in

I'm not sure what details are necessary for this to work, but I tried setting the name attribute and others through formFields. But that didn't help solve this issue. (https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands)

-> Form is not part of a "form" element
-> The "sign in/up" buttons aren't labelled as type "submit"

Describe the bug
Folowwing the documentation to add an apmlify-authenticator that updates when userState changes lead to break angular mechanism
(https://docs.amplify.aws/ui/auth/authenticator/q/framework/angular#manage-auth-state-and-conditional-app-rendering)

Then, the routing does not correctly work, as angular material Dialogs.
In fact, it seems that any DOM component that is added after does not correcly work.
Maybe it is due to the use of ChangeDetectorRef detectChanges(). But if we don't use it, nothing is refresh.

Is your feature request related to a problem? Please describe.
We want to be able to customize the internal logic of the Authenticator Components such as SignIn, SignUp, etc..

We want to be able to perform the following:
Inherit the Component class to add the logic (it can be done right now).
Add some props to the class (not possible right now).
With the ability to add props it will make it easier to perform complete customizations and improvement for specifics use cases, such as complete branding, UX compliance with the project, etc..

Describe the solution you'd like
We think the best is to make all the class components generics we will end up with something like that:

export declare class SignIn<Props extends ISignInProps = ISignInProps, State extends ISignInState = ISignInState> extends AuthPiece<Props, State>

so we will be able to add a logo for example:

interface CustomProps extends ISignInProps {
  logoUrl: string
}

class CustomSignIn extends SignIn<CustomProps> {

A clear and concise description of what you want to happen.

Describe alternatives you've considered
Right now we pass everything as children, it's not ideal.

Additional context

here's our use-case, we provide a boilerplate for Cognito to allows us to customize it easily without losing the Authenticator logic.

https://github.com/trackit/aws-cognito-boilerplate