[FR] Authenticator: Add full UI customization for React

[BBopanna]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` # Put output below this line System: OS: macOS 12.4 CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz Memory: 37.61 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.15.1 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.11.0 - /usr/local/bin/npm Browsers: Chrome: 103.0.5060.114 Safari: 15.5 npmPackages: @asseinfo/react-kanban: 2.2.0 => 2.2.0 @aws-amplify/analytics: ^5.2.11 => 5.2.11 @aws-amplify/api: ^4.0.44 => 4.0.44 @aws-amplify/auth: ^4.5.8 => 4.5.8 @aws-amplify/cli: ^9.1.0 => 9.1.0 @aws-amplify/core: ^4.5.8 => 4.5.8 @aws-amplify/interactions: ^4.0.44 => 4.0.44 @aws-amplify/storage: ^4.4.27 => 4.4.27 @aws-amplify/ui: ^3.12.1 => 3.12.1 (2.0.5) @aws-amplify/ui-react: ^3.0.4 => 3.0.4 @aws-amplify/ui-react-internal: undefined () @aws-amplify/ui-react-legacy: undefined () @aws-amplify/xr: ^3.0.44 => 3.0.44 @emotion/cache: 11.7.1 => 11.7.1 (11.9.3) @emotion/react: 11.7.1 => 11.7.1 @emotion/styled: 11.6.0 => 11.6.0 @fullcalendar/daygrid: 5.10.0 => 5.10.0 (5.10.1) @fullcalendar/interaction: 5.10.0 => 5.10.0 @fullcalendar/react: 5.10.0 => 5.10.0 @fullcalendar/timegrid: 5.10.0 => 5.10.0 @material-ui/core: ^4.12.4 => 4.12.4 @material-ui/icons: ^4.11.3 => 4.11.3 @material-ui/lab: ^4.0.0-alpha.61 => 4.0.0-alpha.61 @mui/icons-material: 5.4.1 => 5.4.1 @mui/material: 5.4.1 => 5.4.1 @mui/styled-engine: 5.4.1 => 5.4.1 (5.8.0) @react-jvectormap/core: 1.0.1 => 1.0.1 @react-jvectormap/world: 1.0.0 => 1.0.0 @testing-library/jest-dom: 5.16.2 => 5.16.2 @testing-library/react: 12.1.2 => 12.1.2 @testing-library/user-event: 13.5.0 => 13.5.0 @types/chroma-js: 2.1.3 => 2.1.3 @types/dropzone: 5.7.4 => 5.7.4 @types/jest: 27.4.0 => 27.4.0 (28.1.4) @types/node: 16.11.21 => 16.11.21 (18.0.0) @types/react: 17.0.38 => 17.0.38 (17.0.14) @types/react-dom: 17.0.11 => 17.0.11 @types/react-flatpickr: 3.8.5 => 3.8.5 @types/react-table: 7.7.9 => 7.7.9 @types/uuid: 8.3.4 => 8.3.4 aws-amplify: ^4.3.26 => 4.3.26 chart.js: 3.4.1 => 3.4.1 chart.js-auto: undefined () chart.js-helpers: undefined () chroma-js: 2.4.2 => 2.4.2 dropzone: 5.9.2 => 5.9.2 flatpickr: 4.6.9 => 4.6.9 (4.6.13) formik: 2.2.9 => 2.2.9 html-react-parser: 1.4.8 => 1.4.8 prettier: 2.5.1 => 2.5.1 query-string: ^7.1.1 => 7.1.1 react: 17.0.2 => 17.0.2 react-chartjs-2: 3.0.4 => 3.0.4 react-dom: 17.0.2 => 17.0.2 react-flatpickr: 3.10.7 => 3.10.7 react-github-btn: 1.2.1 => 1.2.1 react-images-viewer: 1.7.1 => 1.7.1 react-quill: 1.3.5 => 1.3.5 react-router-dom: 6.2.1 => 6.2.1 react-scripts: 5.0.0 => 5.0.0 react-spinners: ^0.13.3 => 0.13.3 react-table: 7.7.0 => 7.7.0 stylis: 4.0.13 => 4.0.13 stylis-plugin-rtl: 2.0.2 => 2.0.2 typescript: ^4.7.4 => 4.7.4 uuid: 8.3.2 => 8.3.2 (3.4.0, 3.3.2) web-vitals: 2.1.4 => 2.1.4 yup: 0.32.11 => 0.32.11 npmGlobalPackages: @aws-amplify/cli: 8.5.1 corepack: 0.10.0 npm: 8.11.0 typescript: 4.7.4 yarn: 1.22.19 ```

Describe the bug

Newer @aws-amplify/ui-react component does not have option to pass fully customized SignIn, SignUp and other auth components

There are 3 packages around authentication -

1. @aws-amplify/ui-react
2. aws-amplify-react
3. @aws-amplify/auth

Why do these 3 packages exist if all solve the authentication flows ? When should one be used over other - can not find the answers in the documentation. SO Link says this (NOT SURE IF THIS IS RIGHT) - "It looks like aws-amplify-react is the legacy package name and it was changed to @aws-amplify/ui-react in the current version."

Now coming to the issue - we wanted to use @aws-amplify/ui-react but cannot pass fully customized SignIn, Signup and other components - We can only customize the header, footer and formFields . aws-amplify-react supports this , see here

Since aws-amplify-react does not seem to have a lot of activity and is moved under legacy directory (here)and @aws-amplify/ui-react has, which seems the later version as the SO link say, we wanted to use it and pass our own custom components which does not seem possible - is this a loss off feature ?

Expected behavior

@aws-amplify/ui-react should provide option to pass fully customized SignIn, SignUp and other components and not just header, footer and formfields.

Reproduction steps

NA

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

---

Deduplicated from https://github.com/aws-amplify/amplify-ui/issues/1995

Please describe your bug.

ResetPassword customization isn't fully working. Customization of the Header() is fine but a custom Footer() shows up along with the original footer. For example, I am trying to render my own Link component in the ResetPassword component but it shows up along with the original Footer. Similar to issue reported here 👉🏽 #1256

What's the expected behaviour?

The footer should be replaced by the custom component.

Help us reproduce the bug!

Bug can be reproduced in 2.18.2 and 2.18.3. Here's the reproduction with 2.18.2

https://codesandbox.io/s/amplify-customization-issue-forked-4cqxcv

Code Snippet

// Put your code below this line.

const { toSignIn } = useAuthenticator();

const components = {
  Header,
  SignIn: {
    Header() {
      return <LoginHeader />;
    }
  },
  ResetPassword: {
    Header() {
      return <ResetPasswordHeader />;
    },
    Footer() {
      return <button onClick={toSignIn}> Back to sign in </button>;     //--> Custom footer button
    }
  },
  Footer
};

<Authenticator components={components}>
...
</Authenticator>

Additional information and screenshots

[BBopanna]

@dabit3 @kaustavghosh06 @ErikCH - Any comments on this loss of feature please ?

[0618]

Hello @BBopanna ,

To answer your questions,

1. Why there are 3 packages?

aws-amplify-react is a deprecated package, which stoped updated since 8 month ago.

@aws-amplify/ui-react is the Amplify UI library (docs) and @aws-amplify/auth is the Amplify JS auth library (docs)

2. How to fully customized SignIn, Signup and other components?

You can customize most of it. Here's the details: https://dev.ui.docs.amplify.aws/react/connected-components/authenticator/customization

Let me know if that answers all your questions. If you have more questions, please feel free to open an issue https://github.com/aws-amplify/amplify-ui/issues

[ErikCH]

Hi @BBopanna ! Let's chat more about this. Could we jump on a call? Email me at ehhanche @ amazon dot com

[eyalabadi98]

Following up on this also. Would like to be able to pass completely custom components like we used to

[BBopanna]

Thankyou @0618 - that answers the question about the difference about the 3 packages. "You can customize most of it" - most is not all of it. In fact there is very little customisation possible at all IMHO.

export declare function Authenticator(props: AuthenticatorProps): JSX.Element;

export declare type AuthenticatorProps = Partial<AuthenticatorMachineOptions & ComponentsProviderProps & RouterProps & {
    children: React.ReactNode | ((props: {
        signOut?: UseAuthenticator['signOut'];
        user?: CognitoUserAmplify;
    }) => JSX.Element);
}>;

export interface ComponentsProviderProps {
    components?: DefaultComponents;
}

interface Components {
    Footer?: () => JSX.Element;
    FormFields?: () => JSX.Element;
    Header?: () => JSX.Element;
}
export interface DefaultComponents extends Omit<Components, 'FormFields'> {
    ConfirmSignIn?: Omit<Components, 'FormFields'>;
    ConfirmSignUp?: Omit<Components, 'FormFields'>;
    ConfirmResetPassword?: Omit<Components, 'FormFields'>;
    ConfirmVerifyUser?: Omit<Components, 'FormFields'>;
    ForceNewPassword?: Pick<Components, 'FormFields'>;
    ResetPassword?: Omit<Components, 'FormFields'>;
    SetupTOTP?: Omit<Components, 'FormFields'>;
    SignIn?: Omit<Components, 'FormFields'>;
    SignUp?: Components;
    VerifyUser?: Omit<Components, 'FormFields'>;
}

In here the only provision for the DefaultComponents is to pass Header, Footer and FormFields, and in most cases, except SignUp, Formfields is Omitted - so only Header and Footer can be passed for customisation.

We have fully customized Authentication pages like below which we cannot migrate with the limited customization offered by @aws-amplify/ui-react.

[BBopanna]

thankyou @ErikCH - emailed, please check.

[NaomiGilbertE22]

This is an issue that we are facing as well, and are in the process of reverting to the older legacy Amplify components to implement better customization (particularly displaying interactive password requirements linked to the actual password field in reset/signup forms)

[calebpollman]

@BBopanna A new prop for overriding full components similar to the legacy Authenticator will be made available. Do not have a definitive date for release at this time but wanted to update you. Thanks for your feedback!

[BBopanna]

@calebpollman - thank you for letting us know, we will look forward eagerly for an update on the release of this feature.

[0x54321]

@calebpollman Any update on when it will be possible to override components? Thanks.

[BBopanna]

@ErikCH - Its been quite some time, can you please post an update on this issue ?

[xamogh]

Any update on this @calebpollman @ErikCH ? This has become a major blocker while trying to upgrade the package.

[ErikCH]

Hi @xamogh ! We are working on it! We have implemented it in react-native, as you can see from here. We are calling it Subcomponent override slots -> https://ui.docs.amplify.aws/react-native/connected-components/authenticator/customization#subcomponent-override-slots

cc @wlee221

[cjsilva-umich]

Anything on this? Why can't we pass custom components?

[livingstonex]

Hi, any update on this please, @calebpollman @ErikCH ? This has become a major blocker while trying to upgrade to react 18.0 and react-scripts 5.0.1, because they only support the latest aws-amplify/ui-react and the deprecated legacy libraries don't work with react-18. Please can we have a response soon 🙏

[calebpollman]

@livingstonex @cjsilva-umich Supporting full customization for the Authenticator is currently in active development but cannot give a specific target date for release.

[livingstonex]

Ok, thank you @calebpollman, I'll keep an eye out for this.

[cjsilva-umich]

How can this behavior even be achieved in the meantime? Is the only way to have control over the look and behavior of the sign-in screen to completely create a custom auth solution?

[davidshhh]

Is there a work around this? I'm looking to customize the confirm sign up UI (I turned off the auto verification). Instead of asking for the confirmation code, I would like to have the sign up page display "You've signed up! We will get back to you shortly". They only thing we were able to customize was the header and footer which was not helpful.

[santiperone]

Any updates on this?

[MauriceHeinze]

So I guess it's still not possible to pass own components like input fields to the authenticator one?

[madan712]

I need to create a login page like this. Please suggest how it can be achieved. If i pass custom header and footer it loads within the container.

[calebpollman]

Hi @madan712 Can you please elaborate on your ask?

[jon144]

+1

[thecoder93]

Any update?

[thecoder93]

I found a workaround in my case. Use CSS to hide the Form Fields section and implement the rest in your header or footer. here is the css I used

form[data-amplify-authenticator-confirmsignup] .amplify-authenticator__subtitle,
form[data-amplify-authenticator-confirmsignup] .amplify-textfield,
form[data-amplify-authenticator-confirmsignup]
    > fieldset
    > div
    > .amplify-button[type='submit'],
form[data-amplify-authenticator-confirmsignup]
    > fieldset
    > div
    > .amplify-button[type='button'] {
    display: none !important;

Then you can use for example the footer section like this:

const components = {
        ConfirmSignUp: {
            Footer() {
                const { toSignIn } = useAuthenticator();
                return (
                    <>
                        <Text>{I18n.get('REGISTER_CONFIRM_EMAIL_LABEL')}</Text>
                        <Button onClick={toSignIn}>Back to SignIn</Button>
                    </>
                );
            }
        }
    };