Amplify-js: Unable to hide or disable sign up in Amplify UI

Created on 15 Jun 2020  路  10Comments  路  Source: aws-amplify/amplify-js

Is your feature request related to a problem? Please describe.
Previous version of the Amplify UI allowed you to hide or disable various UI components in both the the authenticator component and the withAuthenticator HOC. However, with the new release, I am unable to hide/disable the sign up component. I can't find any information about this in the documentation either. I'm not sure if it's missing or if it's not possible.

Describe the solution you'd like
Pass in configuration to the AmplifyAuthenticator component that hides the sign up component (and removes the sign up link from the signIn component)

Describe alternatives you've considered
I've considered using the hosted UI configured in the Amplify console, but would prefer to use the Amplify UI

Amplify UI Components documentation feature-request

Most helpful comment

Same question as: https://github.com/aws-amplify/amplify-js/issues/6045

For React it would be:

<AmplifyAuthenticator>
  <AmplifySignIn slot="sign-in">
    <div slot="secondary-footer-content"></div>
  </AmplifySignIn>
</AmplifyAuthenticator>

All 10 comments

@crcommons Could you share what Amplify libraries you are you using and their versions?

@amhinson I'm using @aws-amplify/ui-react 0.2.8 and aws-amplify 3.0.17

Same question as: https://github.com/aws-amplify/amplify-js/issues/6045

For React it would be:

<AmplifyAuthenticator>
  <AmplifySignIn slot="sign-in">
    <div slot="secondary-footer-content"></div>
  </AmplifySignIn>
</AmplifyAuthenticator>

Thanks, @jordanranz! It would be great to add this to the documentation if possible.

I ended up adding a first class prop to the sign in component. It is available on @aws-amplify/ui-react@unstable. Usage:

<AmplifyAuthenticator>
  <AmplifySignIn slot="sign-in" hideSignUp></AmplifySignIn>
</AmplifyAuthenticator>

Let me know if you are able to test this out

@jordanranz just tested and it works! Thanks!

I ended up adding a first class prop to the sign in component. It is available on @aws-amplify/ui-react@unstable. Usage:

<AmplifyAuthenticator>
  <AmplifySignIn slot="sign-in" hideSignUp></AmplifySignIn>
</AmplifyAuthenticator>

Let me know if you are able to test this out

Thanks for your solution.
Is there currently a way to configure this behaviour when using the withAuthenticator HOC?

There isn't currently a way to use this with withAuthenticator, but switching to AmplifyAuthenticator shouldn't be too much effort. Here is our recommended usage: https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#recommended-usage

how to bring a custom sign in form when I use AmplifyAuthenticator ?
thx for ideas. I don't want to use the default sign in form.
I know we can chage/modify few styles and chage the links and text bit I want to use my own form/react sign-in component . I think it should be posible but I am not getting it on how i can hook my own sign-in coponent and disable the default one. thans for you help/ideas here. I sam using the latest 'AmplifyAuthenticator'

@smtech-learning you could use https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js :) my way too since ready components doesnt work as I want. + you will need https://aws-amplify.github.io/amplify-js/api/classes/authclass.html to check more ready use Auth. like verify user after login.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

benevolentprof picture benevolentprof  路  3Comments

cgarvis picture cgarvis  路  3Comments

shinnapatthesix picture shinnapatthesix  路  3Comments

callmekatootie picture callmekatootie  路  3Comments

lucasmike picture lucasmike  路  3Comments