-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support for email-only SignUp through withAuthenticator #104
Comments
@mlabieniec thanks for pointing out that other PR. I had seen it, but it didn't eliminate the requirement of username in the SignUp component so I created this issue. However I can see where you'd like to get that PR merged first, then consider this enhancement. Tell me if I can lend a hand. |
@rlmartin Just fyi, we are working on abstracting out the authentication and higher level logic into the aws-amplify core package. This way, react and react-native can share all basic functionality i.e. persistent auth, federation, session management etc. So you would basically work with react-native the same way as aws-amplify-react. We are shooting to finish it this sprint, but it may end up in the following release at this point. Once that's out would like to get your feedback and contributions on that (in aws-amplify core). |
👍 |
@rlmartin is there presently a way to use amplify and allow signup with email as username? |
@dillonbailey yes, but you need to write your own custom SignUp component. Modify the // const attributes = { ... }
Auth.signUp({
username: email,
password: password,
attributes
})
.then(data => {
this.changeState('confirmSignUp', email)
})
.catch(err => {
this.error(err)
}) |
@dillonbailey I actually took a different approach. Whenever I set email, I set username to a hash of the email. Unfortunately the change is in a private repo so I can't give you a link to the commit, but it looks roughly like this: Overridden import React from 'react';
import { I18n } from 'aws-amplify';
import { Email, ErrorRow, Header, LinkCell, Password, SignUp as CoreSignUp } from 'aws-amplify-react-native';
import { Button, View } from 'react-native';
import sha from 'sha.js';
const Footer = (props) => {
const { theme, onStateChange } = props;
return (
<View style={theme.sectionFooter}>
<LinkCell theme={theme} onPress={() => onStateChange('confirmSignUp')}>
{I18n.get('Confirm a Code')}
</LinkCell>
<LinkCell theme={theme} onPress={() => onStateChange('signIn')}>
{I18n.get('Sign In')}
</LinkCell>
</View>
)
}
export default class SignUp extends CoreSignUp {
showComponent(theme) {
return (
<View style={theme.section}>
<Header theme={theme}>{I18n.get('Sign Up')}</Header>
<View style={theme.sectionBody}>
<Email
theme={theme}
onChangeText={(text) => this.setState({ email: text, username: new sha.sha256().update(text).digest('hex') })}
/>
<Password
theme={theme}
onChangeText={(text) => this.setState({ password: text })}
/>
<Button
title={I18n.get('Sign Up')}
onPress={this.signUp}
disabled={!this.state.username || !this.state.password}
/>
</View>
<Footer theme={theme} onStateChange={this.changeState} />
<ErrorRow theme={theme}>{this.state.error}</ErrorRow>
</View>
);
}
} Overridden import React from 'react';
import { I18n } from 'aws-amplify';
import { ConfirmationCode, ConfirmSignUp as CoreConfirmSignUp, Email, ErrorRow, Header, LinkCell } from 'aws-amplify-react-native';
import { Button, View } from 'react-native';
import sha from 'sha.js';
const Footer = (props) => {
const { theme, onStateChange } = props;
return (
<View style={theme.sectionFooter}>
<LinkCell theme={theme} onPress={() => onStateChange('signIn')}>
{I18n.get('Back to Sign In')}
</LinkCell>
</View>
)
}
export default class ConfirmSignUp extends CoreConfirmSignUp {
showComponent(theme) {
return (
<View style={theme.section}>
<Header theme={theme}>{I18n.get('Confirm Sign Up')}</Header>
<View style={theme.sectionBody}>
<Email
theme={theme}
value={this.state.email}
onChangeText={(text) => this.setState({ username: new sha.sha256().update(text).digest('hex') })}
/>
<ConfirmationCode
theme={theme}
onChangeText={(text) => this.setState({ code: text })}
/>
<Button
title={I18n.get('Confirm')}
onPress={this.confirm}
disabled={!this.state.username || !this.state.code}
/>
<Button
title={I18n.get('Resend a Code')}
onPress={this.resend}
disabled={!this.state.username}
/>
</View>
<Footer theme={theme} onStateChange={this.changeState} />
<ErrorRow theme={theme}>{this.state.error}</ErrorRow>
</View>
);
}
} Then you can pass in those overridden components, along with the default components for the other screens, into the If you were to diff those overridden components against the default ones, the only real differences are the lines with Note that this relies on the fact that Cognito User Pools allows for login using either username or email, so your end user can use email address on the SignIn page and it will "just work" without any changes. Plus the end user doesn't need to know the username hash (obviously). |
@rlmartin @ldgarcia - thanks for the options guys! 👍 The only issue I'm running into now, and this may be related to https://github.com/aws/awsmobile-cli - but setting Are either of you guys using Mobile Hub and having any success with this? |
I've been using Mobile Hub, but not the cli. I've been able to set it up without a problem to allow for login using either email or username. |
Awesome - thanks @rlmartin - on further reading it looks like setting the username with the UUID is the key to making this work! |
@dillonbailey this is my user pool configuration: With the approach I mentioned, you don't need to generate the UUID yourself, Cognito does it (stores it in the |
@ldgarcia interesting - whether I go via CLI or GUI, it ends up force checking the Username radio button...opening a case with AWS |
I'm facing a similar issue, User management created by Mobile Hub won't allow changes on Cognito attributes. It won't allow sign in with email or assign an email to username on signup. |
@andythedandyone I’ve got an open case with support on this, will let you know how I get on. |
Hi @rlmartin @dillonbailey @ldgarcia @andythedandyone thanks for your feedback!
finally
Please let me know if you have any issues with this |
@elorzafe I did that when I integrated cognito to mobile hub. I chose to login by email, pwd requirements/length. There is a print screen of what I get with this setup I mentioned here.(see below)
and login
|
@dillonbailey I'm facing the same issue wherein Cognito isn't letting me select the email address as username. Any update from support? |
@mwarger feedback from support was the following:
|
Any updates on this? I am having the same issue, I don't want to show the username field on my amplify signup form. |
+1 This is fairly common use case and requires a comprehensive workaround instead of a simple prop to configure the component without the username field. |
+1 Facing the same issue. I want the username to be automatically set to the user's email address. Don't want to need the user to fill out their email twice... |
How do you make this configuration using cli? |
You can see how to do it here: aws-amplify/amplify-cli#102 (comment) It does require manual config file editing before you push your config. |
I am using the SignUpConfig prop for Authenticator to hide the username and phone_number fields.
Maybe this is a recent enhancement, or i am not understanding the question |
@fcwheeler This works for me:
The login will still say 'username' though. |
Hi, Would like to know if its already a feature or yet to be developed? Thank you. |
Can you make it a hidden field that resolves from the radio button selection using Javascript? |
Hi All, the feature is implemented in the beta version of amplify UIs: aws-amplify-react@beta
aws-amplify-react-native@beta
aws-amplify-angular@beta
aws-amplify-vue@beta The docs is in: aws-amplify/docs#622 import { Authenticator } from 'aws-amplify-react';
class App extends React.Component {
//.....
render() {
return (
<Authenticator usernameAttributes="email"/>
);
}
} Welcome any feedback. Thanks. |
This looks good 👍 I see it's in master now. For those ending up here via search engines, here's the link to the docs: https://aws-amplify.github.io/docs/js/react#sign-upin-with-emailphone-number This worked for me to get a sign up component with only email address + password fields: export default withAuthenticator(App, {
usernameAttributes: 'email',
signUpConfig: {
hiddenDefaults: ['phone_number']
}
}); |
Unless I'm missing something email/phone as username still not supported for Should I create a separate issue? |
affecting me too. the fact that Cognito allows this but libraries do not is odd/wrong. this is a common use case and not everyone wants to use the stock components... |
@jpyne17 @plisitza I believe that the use of email or phone number is supported with Auth.signIn. This method accepts a parameter called 'usernameOrSignInOpts'. If the usernameAttribute is set to 'email' (i.e. you are using an email address as the username), passing the email as this parameter should work (I just confirmed it). If it is not working, please details the exact behavior you're experiencing. |
In looking at the original feature request, I am seeing that this is now complete. Resolving this feature request. @rlmartin Please let us know if something isnt complete. @jpyne17 @plisitza Please open up a separate issue with us if you are still experiencing issues after @haverchuck comment. |
I have enabled both Email and phone number. But I only receiving the code in Phone number. I not get any acknowledgement or any code in my email? I need to know why the code not received in my mail? |
It's a feature, not a bug. Ref: |
Amplify is looking great, but some of these default settings boggle the mind. A simple email and password login is the most common signup process in the world. No one wants to bother their users to have to enter some weird username (which is most likely their email anyway) or phone number, or any one of the 20 other weird fields (what on earth is zoneinfo?). Also, no one is going to put their phone number into a signup form for 99.99% of websites in the world. I strongly suggest adding the following example to the doco to save almost everyone who wants to use this component to have to search this issue thread. (OR better yet, make it the default behaviour) The code below was the only way I could get the react sign up component to display only email address and password fields. ( Thanks @rtuin )
|
@johnmesotech Thanks. I have another one clarification. Can you clarify? The error messages are retaining in all the screens if I revisit that screen after creating or it will shows an error with wrong input. How can I change the notice of my confirmation code? |
This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs. Looking for a help forum? We recommend joining the Amplify Community Discord server |
I'd like to be able to expose a SignUp form (and corresponding ConfirmSignUp) that shows only email address, not username. Unfortunately the Mobile Hub project creation doesn't fully support this (it creates a user pool with a type that still requires a username), but we could SHA-2 hash the email address in place of the username and then rely on the "alternative sign in" support for email address in the SignIn form.
The same support goes for phone number in place of email address.
The withAuthenticator HOC could take a
props
argument with ausernameTypes
property that would be an array of enums (values:email
,phoneNumber
,username
); this could then be used by all applicable auth components (SignUp, ConfirmSignUp, SignIn, ForgotPassword) for both display and data processing.I'm immediately focused on the
aws-amplify-react-native
project and could take a pass at implementing it - but support inaws-amplify-react
project would be necessary too.The text was updated successfully, but these errors were encountered: