amplify-ui
amplify-ui copied to clipboard
aws-amplify
[FR] Authenticator: Add full UI customization for React
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 -
- @aws-amplify/ui-react
- aws-amplify-react
- @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
@dabit3 @kaustavghosh06 @ErikCH - Any comments on this loss of feature please ?
Hello @BBopanna ,
To answer your questions,
- 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)
- 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
Hi @BBopanna ! Let's chat more about this. Could we jump on a call? Email me at ehhanche @ amazon dot com
Following up on this also. Would like to be able to pass completely custom components like we used to
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.
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)
@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!
@calebpollman - thank you for letting us know, we will look forward eagerly for an update on the release of this feature.
@calebpollman Any update on when it will be possible to override components? Thanks.
@ErikCH - Its been quite some time, can you please post an update on this issue ?
Any update on this @calebpollman @ErikCH ? This has become a major blocker while trying to upgrade the package.
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
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 🙏
@livingstonex @cjsilva-umich Supporting full customization for the Authenticator is currently in active development but cannot give a specific target date for release.
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?
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.
So I guess it's still not possible to pass own components like input fields to the authenticator one?
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.
