Which UI do you use?

Custom UI

Pre built UI

signInAndUpFeature.signUp

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        EmailPassword.init({
            signInAndUpFeature: {
                signUpForm: {
                    privacyPolicyLink: "https://supertokens.com/legal/privacy-policy",
                    termsOfServiceLink: "https://supertokens.com/legal/terms-and-conditions",
                    style: {
                        container: {
                            backgroundColor: "#ffeeff"
                        },
                        (...)
                    },
                    formFields: [{
                        id: "age",
                        label: "Your age",
                        placeholder: "How old are you?",
                        validate: async (value) => {
                            // Custom validation
                        }
                    },{
                        id: "name",
                        label: "Full name",
                        placeholder: "First name followed by last name"
                        optional: true
                    }]
                }
            },
        })
    ]
});

Config values

privacyPolicyLink

• Link to your privacy policy
• Example: privacyPolicyLink: "https://supertokens.com/legal/privacy-policy"

termsOfServiceLink

• Link to your terms and conditions.
• Example: termsOfServiceLink: "https://supertokens.com/legal/terms-and-conditions"

style

• An object to overwrite the Sign up form styles.
• Please refer to the common customizations guide for more information about how to update the sign up 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: "age",
      label: "Your age",
      placeholder: "How old are you?",
      validate: async (value) => {
          // Custom validation
      }
  },{
      id: "name",
      label: "Full name",
      placeholder: "First name followed by last name"
      optional: true
  }]

• 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.