Support for email-only SignUp through withAuthenticator

[rlmartin]

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 a usernameTypes 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 in aws-amplify-react project would be necessary too.

[mlabieniec]

@rlmartin thanks for the feedback. We are working on signup with custom attributes, it's in review and pending a few changes in PR #79 . Will look at your feedback for some enhancements to that as well.

[rlmartin]

@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.

[mlabieniec]

@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]

👍

[dillonbailey]

@rlmartin is there presently a way to use amplify and allow signup with email as username?

[ldgarcia]

@dillonbailey yes, but you need to write your own custom SignUp component.

Modify the signUp function to use something like this:

// const attributes = { ... }
Auth.signUp({
  username: email,
  password: password,
  attributes
})
  .then(data => {
  this.changeState('confirmSignUp', email)
})
  .catch(err => {
  this.error(err)
})

[rlmartin]

@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 SignUp.js:

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 ConfirmSignup.js:

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 withAuthenticator HOC like in the example here: https://github.com/aws/aws-amplify#3-override-default-authentication-screens.

If you were to diff those overridden components against the default ones, the only real differences are the lines with sha in them (specifically the onChangeText prop on each <Email/> component).

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).

[dillonbailey]

@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 email as an alias doesn't yet seem to be an option if you are using Mobile Hub.

Are either of you guys using Mobile Hub and having any success with this?

[rlmartin]

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.

[dillonbailey]

Awesome - thanks @rlmartin - on further reading it looks like setting the username with the UUID is the key to making this work!