Amplify-js: Force lowercase in amplify-authenticator

[24jr]

I have created a pre signup lambda function that forces users to create a username with characters (a-z) (0-9) (-_) so if they enter a capital letter they get an error until they pick an appropriate username.

Then after the account has been created lowercase they try and sign in with an uppercase letter and it says user does not exist and they get confused. I just want to force onkeyup every letter they type to get updated to lowercase but there is no id on the username field that I can target to run the onkeyup on. Or if you guys have a better solution like accepting all characters as lowercase in Cognito somehow or something idk.

Also might consider as a last resort using i18n to edit the field and just making the placeholder say like 'lowercase username' but that is not ideal and prob won't work well

Live example here roze.io

[24jr]

@dabit3

[jordanranz]

Related to: https://github.com/aws-amplify/amplify-js/issues/3949

To clarify, are you using the Authenticator UI component in this case? If so, which framework are you using? If not, you can enforce this by transforming the username input to lowercase before calling Auth.signIn.

[24jr]

ya using aws amplify out of the box auth component like this with vue

<amplify-authenticator
     autocorrect="off"
     autocapitalize="off"
     spellcheck="false"
     class="signin"
     :authConfig="authConfig"
     id="authComponent"
></amplify-authenticator>

import { Auth } from "aws-amplify";

authConfig: {
      signUpConfig: {
        header: "Sign up for an account",
        hiddenDefaults: ["phone_number"],
        signUpFields: [
          {
            label: "Username",
            key: "username",
            type: "string",
            required: true,
            displayOrder: 0
          },
          {
            label: "Email",
            key: "email",
            type: "string",
            required: true,
            displayOrder: 1
          },
          {
            label: "Password",
            key: "password",
            type: "password",
            required: true,
            displayOrder: 2
          }
        ]
}

and this is what username input looks like from inspecting it

<input 
     placeholder="Enter your Username" 
     autofocus="autofocus" 
     data-test="username-input" 
     class="Input__input___2Sh1s"
>

So I was trying to find some way to target that input "data-test" but I think you need an ID to do that and just couldn't figure out how to get that value and then change it onkeyup or something. I tried text-transform: lowercase in css but quickly realized that was only visual.

[24jr]

K I just don't know. I just want usernames to be case-insensitive now trying

var x = document.querySelector('#authComponent>div>div:nth-of-type(2)>div:nth-of-type(1)>div>input')
console.log(x.dataset.test)
// console.log(x[data-test='username-input'])

to target data-test field and just getting super messy and still can't figure it out

[pbirsinger]

Need this feature. Right now though we can't force all names at login to be lowercase because some users already signed up with uppercase emails. Need a toggle to just make the field case insensitive

[mrmaiko]

This is absolutely terrible.

Unfortunately I am running a check using javascript and setInterval to force the users input to lowercase...

Please, guys, this is really basic.

[gakinson]

I would like this feature as well. Seems like a fundamental one.

[sammartinez]

I have marked this as a feature request

[mulhoon]

Just started using Cognito and Amplify and am horrified to see what I'm reading across the internet; endless threads about this with no responses for the AWS team. @mrmaiko is right - this is really basic. It really should be fixed at Cognito level, but at the ui level would help for now.

This guy outlines the issue well...
https://medium.com/@richbuggy/4-simple-features-that-would-make-a-big-difference-to-cognito-user-pools-730134a0cbbf

[sammartinez]

We have taken this to the Cognito Service team and they have let us know they are actively looking into this use case. While we don't have an eta on when this work will be complete, we will provide an update on this as soon as we are aware. Thanks!

[elorzafe]

@24jr from today new User Pools can be created with case insensitivity for username input
More info here [https://aws.amazon.com/about-aws/whats-new/2020/02/amazon-cognito-user-pools-service-now-supports-case-insensitivity-for-user-aliases]

[mrmaiko]

@24jr from today new User Pools can be created with case insensitivity for username input
More info here [https://aws.amazon.com/about-aws/whats-new/2020/02/amazon-cognito-user-pools-service-now-supports-case-insensitivity-for-user-aliases]

It appears that we cannot make existing User Pools case insensitive though?

[jwallender]

I know Cognito has already released a solution to this, but I was also looking for the ability to remove spaces from the username when someone is entering it, because pastes and and some auto-fill extensions/plugins/tools (for whatever reason) end up including a space at the end of the username; in which case, cognito says it's invalid. So if anyone is still looking for a solution to this for the same reasons as me, here is what I got to work (I am using React & Material-UI for this particular project):

```js
showComponent() {

const handleUser = (event) => {
const regex = / /gi
document.getElementById('username').value = document.getElementById('username').value.replace(regex, '');
document.getElementById('username').value = document.getElementById('username').value.toLowerCase();
this.handleInputChange(event);
}

return (

VoteCommit



Login

id="username"
style={useStyles.textField}
key="username"
name="username"
label="Username"
onChange={(event) => handleUser(event)}
type="text"
variant="outlined"
margin="normal"
required
fullWidth
autoComplete="email"
autoFocus
/>
...
)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.