Hey, i added a password confirm input field to the...
# support-questions
t
Hey, i added a password confirm input field to the signup form. I didn't find any documented way to validate with another field (password) so i did this way:
Copy code
typescript
let password = "";
SuperTokensReact.init({
  config...,
  signInAndUpFeature: {
    signUpForm: {
      formFields: [
       {
        id:"passwordConfirm",
        validate: async(value:string) => {
          if (value !== password) {
            return "error msg";
          }
          return undefined;
        }
       },
       {
        id: "password",
        validate: async(value:string) => {
          password = value;
          return undefined;  
        }
       }
      ]
    }
  }     
})
My question to this. Is it any better way to accomplish this ? My second problem with this newly created input field is the input type. I got text but i would like to changed this to password, so i did this:
Copy code
typescript
  EmailPasswordReact.init({
    override:{
      components:{
         EmailPasswordSignUpForm_Override:({DefaultComponent}) => {
           useEffect(() => {
             const passwordConfirm = document.querySelector<HTMLInputElement>('.supertokens-input[name="passwordConfirm"]');

             if (passwordConfirm && passwordConfirm.type === "text") {
               passwordConfirm.setAttribute("type", "password");
             }
           }, []);
           return <DefaultComponent {...props} />;
         }
      }
    }
  })
It worked, but i feel this is not the right way to do it. So is it any better way to do this ? Thanks for the answers in advance 🙂 Btw i really like the stuff that you guys created 🤘
r
Hey! About changing the field to be of password type, it's the best way to do it at the moment (aside from creating your own form and not using
DefaultComponent
at all. We will be working on a more fine grained way of overriding components soon.. Checking for password match, I would suggest that in the
passwordConfirm
validate function, you should read the password from the other input box via `jquery`selectors. Like:
document.querySelector("#supertokens-root").shadowRoot.querySelector(...)
instead of using a
password
global variable.
t
Thanks the help I appreciate it so much 🙂
2 Views