hi I am creating an authentication screen with a c...
# support-questions-legacy
k
hi I am creating an authentication screen with a custom UI in ThirdPartyEmailPassword and I want to define my own password validation. How can I do this?
r
hey @kazumo you can see our docs for changing password validation
k
Yes, I saw that. I think the validator defines that the default is to require at least one letter number, The problem is that even if I override it with a regular expression validator, as the documentation does, the default validator is still there.
r
how have you done the override?
k
this is my code The front end is developed with next.js and the back end with nest.js.
Copy code
recipeList: [
      ThirdPartyEmailPasswordReact.init({
        signInAndUpFeature: {
          signUpForm: {
            formFields: [
              {
                id: 'password',
                label: '...',
                validate: async (pw) => {
                  console.log(pw);
                  let isValidLength = true;
                  if (pw.length < MIN_PASSWORD_LENGTH || pw.length > MAX_PASSWORD_LENGTH) {
                    isValidLength = false;
                  }

                  let isAllHalfWidth = true;
                  const includeInvalidCharRegex = /[^a-zA-Z0-9\x01-\x7E\uFF61-\uFF9F]{1,}/; 
                  const includeSingleByteKanaRegex = /[ヲ-゚]{1,}/; 
                  if (includeInvalidCharRegex.test(pw) || includeSingleByteKanaRegex.test(pw)) {
                    isAllHalfWidth = false;
                  }

                  const includeNumberRegex = /[0-9]{1,}/; 
                  const includeLowerAlphabetRegex = /[a-z]{1,}/; 
                  const includeUpperAlphabetRegex = /[A-Z]{1,}/; 
                  const includeSymbolRegex = /[\x20-\x2F\x5B-\x60\x7B-\x7F]{1,}/; 

                  let matchCount = 0;
                  [
                    includeNumberRegex,
                    includeLowerAlphabetRegex,
                    includeUpperAlphabetRegex,
                    includeSymbolRegex,
                  ].forEach((regex) => {
                    if (regex.test(pw)) matchCount++;
                  });

                  if (matchCount > 2 && isValidLength && isAllHalfWidth) {
                    // Your own validation returning a string or undefined if no errors.
                    return undefined;
                  } else {
                    return 'invalid password';
                  }
                },
              },
            ],
          },
        },
      }),
      SessionReact.init(),
    ],
r
this is on the frontend. SInce you are using custom UI, this code won't really do anything. Add this to the backend's init function
2 Views