js
emailVerificationFeature: {
  mode: "REQUIRED"
 },
signInAndUpFeature: {
  providers: [
    ThirdPartyEmailPasswordReact.Google.init(),
    ThirdPartyEmailPasswordReact.Facebook.init(),
  ],
  signUpForm: {
    formFields: [{
      id: "password",
      label: "Password",
      
      validate: async(value) => {
        const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/
        if (regex.test(value)) {
          return undefined
        } else {
          return 'Password must be 8-20 characters long, contain at least one number, one uppercase letter, one lowercase letter, and one special character'
        }
      }
    }, {
      id: "passwordConfirm",
      label: "Confirm your Password",
      placeholder: "Please input your password again",

      validate: async(value) => {
        if (value !== document.querySelector("#supertokens-root").shadowRoot.querySelector('input[name="password"]').value) {
          return "Password does not match"
        }
        return undefined
      }
    }, { 
      id: "name",
      label: "Full Name",
      placeholder: "First name and last name",
    }]
  }
},
override:{
  components:{
    EmailPasswordSignUpForm_Override:({DefaultComponent, ...props}) => {
      useEffect(() => {
        let passwordConfirm = document.querySelector("#supertokens-root").shadowRoot.querySelector('input[name="passwordConfirm"]')
        console.log(passwordConfirm) //for checking purpose
        if (passwordConfirm){
          passwordConfirm.setAttribute("type", "password")
        }
      }, [])
      return <DefaultComponent {...props} />
    }
  }
},

requiredAuth

requireAuth

<SessionAuth requireAuth={false}>...</SessionAuth/>

import SessionAuth from "supertokens-auth-react/recipe/session"

ThirdPartyEmailPasswordAuth

ThirdPartyEmailPasswordAuth

js
<SessionAuth requireAuth={false}>
  <GridItem w="full" colStart={4}>
    <DestroyButton />
  </GridItem>
  <GridItem w="full" colStart={5}>
    <AuthButton />
  </GridItem>
</SessionAuth>

requireAuth={false}

import { SessionAuth } from "supertokens-auth-react/recipe/session";