Which UI do you use?

Custom UI

Pre built UI

signInAndUpFeature.signIn

SuperTokens.init({
    recipeList: [
        EmailPassword.init({
            signInAndUpFeature: {
                signInForm: {
                    style: {
                        container: {
                            backgroundColor: "#ffeeff"
                        },
                        (...)
                    },
                    formFields: [{
                        id: "email",
                        label: "Your email",
                        placeholder: "Enter your email",
                        validate: async (value) => {
                            // Custom validation
                        }
                    },{
                        id: "password",
                        label: "Password",
                        placeholder: "Enter your password"
                    }]
                }
            },
        })
    ]
});

Config values

style

• An object to overwrite the sign in form styles.
• Please refer to the common customizations guide on how to update the sign in form style.

formFields

• An array that let's you overwrite the default email/password fields labels, placeholder and validation methods, as well as defining new fields.
• Example:

  formFields: [{
      id: "email",
      label: "Your email",
      placeholder: "Enter your email",
      validate: async (value) => {
          // Custom validation
      }
  },{
      id: "password",
      label: "Password",
      placeholder: "Enter your password"
      // custom password validation is ignored here since this is a sign in form.
  }]

• Fields:
  • id
    • Unique ID of the form field. For the email and password fields, the value is "email" and "password" respectively.
    • Type: string
  • label
    • Label that will be displayed in the sign up form above the input field.
    • Type: string
  • placeholder
    • Placeholder that will be displayed in the sign up inputs before the user types in.
    • Type: string
    • Default: Equal to corresponding label.
  • validate
    • If your field requires a front end validation, you can define a validate method that will be called when the user clicks on the Sign up button. Please refer to the common customizations guide for an example of how to use validate methods.
    • Function input:
      • value: any
    • Function output:
      • Promise:
        • string: Return an error string when validation fails.
        • undefined: Return undefined when there are no errors.
  • optional
    • Set to true if you want to make the field optional.
    • Type: boolean
    • Default: false
• If you would like more information about the default email/password validators, or if you would like to see an example of how to overwrite the field validators, please refer to the common customizations guide.